![](https://habrastorage.org/getpro/habr/post_images/3b7/95e/932/3b795e9327c6ad7cbe21fa04eb174979.jpg)
Давайте обсудим несколько отличных инструментов, которые повышают продуктивность разработчиков React и улучшают качество работы.
Обычно, когда я начинаю новый проект, то использую собственный шаблон для тех инструментов, которые добавил в этот список. Также я работаю и с другими инструментами, вроде Material UI. Я их изучил, создал с их помощью несколько приложений и реализовал пару небольших проектов, после чего решил поделиться результатами.
Итак, взглянем на итоговый список.
ESLint
![](https://habrastorage.org/getpro/habr/post_images/8db/9d4/ae4/8db9d4ae4b7ed35ecf4640daacfe3780.png)
ESLint может многое изменить для любого JavaScript-разработчика, включая поклонников React. Сервис предлагает умные алгоритмы, которые быстро анализируют код, выискивая возможные баги.
Кроме того, он позволяет автоматически исправлять найденные проблемы без изменений синтаксиса.
Для начала работы я бы рекомендовал использовать конфигурацию, предложенную разработчиками из Airbnb. В ней есть:
- Встроенная поддержка библиотеки React (например, поддержка правил использования хуков).
- Фокус на лучших практиках.
ESLint — must-have для любого проекта, а конфигурация от Airbnb — одна из моих любимых. Я кое-что добавил в нее, но 90% осталось от начальной конфигурации.
Bit
![](https://habrastorage.org/getpro/habr/post_images/393/935/09a/39393509abd61e6eebdf38cfae2dbde3.png)
Bit предоставляет такую нужную для React-разработчиков вещь, как платформа совместной работы. Она позволяет командам работать вместе над отдельными компонентами.
Это утилита командной строки, которая позволяет повторно писать используемый код. У Bit полностью открытый исходный код, и это одна из причин его популярности.
Большая часть функций относится к созданию атомарных компонентов, поэтому ими легко можно поделиться с другими разработчиками. Кроме того, есть и возможность проверки зависимостей у компонентов, тестируя их отдельно от основного проекта.
Create React App
![](https://habrastorage.org/getpro/habr/post_images/6d7/497/66f/6d749766f4f7821fa67a0c4d00b1f927.png)
Будучи React-разработчиком, вы хорошо знаете, сколько времени уходит на то, чтобы начать новый проект. Для экономии времени разработчики Facebook предложили Create React App.
Это начальный «конструктор», который дает возможность сосредоточиться на разработке, а не настройке React. Все, что нужно сделать, — выполнить команду npx create-react-app my-app. После чего у вас есть полностью настроенное приложение для проекта.
Create React App значительно повысит вашу эффективность, если вы работаете в качестве React-фрилансера одновременно для нескольких заказчиков.
React Cosmos
![](https://habrastorage.org/getpro/habr/post_images/be8/7f8/c30/be87f8c30fd949757a42fd7865c66196.png)
React Cosmos — окружение для разработчика, которое предназначено для создания масштабируемых высококачественных пользовательских интерфейсов.
Сервис дает возможность без проблем заниматься прототипированием и тестированием отдельных компонентов интерфейсов. Кроме того, с ним можно выполнять итерации без опасения «сломать» код. Он облегчает процесс отладки, изолируя компоненты.
React Cosmos лучше использовать для работы с приложениями корпоративного уровня. Разделение проекта на небольшие многократно используемые компоненты дает возможность писать качественный код, который легко поддерживать.
React Toolbox
![](https://habrastorage.org/getpro/habr/post_images/18b/852/007/18b8520076a2e11f0fa1f1d492fcf756.png)
В начале статьи я упоминал, что использую Material UI для большинства проектов. Тому есть причина: мне нравится Material Design, и Material UI — то, что меня полностью устраивает.
Но есть и альтернативы. Одна из них — React Toolbox. Это набор часто используемых компонентов, разработанных с помощью Material Design. В нем применяются CSS-модули для большей гибкости.
На момент написания статьи React Toolbox включает 28 компонентов. Вот некоторые из них: «Панель приложений», «Выбор даты», «Переключатель» и «Снэк-бар».
React Bootstrap
![](https://habrastorage.org/getpro/habr/post_images/fc7/268/254/fc7268254b83257be474314dcb6f2ba2.png)
Mobile-friendly веб-сайт — современный стандарт. Пользователи ждут, что ваш сайт будет хорошо работать на любом устройстве. Сайты с адаптивным дизайном выделяют даже поисковики.
Многие разработчики используют Bootstrap для создания адаптивных, масштабируемых веб-сайтов с профессиональным дизайном. Проблема в том, что Bootstrap поставляется с собственными компонентами, которые не интегрированы с React.
Решение — пакет с открытым исходным кодом React Bootstrap. Все его Bootstrap-компоненты модифицированы специально для разработчиков React.
React Slingshot
![](https://habrastorage.org/getpro/habr/post_images/fc5/653/876/fc565387655faf2788a4be0fe958af8e.png)
Хотите ускорить разработку приложений React? Попробуйте оценить React Slingshot. Это шаблон, который объединяет React, Redux и Babel.
Наиболее важной особенностью Slingshot, которая выделяет его среди других инструментов, является быстрая обратная связь. Эта особенность автоматизирует процесс линтинга, модульных тестов и горячей перезагрузки при каждом обновлении приложения. Таким образом, вы можете сфокусироваться на бизнес-логике, а не посторонних задачах.
Reactide
![](https://habrastorage.org/getpro/habr/post_images/9bf/e4f/038/9bfe4f0380a22807d3c469ae4eccee3e.png)
Говорят, разработчик настолько хорош, насколько хорош его редактор. Может, это и не совсем так, но редактор очень помогает в нашей работе. Лично я — большой поклонник JetBrains и WebStorm. Мой выбор — IDE, но время от времени я пробую и альтернативы.
Например, я нашел Reactide — это IDE для React. Я был очень удивлен этой находке и попробовал инструмент.
Оказалось, что у него есть интересные особенности. Например, вы можете визуализировать компоненты вашего проекта прямо в IDE. Также есть встроенный сервер Node.js, который интегрирован с симулятором браузера.
Интересный инструмент, хотя я и не думаю, что полностью переключусь на него. Но это хороший вариант для тех, кто работает с React или изучает его и не хочет столкнуться с проблемами еще на этапе конфигурации.
React Testing Library
![](https://habrastorage.org/getpro/habr/post_images/279/b3f/9e5/279b3f9e561c3fd2c2d5f4aa2f0a457a.png)
«Сначала тесты!» — то, что я твержу постоянно.
Другими словами, иметь набор инструментов для тестирования — важно. React Testing Library — это небольшая библиотека. Она позволяет проверить код React без особых проблем. Библиотека проста в использовании и добавляет возможности стандартным библиотекам вроде react-dom и react-dom/test-utils.
Отличная документация с несколькими хорошими примерами позволит быстро приступить к работе.
Storybook
![](https://habrastorage.org/getpro/habr/post_images/447/76d/aa1/44776daa1683fe9af22fb833d52dca48.png)
Storybook предоставляет собой интерактивную среду разработки, в которой вы можете создавать новые компоненты, тестировать их или выбирать существующие компоненты из библиотеки.
Storybook достаточно гибкий, чтобы работать с любым основным фреймворком JavaScript. Например, React, Vue.js, Angular, Svelte, Marko и даже с необработанным HTML.
Самое лучшее в Storybook — то, что он поставляется с различными дополнениями. Вот ряд дополнений, которые мне кажутся интересными:
- google-analytics (добавляет поддержку Google Analytics для компонентов);
- jest;
- storyshots(проверка компонентов с использованием снепшотов);
- viewport (изменение разметки для адаптивных компонентов)
Надеюсь, вы оцените этот список. Если вы пользуетесь другими классными инструментами, которые не упомянуты в тексте, напишите о них в комментариях!
DenisTrunin
Reactide — судя по гитхабу его бросили уже год назад. Вряд ли продуктивность при его использовании повысится