[译]2020年的React技术栈

白嫖原文：https://www.robinwieruch.de/react-libraries#styling-libraries-in-react
_

React已经有一段时间了。从那时起，围绕着组件驱动的库，一个全面而强大的生态系统逐渐形成。来自其他编程语言或框架的开发人员通常很难找出使用React构建web应用程序的所有构建块。像Angular这样的框架，习惯于拥有所有必要的特性。然而，React的核心并不是对它的补充库指手画脚。这是优势还是劣势取决于你自己。当我从Angular切换到React时（I switched from Angular to React），我绝对体验到了React的优势之一。

React只允许您使用Function组件（function components）和props构建组件驱动的用户界面。它附带了一些内置的解决方案，例如，针对局部状态和副作用的React Hooks。但毕竟这里只处理组件。

下文将为您提供一种自以为是的方法，从补充库中选择构建一个全面的React应用程序。是否替换他们，这取决于你的选择来。

目录（TABLE OF CONTENTS）

• How to start off with React?
• React State Management
• Routing with React Router
• Styling Libraries in React
• React UI Libraries
• Animations in React
• Visualization and Chart Libraries in React
• Form Libraries in React
• Data Fetching Library in React
• React Type Checking
• React Code Style
• React Authentication
• React Hosting
• Testing in React
• Utility Libraries for React
• React and Immutable Data Structures
• React Internationalization
• Rich Text Editor in React
• Payments in React
• Time in React
• React Desktop Applications
• Mobile Development with React
• React VR/AR
• Design Prototyping for React
• Writing Documentation with React

如何开始React（HOW TO START OFF WITH REACT?）

对于每个React初学者来说，加入React世界时如何设置React项目都是未知的。有许多初学者工具包项目可供选择，每个项目都试图满足不同的需求。React社区的现状是Facebook创建React app（create-react-app (CRA)）。它提供了零配置设置，并为您提供了一个开箱即用的最低限度的React应用程序。所有的工具都是隐藏的，但最终还是要由您来修改工具。
如果您已经熟悉React，您可以选择其中一种流行的入门套件：Next.js以及Gatsby.js. 这两个框架都建立在React之上，因此您应该已经熟悉React的基本原理。同时Next.js用于服务器端呈现（例如动态web应用程序），Gatsby.js用于生成静态站点（例如博客、登录页）。
如果您只想了解这些初学者工具包是如何工作的，请尝试从头开始设置React项目（set up a React project from scratch）。您将从一个简单的HTML with JavaScript项目开始，然后自己添加React及其支持工具。
如果你想选择一个定制的样板项目，试着缩小你的需求范围。样板应该是最小的，不要试图解决所有问题。它应该针对你的问题。例如，gatsby-firebase-authentication“只是”利用Firebase为您提供了一个完整的身份验证机制，但其他别的内容都被忽略了。

推荐:

• create-react-app for React beginners/advanced （初学/进阶）
• Gatsby.js for static websites in React （静态站点）
• Next.js for server-side rendered React （服务端）
• custom React project to understand the underlying tools（自定义React项目以了解底层工具）

React状态管理（REACT STATE MANAGEMENT）

React带有内置的Hooks来管理本地状态：useState, useReducer, useContext。所有这些都可以用于React中复杂的本地状态管理（sophisticated local state management）。它甚至可以模仿Redux（mimic Redux），一个流行的React状态管理库。
所有React Hooks皆适合本地的状态管理。当谈到远程数据的状态管理时，如果远程数据带有GraphQL端点，我建议使用Apollo Client。 Apollo Client的替代方案是urql 和 Relay。
如果远程数据不是来自GraphQL站点，尝试使用React Hooks管理它。如果不好使的话，像Redux或MobX/MobX（Redux or MobX/Mobx State tree）状态树这样的解决方案可能会有所帮助。或者再看看React Query是否适合。
如果您想了解更多细节，请参阅我在React教程中的综合状态管理（comprehensive state management in React tutorial）。

推荐:

• Local State: React’s useState, useReducer, useContext Hooks（本地状态用原生Hooks）
• Remote State via GraphQL: Apollo Client （GraphQL用 Apollo Client）
• Remote State via REST: React Hooks or Redux/MobX/Mobx State Tree or React Query （REST 用React Hooks 或者 Redux/MobX/Mobx State Tree 再或者 React Query ）

路由（ROUTING WITH REACT ROUTER）

路由在React应用中起着重要的作用。毕竟，React可以帮助您实现单页应用程序，其中路由在客户端得到处理。当引入一个复杂的路由器（sophisticated router）时，只有少有几个路由解决方案可供React使用。其中最值得期待的解决方案是React Router.。
在您的应用程序中引入重型路由器之前，当您即将学习React时，可以先尝试一下React的条件渲染。它不是路由的合理替代品，但在小型应用程序中，通过这种方式交换组件通常就足够了。

