react 表单设计器_神器：让你相见恨晚的5个React应用程序库

全文共2003字，预计学习时长9分钟

图源：unsplash

编辑搜图或许你一直在从头开始构建React应用程序，这当然无可厚非。但当你遇见了今天要介绍的这些库，一定会感叹相见恨晚！

React最令人喜爱的地方是，没有固定的方法来构建应用程序。开发人员可以自由选择要使用的库和要遵循的模式，你可以随意去实现自己天马行空的想法。

在这里所创建的大多数应用程序，无论是用于工作还是个人项目，都是从相同的库开始的。

利用React社区，你不必再耗时另起炉灶，可以花更多的时间为用户提供价值。

所以千万不要错过呀~

1. Formik

面对现实吧，几乎所有的网络应用程序都有表单，这是一件很棘手的事情。

对于用户来说，没有什么比表单不能正常工作，或在错误验证后重置，再次输入所有信息更让人沮丧的了。表单正确，是网络应用程序中让用户拥有良好体验的关键。

图源：unsplash

那就意味着：

· 表单字段应具有客户端验证。

· 字段在用户“触摸”或表单提交之前不应显示错误。

· 无效提交时，表单状态不应为“丢失”或“重置”。

· 提交后，表单应该进行异步(服务器端)验证。

自己编写一个处理所有这些事情的组件是相当复杂的。需要跟踪所有表单值，以及所有表单字段的“触摸”状态，甚至包括 “错误”。

此外，还需要构建表单提交的逻辑。这些都需要足够通用，以便在整个应用程序中重用。没有人想在登录表单、注册表单、地址表单等等中一遍遍重复它。

所以，使用React社区的一个流行库，是比自己构建更好的选择。

Formik是JaredPalmer开发的一个库，在这里，表单编写变得轻而易举。

2. 测试库

测试省了很多时间。当笔者创建一个复杂的特性或组件时，总是在设计、产品和开发之间“游荡”。设计师可能会要求进行视觉或UX更改，产品部门可能要求更改UX。笔者只得不断地反复、重构和更新组件。

通过确保组件或特性的正确测试，可以确保这种重构不会允许回归潜入代码库。它节省了大量的人工测试时间，这给了人们更多信心。

图源：unsplash

涉及到测试React应用程序时，有一个黄金标准:testing-library/react，也称为react-testing-library。它已经内置在create-react-app中，所以入门就变得很简单啦。

使用testing-library，可以从用户的角度测试组件。

什么意思？下面用一个实际的例子来说明。

在这个示例中，笔者为一个简单的注册表单编写了一个测试。它要求用户提供姓名、电子邮件和密码。这些都是必填字段，如果省略了任何一项，那么表单应该在提交时显示一个错误。

import {render, fireEvent } from "@testing-library/react";import userEvent from "@testing-library/user-event";import { SignupForm } from "./Form";describe("SignupForm",() => {  it("should show an error whenpassword is omitted", () => {    const rendered =render();    const nameInput =rendered.queryByLabelText("Name");    userEvent.type(nameInput, "JohnSmith");    const emailInput =rendered.queryByLabelText("Email");    userEventtype(emailInput, "john@smith.net");    const submitButton =rendered.queryByText("Submit");    userEvent.click(submitButton);    expect(      rendered.queryByText("Pleaseinput your password")    ).toBeInTheDocument();  });});

如你所见，首先使用react-testing-library呈现注册表单。

之后输入姓名与邮箱。

之后点击提交。

最后，出现了“请输入您的密码”。

这个测试中的一切都基于用户如何与表单交互。可以重构表单以使用不同的输入，将其拆分成多个react组件，所有这些都不会破坏测试。

3. CSS-Modules和Classnames

图源：unsplash

当笔者开始一个新的React项目时，通常会选择CSS-Modules。create-react-app中内置了支持，很容易上手。

当然，可以通过遵循BEM来避免依赖，但是需要学习如何使用BEM。CSS-Modules提供了可预测的、范围有限的、清晰的CSS。

笔者喜欢将classnames和CSS-Modules一起使用。先看下面这段代码：

constclassName = 'button ' + props.hasError ? 'error' : '';return ( );

有了classnames，可以进行简化，然后变成这样：

constButton = props => (  );

甚至可以将它与CSS-Modules相结合：

importstyles from './Button.module.css';const Button = props => (  );

有作用域，易于编写CSS，就问你香不香！

4. Downshift

也许你会问，为什么要使用外部库来创建像下拉列表或选择输入这样简单的东西呢？

构建一个基于鼠标单击打开或关闭的组件确实非常简单。但与许多前端任务一样，困难的不仅仅是构建组件。

创建一个大量依赖屏幕阅读器的互联网用户可访问和可用的下拉列表不简单，让它在keyboardusers中正常工作并非易事。

这就是笔者喜欢使用downshift的原因。它具有这样的可访问性，并可自行选择其他的功能与形式。

图源：unsplash

当笔者开始一个新的React应用程序时，总会安装这些库，省时省力，岂不美哉？

Formik能更快编写漂亮的表单。

测试库有助于编写耐用的集成测试，为应用程序提供信心。

CSS Modules 和 classnames 用于编写有作用域的CSS。

Downshift 可以创建可访问的组合框和选择输入，而无需覆盖默认样式。

这样的神器，你值得拥有！

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规