Инструменты необходимые React разработчику

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

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

Storybook

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

React Cosmos

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

props

‘ов,

context

и

state

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

React Styleguidist

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

Catalog

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

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

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

Leave a Comment

Чтобы не пропустить новые статьи, оставь свой Email

Поздравляем вы подписаны на новости ТехноДжем!

TВо время отправки данных произошла ошибка. Попробуйте ещё раз

Оставляя свою почту