首次发表于本人博客： 前端桃园声明：本文为译文，原文连接：https://www.robinwieruch.de/r...javascript
React 已经诞生好久了，自从它诞生开始，围绕组件驱动造成了一个很是全面的生态，可是来自其余编程语言或者框架的开发人员很难找到要构建一个 React 系统的全部组件。若是你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所须要的全部功能，php
然而对于 React 来讲，它的核心并非完善全部的可选库。 这是优点仍是劣势取决于你本身。 当我从 Angular 切换到 React，我绝对经历了它做为 React 的优点。css
只有经过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。 它带有一些内置的解决方案，例如，用于本地状态和反作用的 React Hooks。html
下面的文章将向您提供一些本身总结的方法，以便从补充库中进行选择，从而构建一个全面的 React 应用程序。前端
若是你是一个彻底不熟悉 React 的初学者想建立一个 React 项目，加入 React 的世界。有许多工具包项目能够选择，每一个项目都试图知足不一样的需求。 React 社区的现状是经过 Facebook 的 create-react-app(CRA)。 它提供了一个零配置的设置，并给你一个开箱即用而且简单的启动和运行的 React 应用程序。 全部的工具都对您隐藏起来了，可是最终要由您来更改这些工具。java
若是你已经熟悉 React，你能够选择它流行的入门工具包之一: Next.js 和 Gatsby.js。 这两个框架都创建在 React 之上，所以你应该已经熟悉 React 的基本原理。 Next.js 用于服务器端渲染(如动态 web 应用程序) ，Gatsby.js 用于静态站点生成(如博客、登录页面)。react
若是您只是想了解这些初学者工具包是如何工做的，那么能够尝试从头开始设置 React 项目。 你将从一个基本的 HTML 和 JavaScript 项目开始，而后本身添加 React 和它的支持工具。webpack
若是你想选择一个自定义样板项目，试着缩小你的要求。 样板文件应该是最小的，不要试图解决全部问题。 它应该针对你的问题。 例如，gatsby-Firebase-authentication 样板文件只在 Gatsby.js 中为您提供了完整的 Firebase 身份验证机制，可是其余全部内容都被省略了。ios
建议：git
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 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 应用程序。
建议:
若是您不想从头开始构建全部必要的 React UI 组件，您能够选择 React UI Library 来完成这项工做。 全部这些都有一些基本的组件，好比按钮，下拉菜单，对话框和列表。 有不少 UI 库可供 React 选择:
任何 web 应用程序中的动画都是从 CSS 开始的。 最终你会发现 CSS 动画并不能知足你的需求。 一般开发人员会检查 React Transition Group，这样他们就可使用 React 组件执行动画。 其余著名的 React 动画库有:
建议:
若是你真的想本身从头开始构建图表，你没办法不去学习 D3 。 这是一个底层的可视化库，它为你提供了建立使人惊叹的图表所需的一切。 然而，学习 D3 是一个彻底不一样的冒险，所以许多开发人员只是想选择一个 React 图表库，它能够为他们作任何事情，以换取灵活性。 如下是一些流行的解决方案:
在 React 中最流行的表单库是 Formik。 它提供了从验证到提交到造成状态管理所需的一切。另一个选择是 React Hook Form。 若是您开始使用更复杂的表单，这两种方法对于 React 应用程序都是有效的解决方案。
建议:
很快，您就必须向远程 API 发出请求，以便在 React 中获取数据。 现代浏览器带有本地获取 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。 当您的应用程序增大时，可使用它来代替本地获取 API。
若是您有足够的时间来处理 GraphQL API，我建议您使用 Apollo Client。 可供选择的 GraphQL 客户端将是 urql 或 Relay。
建议:
幸运的是 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。
建议:
对于代码风格，基本上有三个选项能够用的。
第一种方法是遵循一个被社区所接受的风格指南。 一个流行的 Airbnb 开源的React style guide 。 即便你没有刻意遵循这些样式指南，可是读一读它们，在 React 中得到常见代码样式的要点是有意义的。
第二种方法是使用 linter，好比 ESLint。 虽然样式指南只给出建议，可是 linter 在应用程序中强制执行这个建议。 例如，你能够要求遵循流行的 Airbnb 样式指南，你的 IED/编辑器会告诉你每个错误。
第三种也是最流行的方法是使用 Prettier。 它是一个强制的代码格式化程序。 您能够将其集成到编辑器或 IDE 中，使其在每次保存文件时格式化您的代码。 也许它并不老是符合您的口味，但至少您没必要再担忧本身或团队代码库中的代码格式。 虽然 Prettier 不能取代 ESLint，可是它与 ESLint 的集成很是好。
建议:
在较大的 React 应用程序中，您可能但愿引入具备注册、登陆和退出功能的身份验证。 此外，密码重置和密码更改功能每每是须要的。 这些特性远远超出了 React，由于后端应用程序为您管理这些事情。
一般的方法是使用自定义身份验证明现本身的自定义后端应用程序。 若是您不想启动本身的身份验证，能够考虑相似 Passport.js 的东西。
若是你根本不想关心后端，如下三种解决方案可能适合你:
若是您正在寻找身份验证 + 数据库的一体化解决方案，请坚持使用 Firebase 或 AWS。
建议:
您能够像其余 web 应用程序同样部署和托管 React 应用程序。 若是你想拥有彻底的控制权，选择像Digital Ocean这样的。 若是你但愿有人来处理全部的事情，若是你已经在使用第三方的身份验证/数据库，Netlify 是一个很受欢迎的解决方案，好比 Firebase，你能够检查他们是否也提供主机服务(好比 Firebase Hosting)。 您还可使用 S3的静态站点与 Cloudfront 一块儿托管。
若是您想深刻了解 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 是最受欢迎的选择。
建议:
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 提供了不少开箱即用的特性，如今使用实用程序库的必要性已经下降了。
建议:
原生 JavaScript 提供了大量内置工具来处理数据结构，就像它们是不可变的同样。 可是，若是您和您的团队认为有必要实施不可变的数据结构，最流行的选择之一是 Immer。 就我我的而言，我不使用它，可是任什么时候候有人问到 JS 中的不变性(immutability)，你们都会指出 Immer，而且这能够加上 redux 或 React hooks。
当涉及到 React 应用程序的国际化 时，您不只须要考虑翻译，还须要考虑多元化、日期和货币的格式化，以及其余一些事项。 如下是最受欢迎的处理该问题的库:
建议:
当涉及到在 React 中的富文本编辑器时，我只能想到如下内容，由于我没有在 React 中使用任何其余内容:
和其余网络应用同样，最多见的支付提供商是 Stripe 和 PayPal。 二者均可以整齐地集成到 React 中。
若是你的 React 应用程序正在处理大量的日期和时区，你应该引入一个库来为你管理这些事情。 最受欢迎的库是 moment.js。 更轻量级的替代品是 date-fns 和 Day.js。
Electron 是跨平台桌面应用程序的首选框架。 不过，也有其余选择，例如:
我想把 React 从网络带到移动设备的首选解决方案仍然是 React Native。 若是您是 React Native 开发人员，想要建立一个 Web 应用程序，您应该查看 React Native Web。
实话说，咱们颇有可能用 React 深刻虚拟现实或者加强现实中，我没有使用过这些库中的任何一个，可是它们是我在谈到 React AR/VR 时从大脑闪过的就是：
若是您来自 UI/UX 背景，那么您可能但愿使用一个工具为新的 React 组件、布局或 UI/UX 概念进行快速原型设计。 我之前用过 Sketch，但最近转到了 Figma。 尽管我二者都喜欢，但我如今并不后悔使用 Figma。 另外一个流行的工具是 Framer。
若是你负责为你的软件、 UI 库或者其余东西编写文档，那么你可使用一些简洁的 React 文档工具。 我已经普遍地使用了 Storybook，我能够说他很是好用，可是我也据说了其余解决方案的好处:
因此最终，React 生态系统能够看做是一个 React 的框架，但它保持灵活性。 它是一个灵活的框架，您能够本身决定选择哪些库。 您能够从小型开始，只添加库来解决特定的问题。 当应用程序增加时，您能够沿途扩展构建块。 不然你能够经过使用普通的 React 来保持轻量级。 所以，这里再次列出了能够补充 React 做为应用程序关于不一样项目大小的核心的库。 请记住，这个列表是个人我的见解，我也渴望获得你的反馈。
之前的建议是我的的。 您能够为理想的 React 应用程序选择本身的灵活框架。 每个“理想”的 React 设置都是主观的，取决于开发人员和项目的需求。 毕竟，没有理想的 React 应用程序设置。
最后欢迎关注个人我的公众号「前端桃园」，天天推送前端精品文章 欢迎关注个人公众号「前端桃园」