React Speed Coding Storybook 实践：用独立 story 隔离开发 React 组件，预览效率提升 3 倍

React Speed Coding Storybook 实践用独立 story 隔离开发 React 组件预览效率提升 3 倍【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcodingReact Speed Coding 是一个包含 30 个可复用 React 组件、15 个章节和 3 个单页应用的开源学习项目。本文以它为范例讲解如何用Storybook为每个 React 组件建立独立的 story 预览环境——不启动整个应用、不经过路由、不等待数据改完即所见组件开发与预览效率最高可提升 3 倍。为什么需要 React 组件独立预览在传统开发方式里想预览一个按钮或一张卡片你必须启动开发服务器在浏览器里逐级点进对应的路由页面等页面数据加载完成再在一层层布局中「找到」你正在改的那个组件React Speed Coding 的主站就带有完整的布局、导航和真实数据流组件嵌套在多层容器之中Storybook 改变了这一切它给每个组件准备一个隔离的预览页即一个 story所有组件出现在左侧列表中点击即看。你写的 story 和主应用完全解耦组件改一行预览页立刻刷新。Storybook 快速配置3 步接入 React 项目整个接入过程只涉及 3 个文件改动全部集中在package.json第 1 步添加依赖package.json的devDependencies中声明了kadira/storybook早期包名对应现在的storybook/react。第 2 步添加两个 npm 脚本storybook: start-storybook -p 9001 -s ./app/public, storybuild: build-storybook -s ./app/public -o ./.storybook/build这里有个新手容易忽略的关键参数-s ./app/public把静态资源目录挂载给了 Storybook。组件在 story 里引用的字体、图标、图片依然可用预览效果与真实应用一致。第 3 步启动预览npm run storybook打开http://localhost:9001所有 story 已按组件名分组排列在左侧。 想跟着动手实践先克隆配套代码仓库git clone https://gitcode.com/gh_mirrors/re/reactspeedcoding用独立 story 隔离开发 React 组件3 个真实示例项目的app/stories/目录下有 3 个 story 文件分别对应「最小示例」「真实数据组件」「有状态交互组件」三种典型场景示例 1Button —— 最小 story 交互日志app/stories/button.js只用不到 10 行代码就注册了两个 storywith text, default color默认配色文字按钮with icon, primary color图标主色按钮其中第一个 story 给onClick绑定了action(clicked)每次点击都会在 Storybook 底部的交互面板里自动记录无需打开控制台手动调试——这就是 story 隔离环境的直观价值 交互可观测。示例 2PostSummary —— 真实组件 默认数据app/stories/PostSummary.js包裹的是真实业务组件app/components/PostSummary.jsx。这个组件声明了defaultProps默认数据直接取自app/content/PostData.js所以 story 里只需一行PostSummary /零 prop 传递即可看到完整效果。经验总结给组件写合理的defaultProps它天然就是可预览的。示例 3Workflow —— 有状态组件的交互测试app/components/Workflow.jsx是一个带内部状态的步骤切换组件步骤数据默认来自app/fixtures/workflow/steps.json。app/stories/Workflow.js让它可以脱离页面独立运行直接点击测试「下一步 / 切换场景」的完整交互流独立 story 带来的 3 个实际好处好处说明⚡ 反馈快不用启动路由、布局、数据请求改完立即预览 零耦合story 与主应用入口分离webpack 生产构建只从app/index.jsx打包app/stories/目录不会增大线上包体积 易分享npm run storybuild可生成静态站点直接发给团队浏览不需要对方装环境新手上手清单从克隆仓库到第一个 storygit clone https://gitcode.com/gh_mirrors/re/reactspeedcoding执行npm install安装依赖执行npm run storybook打开http://localhost:9001在app/stories/下新建文件用storiesOf(组件名, module).add(场景名, () ...)注册你的第一个 story——左侧列表会自动发现它无需任何额外配置小结用 Storybook 为 React 组件建立独立 story本质是把「组件开发」和「页面集成」两件事解耦组件在 story 里打磨到满意再装进真实页面。React Speed Coding 的 3 个示例覆盖了按钮、数据卡片、有状态交互组件三类最常见场景照着app/stories/目录学习几行代码就能搭起属于自己的组件预览工作台。【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcoding创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考