const Headline = ({ title }) => <h1 className="text-blue-700"> {title} </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
Victory
react-vis
Recharts
Chart Parts
React 中的表单库在 React 中最盛行的表单库是 Formik。 它提供了从验证到提交到构成形状管理所需的一切。另外一个选择是 React Hook Form。 假设您末尾运用更复杂的表单，这两种办法关于 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。
建议:
阅读器的本地 fetch API
axios
Apollo 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 的集成十分好。
建议:
ESLint
Prettier
React 认证在较大的 React 运用顺序中，您能够希望引入具有注册、登录和参加功用的身份验证。 此外，密码重置和密码更改功用往往是需求的。 这些特性远远超出了 React，由于后端运用顺序为您管理这些事情。
通常的办法是运用自定义身份验证明现本人的自定义后端运用顺序。 假设您不想启动本人的身份验证，可以思索相似 Passport.js 的东西。
假设你基本不想关心后端，以下三种处置方案能够适宜你:
Firebase
Auth0
AWS Cognito
假设您正在寻觅身份验证 + 数据库的一体化处置方案，请坚持运用 Firebase 或 AWS。
建议:
DIY: Custom Backend
Get it off the shelf: Firebase
React 主机 (责任编辑：admin)