20 советов для улучшения качества кода в React проекте

10 месяцев назад·5 мин. на чтение

React очень гибок и не строг к структуре компонентов. Именно поэтому мы несем ответственность за поддержание чистоты и поддерживаемости наших проектов.

В этой статье рассмотрим некоторые рекомендации по улучшению качества приложения на React. Эти правила широко приняты. Таким образом, обладание этими знаниями является обязательным.

1. Используйте короткую запись JSX

Попробуйте использовать сокращение JSX для передачи логических переменных. Допустим, вы хотите управлять видимостью заголовка компонента панели навигации.

Плохо

return (
  <Navbar showTitle={true} />
);

Хорошо

return(
  <Navbar showTitle />  
)

2. Используйте тернарные операторы

Допустим, вы хотите отобразить сведения о пользователе в зависимости от роли.

Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
} 

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

3. Воспользуйтесь преимуществами объектных литералов

Объектные литералы могут помочь сделать наш код более читабельным. Допустим, вы хотите отобразить три типа пользователей в зависимости от их ролей. Вы не можете использовать тернарный оператор, так как количество опций превышает два.

Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Componenent />;
Теперь код выглядит намного лучше.

4. Используйте фрагменты

Всегда используйте Fragment вместо лишней обертки div. Это сохраняет код чистым, а также полезно для производительности, поскольку в виртуальной модели DOM создается на один узел меньше.

Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)

5. Не определяйте функцию внутри рендеринга

Не определяйте функцию внутри функции рендеринга. Постарайтесь свести логику рендеринга к абсолютному минимуму.

Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // здесь определена функция
      This is a bad example 
    </button>  
)

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)

6. Используйте React memo

React.PureComponent и Memo могут значительно повысить производительность вашего приложения. Они помогают нам избежать ненужного рендеринга.

Плохо

import React, { useState } from "react";

export const TestMemo = () => {
  const [userName, setUserName] = useState("faisal");
  const [count, setCount] = useState(0);

  const increment = () => setCount((count) => count + 1);

  return (
    <>
      <ChildrenComponent userName={userName} />
      <button onClick={increment}> Increment </button>
    </>
  );
};

const ChildrenComponent =({ userName }) => {
  console.log("rendered", userName);
  return <div> {userName} </div>;
};
Хотя дочерний компонент должен отображаться только один раз, так как значение count не имеет ничего общего с ChildComponent. Но он отображается рендерится каждый раз, когда вы нажимаете на кнопку.

Хорошо

Давайте отредактируем ChildrenComponent следующим образом:
import React, {useState} from "react";

const ChildrenComponent = React.memo(({userName}) => {
    console.log('rendered')
    return <div> {userName}</div>
})
Теперь, независимо от того, сколько раз вы нажмете на кнопку, она будет отображаться только тогда, когда это необходимо.

7. Поместите CSS в JavaScript

Избегайте сырого JavaScript при написании приложений React, потому что организовать CSS намного сложнее, чем организовать JS.

Плохо

// CSS FILE

.body {
  height: 10px;
}

//JSX

return <div className='body'>

</div>

Хорошо

const bodyStyle = {
  height: "10px"
}

return <div style={bodyStyle}>

</div>

8. Используйте деструктурирование объектов

Используйте деструктурирование объектов в своих интересах. Допустим, вам нужно показать данные пользователя.

Плохо

return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)

Хорошо

const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

9. Строковые пропсы можно передавать без фигурных скобок

При передаче строковых пропсов дочернему компоненту.

Плохо

return(
  <Navbar title={"My Special App"} />
)

Хорошо

return(
  <Navbar title="My Special App" />  
)

10. Удалить JS-код из JSX

Вынесите JS-код из JSX, если это не служит какой-либо цели рендеринга или функциональности пользовательского интерфейса.

Плохо

return (
  <ul>
    {posts.map((post) => (
      <li onClick={event => {
        console.log(event.target, 'clicked!'); // <- плохо
        }} key={post.id}>{post.title}
      </li>
    ))}
  </ul>
);

Хорошо

const onClickHandler = (event) => {
   console.log(event.target, 'clicked!'); 
}

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}>{post.title}</li>
    ))}
  </ul>
);

11. Используйте шаблонные литералы

Используйте шаблонные литералы для создания длинных строк. Избегайте использования конкатенации строк. Это будет выглядеть красиво и чисто.

Плохо

const userDetails = user.name + "'s profession is" + user.proffession

return (
  <div> {userDetails} </div>  
)

Хорошо

const userDetails = `${user.name}'s profession is ${user.proffession}`

return (
  <div> {userDetails} </div>  
)

12. Порядок импортов

Всегда старайтесь импортировать сущности в определенном порядке. Это улучшает читаемость кода.

Плохо

import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';

Хорошо

