Когда я впервые начал изучать кодирование и разработку приложений ReactJS, наставник посоветовал мне заранее ознакомиться с передовыми практиками, которым нужно следовать, чтобы я мог помнить об этом при разработке веб-приложения, соответствующего стандартам React. С другой стороны, общий поиск в Google предлагает 100 различных статей для чтения, и ирония заключается в том, что эта статья скоро станет одной из них. Тем не менее, вот коллекция некоторых из лучших моментов, которые я обнаружил.

На первый взгляд, изучение оригинальной документации React — это всегда хорошая идея, и вот несколько ключевых моментов, которые выделяются:

  • Разбивка пользовательского интерфейса на иерархии компонентов, в идеале придерживаясь принципа единой ответственности, когда каждый компонент выполняет только одну конкретную задачу.
  • Создайте начальную статическую версию вашего приложения, в которой не используется какое-либо состояние.
  • Односторонний поток данных или односторонняя привязка в React делают все модульным и быстрым.
  • Определите абсолютный минимум изменяемых состояний, требуемых приложением.
  • Определите, какие данные составляют состояние, например данные, которые не передаются от родителя через реквизиты, изменяются со временем или не могут быть вычислены на основе других состояний или реквизитов в компоненте и т. д. (общие качества состояния).
  • Состояние должно принадлежать компоненту общего владельца или компоненту более высокого уровня в иерархии.
    Чтобы упростить задачу, создайте компонент для сохранения состояния и поместите его выше общего владельца в иерархии.
    Один раз поддерживается поток данных вниз по иерархии, добавьте обратный поток данных.
  • Состояния должны быть изменены, чтобы отразить пользовательский ввод, если пользователь должен отправить данные в программу; компоненты должны обновлять только свое собственное состояние.

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

  • Держите ваши компоненты минимальными и функциональными.
  • Возможность повторного использования имеет важное значение, и производство новых компонентов должно быть сведено к минимуму.
  • Изучите избыточный код на наличие шаблонов и сходств, чтобы объединить его.
  • Сведите комментарии к минимуму, чтобы избежать визуального беспорядка в коде.
  • Чтобы сделать его более узнаваемым, назовите компонент после функции.
  • Имена компонентов должны начинаться с заглавных букв, чтобы JSX мог отличить их от стандартных тегов HTML.
  • Любой компонент React, созданный в JSX, должен быть назван в регистре Pascal или в верхнем регистре.
  • Отдельные аспекты состояния и рендеринга; Компоненты с состоянием сохраняют информацию о состоянии, а компоненты без состояния — нет.
  • Поддерживайте текущее и предполагаемое поведение, выполнение и тестирование кода.
  • Все файлы, относящиеся к компоненту (файлы CSS, значки, фотографии, тесты и любые другие подкомпоненты), должны храниться в одной папке.
  • Убедитесь, что любой новый код, добавленный в ваш проект, тщательно протестирован на функциональность и интеграцию с существующим кодом.
  • Разбивайте чрезмерно длинные строки в соответствии с линтингом (программой, которая анализирует код на наличие потенциальных проблем).
  • Убедитесь, что все приложение и весь написанный код протестированы.
  • Используйте библиотеки сниппетов (ES7 React, Redux, JS Snippets и другие), чтобы не отставать от лучшего и новейшего синтаксиса и не допускать ошибок в коде.

Спасибо и, как всегда, удачного кодирования!

Вот мой LinkedIn

— Манул Мандалаватта

Бакалавриат по разработке программного обеспечения

https://github.com/ManulThisuraka/dbs-test-query/blob/main/Query

SLIIT, Шри-Ланка