Экосистема React превратилась в растущий список инструментов и библиотек для разработчиков. Множество инструментов — истинное свидетельство популярности React. Для разработчиков может оказаться головокружительным занятием ориентироваться в этом лабиринте, меняющемся с головокружительной скоростью. Чтобы помочь сориентироваться в курсе, ниже приведен список основных инструментов, методов и навыков React на 2020 год.
Крючки
Репозиторий: github.com/facebook/реагировать
Звезды GitHub: 157 000+
Разработчик: Facebook
Текущая версия: 16.14.0
Авторы: 1500+
Хотя это не совсем инструмент, любой разработчик, работающий с React в 2020 году, должен быть знаком с хуками. Это новое дополнение к React версии 16.8, которое открывает полезные функции в функциональных компонентах. Например, useStateхук позволяет функциональному компоненту иметь свое собственное состояние, а useEffectтакже позволяет вам выполнять побочные эффекты после первоначального рендеринга — например, манипулировать DOM или получать данные. Хуки можно использовать для репликации методов жизненного цикла в функциональных компонентах и для совместного использования кода между компонентами.
Доступны следующие основные крючки:
useState: для изменения состояния функционального компонента без методов жизненного цикла.
useEffect: для выполнения функций после рендеринга, полезно для запуска запросов Ajax.
useContext: для доступа к данным контекста компонента, даже вне свойств компонента.
Плюсы:
снижает сложность управления состоянием
поддерживает функциональные компоненты
поощряет разделение интересов
Минусы:
переключение контекстных данных может увеличить когнитивную нагрузку
Если вы хотите узнать больше о хуках, ознакомьтесь с нашим руководством «React Hooks: как начать работу и создать свой собственный «.
Функциональные компоненты
Репозиторий: github.com/facebook/реагировать
Звезды GitHub: 157 000+
Разработчик: Facebook
Текущая версия: 16.14.0
Авторы: 1500+
С появлением хуков функциональные компоненты — декларативный способ создания разметки JSX без использования класса — становятся более популярными, чем
Вот как выглядит функциональный компонент в React:
function Welcome (props) {
return Hello, {props.name};
}
Плюсы:
фокусируется на пользовательском интерфейсе
тестируемый компонент
меньшая когнитивная нагрузка при размышлении о компоненте
Минусы:
нет методов жизненного цикла
Создать
Репозиторий: github.com/facebook/create-react-app
Звезды GitHub: 82 000+
Разработчик: Facebook
Текущая версия: 3.4.1
Авторы: 800+
Create React App — это типичный инструмент для запуска нового проекта React. Он управляет всеми зависимостями React через один пакет npm. Больше не нужно иметь дело с Babel, webpack и прочим. Все, что требуется, — это одна команда для настройки локальной среды разработки с поддержкой React, JSX и ES6. Но это не все. Приложение Create React также предлагает горячую перезагрузку модуля (ваши изменения сразу же отражаются в браузере при разработке), автоматическую проверку кода, средство запуска тестов и скрипт сборки для объединения JS, CSS и изображений для производства.
Начать работу легко:
npx
И еще проще обновить позже. Вся цепочка инструментов зависимостей обновляется с
npm i react-scripts@latest
Репозиторий: github.com/facebook/create-react-app
Звезды GitHub: 82 000+
Разработчик: Facebook
Текущая версия: 3.4.1
Авторы: 800+
Начиная с версии
Чтобы установить
«proxy»: «http: //localhost/
Если внутренний API размещен с относительным путем, установите домашнюю страницу:
«homepage»: «/
Плюсы:
бесшовная интеграция с внутренним API
устраняет проблемы CORS
простая настройка
С
может потребоваться уровень прокси на стороне сервера с несколькими API
PropTypes
Репозиторий: github.com/facebook/prop-types
Звезды GitHub: 3600+
Разработчик: Facebook
Текущая версия: 15.7.2
Авторы: 45+
PropTypes объявляет тип, предназначенный для компонента React, и документирует его намерения. Это показывает предупреждение в локальном разработчике, если типы не совпадают. Он поддерживает все примитивы JavaScript, такие как Boolean, Numberи String. Он может документировать, какие реквизиты требуются через файлы isRequired.
Например:
import PropTypes;
MyComponent.propTypes = {
boolProperty: PropTypes.bool,
numberProperty: PropTypes.number,
requiredProperty: PropTypes.string.isRequired
};
Плюсы:
намерение компонента документов
показывает предупреждения в локальном разработчике
поддерживает все примитивы JavaScript
Минусы:
нет проверки типа компиляции
Машинопись
Сайт: typescriptlang.org.
Репозиторий: github.com/Microsoft/TypeScript
Звезды GitHub: 65 000+
Разработчик: Майкрософт
Текущая версия: 4.0.3
Авторы: 530+
JavaScript, который масштабируется для проектов React с проверкой типа компиляции. Это поддерживает все библиотеки и инструменты React с объявлениями типов. Это надмножество JavaScript, поэтому можно отказаться от проверки типов. Это одновременно документирует намерение и приводит к сбою сборки, если оно не совпадает. В проектах Create React App включите его, передав его —template typescriptпри создании приложения. Поддержка TypeScript доступна начиная с версии
Чтобы объявить тип реквизита:
interface MyComponentProps {
boolProp?: boolean; // optional
numberProp?: number; // optional
requiredProp: string;
}
Плюсы:
проверка типа компиляции
поддерживает все инструменты и библиотеки React, включая Create React App
хороший способ улучшить свои навыки JavaScript
Минусы:
есть кривая обучения, но возможен отказ
Если вы хотите узнать больше об использовании TypeScript с React, ознакомьтесь с «React с TypeScript: лучшие практики «.
Редукс
Репозиторий: github.com/reduxjs/redux
Звезды GitHub: 54 000+
Разработчики: Дэн Абрамов и Эндрю Кларк
Текущая версия: 4.0.5
Авторы: 800+
Предсказуемый контейнер управления состоянием для приложений JavaScript. Этот инструмент поставляется с хранилищем, которое управляет данными состояния. Изменение состояния возможно только через диспетчерское сообщение. Объект сообщения содержит тип, который сигнализирует редюсеру, какую мутацию запускать. Рекомендуется хранить все в приложении в одном магазине. Redux поддерживает несколько редюсеров в одном магазине. Редюсеры имеют отношение один к одному между входными параметрами и выходным состоянием. Это делает редукторы чистыми функциями.
Типичный редьюсер, который изменяет состояние, может выглядеть так:
const simpleReducer = (state = {}, action) => {
switch (action.type) {
case ‘SIMPLE_UPDATE_DATA’:
return {...state, data: action.payload};
default:
return state;
}
};
Плюсы:
предсказуемое управление состоянием
несколько редукторов в одном магазине
редьюсеры — это чистые функции
Минусы:
настройка с нуля может быть немного болезненной
Репозиторий: github.com/reduxjs/redux
Звезды GitHub: 18 500+
Разработчик: Redux team
Текущая версия: 7.2.1
Авторы: 220+
Если вы хотите использовать Redux в своих приложениях React, вы скоро обнаружите официальные привязки React для Redux. Он состоит из двух основных модулей: Providerи connect. Это Providerкомпонент React с storeреквизитом. Эта опора — то, как один магазин подключается к разметке JSX. Функция connectпринимает два параметра: mapStateToProps, и mapDispatchToProps. Именно здесь управление состоянием из Redux связано с реквизитами компонента. По мере того, как состояние изменяется или вызывает пожар, привязки заботятся об установке состояния в React.
Вот как может выглядеть соединение:
import { bindActionCreators } from ‘redux’;
import { connect } from ‘
const mapStateToProps = (state) => state.simple;
const mapDispatchToProps = (dispatch) =>
bindActionCreators ({ () => ({type: ‘SIMPLE_UPDATE_DATA’}) }, dispatch) ;
connect (mapStateToProps, mapDispatchToProps) (SimpleComponent) ;
Плюсы:
официальные привязки React для Redux
связывается с разметкой JSX
соединяет компоненты в единый магазин
Минусы:
кривая обучения несколько крутая
Следует также отметить, что с введением хуков и контекстного API React можно заменить Redux в некоторых приложениях React. Подробнее об этом можно прочитать в статье «Как заменить Redux на React Hooks и Context API «.
Реактивный маршрутизатор
сайт: http://reactrouter.com
Репозиторий: github.com/ReactTraining/react-router
Звезды GitHub: 42 000+
Разработчик: React Training
Текущая версия: 5.2.0
Авторы: 640+
React Router —
Библиотека состоит из трех пакетов:
В последних версиях React Router появились хуки, которые позволяют вам получать доступ к состоянию маршрутизатора и выполнять навигацию внутри ваших компонентов, а также более новый шаблон рендеринга маршрута:
Если вы хотите узнать больше о возможностях React Router, см. «React Router v5: Полное руководство «.
Плюсы:
маршрутизация между компонентами быстрая
анимации и переходы могут быть легко реализованы
соединяет компоненты в единый магазин
Минусы:
без дополнительной настройки данные загружаются для просмотров, которые пользователь может не посетить
маршрутизация на стороне клиента (при которой JavaScript преобразуется в HTML) имеет последствия для SEO
ESLint
Сайт: eslint.org.
Репозиторий: github.com/eslint/eslint
Звезды GitHub: 17 000+
Разработчик: Николас С. Закас и команда ESLint.
Текущая версия: 7.11.0
Авторы: 820+
ESLint — это инструмент анализа кода, который можно использовать для обеспечения согласованности стиля кода, обеспечения качества кода и заблаговременного выявления потенциальных ошибок и плохих шаблонов. Он предлагает плагин со специфическими для React правилами линтинга и часто используется в сочетании с руководством по стилю Airbnb React.
Хотя ESLint можно запустить из командной строки, стоит потратить некоторое время на его интеграцию в выбранный вами редактор. Многие из обнаруженных проблем могут быть автоматически исправлены, и в сочетании с таким инструментом, как Prettier, ESLint может серьезно помочь улучшить качество вашего кода, а также общий опыт разработчика.
Любой, кто использует приложение Create React, заметит, что оно поставляется с уже включенным ESLint и предоставляет минимальный набор правил, предназначенных для поиска распространенных ошибок.
Плюсы:
гибкий: любое правило можно переключать, и многие правила имеют дополнительные настройки, которые можно настроить
расширяемый: доступно множество плагинов
поддержка JSX и TypeScript
Минусы:
интеграция с редактором потенциально может оказаться надоедливой
потенциально может ввести несколько новых зависимостей в проект
Если вы хотите узнать больше об ESLint, ознакомьтесь с нашим учебным пособием «Запуск и работа с ESLint — подключаемым
Лодаш
сайт: lodash.com
Репозиторий: github.com/lodash/lodash
Звезды GitHub: 46 500+
Разработчик:
Текущая версия: 4.17.20
Авторы: 300+
Lodash — это современная служебная библиотека JavaScript, полезная для компонентов React. Например, события ввода формы React, например, onChangeсрабатывают один раз при нажатии клавиши. Если компонент получает данные из внутреннего API, он запускает запросы один раз за нажатие клавиши. Это спамит внутренний API и вызывает проблемы, когда многие люди используют пользовательский интерфейс. Lodash поставляется с событиями debounce, которые запускают один запрос API с большим количеством нажатий клавиш.
Чтобы настроить onChangeотклоненные события:
onChange={ (e) => debounce (updateDataValue (e.target.value), 250) }
Плюсы:
модульная зависимость
хорошо работает с разделением кода
легко использовать
Минусы:
знание того, когда следует опровергать события, не сразу очевидно
Аксиос
Репозиторий: github.com/axios/axios
Звезды GitHub: 77 500+
Разработчик: команда axios
Текущая версия: 0.20.0
Авторы: 250+
Выполнение
Подобно $.ajaxфункции jQuery, вы можете сделать любой
axios ({
method: ‘post’,
url: '/login’,
data: {
user: ‘camilo’,
lastName: ‘reyes’
}
}) ;
Плюсы:
основанное на обещании
поддерживает асинхронный режим/ожидание
поддерживает обработку ошибок
Минусы:
это не может быть более удивительным
Если вы хотите узнать больше об использовании axios в своих проектах, см. «Знакомство с Axios, популярным
Там есть
Сайт: jestjs.io.
Репозиторий: github.com/facebook/jest
Звезды GitHub: 32 500+
Разработчик: Facebook
Текущая версия: 26.5.3
Авторы: 1000+
Jest — это среда тестирования, ориентированная на простоту проектов JavaScript. Хорошей новостью является то, что он встроен в приложение Create React. Он работает с проектами, использующими Babel, TypeScript и Node. В большинстве проектов React нет конфигурации. Тесты могут выполняться в режиме наблюдения, который отслеживает изменения кода и повторно запускает тесты. API содержит itи expectдля быстрого начала работы.
Проверка работоспособности, чтобы убедиться, что тесты выполняются:
it (‘says true is true’, () => {
expect (true).toBe (true) ;
}) ;
Плюсы:
простая настройка с помощью приложения Create React
свободный API
работает в режиме часов
Минусы:
слишком голые кости для рендеринга компонентов React
Если вы хотите узнать, как вы можете использовать Jest в своих проектах React, см. «Как тестировать компоненты React с помощью Jest «.
фермент
Репозиторий: github.com/enzymejs/enzyme
Звезды GitHub: 19 000+
Разработчик: Airbnb
Текущая версия: 3.11.0
Авторы: 350+
Enzyme — это утилита для тестирования JavaScript для React, упрощающая тестирование компонентов. API должен быть таким же интуитивно понятным, как jQuery для обхода компонентов. Чтобы получить Enzyme, ему нужно два пакета: enzyme, и отдельный адаптер. Адаптер должен быть совместим с версией React. Например,
При использовании React 16 установите Enzyme с помощью:
npm i —
Плюсы:
поддерживает компоненты React
поддерживает тестовую среду Exists
интуитивно понятный API
Минусы:
Мелкий визуализатор
Репозиторий: github.com/airbnb/enzyme
Звезды GitHub: 19 000+
Разработчик: Airbnb
Текущая версия: 3.11.0
Авторы: 350+
Это поверхностный рендеринг, полезный для ограничения тестов глубиной в один уровень. Он отображает родительский компонент, не затрагивая его дочерние элементы в древовидной иерархии. Это изолирует тест и делает утверждения более надежными. Поверхностный рендеринг поддерживает большую часть Enzyme API для обхода компонентов. API shallowвызывает методы жизненного цикла, такие как componentDidMountи componentDidUpdateво время рендеринга. С хуками поверхностный рендерер не вызывает useEffect. Один из советов — console.log (component.debug ())проверить, что видит поверхностный рендерер.
Чтобы протестировать компонент React с помощью мелкого рендерера:
const component = shallow (
expect (component.find (‘p’).at (0).text ()).toBe (‘Dave’) ;
Плюсы:
тест изолятов
полнофункциональный API
позволяет быстро отлаживать
Минусы:
должен пройти через море вариантов в API Enzyme, чтобы найти этот необработанный алмаз
сборник рассказов
Сайт: storybook.js.org.
Репозиторий: github.com/storybookjs/storybook
Звезды GitHub: 54 000+
Разработчик: Storybook
Текущая версия: 6.0.26
Авторы: 1100+
Это инструмент с открытым исходным кодом для изолированного ручного тестирования компонентов React. Storybook предоставляет песочницу для создания компонентов, позволяющих проникнуть в труднодоступные крайние случаи. Он позволяет создавать моки, чтобы отображать компоненты в ключевых состояниях, которые трудно воспроизвести. Настройка выполняется автоматически с приложением Create React при использовании
Чтобы начать работу с сборником рассказов:
npx -p @storybook/cli sb init
Плюсы:
покрывает труднодоступные крайние случаи
рендерит компоненты в песочнице
интегрируется с приложением Create React
Минусы:
трудно автоматизировать тесты
Вы можете узнать больше о Storybook в нашем руководстве «React Storybook: с легкостью разрабатывайте красивые пользовательские интерфейсы «.
Реагировать на Bootstrap
Репозиторий: github.com/react-bootstrap/react-bootstrap
Звезды GitHub: 18 400+
Разработчик:
Текущая версия: 1.3.0
Авторы: 300+
Это самый популярный интерфейсный фреймворк, перестроенный для React. Каждый компонент Bootstrap создается с нуля как компонент React. Это заменяет Bootstrap JavaScript и уничтожает зависимости, такие как jQuery. Последняя версия поддерживает Bootstrap 4.5. React Bootstrap работает с тысячами тем Bootstrap, уже найденных в версии 4. Каждый компонент имеет специальные возможности и доступен по умолчанию. Он поддерживает приложение Create React из коробки, а также поддерживаются пользовательские темы.
Чтобы запустить React Bootstrap в проекте React:
npm install
Вот как может выглядеть результат:
Реагировать на Bootstrap
Плюсы:
перестроен с нуля с использованием компонентов React
доступность в виду
поддерживает создание приложения React
Минусы:
пользовательские темы могут быть сложными в приложении Create React
Сайт: material-ui.com.
Репозиторий: github.com/mui-org/material-ui
Звезды GitHub: 54 500+
Разработчик:
Текущая версия: 4.9.3
Авторы: 1500+
Чтобы начать работу с
npm install @
Вот как может выглядеть результат:
Источник
Плюсы:
создать мощный пользовательский интерфейс без особых усилий
предлагает множество компонентов
предлагает множество шаблонов
Минусы:
некоторые премиальные шаблоны стоят денег, но они могут стоить этих денег
React DevTools
Репозиторий: github.com/facebook/реагировать
Звезды GitHub: 157 000+
Разработчик: Facebook
Текущая версия: 16.14.0
Авторы: 1500+
Одним из самых важных инструментов в наборе инструментов любого разработчика React должен быть React Developer Tools — браузерное расширение как для Chrome, так и для Firefox. Это позволяет вам легко просматривать дерево React, включая иерархию компонентов, реквизиты, состояние и многое другое.
После установки инструменты разработчика предоставят вам две новые вкладки в консоли браузера — «Компоненты «и «Профилировщик». Нажав на первый, вы увидите все компоненты в текущем дереве и сможете отфильтровать их по имени, а второй позволит вам записывать информацию о производительности вашего приложения React.
Это обязательный инструмент, когда дело доходит до отладки приложения React, состоящего из нескольких компонентов.
Плюсы
помогает вам понять, что происходит в вашем приложении React
делает отладку значительно менее болезненной
посмотреть, какие сайты используют React в продакшене
Минусы
небольшая кривая обучения
Удивительный ответ
Репозиторий: github.com/enaqx/awesome-react
Звезды GitHub: 39 500+
Разработчик: нет данных
Текущая версия: н/д
Авторы: 550+
Давайте завершим этот список... другим списком! На этот раз
В репозитории есть раздел Tools, который содержит многие из инструментов, перечисленных в этой статье (и многое другое), а также разделы Tutorials, Demos, Videos, Conference Talks, ReactNative, GraphQL и многое другое. Что бы вы ни искали в мире React, это отличное место для начала.
Плюсы
охватывает широкий спектр ресурсов
активно обновлялся
Минусы
слишком большой выбор
Вывод
Как видно, экосистема React резко выросла за последние несколько лет. Это предпочтительный инструмент для предприятий, желающих повторно использовать компоненты React в едином пакете. Каждый инструмент является автономным с несколькими взаимозависимостями. В 2020 году я рекомендую хотя бы попробовать эти инструменты.