文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React应用程序库有哪些

2024-04-02 19:55

关注

本篇内容主要讲解“React应用程序库有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React应用程序库有哪些”吧!

1. Formik

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

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

那就意味着:

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

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

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

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

2. 测试库

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

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

涉及到测试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 renderrendered =render(<SignupForm />);     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

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

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

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

constclassName = 'button ' + props.hasError ? 'error' : '';return (  <button className={classname}{...props} /> );

有了classnames,可以进行简化,然后变成这样:

constButton = props => (   <button    className={classnames("button", { error: props.hasError })}     {...props}   /> );

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

importstyles from './Button.module.css';const Button = props => (   <button     className={classnames(styles.button,{ [styles.error]: props.hasError })}     {...props}   /> );

有作用域,易于编写CSS,就问你香不香!

4. Downshift

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

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

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

到此,相信大家对“React应用程序库有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