John Doe

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

Если вы только планируете начать разработку в react и впервые слышите о storybook, cosmos или styleguidist, эта статья — лучшее с чего вы могли бы начать, но если вы уже слышали об этом или, возможно, работали с чем то из них эта статья также может быть полезна, ведь всегда неплохо иметь под рукой альтернативу.
Итак приступим.

Storybook

Storybook — один из самых известных и мощных инструментов react для сборки компонентов, описанных на GitHub как интерактивный компонент разработки пользовательского интерфейса поддерживающий react, react-native, vue и angular. Другими словами, storybook представляет собой среду разработки компонентов пользовательского интерфейса. Он позволяет просматривать все компоненты вашего проекта и просматривать разные состояния каждого компонента. Storybook поставляется с большим количеством дополнений для разработки компонентов, документации, тестирования и многого другого.
Вы можете использовать storybook-preview и storybook-deploy для генерации и развертывания ваших историй в качестве статического веб-сайта с документацией.

React Cosmos

Cosmos сканирует ваш проект на компоненты и позволяет вам рендерить компоненты в любых комбинациях props’ов, context и state.

Props — это данные, которые оказывают влияние на отображение и поведение компонента. Props могут быть как опциональны так и обязательны и они обеспечиваются через родительский компонент. В идеале, если Вы передаете своему компоненту одинаковые Props — он отрендерит одно и тоже.

Context — это недокументированная особенность React и похожа на props, но разница в том, что props передается исключительно от родительского компонента к дочернему и они не распространяются вниз по иерархии, в то время как context просто может быть запрошен в дочернем элементе.

Каждый React компонент имеет state. Это что-то внутри компонента. Только сам компонент может читать и писать в свой собственный state и как видно из названия — state используется для хранения состояния компонента.

Это полезно если вы уже запустили свой проект и вам нужно добавить новые функции к своим компонентам. Кроме того, вы можете отслеживать изменения в режиме реального времени, взаимодействуя с работающими экземплярами, для обработки этих функций, Cosmos использует архитектуры fixture и proxy.

React Styleguidist

React Styleguidist — это среда разработки компонентов с dev сервером(имеющим горячую перезагрузку) и отличной документацией. Он перечисляет прототипы компонентов и показывает живые, редактируемые примеры использования, основанные на файлах Markdown, и он работает с react создавая приложения «из коробки».

Catalog

Catalog — это инструмент для создания ливстайл руководств для цифровых продуктов. Он объединяет проектную документацию и активы с реальными и живыми компонентами в одном месте. Я считаю, что этот инструмент наиболее эффективен, когда вам нужно представить цвета вашей системы, типографику, аудио, видео и, конечно же, ваш react компонент внутри ваших markdown страниц с несколькими параметрами размера экрана.

Так же есть ряд других инструментов таких как: Atellier, Carte Blanche, React BlueKit, React Cards, React-demo.

Источник статьи на английском: https://dev.to/ — «Tools you need to use in your react components development»