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

React 应用架构实战 0x2：构建和文档化组件

在 React 中，所有的东西都是组件。这种范式允许我们将用户界面拆分成更小的部分，从而更容易开发应用程序。它还启用了组件的可重用性，因为我们可以在多个地方重复使用相同的组件。...# Chakra UI 当我们为应用程序构建 UI 时，必须决定使用什么来为组件设置样式。此外，我们还必须考虑是从零实现所有组件还是使用带有预制组件的组件库。...在这个实战系列中，我们将使用 Chakra UI，这是一个基于 emotion 和 styled-system 的组件库。...使用 Storybook 的一些好处： Storybook 允许在隔离环境中开发组件，而无需重现应用程序的精确状态，从而使开发人员可以专注于他们正在构建的东西 Storybook 作为 UI 组件的目录...，它控制了我们的 stories 在 Storybook 中的展示方式。

1.4K10

React 应用架构实战 0x6：实现用户认证和全局通知

目前，当涉及到管理控制台中的用户身份验证时，应用程序仍然依赖于测试数据。在本节中，我们将构建应用程序的身份验证系统，允许用户认证并访问受保护的资源在管理控制台中。...除了响应数据之外，还将附加一个 httpOnly cookie，从此时起用于身份验证请求 每当用户进行身份验证时，我们将从响应中的用户对象存储在 react-query 缓存中，并使其对应用程序可用 由于身份验证是基于...cookie 的，带有 httpOnly cookie，因此我们不需要在前端处理身份验证令牌，任何后续请求都将自动包括令牌 调用 /auth/me 接口将处理页面刷新后的用户数据持久化，该接口将获取用户数据并将其存储在相同的...我们希望它是全局的，因为我们想从应用程序的任何地方显示这些通知。 为了处理全局状态，我们将使用 Zustand，这是一个轻量级且非常简单易用的状态管理库。...每当发生 API 错误时，我们希望让用户知道发生了错误。 我们可以在 API Client 别处理它。由于 Axios 支持拦截器，而且我们已经对其进行了配置，因此我们只需要修改响应错误拦截器即可。

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

    Next.js高级表单处理：整合Server Actions、FormData、react-hook-form和zod

    在现代Web开发中，表单处理一直是一个复杂而重要的话题。...表单设置：使用react-hook-form的useForm hook设置表单，并使用zodResolver进行表单验证。提交处理：当表单提交时，react-hook-form首先进行客户端验证。...如果验证成功，数据被处理（例如，保存到数据库）。结果被返回给客户端。结果处理：客户端根据服务器的响应更新UI状态。如果有错误，使用react-hook-form的setError函数显示错误消息。...验证一致性：客户端和服务器使用相同的验证规则。性能优化：react-hook-form的非受控组件方法提供了优秀的性能。用户体验：加载状态、错误处理等都得到了优雅的处理。...代码复用：schema在客户端和服务器端共享，减少了代码重复。安全性：服务器端验证确保了数据的有效性和安全性。

    1.9K10

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

    以组件为中心的自动文档生成 在 Storybook 7 中，你现在可以直接将文档附加到你的组件上。页面会出现在侧边栏中，与组件的 stories 一起显示，而不是以前的选项卡式用户界面。...覆盖率报告 在 Storybook 7 中，我们通过添加代码覆盖率来改进测试支持，以扫描代码中未经测试的 edge case。它帮助你编写更全面的测试，并增强你对所发布的 UI 的信心。...这是一个与常用工具（如 Tailwind、Material UI、Chakra、Emotion、Styled-components、SASS 和 PostCSS）无缝配合的框架无关的解决方案。...简单上手，请查看：样式插件：在 Storybook 中配置样式和主题 数以百计的其他改进 除了上述所有内容，Storybook 7 还包含了无数其他的改进和错误修复。...许多改进（例如更好的错误处理和文档编制）也将为现有用户带来更好的体验。 测试 Storybook 的play函数和测试功能对于 UI 开发来说具有颠覆性的意义。

    1.6K30

    React 应用架构实战 0x5：集成 API 到应用中

    在之前，了解了如何设置模拟 API，而在本节中，将学习如何通过应用程序消费 API。当我们提到 API 时，指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...React Query 的另一个好处是它的缓存机制。对于每个查询，我们需要提供相应的查询键，用于将数据存储在缓存中。 这也有助于请求的去重。...它仅在开发中工作，对于调试非常有用。 # 给功能逻辑添加 API 层 每个功能的 API 层将在 api 文件夹中定义。API 请求可以是查询或更新。...API 层 之前为了在没有 API 功能的情况下构建 UI，我们在页面上使用了测试数据。

    2K20

    Chakra UI React组件库入门指南

    但最让我心动的还是它的开发体验 —— 用了Chakra后，我的开发效率至少提升了30%（不夸张！）。安装与设置好了，如果你已经迫不及待想尝试Chakra UI了，那就跟我一起来设置吧！...现在你已经可以在应用中使用Chakra UI的组件了。不需要额外的配置，不需要导入样式文件，一切都准备就绪。说实话，这种无缝的开发体验真的让我爱不释手。...```在这个例子中，Box组件在小屏幕上占据100%宽度并显示红色，而在中等及以上屏幕上占据25%宽度并显示蓝色。比起写媒体查询，这种方式简单太多了！...短短几十行代码，我们就创建了一个功能完备、外观精美且支持暗黑模式的产品卡片。在传统开发中，这可能需要编写大量的CSS和处理各种边缘情况。..."暗黑" : "明亮"}模式 );}```性能优化在大型应用中，你可能需要考虑性能优化。

    52621

    2023 React 生态系统，以及我的一些吐槽……

    这在实现当今应用程序中使用的其他行为时变得更加复杂： 跟踪加载状态以显示 UI 加载指示器 避免对相同数据进行重复请求 进行乐观更新以提高 UI 响应速度 随着用户与 UI 进行交互，管理缓存的生命周期...字段，并在组件挂载和卸载时管理缓存数据的生命周期 RTK Query 提供了“缓存条目生命周期”选项，可以通过 WebSocket 消息流式传输缓存更新，以在获取初始数据后使用 我们有从 OpenAPI...Formik 是一个小型库，可以帮助您解决以下三个最令人讨厌的问题： 将值放入和取出表单状态 验证和错误消息 处理表单提交 通过将所有这些放在一个地方，Formik 可以让事情井然有序，使得测试、重构和理解您的表单变得轻而易举...不是因为我认为 React 在实现表单方面采取了错误的方法，而是因为在使用 React 时，表单是最具挑战性的问题。 许多框架都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。...UI 组件库 Material UI Mantine UI Ant Design Chakra UI Headless UI（Tailwind CSS） DaisyUI（Tailwind CSS） shadcn

    4.2K30

    快来使用 React-Hook-Form 搭建强大的React表单

    没有人喜欢创建和重新创建带有验证的复杂表单，包括React开发人员。 在React中构建表单时，必须使用一个表单库，该库提供了许多方便的工具，而且不需要太多代码。...我们需要给他们反馈来修复他们提供的值。 当其中一个输入无效时，表单数据不会被提交(不会调用onSubmit)。此外，带有错误的第一个输入将自动聚焦，它不会向用户提供关于所发生事情的任何详细反馈。...我们可以从 useForm 中获取一个 errors对象，而不仅仅是不提交表单。 就像我们在 onSubmit 中获得的数据函数一样，errors 包含对应于每个输入名称的属性，如果它有错误的话。...默认的验证只在提交表单时执行。 我们可以通过给useForm传递一个对象来改变这一点，我们可以在需要执行验证时设置模式:onBlur、onChange或onSubmit。...例如，在某些情况下，您希望它在onSubmit中创建一个不同的错误或清除一个错误，就可以使用这些方法。

    5K21

    32K star 的 Chakra UI，以及未来的展望

    Hi，我是 ssh，最近一段时间，经常听说 Chakra UI 这个库，虽然没有在公司的项目里用过，但是从我短暂的了解来说，感觉是个兼顾优雅和实用的 UI 组件库，最近 Chakra UI 的作者 Segun...受到 Brent Jackson 在 Styled System 中的工作启发，我借鉴了很多他的想法来构建 Chakra UI 的样式基础。...这意味着我们构建的任何解决方案都必须支持跨框架。 设计标记（Design Tokens）：Chakra UI 的主题系统非常简单，并且在大多数用例中运作良好。然而，它不足以支持更复杂的用例。...v=I5x… 这时，我并不知道我们将如何实现这一目标，但是当我使用 XState 为 Chakra UI 的一些组件构建了一个概念验证时，突然有灵感了。...它是开源的，你可以在这里查看：github.com/chakra-ui/a… Ark 在 Chakra UI 中的定位 Zag.js：用于 UI 组件的低级状态机 Ark：基于 Zag.js 的 Headless

    1.3K30

    React Hook form 表单校验

    [uvJayq.png] 开始 安装 yarn add react-hook-form 使用 在register表单里引入 import React from 'react'; import { Link...， 并且指定它的一些校验规则：可以是一个验证规则，也可以是一个正则表达式， 包括一些原生的校验。...最大最小什么的。 如果不通过验证就会返回一个错误对象。 我们要使用这个错误对象，需要通过使用name属性来获取对应的错误消息。 我们可以进行错误的设置，也可以进行错误的清除。...然后我们再把错误消息渲染出来提示就好了。 校验指定 指定邮箱的input类型好像默认会使用邮箱的校验错误提示而不出现自定义提示？？？ 暂时不想了。 指定一个正则来校验邮箱格式：。...clearError()://两个表单值一样的时候清除错误 "confirm password fail",//否则返回一个指定的错误消息 }} 表单提交 handleSubmit接受一个函数返回表单的值

    9.3K31

    如何在 React 中快速实现暗黑模式

    暗黑模式已成为许多应用程序和网站的最基本功能，因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能，使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。...接下来让我们看看如何使用 Chakra UI 来构建一个可以在深色和浅色之间的网站。...第一步 要开始使用 Chakra UI，需要通过在终端中运行以下命令将其安装在项目中： npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion...在主题文件中引入 chakra-ui import {extendTheme} from '@chakra-ui/react' 接下来，打开index.css文件。...此文件是在 React 应用程序制作过程中创建的。复制此文件中的信息并将其存储在剪贴板中，现在可以将其从 index.css 中删除。 修改 theme.js文件，它将由两部分组成。

    3.2K30

    浅谈表单受控性及结合Hooks应用

    在本文中将介绍在 React 中受控和非受控表单是如何使用的，以及现代化使用 hooks 来管理 form 状态。...特点: 表单元素的值保存在组件的 state 中，以便在需要时进行访问、验证或提交。每当用户输入发生变化时，需要手动更新 state 来反映新的值。...可以通过 state 的值来进行表单元素的验证，并提供实时的错误提示。...利用 useRef 的特性，在调用 useForm 的组件中，从创建到销毁等各种生命周期，无论组件渲染多少次，FormStore 只会实例化一次，在每个 Field 中定义 forceUpdate()...另外区别于 ant3 中 HOC 形式包裹的控件，rc-form-field 中提供的独立的 Field 组件概念和对应的 hooks，提供对控件本身直接操作的可能 4 不走寻常路的 react-hook-form

    1.9K10

    全新的 React 组件设计理念 Headless UI

    前言 其实，最早接触 Headless UI 是在去年，碰巧看到了一个非常前沿且优秀的组件库 ---- Chakra UI，这个组件库本身就是 Headless UI 的实践者，同时也是 CSS-IN-JS...比如：在一个生命周期函数中往往存在「不相干的逻辑混杂」在一起，或者「一组相干的逻辑分散」在不同的生命周期函数中，这里分别举个例子： 在 componentWillReceiveProps **中往往写入不相干...从表象上来看，Headless UI 组件其实就是一个什么也不渲染的组件。 为什么会有 Headless UI 那么我们为什么需要一个啥也不渲染的组件呢？...Headless UI 的生态与展望 社区生态 关于组件，目前在国外已经有些探索和实践的案例，比如 React-Popper、React-Hook-Form、TanStack-Table，三个是组件库“...值得一提的是，在日常开发中，我们也可以尝试借鉴这样的思路，「将通用状态逻辑抽离出去，方便复用，帮助我们在日常开发提效」。

    2.2K10

    回望过去，展望未来- 2024 React 生态一览表

    也就是在原有页面 A 中，我们是不传入showLabels,结果就是页面不会显示正面和反面的字样，但是在页面 B 中，我们传入了showLabels字段，会显示对应的字样。...，在A组件的基础上，要新增部分功能需求，就需要使用三元运算或者if判断将页面的显示逻辑，变的支离破碎。...「路由视图（Route View）：」 路由视图是指在页面中展示的特定组件或视图，它根据当前 URL 从路由表中选择对应的内容进行显示。当用户在应用中导航时，路由视图会动态更新以显示相应的页面。...Chakra UI Chakra UI[20] 是创建 React 中可访问且高度可定制的用户界面的热门选择。它提供了一组可组合的组件和样式属性系统，用于灵活的样式。 5....] Chakra UI: https://chakra-ui.com/getting-started [21] Headless UI: https://headlessui.com/ [22]

    3.2K10

    怎样挑选一个好的NPM包？

    即使在这些比较顶级的开源软件中，其风险状况的差异也是比较明显的： Chakra UI Evergreen] Antd Base Web 寿 命 开发者喜欢点赞数。...单从点赞数来看，人们可能认为 Chakra UI 和 Evergreen 在采用率上大致相同，但是 Chakra UI 明显超过了它的竞争者。...同时，Evergreen 的所有压力似乎都落在了 mshwery 的肩上。 代码提交频率图的显示结果类似。...有时候只有一个或少量工程师支持公司内部的开源库。当那些先驱离开时，如果没有机构的支持，这个项目可能会萎缩。像 Antd 和 Chakra UI 这样比较去中心化的包，对政策上的冷漠更有抵抗力。...虽然我们检查过的这些组件都是安全的，但是 Chakra UI 和 Antd 的庞大的依赖使得它们比较脆弱。在下载一个依赖后，你应该使用 yarn audit 或 npm audit 来执行一次审计。

    1.2K10

    初见next.js

    layout 组件 　　 　　在我们的应用中,我们将在各个页面上使用通用样式.为此,我们可以创建一个通用的 Layout 组件并将其用于我们的每个页面. 　　 　　...创建动态路由时,我们 id 放在方括号之间.这是页面接收到的查询参数的名称,因此/p/hello-nextjs 在 query 对象就是{ id: 'hello-nextjs'},我们可以使用 useRouter...> 　　 　　); 　　 　　} 　　 　　在该页面中我们看一下元素,其中 href 属性 p 文件夹中页面的路径, as 是要在浏览器的 URL 栏中显示的 URL.as 是用来与浏览器历史记录配合使用...以外的任何东西都没有影响.简单来说就是带有作用域的 css. 　　 　　...about 页面点击查看样式效果 　　 　　[其他解决方案]](https://github.com/zeit/next.js#css-in-js) 　　 　　引入 ui 库 　　 　　目前代码在页面中呈现的样式是比较随意的

    6.1K00

    你的表单代码为什么一团糟？深度剖析大规模表单架构的终极秘密

    还有几十行类似的代码 这就是"状态爆炸"的根源。 你的组件会在每个状态变化时完全重新渲染，包括那些根本不关心这个字段的 UI 组件。在中等规模的表单（30+ 字段）上，这会导致明显的卡顿感。...在真实的产品中： 用户选择"公司用户"时，才显示企业资质字段 用户在北京时，才需要填社保号 只有 VIP 用户才能选择高级数据源 根据文件类型，显示不同的配置字段 如果你在 JSX 里直接写条件： //...想象这个场景：用户在一个有 50 个字段的长表单里，每输入一个字符，你就： 验证这个字段 验证所有依赖这个字段的字段（交叉字段验证） 更新 UI 如果验证涉及网络请求（比如检查用户名是否已存在），主线程会被阻塞...开销 用户体验 必填检查 实时 极低 立即反馈 格式检查 实时 低 快速反馈 重名检查 失焦/提交 高 不阻塞输入 交叉验证 失焦/提交 中等 智能延迟 通过这样分层，用户在输入时感受不到任何卡顿，...在实际应用中，哪个问题（性能、复杂度、可维护性）对你的影响最大？ 欢迎在评论区分享你的经历和见解。另外，如果这篇文章对你有帮助，请别忘了关注《前端达人》，并把这篇文章分享给你的开发伙伴。

    12110
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券