5 инструментов для более быстрой разработки на React

5 инструментов для ускорения разработки твоих компонентов и приложений React UI.

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

Правильные инструменты могут ускорить процесс разработки. Вот 5 полезных инструментов для ускорения разработки твоих компонентов и приложений.

1. Bit

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

При создании нескольких приложений Bit позволяет разработчикам и командам экономить время, превращая компоненты в строительные блоки многократного использования. Он работает с GitHub и NPM, поэтому ты можешь легко публиковать и устанавливать компоненты из любого проекта, а также импортировать и разрабатывать компоненты из любого потребляющего репо.

Изменения компонентов можно легко синхронизировать между проектами, поскольку Bit контролирует все зависимости компонентов и может обновлять их все в любом месте. Он даже расширяет Git, позволяя объединять изменения компонентов в разных проектах.

Твоя команда может сотрудничать в центре общих компонентов, где компоненты визуализируются и могут быть легко обнаружены, опробованы и использованы в приложениях. Это устраняет накладные расходы, связанные с повторным использованием общего кода, и дает разработчикам возможность мгновенно создавать повторно используемые «коробочки Lego» из своих компонентов.

Bit - это самый быстрый и наиболее совместный способ предотвращения дублирования перезаписи компонентов, стандартизации разработки и совместной работы в команде. Технология имеет почти 14K звезд на GitHub.

2. StoryBook / Styleguidist

Storybook и Styleguidist - это среды для быстрой разработки пользовательского интерфейса в React. Оба являются отличными инструментами для ускорения разработки твоих приложений React.

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

С помощью Storybook ты пишешь в файлах JS. С Styleguidist ты пишешь примеры в файлах Markdown. В то время как Storybook показывает один вариант компонента за раз, Styleguidist может отображать несколько вариантов различных компонентов. Storybook отлично подходит для отображения состояний компонентов, а Styleguidist полезен для документации и демонстраций различных компонентов.

Вот краткое изложение.

StoryBook

Storybook - это среда быстрой разработки компонентов пользовательского интерфейса.

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

StoryBook помогает разрабатывать компоненты изолированно от твоего приложения, что также способствует лучшему повторному использованию и тестированию твоих компонентов.

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

Различные плагины могут помочь ускорить процесс разработки, так что ты можешь сократить цикл между настройкой кода и визуальным выводом. StoryBook также поддерживает React Native и Vue.js.

Styleguidist

React Styleguidist - это среда разработки компонентов с горячей перезагрузкой сервера разработки и живым руководством по стилю, в котором перечислены propTypes компонентов и показаны редактируемые примеры использования на основе файлов .md.

Он поддерживает ES6, Flow и TypeScript и работает с приложением Create React из коробки. Автоматически сгенерированные документы по использованию могут помочь Styleguidist функционировать как портал документации для различных компонентов твоей команды.

3. React DevTools

Это официальное расширение React Chrome devTools позволяет тебе проверять иерархии компонентов React в инструментах разработчика Chrome. Он также доступен как надстройка FireFox.

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

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

4. Redux devTools

Это расширение Chrome (и надстройка FireFox) - это пакет времени разработки, который предоставляет бонусы для твоего рабочего процесса разработки Redux. Оно позволяет тебе проверять каждое состояние и полезную нагрузку действия, повторно оценивая «поэтапные» действия.

Ты можешь интегрировать расширение Redux DevTools с любой архитектурой, которая обрабатывает состояние. У тебя может быть несколько хранилищ или разных экземпляров для каждого локального состояния компонента React. Ты даже можешь «путешествовать во времени», чтобы отменить действия (посмотри видео Дэна Абрамова). Сам пользовательский интерфейс журналирования можно даже настроить как компонент React.

5. Boilerplates и Kick-Starters

Несмотря на то, что эти шаблоны не совсем инструменты разработчика, они помогают быстро настроить приложение React, экономя время на сборку и другие конфигурации. Для React Есть множество starter-kits для React

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

Create React App (88K звезд)

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

Этот пакет инкапсулирует сложные конфигурации (Babel, Webpack и т. д.), Необходимые для нового приложения React, поэтому ты можешь сэкономить это время для нового приложения.

Чтобы создать новое приложение, тебе просто нужно выполнить одну команду.

Эта команда создает каталог с именем my-app внутри текущей папки. Внутри каталога он сгенерирует исходную структуру проекта и установит транзитивные зависимости, чтобы ты мог просто начать кодирование.

React Boilerplate (27K звезд)

React Boilerplate от Макса Штойбера предоставляет начальный шаблон для твоих приложений React, который ориентирован на автономную разработку и построен с учетом масштабируемости и производительности.

Он помогает создавать компоненты, контейнеры, маршруты, селекторы и саги - а также их тесты - прямо из интерфейса командной строки, в то время как изменения CSS и JS могут быть отражены мгновенно, пока ты их вносишь.

В отличие от create-react-app, этот шаблон не предназначен для новичков, а скорее предназначен для того, чтобы предоставить опытным разработчикам инструменты для управления производительностью, асинхронностью, стилем и т. д. Для создания готового к работе приложения.

React Slingshot (9,7K звезд)

Этот замечательный проект от Кори Хауса представляет собой стартовый набор/шаблон React + Redux с Babel, горячей перезагрузкой, тестированием, линтингом и многим другим.

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

Проект даже включает пример приложения, так что ты можешь начать работу, не читая слишком много документации.