推荐:

• React Router

样式（STYLING LIBRARIES IN REACT）

在React中有很多关于样式的观点。如果您想在React中有一个更全面的关于样式的指南，请查看此指南：React CSS styling（React CSS Styling）。
但是让我们从一个简单的概述开始。作为一个React初学者，从内联样式和最基本（bare bones）的CSS开始就可以了：

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

虽说内联样式可以用于在React中使用JavaScript动态地以编程方式添加样式，但是外部CSS文件可以为React应用程序保留所有剩余的样式。一旦应用程序增长，还有许多其他样式选择。
首先，我建议您将CSS模块作为许多 CSS-in-CSS 解决方案之一。CRA支持CSS模块（supported by create-react-app），并提供了一种将CSS封装到模块中的方法。这样，它就不会意外地泄漏到其他React组件的样式中。虽然应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。在React中，CSS模块通常是同处于React组件文件中的CSS文件。

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

其次，我想向您推荐所谓的styled components ，作为CSS-in-JS解决方案之一 。这种方法是由一个名为styled-components的库提供的，它将样式用JavaScript写并一起挨着放在React组件边上：(需要了解)

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

ether you choose CSS-in-C第三，我推荐Tailwind CSS作为函数解决方案：(需要了解)

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

用哪种方式（ CSS-in-CSS, CSS-in-JS, or functional CSS ）取决于你。所有这些策略适用于大型React应用。

推荐:

• CSS-in-CSS with CSS Modules
• CSS-in-JS with Styled Components（styled-components）
• Functional CSS with Tailwind CSS （Tailwind CSS）

UI库（REACT UI LIBRARIES）

如果不想从头开始构建所有必需的React UI组件，可以选择React UI库来为您完成这项工作。它们都带有必要的组件，如按钮、下拉菜单、对话框和列表。有许多UI库可供React选择：

推荐:**

• Ant Design
• Chakra UI
• Tailwind UI
• Semantic UI
• Material UI

• React Bootstrap

  动画（ANIMATIONS IN REACT）

  Web应用程序中的任何动画都以CSS开始。最终你会发现CSS动画并不能满足你的需要。通常开发人员会检查React Transition Group，这使他们能够使用React组件执行动画。其他React的其他著名动画库包括：

• react-motion

• react-spring
• Framer Motion
• Animated (React Native)

推荐:

• React Transition Group

  可视化图表（VISUALIZATION AND CHART LIBRARIES IN REACT）

  如果你真的想从头开始构建图表，那就没有办法绕过D3.。这是一个低层次的可视化库，它为你提供创建惊人图表所需的一切。然而，学习D3完全是另一种冒险，因此许多开发人员只需选择一个React图表库，它可以为他们做任何事情，以换取灵活性。这些都是一些流行的解决方案:

• nivo

• Victory
• react-vis
• Recharts
• Chart Parts

表单库（FORM LIBRARIES IN REACT）

React中最流行的表单库是Formik。它提供了从验证到提交到表单状态管理所需的一切。另一个有吸引力的选择是React Hook Form。如果开始使用更复杂的表单，这两种方法都是React应用程序的有效解决方案。

推荐:

• Formik
• React Hook Form

数据请求（DATA FETCHING LIBRARY IN REACT）

你将很快要向远程APII发出请求fetching data in React，以便在React中获取数据。现代浏览器带有本机fetch API来执行异步数据请求：

function App() {
  React.useEffect(() => {
    const result = fetch(my/api/domain)
      .then(response => response.json())
      .then(result => {
        // do success handling
        // e.g. store in local state
      });
    setData(result.data);
  });
  return (
    ...
  );
}

基本上你不需要添加任何其他库来完成这项工作。然而，有些库只用于提供复杂的异步请求。它们具有更强大的功能，但只是一个轻量级的库。我推荐其中一个库叫做axios。当应用程序的大小增大时，可以使用它来代替本机fetch API。
如果您有幸处理GraphQL AP，我建议您使用Apollo客户机。可选的GraphQL客户端将是urql 和 Relay。如果没有GraphQL API，只有REST API，请使用React Query。

推荐:

• the browser’s native fetch API
• axios
• Apollo Client (GraphQL API)
• React Query (REST API)

React类型检查（REACT TYPE CHECKING）

幸运的是，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。而不是React PropTypes。当使用这样的类型检查器时，您可以在开发期间得到错误。您不必启动应用程序来查找可以通过此类类型检查防止的错误。这样一来，类型检查器就可以改善开发人员的体验，并从一开始就避免引入错误。

推荐:

• TypeScript

  React代码风格（REACT CODE STYLE）

  代码样式方面有三个基本点可以遵循。

