有哪些React库让你相见恨晚？ - 网站源码_资源分享

有关React库，看这一则就够了：《2020 年你如果知道的 React 库》，敲全！提议珍藏哦~

React 早已问世好久了，好景不长它问世已经开始，紧紧围绕模块驱动力形成了两个非常全面性的自然生态，但源自其他C语言或是架构的开发人员极难找出要构筑两个 React 系统的大部份模块。假如你是源自于像 Angular 这样的架构的开发人员，你可能早已生活习惯了架构包涵了所需要的大部份机能，

不过对于 React 而言，它的核心理念并不是健全大部份的可选库。这是竞争优势还是下风依赖于你他们。当我从 Angular 转换到 React，我当然历经了它作为 React 的竞争优势。

只有透过 React，您就可以使用表达式模块和 props 构筑组件驱动力的界面。它暗含许多内建的软件系统，比如，用作邻近地区状况和过敏反应的 React Hooks。

上面的该文将向您提供更多许多他们归纳的方法，以期从补足复本进行优先选择，进而构筑两个全面性的 React 插件。

如何已经开始 React

假如你是两个完全不熟识 React 的新手想建立两个 React 工程项目，重新加入 React 的世界。有许多软件包工程项目能优先选择，每一工程项目都企图满足用户不同的市场需求。React 街道社区的现况是透过 Facebook 的 create-react-app(CRA)。它提供更多了两个零实用性的增设，并给你两个照相狸尾豆因此单纯的开启和运转的 React 插件。大部份的辅助工具都对您暗藏起来了，但最后要由您来更动这些辅助工具。

假如你早已熟识 React，你能优先选择它盛行的进阶软件包之一: Next.js 和 Gatsby.js。这两个架构都建立在 React 其内，因此你如果早已熟识 React 的基本原理。Next.js 用作服务器端渲染(如动态 web 插件) ，Gatsby.js 用作静态站点生成(如博客、登陆页面)。

假如您只是想了解这些新手软件包是如何工作的，那么能尝试从头已经开始增设 React 工程项目。你将从两个基本的 HTML 和 JavaScript 工程项目已经开始，然后他们添加 React 和它的支持辅助工具。

假如你想优先选择两个自定义样板工程项目，试着缩小你的要求。样板文件如果是最小的，不要企图解决大部份问题。它如果针对你的问题。比如，gatsby-Firebase-authentication 样板文件只在 Gatsby.js 中为您提供更多了完整的 Firebase身份验证机制，但其他大部份内容都被省略了。

提议：

create-react-app for React beginners/advancedGatsby.js for static websites in ReactNext.js for server-side rendered Reactcustom React project to understand the underlying tools

React 状况管理

React 暗含内建的 hooks 来管理局部状况: useState、 useReducer 和 useContext。大部份这些都能在 React 中用作复杂的邻近地区状况管理。它甚至能模拟 Redux(Redux 是 React 的两个盛行的状况管理库)。

大部份 React 的内建 hooks 都非常适合邻近地区状况管理。当涉及到远程数据的状况管理时，假如远程数据暗含 GraphQL 端点，我提议使用 Apollo Client。Apollo Client 的替代方案是urql 和 Relay。

假如远程数据不是源自 GraphQL 端点，请尝试使用 React 的 Hooks 来管理它。假如不行，像 Redux 或是 MobX/Mobx State tree 这样的软件系统可能会有所帮助。

假如你想了解更多细节，请访问我的综合状况管理反应教程。

使用 React 路由

路由在 React 中起着重要作用。毕竟，React 能帮助您实现在客户端处理路由的单页插件。当介绍两个复杂的路由的时候，有好几个路由软件系统。最值得推荐的软件系统是 React Router。

在您引入路由以前，您能先尝试 React 的条件渲染，它虽然不是路由的合理替代，但小型应用中以及足够用了。

提议:

React Router

React 中的样式库

虽然有关 React 样式处理有很多解决方法，但作为两个 React 新手，刚已经开始使用内联样式和基本 CSS 是很好的。

import ./Headline.css; const Headline = ({ title }) => <h1 className=”headline” style={{ color: blue }}> {title} </h1>

虽然内联样式能用 JavaScript 在 React 中动态地添加样式，但两个外部的 CSS 文件能拥有 React 插件的大部份剩余样式。一旦您的插件增长，还有许多其他样式方案优先选择。

