文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

在 React 中使用 Storybook，构建强大的自定义 UI 组件

构建第一个 Storybook 组件 Storybook使用组件驱动开发(CDD)方法来创建UI组件。按照这种方法，您可以模块化地构建，从基本组件开始，逐步将它们组合成复杂的屏幕和应用程序。...如果你还没有一个React应用来添加Storybook，你可以先通过初始化Next.js应用来创建一个。...在React应用中初始化Storybook 现在我们已经启动并运行了React应用程序，我们需要安装并设置Storybook的本地实例。...现在我们有了无样式的组件，让我们用一些CSS给它增添一些风味。 一个CSS对象可以用来动态地在不同的变量上应用不同的样式。例如，Emotion是一个支持用JavaScript编写CSS对象的库。...这将使您能够跨项目导入它们，但为了简单起见，我们在单个项目中构建了所有内容。 现在我们已经有了一个可以运行的样式组件，让我们直接进入Storybook的特性，它允许你构建漂亮的ui。

10.9K10

【React】653- 22 个让 React 开发更高效更有趣的工具

以下是工具页面样式： 该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或已有的项目中。...我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做的就是在末尾加上 --typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦...Storybook 如果大家还不了解 Storybook，并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...它会扫描项目中的组件，并且可以实现以下功能： 用属性、上下文和状态的任意组合下渲染组件 模拟每个外部依赖项（例如 API 响应、localStorage 等） 与正在运行的实例进行交互时，查看应用程序状态的实时变化

