21 хорошая практика для очень хороших React проектов

21 хорошая практика для очень хороших React проектов

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

Сегодня поговорим о том, как это сделать, – о самых полезных практиках разработки на React.

1. Используйте JSX-сокращения

Использовать логические значения никогда не было так просто. Допустим, вам нужно управлять видимостью компонента Navbar – с помощью пропса showTitle :

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

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

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

Если у вас выбор между тремя и более компонентами, тернарный оператор не подходит. В этом случае литералы объектов могут сделать код более читаемым – используйте их вместо сложных условий.

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

Нет никакого преимущества в использовании div вместо Fragment . Зачем вам нужен лишний элемент в виртуальном DOM?

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

Старайтесь не смешивать логику и рендер внутри компонента.

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

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

Дочерний компонент должен отображаться только один раз, так как значение count не имеет к нему никакого отношения. И тем не менее он рендерится при каждом нажатии на кнопку.

Отредактируем немного ChildrenComponent :

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

7. Перенесите CSS в JavaScript

Организовать CSS сложнее, чем JavaScript, но можно постараться.

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

Одна из новейших возможностей JS сделает ваш код более читаемым.

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

Передать строковые данные проще, чем вы думаете.

10. Удалите JS из JSX

Уберите весь код JavaScript из JSX-разметки, если он не служит какой-либо цели рендеринга или функциональности UI .

11. Строковые литералы

Используйте строковые литералы вместо громоздкой конкатенации строк.

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

Старайтесь импортировать модули в определенном порядке, чтобы сделать код более логичным.

Эмпирическое правило заключается в следующем порядке импорта:

  1. сначала встроенные (build-in) модули;
  2. затем внешние;
  3. и наконец внутренние.

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

Неявный возврат делает ваши функции изящнее. Но не злоупотребляйте этой фичей, она уместна только в простых функциях.

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

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

15. Зарезервированные имена свойств

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

16. Кавычки

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

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

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

18. JSX в скобках

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

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

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

20. Подчеркивание в именах методов

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

21. Атрибут alt

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

Заключение

Вот и все. Поздравляем, если вы зашли так далеко! Надеюсь, вы кое-что узнали из этой статьи.