首先，我提议您研究一下 CSS Modules，将其作为 CSS-in-CSS软件系统之一。CSS Modules 受到 create-react-app 的支持，并为您提供更多了将 CSS 封装到模块中的方法。这样，它就不会意外地泄漏到其他人的样式中。尽管插件的某些部分仍然能共享样式，但其他部分不必访问它。在 React 中，CSS Modules 通常将 CSS 文件与 React模块文件共存。

import styles from ./style.css; const Headline = ({ title }) => <h1 className={styles.headline}> {title} </h1>

其次，我想推荐的是被称作为 styled components，作为 React 的 CSS-in-JS 软件系统之一。这个方法是由两个名为 styled-components 的库提供更多的，它将样式与 JavaScript 共享到 React 模块的旁边:

import styled from styled-components; const BlueHeadline = styled.h1` color: blue; `; const Headline = ({ title }) => <BlueHeadline> {title} </BlueHeadline>

第三，我想推荐 Tailwind CSS 作为两个表达式式的 CSS 软件系统:

const Headline = ({ title }) => <h1 className=”text-blue-700″> {title} </h1>

是否优先选择 CSS in CSS、 CSS in js 或表达式式 CSS 依赖于您。大部份的策略都适用作大型的 React 插件。

提议:

CSS-in-CSS with CSS ModulesCSS-in-JS with Styled ComponentsFunctional CSS with Tailwind CSS

React UI 库

假如您不想从头已经开始构筑大部份必要的 React UI 模块，您能优先选择 React UI Library 来完成这项工作。大部份这些都有许多基本的模块，比如按钮，下拉菜单，对话框和列表。有很多 UI 库可供 React 优先选择:

Ant DesignChakra UITailwind UISemantic UIMaterial UIReact Bootstrap 1. React Bootstrap

React 动画

任何 web 插件中的动画都是从 CSS 已经开始的。最后你会发现 CSS 动画并不能满足你的市场需求。通常开发人员会检查 React Transition Group，这样他们就能使用 React 模块执行动画。其他著名的 React 动画库有:

react-motionreact-springFramer MotionAnimated (React Native)

提议:

React Transition Group

React 可视化和图表库

假如你真的想他们从头已经开始构筑图表，你没办法不去学习 D3 。这是两个底层的可视化库，它为你提供更多了建立令人惊叹的图表所需的一切。不过，学习 D3 是两个完全不同的冒险，因此许多开发人员只是想优先选择两个 React图表库，它能为他们做任何事情，以换取灵活性。以下是许多盛行的软件系统:

nivoVictoryreact-visRechartsChart Parts

React 中的表单库

在 React 中最盛行的表单库是 Formik。它提供更多了从验证到提交到形成状况管理所需的一切。另外两个优先选择是 React Hook Form。假如您已经开始使用更复杂的表单，这两种方法对于 React 插件都是有效的软件系统。

提议:

FormikReact Hook Form

React 中的

现代浏览器

基本上，你不需要添加任何其他库来完成这项工作。但，有时候不仅需要提供更多复杂的异步请求，还需要它们具有更强大的机能，而且只是两个轻量级的库。我推荐的这些库之一称为 ax

假如您有足够的时间来处理 GraphQL API，我提议您使用 Apollo Client。可供优先选择的 GraphQL 客户端将是 urql 或 Relay。

提议:

浏览器的邻近地区 fetch APIaxiosApollo Client

React 类型检查

幸运的是 React 有他们的类型检查能力。使用 PropTypes，你能为你的 React 模块定义传入的 props。无论何时向模块传递了错误的类型，在运转插件时都会收到错误消息。但这种形式的类型检查只如果用作较小的插件。

import PropTypes from prop-types; const List = ({ list }) => <div> {list.map(item => <div key={item.id}>{item.title}</div>)} </div> List.propTypes = { list: PropTypes.array.isRequired, };

在较大的 React 插件中，TypeScript 为整个插件增加了类型安全性，而不是使用 React PropTypes。当使用这样的类型检查器时，您能在开发期间获得错误。您不必开启插件就能找出本能透过这种类型检查防止的 bug。这样一来，类型检查器就能提高您的开发人员体验，避免首先引入 bug。

提议:

TypeScript

React 代码风格

对于代码风格，基本上有三个选项能用的。

第一种方法是遵循两个被街道社区所接受的风格指南。两个盛行的 Airbnb 开源的React style guide 。即使你没有刻意遵循这些样式指南，但读一读它们，在 React 中获得常见代码样式的要点是有意义的。

第二种方法是使用 linter，比如 ESLint。虽然样式指南只给出提议，但 linter 在插件中强制执行这个提议。比如，你能要求遵循盛行的 Airbnb 样式指南，你的 IED/编辑器会告诉你每两个错误。

