Storybook Storybook 是一个开源工具，用于独立构建 UI 组件和页面。它简化了 UI 开发、测试和文档编制。...Storybook 让我们能够轻松地将技术文档包含在我们的设计系统中，从而使开发组件变得更加简化。...Formik 表单处理是网页开发经常会遇到的问题，而Formik是一个可以在React中构建表单的组件。...它是一个小型库，可以让表单的各个状态都能被保存，对于错误的处理和表单的验证，它都提供了非常友好的处理方式，可以说它就是专门为表单处理而诞生的。...总结 react是一个非常强大的UI框架，无论是它的声明式语法，还是组件化的封装，都让它变得越来越受欢迎，一次学习，多端运行更是让你可以体会到它的强大，多学习一门技能总是没有错误的，特别是像react
在今天的文章中，将介绍每个 React 开发人员都应该熟悉的 33 个令人惊叹的 React 库。而且是由其他开发人员经过良好测试和维护的令人惊叹的 React 库。...formlink image.png Formik 是世界上最流行的 React 和 React Native 开源表单库。...react-select image.png 一个灵活且美观的 ReactJS 选择输入控件，具有多选、自动完成、异步和可创建的支持。...react-table image.png React 的轻量级且可扩展的数据表。构建和设计强大的数据网格体验，同时保留对标记和样式的 100% 控制。...storybook image.png Storybook 是一个用于独立构建 UI 组件和页面的前端研讨会。成千上万的团队使用它进行 UI 开发、测试和文档编制。它是开源且免费的。
下图是 H5-Dooring 表单设计器的截图： 接下来我就和大家一起聊聊Formik 能做什么。 Formik 是什么 Formik 是一个流行的 React 表单库。...Formik 简化了 React 应用程序中表单的开发。...高效的验证：Formik 内置了强大的验证功能，可以轻松地定义字段验证规则，并在用户输入时实时反馈错误信息。...与其他库集成：Formik 可以与其他流行的库和工具（如 Yup、React Hook Form）集成，提供更多的扩展性和灵活性。...ErrorMessage 组件：用于渲染表单验证错误信息的组件，它接受表单字段的名称和验证错误信息等参数，并根据这些参数渲染相应的错误信息。
以下是一些流行的解决方案: nivo Victory react-vis Recharts Chart Parts React 中的表单库 在 React 中最流行的表单库是 Formik。...建议: Formik React Hook Form React 中的数据获取库 很快，您就必须向远程 API 发出请求，以便在 React 中获取数据。...使用 PropTypes，你可以为你的 React 组件定义传入的 props。无论何时向组件传递了错误的类型，在运行应用程序时都会收到错误消息。但是这种形式的类型检查只应该用于较小的应用程序。...建议: ESLint Prettier React 认证 在较大的 React 应用程序中，您可能希望引入具有注册、登录和退出功能的身份验证。此外，密码重置和密码更改功能往往是需要的。...我已经广泛地使用了 Storybook，我可以说他非常好用，但是我也听说了其他解决方案的好处: Styleguidist docz Docusaurus 总结 所以最终，React 生态系统可以看作是一个
对于初学者来说，选择正确的库可能会很具有挑战性。 在这里，我将列出一些 React 库，供你学习并成为 React 开发者。...通常，Web 应用程序需要从服务器获取数据才能显示。它们通常还需要对该数据进行更新、将更新发送到服务器，并使客户端上的缓存数据与服务器上的数据保持同步。...Formik 是一个小型库，可以帮助您解决以下三个最令人讨厌的问题： 将值放入和取出表单状态 验证和错误消息 处理表单提交 通过将所有这些放在一个地方，Formik 可以让事情井然有序，使得测试、重构和理解您的表单变得轻而易举...我创建 Formik 的目标是打造一个可扩展且高性能的表单辅助工具，具有最小化的 API，它可以处理那些真正令人讨厌的事情，而将其余部分留给您来处理。...不是因为我认为 React 在实现表单方面采取了错误的方法，而是因为在使用 React 时，表单是最具挑战性的问题。 许多框架都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。
该工具有一个广泛的插件生态系统，可以帮助扩展和调整您的应用程序。此外，它还集成了最流行的JavaScript框架，如React、Vue甚至Ruby。 你应该在React中使用Storybook吗?...NPM安装在你的机器上 如何安装 Storybook 关于Storybook和React的一大亮点便是它们能够很好地结合在一起。...在React应用中初始化Storybook 现在我们已经启动并运行了React应用程序，我们需要安装并设置Storybook的本地实例。...: 成为这样： variantStyles对象具有针对Banner支持的每个变体的特定样式的键。...这个特定的文档视图包含了我们在前面步骤中定义的所有各种Banner故事的摘要，并强调了它们的视觉差异。它还包括一个按钮“显示代码”，可以切换到查看JSX并生成特定的元素。 7.
Formik 工具库 Formik 库可以让你在 React 中轻松构建出健壮的 Form 表单程序。...使用时需要先下载： npm install formik --save Formik 库可以与 yup 库一块使用，库的作者也推荐搭配使用，yup 是一个用于验证字段的库，它的用法类似于 React 中的...（验证失败）， 可以用来展示错误消息。... 组件比较复杂，在构建 Formik 表单程序时，Formik 和下面它的几个属性是需要设置的： initialValues 接收一个对象，表示初始化的表单控件的值，对象的键应是表单的...formik 代码： import React from 'react'; import { Formik, Form, Field, ErrorMessage } from "formik"; import
从 Styleguidist 到 Storybook 的过渡让我们能够为 React 组件提供一个更快、更加友好的开发环境，并更好地协调开发人员和设计人员的工作流程。...开发人员必须为每个组件创建许多排列，以显示组件可能支持的每一种状态。 通过编辑 Markdown 来修改组件状态对于开发人员和非技术用户来说并不直观。.../Button'; 为了减少开发人员在迁移过程中的负担，我们决定将一个组件的所有 Story 都包含在同一个 component.stories.js 文件中，然后显示在 component.stories.mdx...我们的 Codemod 需要解析并对这些导入进行去重，以防止出现运行时错误。...基于我们的 Codemod 迁移策略，我们能够转换代码库中几乎所有的示例，而且不会出现运行时错误，在迁移过程中也不会对开发人员造成阻碍。
Story Book StoryBook 提供了一套UI组件的开发环境。...代码示例 // Button.stories.tsx import React from 'react'; import { Story } from '@storybook/react'; // We...我们的 SSC-UI-React 组件库使用了docz, 实际效果： 3. dumi dumi 是一款为组件开发场景而生的文档工具。 其具有开箱即用，将注意力集中在组件开发和文档编写上。...React 版本不兼容问题 一通迁移操作后，我们 yarn 了一下，发现报错了: 这是 ts 报出的关于 react 类型检查的错误，一开始认为是 ts 检查多了，那么在tsconfig.json 配置...既然如此，我们只要显示指定 react 的版本为 16 就行了，16 在 * 的范围，也不会导致 dumi 有错误。
预打包以加快启动速度和消除依赖冲突 Storybook 应用程序现在以预编译的代码库形式发布，无需你自己进行编译。这意味着启动速度更快，不再有依赖冲突的困扰。...我们的新 Framework API 会根据你的应用程序设置自动配置 Storybook，包括你选择的构建工具（Webpack 和 Vite）、渲染器（React、Vue、Angular、Svelte、...以组件为中心的自动文档生成 在 Storybook 7 中，你现在可以直接将文档附加到你的组件上。页面会出现在侧边栏中，与组件的 stories 一起显示，而不是以前的选项卡式用户界面。...这些测试结果在一个公共的状态页面上进行可视化展示，显示 Storybook 的每日结果，并提供了 Storybook 稳定性的快照。...许多改进（例如更好的错误处理和文档编制）也将为现有用户带来更好的体验。 测试 Storybook 的play函数和测试功能对于 UI 开发来说具有颠覆性的意义。
本文已React的UI组件为例，演示如何新建/集成Storybook到项目中，并对UI组件进行全方位的管理，包括发布、demo文档、测试等。 1....create property 'dependencies' on boolean 'false' 我采用的是手动创建的方式 首先在React项目中手动添加@storybook/react和babel...使用storybook的插件功能 storybook的很多功能都是靠插件来实现的，大多数插件都需要提前注册，在页面中有一个单独的tab来对storybook进行增强。...register'; // 组件可视化配置 @storybook/addon-info插件比较特殊，不需要提前注册，它可以显示story的源码，并针对props提供一些文档。...PS：文中所涉及的demo已放入Github仓库storybook-react。
命令如下： 初始化 React+TS 环境 npx create-react-app component --typescript 初始化 Storybook cd component npx -p @...storybook/cli sb init --story-format=csf-ts 添加 storybook addons { addons: [ '@storybook/preset-create-react-app...'@storybook/addon-actions', '@storybook/addon-links', ], }; 最终以这种模式去规范组件库的开发（PS：没有文档的组件库，不叫组件库...├── MessageBase.tsx # 包含头像、反向显示的基础消息组件 ├── MessageMedia.tsx # 图片、音频等 ├── MessageSystem.tsx # 系统消息 ├──...]: Member }; // map 的形式存储当前聊天室所有用户，便于查询 } 数据尽可能地保持简单，比如一个 message 的结构可以是这样： interface Message { id:
(sx) React 定义 React 组件 组件与视图 PropTypes 事件处理程序 CSS 和 Emotion stylelint 错误 "No duplicate selectors" 状态管理...相反，与具有更大、更复杂的 API 或更大的包大小的库相比， 更喜欢具有更清晰、更简单的 API 和更小的包大小的库。...在需要少量状态或访问 react 原语（如引用和上下文）的展示组件中，它们通常是一个不错的选择。例如，具有滑出(slide-out)或可展开状态(expandable state)的组件。...变量将抛出更有用的错误消息。...使用这些推荐的断言的优点是更好的错误消息、整体语义、一致性和统一性。
在 React 中，所有的东西都是组件。这种范式允许我们将用户界面拆分成更小的部分，从而更容易开发应用程序。它还启用了组件的可重用性，因为我们可以在多个地方重复使用相同的组件。...此外，某些库默认具有很好的可访问性，因此我们不必像从头开始构建一切那样考虑太多。当然，这些库可能会带来成本，如难以自定义或对最终包大小产生显著影响，但它们可以为我们节省大量开发时间。...使用 Storybook 的一些好处： Storybook 允许在隔离环境中开发组件，而无需重现应用程序的精确状态，从而使开发人员可以专注于他们正在构建的东西 Storybook 作为 UI 组件的目录...第一个文件包含了主要的配置，它控制了 Storybook 服务的行为以及如何处理我们的 stories。...在 Storybook 中的展示方式。
在基于 React 的 Web UI 开发中，React 服务端组件（RSC） 是一种新的编程模式。与传统的 React “客户端”组件不同，它们只在服务器上进行渲染。...这为性能和安全方面带来了一些好处，但与当下的各种 React 工具和库相比，其用法有很大的差异。 其中受影响最大的领域之一就是基于组件驱动的开发和测试。...注意： 这个解决方案目前还不能在其他 Storybook React 框架（例如 react-vite、react-webpack5）中使用，因为它们没有像 Next.js 那样使用 canary 版的...创建好数据访问层后，你就可以在浏览器中通过模拟来运行它，并精确控制返回的数据，展示不同的用户界面状态（加载中、错误、成功等）。...原文地址： https://storybook.js.org/blog/storybook-react-server-components/ 相关阅读： 从 Styleguidist 迁移到 Storybook
”的标签，当你运行本地程序时，你将可以使用React Sight以可视化树状的形式查看和创建不同的组件，这将让你能够方便的理解它们的连接方式，在你把鼠标悬停在元素上时，就可以看到它们当前的状态和属性。...它能避免你浪费大量时间重复劳作，从而提高日常的工作效率。 ES Lint：添加了对命令行工具的支持。它集成到你的IDE中，并帮助你改进语法，设置自己的编码样式，甚至在某些情况下能为你自动修复错误。...Storybook React是为了帮助你以非常直观的方式编写UI而设计的。但必须通过写代码才能创建可视的组件并不是真正自然的事情，这就是为什么我们通常会从代码跳到浏览器，然后再回到代码。...为了将Storybook安装到你现有的React项目中，你所要做的就是： $ npx -p @storybook/cli sb init 该命令将检查你项目的结构，并尝试了解你正在使用的视图层（因为Storybook...你可以通过这种方式展示UI，甚至可以通过直接在显示的界面上更改代码来对其进行测试和编辑UI。
在最新版的 0.70.0 中，Hermes 成为了默认的引擎，与 V8 引擎相比，Hermes 具有更快的启动时间和更小的内存占用，可以显著提高应用的性能表现。...通过使集成 SDK 的形式，开发者可以在 React Native 应用快速运行微信小程序、支付宝小程序等，同时利用小程序的生态优势，如丰富的 API 和庞大的用户群体。...他们的技术文档是中文的，就直接放上来了，感兴趣可以学习下。 7、Storybook Storybook 是一个 UI 组件展示工具，可以让开发者独立展示和测试 UI 组件。...通过 Storybook，开发者可以更方便地调试和设计 UI，可以将不同状态的组件独立展示出来，方便进行交互测试和样式设计。...Storybook 支持多种开发框架和平台，包括 React、React Native、Vue、Angular 等。
众所周知，React 是 JavaScript 库，用于构建出色的用户界面。但是，并不是每个人都在使用相同的工具或都知道所有有用的工具，这些工具有助于使 React 开发体验更有趣，更主动。...这是 react-testing-library 解决的一个问题，因为理想情况下，我们只希望我们的用户界面能够正常工作并最终正确显示。...React -sight（https://www.reactsight.com/）可以让整个应用程序以树状图的形式展示层次结构，清楚查看我们的 React 应用程序。...转换后 React 组件仍将是一个组件，只是现在转换为一个目录而已。 例如，假设我们正在创建一个 React 组件，它把文件作为属性以显示有用的信息，比如它们的元数据。...这就是 folderize 可以为我们做的事情，这样它们就可以具有以下类似结构： ? import React from 'react' import FileView from '.
Storybook 则在浏览器环境中，为 UI 组件的单独编写和测试提供了可视化的、可交互的、与具体业务项目无关的单独运行环境；无论是 web 项目还是混合式的桌面应用，都可以不理会繁复的项目配置和依赖...较新版本的 Storybook 中引入了 交互式测试(Interaction Test) 的概念，用法也极为简单，只需要为既有的 UI 用例编写一个 play() 函数 就可以了。...// LoginForm.stories.js|jsx import React from 'react'; import { within, userEvent } from '@storybook...) ).toBeInTheDocument(); }; 类似单测在命令行中的红绿结果，交互式测试的每个步骤、其成功失败，都会显示在相应的面板中： 复用测试用例 不难发现，工具栈相同、写法无异，...需要做的也非常简单，直接在单测中 import 后 play 就是了： // foo.spec.jsx import { render } from '@testing-library/react';
，但是往往现实是残酷的，一个优秀的组件库是非常庞大就具有难度的，但是通过这篇文章我们还是能从开发到上线完成一个简单的组件库，让你了解整个流程 什么是StoryBook storybook-intro...Storybook是一个UI组件的开发环境。...our application: npx create-react-app taskbox cd taskbox # Add Storybook: npx -p @storybook/cli sb.../tutorials/intro-to-storybook/react/en/deploy/ to obtain it projectToken: ${{ XXXXXXXX }}...你可以在 Chromatic 的构建屏幕中找到所有已发布的 Storybook。
领取专属 10元无门槛券
手把手带您无忧上云
