Привет, это снова я и новый пост от меня!
В последнее время я работал над проектом, который генерирует живую документацию по интерфейсным компонентам для приложений, созданных с помощью create-react-app, и эта среда разработки пользовательского интерфейса называется Storybook.
Прежде всего, это помогает избежать дублирования кода и упростить понимание того, какие компоненты уже есть, что они делают и как используются.
Во-вторых, он позволяет отображать и тестировать поведение компонентов с помощью витрины, что очень полезно для получения быстрой обратной связи по всему, что мы разрабатываем.
Еще одна замечательная вещь: React Storybook - изолированное приложение. После объявления историй вы можете начать создавать компоненты изолированно с помощью быстрой итерации, что позволяет нам создавать документацию по компонентам (руководство по стилю), не делая этого явно, и поддерживать ее в актуальном состоянии.
Пришло время показать вам, как это работает и какие компоненты задействованы.
Но прежде чем попробовать мой пример, вам нужно установить и запустить Storybook с React. Об этом можно прочитать здесь.
После того, как вы установили React Storybook, давайте посмотрим на мою реализацию нижнего колонтитула:
Выше вы видите стандартный компонент React. Следующим шагом будет создание файла Footer.stories.js и добавление компонента Footer в истории:
Чтобы увидеть результат, вы должны ввести эту команду «npm run storybook» в путь к вашему проекту в строке консоли, что будет запускать это на вашем локальном хосте.
Он может работать с приложениями, которые имеют аналогичную конфигурацию Webpack для приложения create-response-app, например, для веб-приложений Angular или Vue.
Сообщите мне, что вы думаете об использовании Storybook с React. Спасибо за чтение! Если вам понравилась статья, я буду счастлив, если вы поделитесь ею в своих любимых социальных сетях.
Этот пост изначально был опубликован в моем блоге.