第三种也是最盛行的方法是使用 Prettier。它是两个强制的代码格式化程序。您能将其集成到编辑器或 IDE 中，使其在每次保存文件时格式化您的代码。也许它并不总是符合您的口味，但至少您不必再担心他们或团队代码复本的代码格式。虽然 Prettier 不能取代 ESLint，但它与 ESLint 的集成非常好。

提议:

ESLintPrettier

React 认证

在较大的 React 插件中，您可能希望引入具有注册、登录和退出机能的身份验证。此外，密码重置和密码更动机能往往是需要的。这些特性远远超出了 React，因为后端插件为您管理这些事情。

通常的方法是使用自定义身份验证实现他们的自定义后端应用程序。假如您不想开启他们的身份验证，能考虑类似 Passport.js 的东西。

假如你根本不想关心后端，以下三种软件系统可能适合你:

FirebaseAuth0AWS Cognito

假如您正在寻找身份验证 +数据库的一体化软件系统，请坚持使用 Firebase 或 AWS。

提议:

DIY: Custom BackendGet it off the shelf: Firebase

React 主机

您能像其他 web 插件一样部署和托管 React 插件。假如你想拥有完全的控制权，优先选择像Digital Ocean这样的。假如你希望有人来处理大部份的事情，假如你早已在使用第三方的身份验证/数据库，Netlify 是两个很受欢迎的软件系统，比如 Firebase，你能检查他们是否也提供更多主机服务(比如 Firebase Hosting)。您还能使用 S3 的静态站点与 Cloudfront 一起托管。

React 测试

假如您想深入了解 React 中的测试，请阅读以下内容: How to test components in React。要点如下: 测试 React 插件的主干是 Jest。它提供更多了测试运转程序、断言库和监视(spying)/模拟(mocking)/stubbing 机能，两个全面性的测试架构中需要的大部份东西。

至少，您能使用 React-test-renderer在 Jest 测试中渲染 React 模块。这早已足以用 jest 来执行所谓的快照测试了。快照测试的工作方式如下: 运转测试之后，将建立 React 模块中渲染的 DOM 元素的快照。当您在某个时间点再次运转测试时，将建立另两个快照，用作前两个快照的差异。假如diff 不完全相同，则 Jest 将报错，您要么必须接受快照，要么必须更动模块的实现。

最后，您会发现他们在使用 Enzyme 或 React Testing Library (这两个都在 Jest测试环境中使用)来进行更详细的测试机能集。这两个库使得在 HTML 元素上呈现模块和模拟事件成为可能。然后，Jest 用作 DOM 节点上的断言。

如果您正在为 React-to-end (E2E)测试寻找测试辅助工具，Cypress 是最受欢迎的优先选择。

提议:

Unit/Integration/Snapshot Tests: Jest + React Testing LibraryE2E Tests: Cypress 2e test: Cypress

用作 React 的辅助工具库

Javascript 为处理数组、对象、数字、对象和字符串提供更多了大量内建机能。React 中最常用的 JavaScript 内建机能之一是内建 map() 数组。为什么？因为您总是必须呈现模块中的列表。由于 JSX 是 HTML 和 JavaScript 的混合物，所以您能使用 JavaScript 在数组上进行映射并返回 JSX。使用 React 建立列表模块变得单纯:

const List = ({ list }) => <div> {list.map(item => <div key={item.id}>{item.title}</div>)} </div>

但，您可能需要优先选择两个实用程序库来提供更多更详细的机能。您甚至可能希望在将这些实用表达式链接起来时更加灵活，甚至能将它们动态地组合在一起。这时，您将引入两个实用程序库: Lodash 或 Ramda。对于每两个 JavaScript 开发人员而言，Lodash 是两个更加实际的库，而 Ramda 在表达式式编程中有两个强大的核心理念。请记住，现代 JavaScript 提供更多了很多照相狸尾豆的特性，现在使用实用程序库的必要性早已降低了。

提议:

JavaScriptLodash

react 和不可变的数据机构

原生 JavaScript 提供更多了大量内建辅助工具来处理数据结构，就像它们是不可变的一样。但，假如您和您的团队认为有必要实施不可变的数据结构，最盛行的优先选择之一是 Immer。就我个人而言，我不使用它，但任何时候有人问到 JS 中的不变性(immutability)，大家都会指出 Immer，因此这能加上 redux 或 React hooks。

React 国际化