第一种方法是遵循社区所接受的风格指南。Airbnb公开了一个流行的React风格指南（React style guide）。即使您没有刻意遵循这样的风格指南，但阅读以了解常见代码样式要点也是有意义的。
第二种方法是使用linter比如ESLint。因为样式指南只提供建议，但是linter在应用程序中强制执行此建议。例如，您可以配置要求遵循流行的Airbnb样式指南，并且您的IDE/编辑器将为您指出每一个错误。
第三种也是最流行的方法是使用 Prettier。它是一个武断的代码格式化程序。您可以将其集成到编辑器或IDE中，以便在每次保存文件时格式化代码。也许它并不总是符合您的口味，但至少您不必再担心自己或团队代码库中的代码格式。虽然Prettier并不能取代ESLint，但它与ESLint集成得很好。

推荐:

• ESLint
• Prettier

  身份验证（REACT AUTHENTICATION）

  在较大的React应用程序中，您可能希望引入带有注册、登录和注销功能的身份验证。此外，经常需要密码重置和密码更改功能。这些特性远远超出了React，因为后端应用程序为您管理这些功能。
  常见的方法是使用自定义身份验证实现您自己的自定义后端应用程序。如果您不想进行自己的身份验证，可以考虑护照.js.

如果您根本不想关心后端，以下三种解决方案可能适合：

• Firebase
• Auth0
• AWS Cognito

如果你在寻找一体化的all-in-one的身份验证 + 数据库解决方案，那就是Firebase或AWS。

推荐:

• DIY: Custom Backend（自己写后台）
• 用现成的: Firebase

  托管（REACT HOSTING）

  您可以像任何其他web应用程序一样部署和托管React应用程序。如果你想完全控制，选择像Digital Ocean这样的东西。如果你想让人来处理所有事情，Netlify是一个流行的解决方案如果你已经在使用第三方的身份验证/数据库，就和Firebase一样，你可以检查他们是否也提供托管（例如Firebase Hosting）。您还可以将S3的静态站点托管与Cloudfront一起使用。

  TESTING IN REACT

  如果您想深入了解React中的测试，请阅读以下内容：How to test components in React（如何在React中测试组件）。要点是：测试React应用程序的重点是Jest。它提供了测试运行程序、断言库和监视/mock/断点等功能。一个全面的测试框架所需要的一切。
  至少，您可以使用react-test-renderer在Jest测试中呈现React组件。这已经足够用Jest执行所谓的Snapshot Tests with Jest（快照测试）了。快照测试的工作方式如下：一旦运行测试后，将创建React组件的呈现DOM元素的快照。当您在某个时间点再次运行测试时，将创建另一个快照，该快照用作前一个快照的差异。如果diff不相同，Jest会报出，您要么接受快照，要么更改组件的实现。
  最终，您将发现自己正在使用Enzyme或React Testing Library ——这两个库都在Jest测试环境中——来获得更精细的测试特性集。这两个库都可以呈现组件并模拟HTML元素上的事件。然后，Jest用于DOM节点上的断言。

如果您正在为React端到端（E2E）测试寻找测试工具，那么Cypress是最受欢迎的选择。

推荐:

• Unit/Integration: Jest + React Testing Library
• Snapshot Tests: Jest
• E2E Tests: Cypress

  工具库（UTILITY LIBRARIES FOR REACT）

  JavaScript提供了大量的内置功能来处理数组、对象、数字、对象和字符串。React中使用最多的JavaScript内置功能之一是built-in map() Array。为什么？因为您总是要呈现组件中的项目列表。由于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为您提供了很多现成的特性，现在使用实用程序库的必要性已经降低了。

推荐:

• JavaScript
• Lodash

  不可变数据结构（REACT AND IMMUTABLE DATA STRUCTURES）

  Vanilla JavaScript（VanillaJS 就是不使用任何框架的纯粹的原生 javascript，在计算机科学里 Vanilla 这个词往往与软件共用时就表示 pure plain（纯粹） 的意思。当然英语里也本身有这个意思）为您提供了大量内置工具来处理数据结构，就好像它们是不可变的一样。但是，如果您和您的团队认为需要强制实施不可变的数据结构，最流行的选择之一就是Immer。就我个人而言，我不使用它，但任何时候有人问JS中的不变性，人们都会指出它。这可以与redux或react hooks结合使用。

国际化（REACT INTERNATIONALIZATION）

当谈到React国际化（internationalization i18n for your React application），不仅需要考虑翻译，还需要考虑多元化、日期和货币的格式设置以及其他一些事情。以下是处理此问题最受欢迎的库：

• react-i18next
• react-intl
• LinguiJS
• FBT

推荐:

• react-i18next

  富文本（RICH TEXT EDITOR IN REACT）

  当谈到富文本，我只能想到下面的，因为我没用过其他的了:

