7 первоклассных инструментов для разработчиков React

Библиотека пользовательского интерфейса JavaScript для Facebook породила экосистему сопутствующих инструментов и фреймворков.

Библиотека React JavaScript, разработанная Facebook, декларативная компонентная технология для создания веб-интерфейсов, в последние годы завоевала популярность у разработчиков.

Предлагая разработчикам эффективность и гибкость, React - он же React.js - дебютировал для публики в мае 2013 года. С тех пор библиотека с открытым исходным кодом была отмечена более 135 000 раз на GitHub и разветвлена более 25 000 раз.

Неудивительно, что вокруг React возникла экосистема сопутствующих инструментов, включая IDE и ряд фреймворков. Вот 7 ключевых инструментов, доступных для разработчиков, которые хотят использовать React при создании своих веб-приложений.

React Sight

React Sight - это расширение браузера Chrome, которое обеспечивает просмотр дерева иерархии компонентов приложения React в реальном времени. Он поддерживает React Router и Redux. React Sight ищет средства визуализации React и исправляет средство визуализации для сбора данных об изменении состояния. Создатели React Sight создали этот инструмент, потому что они увидели необходимость в инструменте для визуального представления структуры приложения. React Sight, предназначенный для простоты использования, включает фильтры, которые позволяют просматривать только те компоненты, которые вы хотите видеть.

React Developer Tools

React Developer Tools от команды React в Facebook позволяет проверять дерево React, включая иерархию и состояние компонентов. React Developer Tools 4, выпущенный в августе 2019 года, доступен для Chrome, Firefox и (Chromium) Edge. Facebook пообещал значительный прирост производительности и улучшенную навигацию в новой версии. Возможности включают:

Полная поддержка React Hooks, которые позволяют использовать состояние и другие функции React без написания класса. Предлагается поддержка проверки вложенных объектов.
Механизм фильтрации компонентов из дерева, упрощающий навигацию по глубоко вложенным иерархиям. Узлы хоста, такие как HTML <div>, по умолчанию скрыты, но фильтр можно отключить.
React Developer Tools доступен как расширение браузера в Chrome и Firefox.

Reactide

Reactide - это специальная IDE для веб-разработки на React. Используя интегрированный сервер Node.js и настраиваемый симулятор браузера, пользователям Reactide не нужно возиться с настройкой серверов или инструментами сборки. Им также не нужно переключаться между браузером, IDE и сервером. Возможность перезагрузки в реальном времени позволяет разработчикам отслеживать изменения прямо в среде разработки. Другие возможности включают:

• Дерево визуальных компонентов для управления состоянием в приложении.
• Интегрированный терминал для запуска команд в bash для Unix и cmd для Windows.
• Нестандартную перезагрузку горячего модуля.

Redux

Контейнер предсказуемого состояния для приложений JavaScript, Redux помогает разработчикам писать приложения, которые работают согласованно в различных средах, включая веб-клиент, веб-сервер и собственные приложения. Redux работает с React или любой другой библиотекой представлений. Redux имеет размер 2 КБ, включая зависимости, и использует экосистему надстроек. Возможности Redux включают:

• Централизация состояния и логики приложения, обеспечивающая такие возможности, как выполнение / повтор и сохранение состояния.
• Отслеживание того, когда, почему, где и как изменилось состояние приложения.
• «Отладка путешествия во времени», которая может отправлять отчеты об ошибках на сервер.

Next.js

Next.js, получивший название «среда React для предприятия», предлагает такие возможности, как рендеринг на стороне сервера, маршрутизация на основе файловой системы и экспорт статических сайтов. Платформа оптимизирована для меньших размеров сборки и более быстрой компиляции. Разработчики могут использовать сборщик модулей Webpack и компилятор Babel JavaScript. Выпущенный в июле 2019 года Next.js 9 предлагает следующие функции:

• Динамическая маршрутизация для приложений на основе файловой системы.
• Поддержка TypeScript с нулевой конфигурацией.
• Маршруты API для создания конечных точек серверных приложений с использованием горячей перезагрузки и унифицированного конвейера сборки.

Craft.js

Craft.js - это среда React для создания расширяемых редакторов страниц с перетаскиванием. Редакторы страниц предоставляют возможность предложить отличный пользовательский интерфейс, но, по словам разработчиков Craft.js, создание такого редактора может быть «ужасным» опытом. Craft.js призван упростить этот процесс.

Craft.js модулирует строительные блоки редактора страниц, добавляет систему перетаскивания и обрабатывает отрисовку, перемещение и обновление пользовательских компонентов. Разработчики проектируют редактор так же, как и любое другое интерфейсное приложение в React, и имеют точный контроль над поведением и внешним видом редактора страниц. Предоставляется API для поддержки и управления состоянием редактора.