2.8K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    22 个让 React 开发更高效更有趣的工具

    以下是工具页面样式： 该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或已有的项目中。...我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做的就是在末尾加上 --typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦...Storybook 如果大家还不了解 Storybook，并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...它会扫描项目中的组件，并且可以实现以下功能： 用属性、上下文和状态的任意组合下渲染组件 模拟每个外部依赖项（例如 API 响应、localStorage 等） 与正在运行的实例进行交互时，查看应用程序状态的实时变化

    10.9K31

    22 个让 React 开发更高效更有趣的工具

    以下是工具页面样式： 该应用程序允许我们声明属性及其类型，在树状图中查看组件，导入背景图像，将其定义为有状态或无状态，定义其父组件，放大/缩小，以及将原型导出到一个新的或已有的项目中。...我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做的就是在末尾加上 --typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦...Storybook 如果大家还不了解 Storybook，并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...它会扫描项目中的组件，并且可以实现以下功能： 用属性、上下文和状态的任意组合下渲染组件 模拟每个外部依赖项（例如 API 响应、localStorage 等） 与正在运行的实例进行交互时，查看应用程序状态的实时变化

    2.9K31

    2019年，React 开发者应该掌握的 22 种神奇工具

    我们当中有些人可能不知道如何用 CRA 来创建一个 TypeScript 项目。...我们要做的就是在末尾加上 typescript： npx create-react-app --typescript 这会帮我们省去给 CRA 项目手工添加 TypeScript 的麻烦。...Storybook 如果你还不了解 Storybook（https://storybook.js.org/），并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...它会扫描项目中的组件，并且可以实现以下功能： 用属性、上下文和状态的任意组合下渲染组件 模拟每个外部依赖项（例如 API 响应、localStorage 等） 与正在运行的实例进行交互时，查看应用程序状态的实时变化...我不确定为什么提到这个网站的人不多，但在这个页面我发现了几乎所有我需要的信息，它快捷、方便，并不断更新，总是能为我所有的项目提供所需的结果。

    3.2K21

    Storybook 7 来了：迄今为止最大的更新

    Hi 大家好我是 ssh，在公司项目中，我们编写组件文档支持都是用的 Storybook，总体来说体验很好，当然我也遇到了一些问题，比如说依赖容易安装失败或编译失败，需要深度配置 webpack 等等...看起来好像解决了很多我在使用过程中的痛点，下面我来和大家一起分享 Storybook 7.0 - Next-level component development and testing： 正文 Storybook...从那时起，我们开创了组件驱动开发、文档和测试的 UI 工作环境的概念。 在此期间，前端生态系统发生了巨大变化。IE11 终于退出了舞台。TypeScript 正在迅速占领 JavaScript 领域。...更容易配置的样式插件 使用 Storybook 设置样式工具对许多开发人员来说是一个常见的挑战。...样式插件使你能够加载和应用全局样式到你的组件上，以及使用主题 Providers 包装 stories。甚至还提供了一个主题切换器，让你轻松切换主题。

    1.6K30

    21个让React 开发更高效更有趣的工具

    为了保证的可读性，本文采用意译而非直译。 下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少?...还有什么比 npx create-react-app 更简单的呢 咱们还有些人可能不知道的是如何使用CRA创建TypeScript项目，这个也很简单，只需要在末尾添加--typescript...即可： npx create-react-app — typescript 这样可以省去手动将TypeScript添加到CRA创建项目中的麻烦。...Storybook Storybook 是一个轻松地构建UI组件的库。该工具启动一个实时开发服务器，支持开箱即用的热重载，你可以在其中独立地实时开发React组件。 这足以作为普通文档页面： 11....React Sight 你有没有想过你的应用程序在流程图中的样子？ React Sight允许你通过展示整个应用程序的实时组件层次结构树来可视化React应用程序。

    3.2K30

    2022 年的 React 生态

    建议： 优先使用 Vite 创建 React 客户端应用 CRA 备选 优先使用 Next.js 创建 React 服务端渲染应用 最新技术：Remix 仅创建静态站点备选 Gatsby.js 可选的学习经验...但是，如果你在没有框架的情况下使用 React 并且仅用于客户端渲染（例如 CRA），那么现在最强大和流行的路由库是 React Router。...JavaScript 动态添加样式，而外部 CSS 文件可以包含 React 应用的所有剩余样式： import '....首先，我建议你将 CSS Module 作为众多 CSS-in-CSS 解决方案的首选。CRA 支持 CSS Module ，并为提供了一种将 CSS 封装到组件范围内的模块的方法。...这样，它就不会意外泄露到其他 React 组件的样式中。你的应用的某些部分仍然可以共享样式，但其他部分不必访问它。

    7.1K20

    21个让React 开发更高效更有趣的工具

    1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。...还有什么比 npx create-react-app 更简单的呢 咱们还有些人可能不知道的是如何使用CRA创建TypeScript项目，这个也很简单，只需要在末尾添加--typescript...即可： npx create-react-app — typescript 这样可以省去手动将TypeScript添加到CRA创建项目中的麻烦。...Storybook Storybook 是一个轻松地构建UI组件的库。该工具启动一个实时开发服务器，支持开箱即用的热重载，你可以在其中独立地实时开发React组件。 这足以作为普通文档页面： ?...React Sight 你有没有想过你的应用程序在流程图中的样子？ React Sight允许你通过展示整个应用程序的实时组件层次结构树来可视化React应用程序。

    1.6K20

    类型即正义：TypeScript 从入门到实践（序章）

    初始化应用 初始一个 React 应用的最佳方式那么一定是 React 官方维护的 Create React App[15] 脚手架了，我们打开终端，运行如下命令来初始化一个 TypeScript 版本的...成功创建一个 TypeScript 版本的 React 应用！ 提示在下文中，为了简化语言，我们统一称 TypeScript 为 TS。...，但是为了更好的定制样式和按需引用以减小打包之后的包体积，我们还需要做一点定制化的操作，打开命令行，依次安装如下依赖： $ npm install react-app-rewired customize-cra...loader，因为 antd 使用 less 作为样式化语言。...上面的代码主要就是一系列初始数据的准备，antd 组件的使用，编写起来的大致轮廓，还没有涉及到任何的 TS 语法，但这个是我们开始项目的基础，读者只需要进行简单的复制放进现有的 typescript-tea

    1.9K20

    3w字长文带你【从0开发一个自己的前端组件库】 ｜ 技术创作特训营第五期

    包括以下内容： 为什么大厂都要建设自己的组件库 组件设计理论 组件开发顺序 环境搭建 storybook 样式处理 Button组件开发 单元测试 本地测试 打包 发布 为什么大厂都要建设自己的组件库...我起的组件库名称是叫：curry-design 首先去 npm 仓库查找curry-design，看有没有人在使用。。 https://www.npmjs.com/search?...q=curry-design 从结果可以看到，这个名字没有其他包在用，所以我可以使用这个名字作为组件库的包名。 如果你起的名字，在npm里面查询到，则需要换个名字。...init 2.改造项目 将storybook初始化的项目结构改造成这样的结构 改造前： 改造后： 样式 使用scss来编写样式代码 样式结构我们采用如下的结构： _variables.scss：各种变量以及可配置设置...，所以我们做的组件库也需要设置色彩系统的样式，因为我们使用的是scss，所以我们可以将这些系统的样式颜色通过变量来定义，方便复用。

    2.3K51

    React教程：组件，Hooks和性能

    首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，随着时间的推移，代码可能会变得难以维护，特别是在你不熟悉 React 的情况下。...这就是为什么 React 中会有错误边界。那他们是怎么工作的呢？ 如果出现问题并且没有错误边界作为其父级，则会导致整个React 应用失败。...就像 TypeScript 一样，CRA（创建React App）从一开始就支持 Flow。 我发现 TypeScript 更快（几乎是即时的），特别是在自动完成中，Flow 似乎有点慢。...上述步骤会使你的应用在没有来自 React 的检查和警告的情况下运行，并且 bundle 本身也将被最小化。 你还可以为 React 应用做更多的事。你如何处理构建的 JS 文件？...对我来说，这是一项伟大的技术，在过去的几年中发生了很大的变化。

    3.5K30

    2020年值得你去试试的10个React开发工具

    Storybook React是为了帮助你以非常直观的方式编写UI而设计的。但必须通过写代码才能创建可视的组件并不是真正自然的事情，这就是为什么我们通常会从代码跳到浏览器，然后再回到代码。...Storybook是一个开源工具，它可以用来开发自己的UI组件。它不仅仅只是一个代码库，他们的在线UI编辑器允许你开发、检查并最终以交互的方式展示你的作品(这在开发可视化组件时是至关重要的)。 ?...为了将Storybook安装到你现有的React项目中，你所要做的就是： $ npx -p @storybook/cli sb init 该命令将检查你项目的结构，并尝试了解你正在使用的视图层（因为Storybook...为了将其添加到您的项目中，您可以使用 npm $ npm install react-bootstrap bootstrap 准备就绪后，您可以将所需的样式表添加到项目App.js或src/index.js...Proton Native 最后，对于最后一个工具，我想介绍一种使用React来创建桌面应用程序的方法，因为毕竟，像Electron这样的项目，用JavaScript做这件事已经有一段时间了。

    8.9K20

    Sentry 开发者贡献指南 - 前端(ReactJS生态)

    最好的样式是您不编写的样式 - 尽可能使用现有组件。 新代码应该使用 css-in-js 库 e m o t i o n - 它允许您将样式绑定到元素而无需全局选择器的间接性。...Typescript Typing DefaultProps 迁移指南 Grid-Emotion Storybook Styleguide 引用其文档，“Storybook 是用于 UI 组件的 UI...有了它，您可以可视化 UI 组件的不同状态并以交互方式开发它们。” 更多细节在这里： https://storybook.js.org/ 我们使用它吗？ 是的！...useEffect hook 更复杂，您需要小心地跟踪您的依赖项并确保通过清理回调取消订阅。...，请确保通过该组件的代码库进行 grep 以确保它没有被渲染为特定于 grid-emotion 的附加属性。

    8.1K30

    82.7K star！大气炫酷UI开源项目，超级火！

    嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 shadcn/ui 是一款基于 Radix UI 和 Tailwind CSS 构建的现代化 UI 组件库，专为追求设计品质与开发效率的开发者打造...标准合规Tailwind CSS原子化样式管理极致定制能力Framer Motion交互动效引擎丝滑过渡效果Storybook组件开发环境可视化调试TypeScript类型安全保证开发体验提升 40%...实战应用场景场景一：企业级后台系统搭建通过组合数据表格、统计卡片和导航菜单组件，3 天快速搭建合规的管理后台。...——某金融科技公司前端主管项目效果同类优质项目推荐NextUI：面向 React 的现代组件库，主打动效表现DaisyUI：Tailwind CSS 的组件扩展插件生态Mantine：面向企业应用的 React...组件解决方案Headless UI：无样式基础组件库，适合深度定制项目地址https://github.com/shadcn-ui/ui

    74700

    2020 年你应该知道的 React 库

    React 社区的现状是通过 Facebook 的 create-react-app(CRA)。它提供了一个零配置的设置，并给你一个开箱即用并且简单的启动和运行的 React 应用程序。...一个流行的 Airbnb 开源的React style guide 。即使你没有刻意遵循这些样式指南，但是读一读它们，在 React 中获得常见代码样式的要点是有意义的。...React 中最常用的 JavaScript 内置功能之一是内置 map() 数组。为什么？因为您总是必须呈现组件中的列表。...，我只能想到以下内容，因为我没有在 React 中使用任何其他内容: Draft.js Slate React 中的支付 和其他网络应用一样，最常见的支付提供商是 Stripe 和 PayPal。...我已经广泛地使用了 Storybook，我可以说他非常好用，但是我也听说了其他解决方案的好处: Styleguidist docz Docusaurus 总结 所以最终，React 生态系统可以看作是一个

    18.7K40

    想给组件加上文档？ 试试 Storybook

    大家平时都在写组件，当你写组件库里的组件，或者项目里的一些公共组件的时候，是需要提供文档的。 这时候我们一般都会用 Storybook。 Storybook 是非常流行的用来构建组件文档的工具。...我们试一下就知道了： npx create-react-app --template typescript sb-test 用 cra 创建个 react 项目。...然后进入项目，执行 storybook 的初始化： npx storybook@latest init 打印的日志告诉你 storybook init 是在你的项目里添加 storybook 的最简单方式...这三个组件不是我们自己写的，是 storybook 初始化的时候自带了三个 demo 组件。 我们可以用它来了解下 storybook 的功能。...： 这样，组件有没有通过测试用例，打开一看就知道了。

    82811

    使用storybook管理React组件

    本文已React的UI组件为例，演示如何新建/集成Storybook到项目中，并对UI组件进行全方位的管理，包括发布、demo文档、测试等。 1....create property 'dependencies' on boolean 'false' 我采用的是手动创建的方式 首先在React项目中手动添加@storybook/react和babel...4.4 测试样式 样式测试这里采用Puppeteer 和Jest来实现，其原理是利用Puppeteer的无头的chrome浏览器和storybook的url绑定组件特点，来渲染不同的UI组件，再进行图片快照的对比...4.5 手动测试 再好的自动化测试，都和人的体验存在差距，所以发布之前还是需要经过人眼测试，因为storybook活文档的特点，我们可以直接运行体验UI组件，通过交互操作、knobs插件等来进行全面体验...写在最后 本文是作者学习storybook的一些总结，总体感觉是接入成本不算高，但是模块包版本安装可能会有一些坑，但收获是给组件的管理、文档和测试提供了一个一体化的解决方案，还是很值得的。

    4.2K20

    手摸手教你用 Storybook 改善组件库的开发

    本篇的内容就是尝试优化这部分的开发体验，用业界成熟的解决方案 Storybook 解决组件的统一展示和事实调试。...更快更强的构建 UI 组件 Storybook 是一个为开发独立的 React、Vue 和 Angular UI 组件的开源工具。...高效有序地构建炫酷用户界面 以上是官网开宗明义的介绍，总之在 React 等领域，Storybook 已经很好的证明了自己，引入这个工具以后，即便是在普通的项目中，也能帮助开发者逐渐打理出各种低耦合的可复用组件...为了正确解析 Vue 单文件组件中的样式部分，修改设置： // .storybook/webpack.config.js const path = require('path'); module.exports.../preview-head.html 中引入必要的样式等，项目中的类似工作可能是在 index.html 等处完成的： <link rel="stylesheet" href="//foo/bar/index.css

    2.2K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券