React项目初始化

参照React官方文档：https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

React Navigation菜单布局设计

参照React Navigation文档：https://reactnavigation.org/docs/getting-started

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 的 useState, useReducer, useContext Hooks
  • 通过 Graph QL 的远程状态: Apollo Client

  • 通过 REST 的远程状态: React Hooks or Redux/MobX/Mobx State Tree

    使用 React 路由

    路由在 React 中起着重要作用。毕竟，React 可以帮助您实现在客户端处理路由的单页应用程序。当介绍一个复杂的路由 的时候，有好几个路由解决方案。最值得推荐的解决方案是 React Router。
    在您引入路由以前，您可以先尝试 React 的条件渲染，它虽然不是路由的合理替代，但是小型应用中以及足够用了。
    建议：

  • React Router

    React 中的样式库

    虽然关于 React 样式处理有很多解决方法，但是作为一个 React 初学者，刚开始使用内联样式和基本 CSS 是很好的。

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

    虽然内联样式可以用 JavaScript 在 React 中动态地添加样式，但是一个外部的 CSS 文件可以拥有 React 应用程序的所有剩余样式。一旦您的应用程序增长，还有许多其他样式方案选择。
    首先，建议您研究一下 CSS Modules，将其作为 CSS-in-CSS 解决方案之一。CSS Modules 受到 create-react-app 的支持，并为您提供了将 CSS 封装到模块中的方法。这样，它就不会意外地泄漏到其他人的样式中。尽管应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。在 React 中，CSS Modules 通常将 CSS 文件与 React 组件文件共存。

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

    其次，推荐的是被称作为 styled components，作为 React 的 CSS-in-JS 解决方案之一。这个方法是由一个名为 styled-components 的库提供的，它将样式与 JavaScript 共享到 React 组件的旁边:

    1. import styled from'styled-components';
    2. const BlueHeadline = styled.h1`
    3. color: blue;
    4. `;
    5. const Headline = ({ title }) =>
    6. <BlueHeadline>
    7.   {title}
    8. </BlueHeadline>

    第三，推荐 Tailwind CSS 作为一个函数式的 CSS 解决方案:

    1. const Headline = ({ title }) =>
    2. <h1 className="text-blue-700">
    3.   {title}
    4. </h1>

    是否选择 CSS in CSS、 CSS in js 或函数式 CSS 取决于您。所有的策略都适用于大型的 React 应用程序。
    建议:

  • CSS-in-CSS with CSS Modules

  • CSS-in-JS with Styled Components

  • Functional CSS with Tailwind CSS

    React UI 库

    如果不想从头开始构建所有必要的 React UI 组件，可以选择 React UI Library 来完成这项工作。所有这些都有一些基本的组件，比如按钮，下拉菜单，对话框和列表。有很多 UI 库可供 React 选择:

  • Ant Design

  • Chakra UI
  • Tailwind UI
  • Semantic UI
  • Material UI

  • React Bootstrap 1. React Bootstrap

    React 动画

    任何 web 应用程序中的动画都是从 CSS 开始的。最终会发现 CSS 动画并不能满足需求。通常开发人员会检查 React Transition Group，这样他们就可以使用 React 组件执行动画。其他著名的 React 动画库有:

  • react-motion

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

建议:

  • React Transition Group

    React 可视化和图表库

    如果真的想自己从头开始构建图表，没办法不去学习 D3 。这是一个底层的可视化库，它提供了创建令人惊叹的图表所需的一切。然而，学习 D3 是一个完全不同的冒险，因此许多开发人员只是想选择一个 React 图表库，它可以为他们做任何事情，以换取灵活性。以下是一些流行的解决方案:

  • nivo目前不支持React Native

  • Victory支持React Native
  • react-vis
  • Recharts

  • Chart Parts

    React 中的表单库

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

  • Formik

  • React Hook Form

    React 中的网络请求库

    向远程 API 发出请求，以便在 React 中获取数据。现代浏览器带有本地获取 API 来执行异步数据请求:
    向远程 API 发出请求，以便在 React 中获取数据。现代浏览器带有本地获取 API 来执行异步数据请求:
    向远程 API 发出请求，以便在 React 中获取数据。现代浏览器带有本地获取 API 来执行异步数据请求:

    1. function App() {
    2. React.useEffect(() => {
    3.   const result = fetch(my/api/domain)
    4.     .then(response => response.json())
    5.     .then(result => {
    6.       // do success handling
    7.       // e.g. store in local state
    8.     });
    9.   setData(result.data);
    10. });
    11. return (
    12.   ...
    13. );
    14. }

    基本上，不需要添加任何其他库来完成这项工作。但是，有时候不仅需要提供复杂的异步请求，还需要它们具有更强大的功能，而且只是一个轻量级的库。推荐的这些库之一称为 axios。当您的应用程序增大时，可以使用它来代替本地获取 API。
    如果您有足够的时间来处理 GraphQL API，建议您使用 Apollo Client。可供选择的 GraphQL 客户端将是 urql 或 Relay。
    建议:

  • 浏览器的本地 fetch API

  • axios

  • Apollo Client

    React 类型检查

    幸运的是 React 有自己的类型检查能力。使用 PropTypes，可以为 React 组件定义传入的 props。无论何时向组件传递了错误的类型，在运行应用程序时都会收到错误消息。但是这种形式的类型检查只应该用于较小的应用程序。

    1. import PropTypes from'prop-types';
    2. const List = ({ list }) =>
    3. <div>
    4.   {list.map(item => <div key={item.id}>{item.title}</div>)}
    5. </div>
    6. List.propTypes = {
    7. list: PropTypes.array.isRequired,
    8. };

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

  • TypeScript

    React 代码风格

    对于代码风格，基本上有三个选项可以用的。
    第一种方法是遵循一个被社区所接受的风格指南。一个流行的 Airbnb 开源的React style guide 。即使没有刻意遵循这些样式指南，但是读一读它们，在 React 中获得常见代码样式的要点是有意义的。
    第二种方法是使用 linter，比如 ESLint。虽然样式指南只给出建议，但是 linter 在应用程序中强制执行这个建议。例如，可以要求遵循流行的 Airbnb 样式指南， IED/编辑器会显示每一个错误。
    第三种也是最流行的方法是使用 Prettier。它是一个强制的代码格式化程序。您可以将其集成到编辑器或 IDE 中，使其在每次保存文件时格式化您的代码。也许它并不总是符合您的口味，但至少您不必再担心自己或团队代码库中的代码格式。虽然 Prettier 不能取代 ESLint，但是它与 ESLint 的集成非常好。
    建议:

  • ESLint

  • Prettier

    React 认证

    在较大的 React 应用程序中，可能希望引入具有注册、登录和退出功能的身份验证。此外，密码重置和密码更改功能往往是需要的。这些特性远远超出了 React，因为后端应用程序为您管理这些事情。
    通常的方法是使用自定义身份验证实现自己的自定义后端应用程序。如果您不想启动自己的身份验证，可以考虑类似 Passport.js 的东西。
    如果根本不想关心后端，以下三种解决方案可能适合:

  • Firebase

  • Auth0
  • AWS Cognito

