![](https://habrastorage.org/webt/4d/3e/y1/4d3ey1ojfkeur2osmlhthyndfoy.png)
Для создания пользовательских интерфейсов существует большое количество инструментов (ваш К.О., не благодарите). Один из наиболее эффективных — React. Наверное, на Хабре нет нужды рассказывать о том, что это такое и зачем.
Сегодня мы решили опубликовать подборку классных вспомогательных элементов для разработчиков, которые используют React. Вероятно, подборка не исчерпывающая, но зато позволит дополнить инструментарий. Если вы используете еще что-то, чего нет в подборке, делитесь в комментариях, а мы скажем дружно спасибо и добавим классные предложения в подборку. Предупреждение — под катом довольно много гифок, у кого платный трафик — осторожнее, ребята.
Итак, бросаемся в омут с головой, не откладывая на потом:
React Datasheet
Похожий на Excel инструмент, который можно встраивать в свои приложения на React. Позволяет использовать математические формулы (основа — math.js). В ячейки таблицы можно добавлять выпадающие меню и кнопки.
React Native for Web
Ну а этот компонент позволяет добавлять индикаторы активности, кнопки, прогресс бары (индикаторы выполнения), переключатели и многое, многое другое.
Reactide
Reactide описывают как первый специализированный IDE-инструмент для разработки приложений c React. И действительно — это кросс-платформенное десктопное приложение, позволяющее быстро рендерить проекты без серверной конфигурации, что снижает сложность разработки и экономит время.
Storybook
![](https://habrastorage.org/getpro/habr/post_images/53a/8ed/3e9/53a8ed3e9ba9c2c82a1af4128e75fb0a.gif)
Этот инструмент является одним из наиболее мощных и известных. С его помощью собираются компоненты. Разработчики говорят о нем как об интерактивном компоненте разработки пользовательского интерфейса. Он поддерживает React, React-native, Vue и Angular. Инструмент дает возможность просматривать все компоненты проекта. В комплекте — большое количество дополнений для разработки документов, компонентов, тестирования.
React Styleguidist
![](https://habrastorage.org/getpro/habr/post_images/0bd/fcb/1f7/0bdfcb1f79408fbadaad0b83ccb1818e.gif)
Styleguidist представляет собой среду для разработки компонентов с dev-сервером (с возможностью горячего ребута) и отличной документацией. Инструмент предоставляет возможность посмотреть на примеры использования различных компонентов.
Catalog
![](https://habrastorage.org/getpro/habr/post_images/02b/489/cf2/02b489cf24140cde08999a9008e1480f.gif)
Ну а здесь у нас — инструмент, который позволяет создавать ливстайл руководства для цифровых продуктов. Он дает возможность объединить документацию и активы с актуальными компонентами. Его стоит использовать, когда есть необходимость показать визуальные элементы системы.
React Studio
Это дизайнерский инструмент, позволяющий получить на выходе качественный react-проект без кодинга. Приложение совместимо со Sketch, что еще добавит радости и удовольствия разработчику. Если вы не кодер — однозначно стоит глянуть.
React Cosmos
![](https://habrastorage.org/getpro/habr/post_images/063/db4/c36/063db4c362b8fe7352f23392909054c8.gif)
Cosmos сканирует весь проект и разделяет его на компоненты, позволяя рендерить их в любых комбинационных сочетаниях props, context, state. Это необходимо в том случае, если проект уже запущен, но необходимо добавить новые функции к компонентам. При этом разработчик получает возможность отслеживать изменения в реальном времени.
ORY Editor
Основанный на React и Redux мобильный редактор контента. Его можно добавить в любой момент в функционал разрабатываемого сайта. Изначально инструмент был создан для крупной открытой образовательной платформы из Германии. Ну а немцы славятся своей аккуратностью, инструмент получился просто отличным.
React Sight
![](https://habrastorage.org/getpro/habr/post_images/db5/19a/bfe/db519abfece52354751945086f6d9d8a.gif)
Отличный инструмент для визуализации, который позволяет очень быстро настроить все, что необходимо разработчику.
Reselect Devtools
![](https://habrastorage.org/getpro/habr/post_images/815/717/cd2/815717cd2691522a1fb2f056d03c38b0.png)
И еще один инструмент визуализации, который используется для отслеживания слоев кэширования. Никаких проблем и забот — все отображается весьма наглядным образом.
Redux DevTools Profiler Monitor
![](https://habrastorage.org/getpro/habr/post_images/da7/ddd/8d3/da7ddd8d3d2d78c8870a87f4a5c23757.gif)
Отличный инструмент, позволяющий запускать и останавливать работу профиля Javascript. Создан инструмент на базе Redux.
Periscope
![](https://habrastorage.org/getpro/habr/post_images/dc0/c26/4fb/dc0c264fb7f3719935d2c5d7ea0bc557.png)
Мониторинг событий Redux на основе временной шкалы.
redux-promise-middleware-times
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logTimes from 'redux-promise-middleware-times';
const store = createStore(thunk, promiseMiddleware(), logTimes());
Крохотный аддон к redux-promise-middleware. Он записывает время, в течение которого выполняется определенное событие.
React Monocle
![](https://habrastorage.org/getpro/habr/post_images/470/a65/721/470a6572187dc57a91597b80c0f5a0c7.gif)
Мощный инструмент для визуализации, который показывает отдельные компоненты, их состояние, статус Redux и совмещает это в понятной схеме.
Hygen
![](https://habrastorage.org/getpro/habr/post_images/28e/e75/29c/28ee7529c9625cf6eb61ce8e7c62c442.png)
Фреймворк генератора кода, который можно использовать практически в любом проекте для уменьшения размера шаблона. Такой фреймворк весьма ко двору для тех, кто работает с React и Redux. Количество шаблонов здесь может быть очень большим, ведь они создаются едва ли не на каждом этапе работы.
В целом, мы считаем, что эта далеко не полная подборка может стать неплохим подспорьем в нелегком труде разработчика интерфейса. Ну а чтобы работа стала еще более эффективной, можно пройти пару-тройку курсов Skillbox.
![](https://habrastorage.org/webt/a-/lc/ia/a-lciamy-fqodfq0pwnkdqlgpgy.jpeg)