11.1K ·GitHub
Что это такое?
React Styleguidist — среда разработки компонентов с сервером разработки с горячей перезагрузкой и «живым» гайдом по стилю, которым можно поделиться с командой. Он показывает propTypes компонентов и живые, редактируемые примеры использования, взятые из файлов Markdown.
React Styleguidist — среда разработки компонентов с сервером разработки с горячей перезагрузкой и «живым» гайдом по стилю, которым можно поделиться с командой. Он показывает propTypes компонентов и живые, редактируемые примеры использования, взятые из файлов Markdown.Это библиотека компонентов или инструмент для документации?Это инструмент для документации и среды разработки, который создаёт сайт с гайдом по стилю из ваших существующих React-компонентов, а не библиотека UI-компонентов.
Это инструмент для документации и среды разработки, который создаёт сайт с гайдом по стилю из ваших существующих React-компонентов, а не библиотека UI-компонентов.Как запустить это в моём проекте?Установите Styleguidist и укажите ему файлы ваших компонентов, следуя руководствам «Getting Started» и «Locating components», затем запустите его CLI сервера разработки, чтобы посмотреть живой гайд по стилю.
Установите Styleguidist и укажите ему файлы ваших компонентов, следуя руководствам «Getting Started» и «Locating components», затем запустите его CLI сервера разработки, чтобы посмотреть живой гайд по стилю.Нужно ли мне самому настраивать webpack?Если вы используете Create React App, всё работает из коробки, а для других конфигураций webpack нужно настроить самостоятельно, чтобы Styleguidist понимал, как загружать ваш код.
Если вы используете Create React App, всё работает из коробки, а для других конфигураций webpack нужно настроить самостоятельно, чтобы Styleguidist понимал, как загружать ваш код.Работает ли это и с компонентами Vue?Нет, этот проект только для React; для проектов Vue нужна отдельная интеграция «Vue Styleguidist».
Нет, этот проект только для React; для проектов Vue нужна отдельная интеграция «Vue Styleguidist».Может ли сервер разработки иметь свои бэкенд-эндпоинты?Да, в примерах показан гайд по стилю с собственными эндпоинтами Express, так что вы можете расширить сервер разработки своими API-маршрутами.
Да, в примерах показан гайд по стилю с собственными эндпоинтами Express, так что вы можете расширить сервер разработки своими API-маршрутами.Есть ли сторонние дополнения для тестирования?Snapguidist добавляет снапшот-тестирование, а react-styleguidist-visual добавляет автоматическое визуальное тестирование с использованием Puppeteer и pixelmatch.
Snapguidist добавляет снапшот-тестирование, а react-styleguidist-visual добавляет автоматическое визуальное тестирование с использованием Puppeteer и pixelmatch.Есть ли подтверждение, что это используют в реальных проектах?В разделе Showcase перечислены реальные пользователи, например Rumble Charts, Semantic UI Components for React и Bulma Components.
В разделе Showcase перечислены реальные пользователи, например Rumble Charts, Semantic UI Components for React и Bulma Components.Как пишутся примеры компонентов?Примеры использования пишутся как живые, редактируемые блоки кода внутри файлов документации Markdown рядом с каждым компонентом.
Примеры использования пишутся как живые, редактируемые блоки кода внутри файлов документации Markdown рядом с каждым компонентом.What are similar projects?docz, chakra-ui, fluentui, base-ui, Monocharts, react-redux-starter-kit, storybook, ink-kit
docz, chakra-ui, fluentui, base-ui, Monocharts, react-redux-starter-kit, storybook, ink-kitWhich topics is it in?hmr, developer-experience, styleguide, documentation-tool, react-components, express, webpack, design-system, component-library, ui-components, documentation, hacktoberfest
hmr, developer-experience, styleguide, documentation-tool, react-components, express, webpack, design-system, component-library, ui-components, documentation, hacktoberfest