8 пунктов по стилю React + TypeScript

Включение в 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>

    )

}