Источник: Nuances of Programming
Включение в React-приложение руководства по стилю программирования, как правило, оказывает большое влияние на процесс разработки. Оно дает представление о структуре и обеспечивает формат, который будет служить образцом для младших разработчиков. Точное следование всем требованиям позволяет сэкономить время в процессе рецензирования, включив в него самое необходимое.
В собственные руководства по стилю я добавил несколько пунктов. Одни из них — просто личные предпочтения, другие способны повлиять на производительность и структуру файлов.
Надеюсь, этот список послужит вам источником вдохновения при написании собственного гайда.
Имена файлов TSX
Имена файлов TSX должны быть в регистре Паскаля. Лучше всего иметь стандарт для именования файлов, чтобы папки легко читались.
Правильно:
MyFile.tsx
Неправильно:
myFile.tsx
my-file.tsx
my_file.tsx
My_File.tsx
Объявление функционального компонента
Я предпочитаю объявления const за их лаконичность. Всегда включайте тип FunctionComponent, чтобы получить доступ к таким свойствам, как дочерние компоненты.
Правильно:
const MyComponent: React.FunctionComponent = () => {}
Неправильно:
const MyComponent = () => {}
function MyComponent() {}
Именованные экспорты
Именованные экспорты следует использовать, когда компонент является частью библиотеки компонентов или любой другой конфигурации с большим количеством подобных экспортов.
export const MyComponent1: React.FunctionComponent = () => {}
export const MyComponent2: React.FunctionComponent = () => {}
Экспорты по умолчанию
Экспорты по умолчанию следует применять, когда компонент используется один раз или если файл имеет один экспорт, не связанный с остальной частью каталога.
const MyComponent: React.FunctionComponent = () => {}
export default MyComponent
Именование useState
Переменные useState должны иметь описательные имена, при этом имя функции обновления должно быть set + {имя переменной}.
Правильно:
const [name, setName] = useState("")
Неправильно:
const [name, updateName] = useState("")
Операторы равенства
При сравнении двух значений всегда используйте ===. В JavaScript оператор ==выполняет приведение типов, следствием чего являются довольно странные ошибки. Например: 1 == “1” будет приравниваться к true (верно).
Правильно:
if (var1 === var2) {}
Неправильно:
if (var1 == var2) {}
Интерфейсы свойств компонентов
При определении интерфейсов для свойств компонентов всегда определяйте переменные первыми, а функции — вторыми, разделяя их пробелом.
Правильно:
interface IProps {
var1: string
var2: boolean
function1(): void
}
const MyComponent: React.FunctionComponent = (props: IProps) => {}
Неправильно:
interface IProps {
var1: string
function1(): void
var2: boolean
}
const MyComponent: React.FunctionComponent = (props: IProps) => {}
Условный рендеринг
При сокращенном способе написания кода для условного рендеринга используйте полный тернарный оператор, а не логический &&. Редко, но все же бывает так, что локальный оператор && возвращает нечетные значения в jsx при выполнении определенных условий.
Правильно:
const MyComponent: React.FunctionComponent = () => {
const authenticated = true
return (
<div>
{authenticated ? <p> You're Logged In </p> : null}
</div>
)
}
Неправильно:
const MyComponent: React.FunctionComponent = () => {
const authenticated = true
return (
<div>
{authenticated && <p> You're Logged In </p>}
</div>
)
}
Читайте также:
Перевод статьи Jesse Langford, 8 Items I Added To My React + TypeScript Style Guides