react-styleguidist README

The project's README from github.com/styleguidist/react-styleguidist. As one markdown file: README.md.

React Styleguidist

Isolated React component development environment with a living style guide

npm CI status Codecov Join the chat at https://gitter.im/styleguidist/styleguidist Discord Open Source Helpers

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide.

React Styleguidist in action

Washing your code. A book on clean code for frontend developers

Usage

Advanced documentation

Examples

Showcase

Real projects using React Styleguidist:

Integration with other tools

Third-party tools

Resources

Change log

The change log can be found on the Releases page.

Contributing

Everyone is welcome to contribute. Please take a moment to read the contributing guidelines and the developer guide.

Sponsoring

Become a sponsor and get your logo on our Readme on GitHub with a link to your site.

Become a backer get your image on our Readme on GitHub with a link to your site.

Buy Me A Coffee

Authors and license

Artem Sapegin and contributors.

Logo by Sara Vieira and Andrey Okonetchnikov.

MIT License, see the included License.md file.

react-styleguidist (styleguidist/react-styleguidist)

Searching Database…

这是什么?React Styleguidist 是一个组件开发环境,带有支持热重载的开发服务器,以及可以与团队共享的活的样式指南。它会列出组件的 propTypes,并展示从 Markdown 文件中读取的、可实时编辑的使用示例。
这是组件库还是文档工具?它是一个文档兼开发环境工具,可以根据你现有的 React 组件生成样式指南网站,本身并不是一个 UI 组件库。
怎样才能在我的项目里跑起来?安装 Styleguidist,并按照 Getting Started 和 Locating components 指南指定你的组件文件位置,然后运行其开发服务器命令行工具,即可查看实时的样式指南。
我需要自己配置 webpack 吗?如果你使用 Create React App,开箱即可使用;但对于其他项目配置,你需要自己配置 webpack,好让 Styleguidist 知道如何加载你的代码。
它也支持 Vue 组件吗?不支持,本项目只适用于 React;Vue 项目需要使用单独的 “Vue Styleguidist” 集成。
开发服务器能否自定义后端接口?可以。示例展示了带有自定义 Express 接口的样式指南,因此你可以用自己的 API 路由扩展开发服务器。
有没有用于测试的第三方扩展?Snapguidist 提供快照测试,react-styleguidist-visual 则使用 Puppeteer 和 pixelmatch 提供自动化视觉测试。
有没有实际项目在使用它的证明?Showcase 列出了一些真实的使用者,例如 Rumble Charts、Semantic UI Components for React 和 Bulma Components。
组件示例是怎样编写的?使用示例以可实时编辑的代码块形式,写在每个组件旁边的 Markdown 文档文件中。
Size
25.8 MB
Stars
11.1K
Age
11y
Commits · 90 Days