Эмпирическое правило состоит в том, чтобы сохранить порядок импорта следующим образом:
  • Встроенные зависимости
  • Внешние зависимости
  • Внутренние зависимости
Итак, приведенный выше пример становится:
import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

13. Используйте неявный возврат

Используйте функцию JavaScript с неявным возвратом результата при написании красивого кода. Допустим, ваша функция выполняет простое вычисление и возвращает результат.

Плохо

const add = (a, b) => {
  return a + b;
}

Хорошо

const add = (a, b) => a + b;

14. Именование компонентов

Всегда используйте PascalCase для компонентов и camelCase для экземпляров.

Плохо

import reservationCard from './ReservationCard';

const ReservationItem = <ReservationCard />;

Хорошо

import ReservationCard from './ReservationCard';

const reservationItem = <ReservationCard />;

15. Кавычки

Используйте двойные кавычки для атрибутов JSX и одинарные кавычки для всех остальных JS.

Плохо

<Foo bar='bar' />

<Foo style={{ left: "20px" }} />

Хорошо

<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

16. Именование пропсов

Всегда используйте camelCase для имен объектов или PascalCase, если значение объекта является компонентом React.

Плохо

<Component
  UserName="hello"
  phone_number={12345678}
/>

Хорошо

<MyComponent
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

17. JSX в круглых скобках

Если компонент занимает более одной строки, всегда заключайте его в круглые скобки.

Плохо

return <MyComponent variant="long">
           <MyChild />
         </MyComponent>;

Хорошо

return (
    <MyComponent variant="long">
      <MyChild />
    </MyComponent>
);

18. Самозакрывающиеся теги

Если компонент не имеет дочерних элементов, используйте самозакрывающиеся теги. Это улучшает читаемость.

Плохо

<SomeComponent variant="stuff"></SomeComponent>

Хорошо

<SomeComponent variant="stuff" />

19. Нижнее подчеркивание в названии метода

Не используйте символы подчеркивания ни в одном внутреннем методе React.

Плохо

const _onClickHandler = () => {
  // код
}

Хорошо

const onClickHandler = () => {
  // код
}

20. Проп alt

Всегда включайте проп alt в теги <img >. И не используйте picture или image в проп alt, потому что программы чтения с экрана уже объявляют элементы img изображениями.

Плохо

<img src="hello.jpg" />

<img src="hello.jpg" alt="Picture of me rowing a boat" />

Хорошо

<img src="hello.jpg" alt="Me waving hello" />

5 библиотек для React, которые повысят уровень ваших проектов в 2023 году

год назад·1 мин. на чтение

В этой статье мы рассмотрим 5 библиотек, которые могут положительно повлиять на процесс разработки на React. Они решат некоторые из наиболее распространенных проблем в React разработке, такие как запрос данных, стили, доступность и управление состоянием.

Введение

Важно освоить основы React. И правда в том, что вы можете продвинуться довольно далеко без тонны дополнительных библиотек. Но есть несколько основополагающих инструментов, которые могут вывести ваш опыт разработки React на новый уровень. Эти библиотеки решают наиболее распространенные задачи в разработке React, такие как запросы данных с API, стилизация, доступность и управление состоянием, и они делают это минимальным и ненавязчивым способом. Это обеспечивает постепенное внедрение в кодовую базу. Мы составили список из пяти таких библиотек, о которых, по нашему мнению, вам следует знать.

Почему это важно

Важно делиться инструментами разработки и влиять на взаимодействие с разработчиками. Когда у разработчиков есть доступ к нужным инструментам и ресурсам, они могут тратить больше времени на создание и меньше времени на отвлекающие факторы, накладные расходы и разочарования.

React Query

Проще говоря, React Query делает получение данных в React намного удобнее. Но это не библиотека для получения данных как таковая. Вместо этого это библиотека управления состоянием, которая имеет дело с асинхронным состоянием сервера. Вы предоставляете ей асинхронную функцию, которая затем извлекает данные. useQuery предоставляет вам кучу полезных утилит для обработки асинхронной функции:
  • Флаг состояния загрузки
  • Кэширование результатов
  • Инвалидация и повторный запрос данных
Список небольшой. Но влияние, которое он оказывает на большие кодовые базы, нельзя недооценивать. Как правило, кодовые базы имеют много логики для глобального обмена результатами выборки, их обновления при изменении данных, триггеров для получения данных и многого другого. Большая часть этого просто больше не нужна при использовании React Query. Кэширование означает, что вы можете вызвать хук useQuery по всему приложению, и данные будут совместно использоваться. https://github.com/TanStack/query

Zustand

