Вы когда-нибудь слышали о React или ReactJS… Нет?

Что ж, как разработчик интерфейса или фреймворка вы многое упускаете. React произвел революцию в способах создания пользовательских интерфейсов. Это один из тех популярных умных инструментов, которые превзошли jQuery, и вы можете сами увидеть его в Google, но мы здесь не для того, чтобы сравнивать инструменты; Так что вы можете избавить себя от проблем и просто сосредоточиться на React, который поможет вам создавать потрясающие интерфейсы и интерфейсные приложения.

Прежде чем мы перейдем к лучшим практикам, вот что еще вам нужно знать о React:

Он был создан Facebook, поэтому вы знаете, что он имеет потрясающий потенциал и помогает создавать качественные интерфейсы. Он оптимизирован для производительности с использованием виртуальной модели DOM, которая помогает быстро отображать элементы, требующие обновления. Он использует JavaScript для создания приложений. Он фокусируется только на самом верхнем уровне приложений, что затрудняет организацию базы кода по мере роста проекта React.

Рекомендации по React в 2019 году

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

  • Используйте генератор приложения create-response для начальной загрузки приложения ReactJS.
  • Используйте более надежные менеджеры, например Redux, для управления состоянием приложения.
  • Используйте TypeScript при написании кода для приложений
  • Не используйте большие классы, компоненты или методы, включающие редукторы.
  • Разделите код Reducer на небольшие методы, чтобы избежать использования JSON при использовании ReduxJS.
  • При кодировании не повторяйтесь… «Держите это СУХОЕ», но наличие повторяющихся кодов не всегда плохо!
  • Ограничьте пять или шесть свойств, которые вы передаете в компонент ... Избегайте передачи слишком большого количества аргументов или атрибутов.
  • Вы когда-нибудь слышали о Redux-Thunk… Это синхронизатор событий, который помогает взаимодействовать с внутренним API.
  • Сохраните файл конфигурации jslint.
  • Попробуйте использовать ReactJS propTypes и ReactJS defaultProps.
  • Всегда не забывайте использовать пряжу или NPM, либо диспетчер зависимостей с файлом блокировки.
  • Используйте линтер… он разбивает более длинные строки.
  • Каждый раз, когда вы обнаружите ошибку, сначала напишите тест.
  • Протестируйте код, к которому обычно обращаются, сложный и подверженный ошибкам.
  • Используйте деструктуризацию ES6 для реквизита.
  • Напишите тесты, которые расширят тестовое покрытие кода и обеспечат правильное функционирование.
  • Используйте условный рендеринг.
  • Используйте React Hooks - новый способ создания компонентов с полным состоянием.
  • Используйте частичные компоненты, такие как ‘‹ / ›’ и ‘‹ ›’.
  • Для сбора и визуализации коллекций компонентов используйте map ().
  • Чтобы протестировать код ReactJS, используйте JEST.
  • Если вы хотите управлять вводом, например, onChange = {this.handleInputChange ()}, используйте onChange!
  • Вы должны назвать обработчики событий с помощью префиксов дескрипторов, например, handleUpdate () или handleClick ().

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