使用React和Storybook构建UI组件库

使用React和Storybook构建UI组件库

这个项目使用 Create React App 创建,并结合 Storybook 构建UI组件库。

可用脚本

在项目目录中,可以运行以下脚本:

  • yarn start: 在开发模式下运行应用程序。浏览器会自动打开并展示应用。当代码发生变化时,页面会自动刷新,控制台会显示任何lint错误。
  • yarn test: 启动测试运行程序,并进入交互式监视模式。
  • yarn build: 构建生产环境下的应用程序,并将结果输出到 build 文件夹。它会对React代码进行优化,并确保构建结果具备最佳性能。构建结果会被压缩,文件名包含哈希值,方便部署。
  • yarn eject: 注意:这是一个不可逆的操作! 执行 eject 后,你将无法撤回。如果你对构建工具和配置选择不满意,可以使用 eject 命令。它会将所有配置文件和传递依赖项(webpack、Babel、ESLint等)直接复制到你的项目中,让你完全控制项目配置。

Storybook

Storybook 是一个用于开发、展示和测试UI组件的工具。它提供了一个独立的开发环境,让你可以专注于构建和测试组件,而无需担心应用程序的具体逻辑。

总结

这个项目提供了一个使用React和Storybook构建UI组件库的模板。你可以使用它快速搭建自己的组件库,并利用Storybook进行开发和测试。

zip
ui-components-master.zip 预估大小:27个文件
folder
ui-components-master 文件夹
folder
public 文件夹
file
manifest.json 492B
file
index.html 2KB
file
robots.txt 67B
file
favicon.ico 3KB
file
logo512.png 9KB
file
logo192.png 5KB
file
yarn.lock 609KB
folder
src 文件夹
folder
stories 文件夹
folder
components 文件夹
file
Button.stories.mdx 3KB
file
Flexbox.stories.mdx 2KB
file
logo.svg 3KB
file
index.css 314B
folder
components 文件夹
file
Button.js 5KB
file
Box.js 5KB
file
index.js 64B
file
App.js 555B
file
App.test.js 280B
file
setupTests.js 255B
file
App.css 564B
file
serviceWorker.js 5KB
file
index.js 503B
folder
.storybook 文件夹
file
main.js 373B
file
preview.js 991B
file
theme.js 1KB
file
manager.js 958B
file
README.md 3KB
file
.gitignore 310B
file
package.json 1KB
zip 文件大小:265.2KB