11 个超棒的资源，助你将 React 应用提升到更高水平
目录
创建 React 应用
React 开发者工具
styled-components
故事书
CodeSandbox
最权威的 React Hooks 速查表
React Router
重制版
笑话
酶
GraphQL
结论
如果你之前使用过 ReactJS，你就会知道有很多工具和资源可以帮助我们这些前端开发者更轻松地完成工作。然而，并非每个人都在使用相同的工具，或者了解所有能够提升 ReactJS 项目效率的优秀资源。
因此，我决定撰写这篇文章，与大家分享我在开发 ReactJS 项目时经常使用的工具和资源。
🔖收藏这篇文章并分享给你的开发者朋友们！希望你们喜欢。
如果您想深入了解 ReactJS 并提升您的 JavaScript 技能，欢迎查看我的 ReactJS 在线课程（链接在此）。无需任何 ReactJS 经验。您将学习如何使用现代 ReactJS 逐步构建一个实际应用。
目录
- 创建 React 应用
- React 开发者工具
- styled-components
- 故事书
- CodeSandbox
- 最权威的 React Hooks 速查表
- React Router
- 重制版
- 笑话
- 酶
- GraphQL
创建 React 应用
每次启动新的 ReactJS 项目时，我都会使用这条命令。它快速简便，无需任何构建配置。只需一行命令行，即可启动并开始开发你的 Web 应用程序。
npx create-react-app my-app
您无需安装或配置任何工具，webpack因为Babel它们已经预先配置并隐藏。您只需专注于编写代码即可。
React 开发者工具
在调试 React 应用时，React DevTools是最知名的工具之一。它是 Chrome 和 Firefox 浏览器的内置扩展程序，支持 React 和 React Native。
如果你还没安装，我强烈建议你安装。它能大大简化你开发 React 应用的过程。
styled-components
如果你想轻松为 React 组件添加样式，那么 styled-components 就是你必须使用的库。虽然还有很多其他方法和库可以用来为应用添加样式，但我推荐styled-components 。为什么呢？
它能与你的 React 组件无缝集成，因为它使用 ES6 和 CSS 轻松实现样式设置。此外，它还是一个广受欢迎的库，拥有完善的文档。有了这个强大的库，React 组件的样式设置从未如此简单。
故事书
你是否曾经想过构建 React 组件时不受应用程序逻辑、周围组件等因素的干扰？
如果答案是肯定的，那么Storybook就是您需要的解决方案。它是一个用户界面开发环境和 UI 组件的实验平台。借助此工具，您可以独立创建组件，并在隔离的开发环境中以交互方式展示这些组件。它独立于您的主 React 应用程序运行，因此您无需担心应用程序特定的依赖项和要求。
此外，它还附带许多插件，可实现高级功能，并将您的开发体验提升到一个全新的水平。
CodeSandbox
CodeSandbox是一款在线代码编辑器，让您能够通过浏览器轻松创建和构建 Web 应用程序原型。
它提供了一系列模板，方便用户使用 React、Angular、Vue、Node 等技术轻松快速地搭建现代 Web 应用程序。
此外，社区还分享了许多公开的 CodeSandbox 项目和示例。不妨去看看，那里有很多很棒的东西。
最权威的 React Hooks 速查表
这是我写的。我为你准备了一份 React Hooks 的可视化速查表，帮助你快速掌握它们。实际上，它不仅仅是一份简单的单页速查表。我还为每个 React Hooks 都加入了一些实际应用案例，以便你真正理解它们的使用方法和场景。点击这里查看，并告诉我你的想法。
我本人每天都会使用这份速查表，用来快速复习某个 React Hook 的用法。我强烈建议你下载 PDF 版本，这样你就可以随时随地查看了。
React Router
在单页应用程序 (SPA) 中，我们使用同一个 HTML 页面，根据导航的不同呈现不同的效果。React 本身没有内置路由，但我们可以使用react-router库轻松实现路由功能。
React Router 会根据 URL 中使用的路由有条件地渲染要显示的特定组件。因此，如果您想轻松地在 React 应用中导航，请忘记传统的锚点标签，并将 React Router 添加到您的项目中。
对于任何 React 单页应用程序来说，这都是一个必备的库。
重制版
在 ReactJS 应用中，有很多方法可以用来管理状态。但是，当你在开发一个具有复杂状态逻辑的大型应用时，我强烈建议你使用Redux库。
Redux 是一个状态容器，旨在与 React 的组件模型完美配合。您只需定义如何从 Redux 中提取组件所需的值，组件即可将它们作为 props 接收。
它使集中管理应用程序的状态和逻辑变得容易。
笑话
Jest是一个测试框架，它与 React 配合使用效果非常好。事实上，在使用命令创建 React 应用时，它已经包含在内了create-react-app。
Jest 开箱即用，无需任何配置。它拥有功能丰富的 API，让测试变得轻而易举。它通常用作测试运行器，也可用于在测试用例中进行断言。
酶
Enzyme可以与 Jest 配合使用，用于渲染组件、访问 DOM 以及基于 DOM 进行断言。Enzyme 与 Jest 完美兼容。它可以用于单元测试和集成测试，而 Jest 主要用于快照测试。
它与 Jest 配合使用，可以轻松测试 React 组件。这是 Airbnb 出品的测试库，强烈建议您在下一个 React 项目中考虑使用它。
GraphQL
在所有前端应用程序中，都需要通过 API 调用从外部资源获取数据。GraphQL正是为此而生。它是一种查询语言，能够让 API 请求变得轻而易举。GraphQL 取代 REST 成为一种 API 设计范式，并正在成为服务器数据和功能公开的新标准。
通过编写 GraphQL 查询，您只需从 API 请求所需的数据。这不仅能让您的代码更易于维护，还能加快应用程序的开发速度。
此外，GraphQL 的一个值得一提的有趣特性是能够在单个请求中从多个资源获取数据。
所以，如果您仍然使用 REST 从 API 获取数据，那么您应该了解一下 GraphQL。
结论
如果您喜欢这篇文章，请不要忘记收藏并分享给您的朋友。如有任何疑问，欢迎在下方留言。