当涉及到 React 插件的国际化时，您不仅需要考虑翻译，还需要考虑多元化、日期和货币的格式化，以及其他许多事项。以下是最受欢迎的处理该问题的库:

react-i18nextreact-intlLinguiJSFBT

提议:

react-i18next

React 富文本编辑器

当涉及到在 React 中的富文本编辑器时，我只能想到以下内容，因为我没有在 React 中使用任何其他内容:

Draft.jsSlate

React 中的支付

和其他网络应用一样，最常见的支付提供更多商是 Stripe 和 PayPal。两者都能整齐地集成到 React 中。

PayPalStripe Elements 或 Stripe Checkout

React 中的时间

假如你的 React 插件正在处理大量的日期和时区，你如果引入两个库来为你管理这些事情。最受欢迎的库是 moment.js。更轻量级的替代品是 date-fns 和 Day.js。

Reac 桌面应用

Electron 是跨平台桌面插件的首选架构。不过，也有其他优先选择，比如:

NW.jsNeutralino.js

React 的移动开发

我想把 React 从网络带到移动设备的首选软件系统仍然是 React Native。假如您是 React Native 开发人员，想要建立两个 Web 插件，您如果查看 React Native Web。

REACT VR/AR

实话说，我们很有可能用 React 深入虚拟现实或是增强现实中，我没有使用过这些复本的任何两个，但它们是我在谈到 React AR/VR 时从大脑闪过的就是：

React 360react-viroreact-native-arkit

为 React 设计原型

假如您源自 UI/UX 背景，那么您可能希望使用两个辅助工具为新的 React 模块、布局或 UI/UX 概念进行快速原型设计。我以前用过 Sketch，但最近转到了 Figma。尽管我两者都喜欢，但我现在并不后悔使用 Figma。另两个盛行的辅助工具是 Framer。

为 React 书写文档

假如你负责为你的软件、 UI 库或是其他东西编写文档，那么你能使用许多简洁的 React 文档辅助工具。我早已广泛地使用了 Storybook，我能说他非常好用，但我也听说了其他软件系统的好处:

StyleguidistdoczDocusaurus

归纳

所以最后，React 自然生态系统能看作是两个 React 的架构，但它保持灵活性。它是两个灵活的架构，您能他们决定优先选择什么样库。您能从小型已经开始，只添加库来解决特定的问题。当插件增长时，您能沿途扩展构筑块。否则你能透过使用普通的 React 来保持轻量级。因此，这里再次列出了能补足 React 作为插件有关不同工程项目大小的核心理念的库。请记住，这个列表是我的个人看法，我也渴望得到你的反馈。

小型应用程式

样板: create-react-app样式库: basic CSS and inline style异步请求: fetch or axios代码风格: 无类型检查: 无状况管理: React Hooks路由: 无 or React Router身份验证: Firebase数据库: FirebaseUI 库: none表单库: 无测试库: Jest实用程序库: JavaScript国际化: react-i18nextReact 桌面: Electron

中型应用

样板文件: Next.js or Gatsby.js样式库: CSS Modules or Styled Components异步请求: fetch or axios代码风格: Prettier，ESLint类型检查: 无或 TypeScript状况管理: React Hooks and/or Apollo路由: React Router身份验证: Firebase数据库: FirebaseUi 库: none 或 UI模块库表单库: none 或 Formik 或 React Hook Form测试库: Jest with React Testing Library实用程序库: JavaScript国际化: react-i18nextReact 桌面: Electron

大型插件

样板文件: Next.js, Gatsby.js, custom setup样式库: CSS Modules or Styled Components异步请求: axios 或 Apollo Client代码风格: Prettier，ESLint类型检查: TypeScript状况管理: React Hooks and/或是 Apollo/Redux/MobX路由: React Router认证: Node.js 服务 + Passport.js数据库: 他们用 SQL/NoSQL DB 提供更多 Node.js 服务Ui 库: UI 模块库或是您他们的 UI 模块表单库: none 或是 Formik 或是 React Hook Form测试库: Jest with React Testing Library and Cypress实用程序库: JavaScript 的 api，Lodash国际化: react-i18nextReact 桌面: Electron

以前的提议是个人的。您能为理想的 React 插件优先选择他们的灵活架构。每两个“理想”的 React 增设都是主观的，依赖于开发人员和工程项目的市场需求。毕竟，没有理想的 React插件增设。

作者：勿忘巛心安

链接：http://www.imooc.com/article/301635

慕课网

本文原创发布于慕课网，转载请注明出处，谢谢合作