![Инструменты необходимые React разработчику Инструменты необходимые React разработчику](http://tehnojam.ru/uploads/images/00/00/01/2018/03/04/d23577c97d.jpg)
Как разработчик на react, я верю, что каждый работающий над react проектом, должен разрабатывать все компоненты отдельно, чтобы использовать все преимущества философии этого потрясающего фронт-энд фреймворка. Разработка всех компонентов по отдельности может помочь вам получить контроль над рабочим процессом вашего проекта, вы сможете разрабатывать и тестировать каждый компонент в отдельности, не беспокоясь о всей логике проекта, более того, при таком подходе вы можете улучшить повторное использование компонентов, тестируемость и скорость разработки , что упростит организацию и распределение задач внутри вашей команды.
Если вы только планируете начать разработку в react и впервые слышите о storybook, cosmos или styleguidist, эта статья — лучшее с чего вы могли бы начать, но если вы уже слышали об этом или, возможно, работали с чем то из них эта статья также может быть полезна, ведь всегда неплохо иметь под рукой альтернативу.
Итак приступим.
Storybook
![Инструменты необходимые React разработчику Инструменты необходимые React разработчику](https://res.cloudinary.com/practicaldev/image/fetch/s--8RXA5zxc--/c_limit{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cf_auto{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cfl_progressive{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cq_66{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/v9z9yzjj3kkck71f1bgn.gif)
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 используется для хранения состояния компонента.
![Инструменты необходимые React разработчику Инструменты необходимые React разработчику](https://res.cloudinary.com/practicaldev/image/fetch/s--zYfUrddR--/c_limit{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cf_auto{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cfl_progressive{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cq_66{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ej89i5kjh4gln38vlfyf.gif)
Это полезно если вы уже запустили свой проект и вам нужно добавить новые функции к своим компонентам. Кроме того, вы можете отслеживать изменения в режиме реального времени, взаимодействуя с работающими экземплярами, для обработки этих функций, Cosmos использует архитектуры fixture и proxy.
React Styleguidist
![Инструменты необходимые React разработчику Инструменты необходимые React разработчику](https://res.cloudinary.com/practicaldev/image/fetch/s--OSgJLjfw--/c_limit{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cf_auto{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cfl_progressive{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cq_66{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wauyy3ez7q8syfsrqwxs.gif)
React Styleguidist — это среда разработки компонентов с dev сервером(имеющим горячую перезагрузку) и отличной документацией. Он перечисляет прототипы компонентов и показывает живые, редактируемые примеры использования, основанные на файлах Markdown, и он работает с react создавая приложения «из коробки».
Catalog
![Инструменты необходимые React разработчику Инструменты необходимые React разработчику](https://res.cloudinary.com/practicaldev/image/fetch/s--qpygO8_5--/c_limit{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cf_auto{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cfl_progressive{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cq_66{33d8302486bd10b0fde64d2037652320e6f176a736d71849c0427b0d7398501a}2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/w2rrz8y74bsz8s9kpzre.gif)
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»
Storybook действительно мощный инструмент. Удобен тем, что позволяет не только просматривать библиотеку компонентов, а видеть состояния компонентов и тестировать их.