如果正在寻找身份验证 + 数据库的一体化解决方案，请坚持使用 Firebase 或 AWS。
建议:

  • DIY: Custom Backend

  • Get 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 Library

  • E2E Tests: Cypress 2e test: Cypress

    用于 React 的工具库

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

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

    但是，可能需要选择一个实用程序库来提供更详细的功能。您甚至可能希望在将这些实用函数链接起来时更加灵活，甚至可以将它们动态地组合在一起。这时，将引入一个实用程序库: Lodash 或 Ramda。对于每一个 JavaScript 开发者来说，Lodash 是一个更加实际的库，而 Ramda 在函数式编程中有一个强大的核心。请记住，现代 JavaScript 提供了很多开箱即用的特性，现在使用实用程序库的必要性已经降低了。
    建议:

  • JavaScript

  • Lodash

    react 和不可变的数据机构

    原生 JavaScript 提供了大量内置工具来处理数据结构，就像它们是不可变的一样。但是，如果您和您的团队认为有必要实施不可变的数据结构，最流行的选择之一是 Immer。任何时候有人问到 JS 中的不变性(immutability)，大家都会指出 Immer，并且这可以加上 redux 或 React hooks。

    React 国际化

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

  • react-i18next

  • react-intl
  • LinguiJS
  • FBT

建议:

  • react-i18next

    React 富文本编辑器

    当涉及到在 React 中的富文本编辑器时：

  • Draft.js

  • Slate

    React 中的支付

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

  • PayPal

  • Stripe Elements 或 Stripe Checkout

    React 中的时间

    如果 React 应用程序正在处理大量的日期和时区，应该引入一个库来管理这些事情。最受欢迎的库是 moment.js。更轻量级的替代品是 date-fns 和 Day.js。

    Reac 桌面应用

    Electron 是跨平台桌面应用程序的首选框架。不过，也有其他选择，例如:

  • NW.js

  • Neutralino.js

    React 的移动开发

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

    REACT VR/AR

    很有可能用 React 深入虚拟现实或者增强现实中的库是：

  • React 360

  • react-viro

  • react-native-arkit

    为 React 设计原型

    如果来自 UI/UX 背景，那么可能希望使用一个工具为新的 React 组件、布局或 UI/UX 概念进行快速原型设计。另一个流行的工具是 Framer。

    为 React 书写文档

    如果负责为软件、 UI 库或者其他东西编写文档，那么可以使用一些简洁的 React 文档工具。已经广泛地使用了 Storybook，他非常好用，但是也有其他解决方案的好处:

  • Styleguidist

  • docz

  • Docusaurus

    总结

    所以最终，React 生态系统可以看作是一个 React 的框架，但它保持灵活性。它是一个灵活的框架，您可以自己决定选择哪些库。您可以从小型开始，只添加库来解决特定的问题。当应用程序增长时，您可以沿途扩展构建块。否则可以通过使用普通的 React 来保持轻量级。因此，这里再次列出了可以补充 React 作为应用程序关于不同项目大小的核心的库。

    小型应用程式

  • 样板: create-react-app

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

  • React 桌面: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
  • 数据库:Firebase
  • Ui 库:none 或 UI 组件库
  • 表单库:none 或 Formik 或 React Hook Form
  • 测试库:Jest with React Testing Library
  • 实用程序库:JavaScript
  • 国际化:react-i18next

  • React 桌面: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-i18next
  • React 桌面:Electron