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>
    )
}

Читайте также:

• Как использовать дизайн-токены в React — опыт команды Bit
• Переиспользуем соединения OkHttp по-максимуму Журнал
• Различия между псевдонимами типов и интерфейсами в TypeScript 4.6

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Jesse Langford, 8 Items I Added To My React + TypeScript Style Guides