Каждый React разработчик знает, как сложно шэрить состояние в приложении. При первом столкновении с проблемой вы неизбежно заканчиваете «просверливанием» данных по дереву компонентов (prop drilling). Излишне говорить, что это не делает код чистым и не является устойчивым в долгосрочной перспективе. К счастью, React придумал контекст для решения этой проблемы. Контекст отлично подходит, если все, что вам нужно сделать, это передать несколько значений вниз по дереву компонентов. Но он может стать громоздким для использования в более сложных глобальных сторах. Разработчики должны быть осторожны с последствиями для производительности, и некоторые разработчики не являются большими поклонниками Context API. Zustand предлагает чрезвычайно простой API, который позволяет создавать хранилище со значениями и функциями. Затем вы можете получить доступ к этому хранилищу из любого места в приложении для чтения и записи значений. Реактивность включена. Если вы хотите хранить данные вложенных объектов в своем хранилище, рассмотрите возможность использования Immer вместе с Zustand, чтобы легко изменить вложенное состояние. https://github.com/pmndrs/zustand

Framer Motion

Анимация — один из лучших способов придать вашему React приложению современный вид. Но это непросто. Использование CSS анимации сложно и может привести к большому количеству кода. Напротив, Framer Motion предлагает мощный, но простой API для создания пользовательских анимаций. Он изначально интегрирован в экосистему React с набором хуков и компонентов. Например, этот код - все, что требуется для плавной анимации преобразования из круга в квадрат:
import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)
Каждое значение в массиве представляет ключевой кадр для соответствующего свойства. Затем анимация проходит через этот цикл. Конечно, вы можете сделать гораздо больше, чем просто определить ключевые кадры с помощью Framer Motion. Вы также можете анимировать изменения в макете, обрабатывать жесты или анимировать на основе прокрутки. https://github.com/framer/motion

Class Variance Authority (CVA)

TailwindCSS быстро превратился в основной способ стилизации приложений React. Но создание многоразовых элементов пользовательского интерфейса с его помощью может быть сложной задачей. Допустим, вы создаете свою собственную кнопку с помощью Tailwind. Так как вы хотите повторно использовать его во всем своем приложении, вы создаете компонент. Но теперь вам нужно несколько вариантов этого компонента. Основной стиль и дополнительный стиль. Итак, теперь вам нужно собрать классы Tailwind вместе в соответствии со значением пропса. Теперь вам также нужны разные цвета и разные размеры для вашей кнопки. Так что добавьте немного пропса и еще больше условной логики, чтобы выяснить правильную комбинацию классов Tailwind. Это может увеличить кодовую базу и усложнить понимание. CVA, сокращение от Class Variance Authority. Это простая библиотека, которая избавляет от необходимости создавать компонуемые компоненты React с именами классов Tailwind. Возьмем этот пример из их документации:
import React from "react";
import { cva, type VariantProps } from "class-variance-authority";

const button = cva("button", {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

export const Button: React.FC<ButtonProps> = ({
  className,
  intent,
  size,
  ...props
}) => <button className={button({ intent, size, className })} {...props} />;
Мы декларативно описываем стили кнопок для каждого значения параметра. Затем CVA выполняет работу по выяснению правильной комбинации стилей. Мы даже можем указать варианты по умолчанию, чтобы сделать определенные свойства необязательными. https://github.com/joe-bell/cva

Radix UI

Если вам нравится создавать полностью кастомизированные пользовательские интерфейсы, но вы не хотите разбираться в тонкостях разработки высококачественных доступных компонентов пользовательского интерфейса с нуля, Radix UI для вас. Библиотека поставляется с различными часто используемыми компонентами пользовательского интерфейса. Например, диалоговые окна, чекбоксы и раскрывающиеся списки. Но с изюминкой. Хотя компоненты содержат всю логику и интерактивность, они не имеют стиля. Это означает, что у вас есть полный контроль над стилизацией компонентов самостоятельно. Это позволяет вам создать действительно настраиваемую систему пользовательского интерфейса, которая не похожа на любой другой веб-сайт. Имея полный контроль над стилем, Radix делает всю остальную работу за вас. Все компоненты полностью доступны - скажем, через навигацию с помощью клавиатуры. Если вам нравится гибкость Radix, но вы не хотите стилизовать все с нуля, вам стоит попробовать shadcn/ui. Это полностью модульная библиотека компонентов, построенная на основе Radix и Tailwind. Вместо того, чтобы устанавливать пакет NPM, вы можете скопировать код непосредственно в свой проект и изменить его по своему вкусу. https://github.com/radix-ui/primitives

Итоги

Библиотеки, обсуждаемые в этой статье, могут помочь вам вывести ваши приложения React на новый уровень. Их внедрение поможет вашему приложению сделать его более удобным как для пользователей, так и для разработчиков. Вы можете постепенно внедрять их все в свой проект, а не одним большим изменением. И с ними очень просто начать работать. Таким образом, нет необходимости тратить часы напролет на изучение документации, прежде чем вы сможете начать кодить.