React 曾经降生很久了，自从它降生末尾，围绕组件驱动构成了一个十分片面的生态，但是来自其他编程言语或许框架的开发人员很难找到要构建一个 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/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 带有内置的 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 是很好的。
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 处置方案:
(责任编辑：admin)