• Draft.js

• Slate

  支付（PAYMENTS IN REACT）

  与其他任何web应用程序一样，最常见的支付提供商是Stripe和PayPal。两者都可以巧妙地集成到React中。这是working Stripe Checkout with React integration 参考。

• PayPal

• Stripe Elements or Stripe Checkout

  时间（TIME IN REACT）

  若React应用程序要处理很多日期和时区，那么应该引入一个库来为您管理这些内容。最受欢迎的图书馆是moment.js。 更轻量级的替代品是date-fns and Day.js.

  桌面应用（REACT DESKTOP APPLICATIONS）

  Electron 跨平台桌面应用程序的go-to框架。但是，也有其他选择，比如:

• NW.js

• Neutralino.js
• 
  

  移动开发（MOBILE DEVELOPMENT WITH REACT）

  我猜想，把React从web带到移动设备上的解决方案仍然是React Native。如果您是React Native开发人员，想要创建一个web应用程序，您应该查看React Native Web。

VR/AR（REACT VR/AR）

使用React是可以深入到虚拟现实或增强现实，实话是我没有使用过这些库，但在React中当涉及到AR/VR时，这些库是我头脑中最清楚的：

• React 360
• react-viro

• react-native-arkit

  原型设计（DESIGN PROTOTYPING FOR REACT）

  如果有自UI/UX背景，您可能需要使用一个工具来快速原型化新的React组件、布局或UI/UX概念。我以前用Sketch，但最近改用了Figma。尽管我两个都喜欢，但我现在使用Figma并不后悔。另一个流行的工具是Framer。但通常，像Excalidraw这样的工具通常就足够了。

  写文档（WRITING DOCUMENTATION WITH REACT）

  如果您负责为您的软件、UI库或其他东西编写文档，那么有一些简洁的React文档工具。我曾经广泛使用Storybook，我只能说得很好，但我也听说了其他解决方案的优点：

• Styleguidist

• docz
• Docusaurus
• 
  

好的，最终，React生态系统可以看作是React的一个框架，但它仍然是灵活的。它是一个灵活的框架，在这个框架中，您可以自行决定选择加入哪些库。您可以从小规模开始，只添加库来为您解决特定问题。您可以在应用程序增长的过程中扩展构建块。否则，您可以使用普通React来保持轻量级。因此，这里再次列出了一系列库，这些库可以补充React作为应用程序的核心，涉及不同的项目大小。请记住，这张单子是我主观的，但我也渴望得到你的反馈。

• 小型App

  • Boilerplate: create-react-app
  • Styling Libraries: basic CSS and inline style
  • Asynchronous Requests: fetch or axios
  • Code Style: none
  • Type Checking: none
  • State Management: React Hooks
  • Routing: none or React Router
  • Authentication: Firebase
  • Database: Firebase
  • UI Libraries: none
  • Form Libraries: none
  • Testing Libraries: Jest
  • Utility Libraries: JavaScript
  • Internationalizing: react-i18next
  • React Desktop: Electron

• 中型App

  • Boilerplate: Next.js or Gatsby.js
  • Styling Libraries: CSS Modules/Styled Components/Tailwind CSS
  • Asynchronous Requests: fetch or axios
  • Code Style: Prettier, ESLint
  • Type Checking: none or TypeScript
  • State Management: React Hooks and/or Apollo
  • Routing: React Router
  • Authentication: Firebase
  • Database: Firebase
  • UI Libraries: none or UI component library
  • Form Libraries: none or Formik or React Hook Form
  • Testing Libraries: Jest with React Testing Library
  • Utility Libraries: JavaScript
  • Internationalizing: react-i18next
  • React Desktop: Electron

• 大型App

  • Boilerplate: Next.js, Gatsby.js, custom setup
  • Styling Libraries: CSS Modules/Styled Components/Tailwind CSS
  • Asynchronous Requests: axios or Apollo Client
  • Code Style: Prettier, ESLint
  • Type Checking: TypeScript
  • State Management: React Hooks and/or Apollo/Redux/MobX
  • Routing: React Router
  • Authentication: Solution with own Node.js Server + Passport.js
  • Database: Solution with own Node.js Server with a SQL/NoSQL DB
  • UI Libraries: UI component library or roll your own UI components
  • Form Libraries: none or Formik or React Hook Form
  • Testing Libraries: Jest with React Testing Library and Cypress
  • Utility Libraries: JavaScript Platform APIs, Lodash
  • Internationalizing: react-i18next
  • React Desktop: Electron

上面的建议都是固执己见的。您可以为理想的React应用程序选择自己的灵活框架。每个“理想的”React设置都是由开发人员和项目的需求决定的。毕竟，没有理想的React应用程序设置。