江苏龙网

  1. 首页 > 资讯 > 科技 > >

[]事半功倍！这5个React应用程序库不要错过……( 二 )


如你所见 ， 首先使用react-testing-library呈现注册表单 。
之后输入姓名与邮箱 。
之后点击提交 。
最后 ， 出现了“请输入您的密码” 。
这个测试中的一切都基于用户如何与表单交互 。 可以重构表单以使用不同的输入 ， 将其拆分成多个react组件 ， 所有这些都不会破坏测试 。

[]事半功倍！这5个React应用程序库不要错过……
本文插图

3. CSS-Modules和Classnames

[]事半功倍！这5个React应用程序库不要错过……
本文插图

图源：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 ， 就问你香不香！

[]事半功倍！这5个React应用程序库不要错过……
本文插图

4. Downshift
也许你会问 ， 为什么要使用外部库来创建像下拉列表或选择输入这样简单的东西呢？
构建一个基于鼠标单击打开或关闭的组件确实非常简单 。 但与许多前端任务一样 ， 困难的不仅仅是构建组件 。
创建一个大量依赖屏幕阅读器的互联网用户可访问和可用的下拉列表不简单 ， 让它在keyboardusers中正常工作并非易事 。
这就是笔者喜欢使用downshift的原因 。 它具有这样的可访问性 ， 并可自行选择其他的功能与形式 。

[]事半功倍！这5个React应用程序库不要错过……
本文插图

图源：unsplash
当笔者开始一个新的React应用程序时 ， 总会安装这些库 ， 省时省力 ， 岂不美哉？
Formik能更快编写漂亮的表单 。
测试库 有助于编写耐用的集成测试 ， 为应用程序提供信心 。
CSS Modules 和 classnames 用于编写有作用域的CSS 。
Downshift 可以创建可访问的组合框和选择输入 ， 而无需覆盖默认样式 。
这样的神器 ， 你值得拥有！

[]事半功倍！这5个React应用程序库不要错过……
本文插图

留言点赞关注
我们一起分享AI学习与发展的干货
【[]事半功倍！这5个React应用程序库不要错过……】如转载 ， 请后台留言 ， 遵守转载规


推荐阅读


上一篇：『』iPad Pro 2020款6229元起步 无5G网络成唯一遗憾

下一篇：『』Space X猎鹰9号成功将60颗星链卫星送入轨道，总数达360颗