React JS 2024 路线图

在上一篇博客中，我谈到了为什么人们应该更喜欢使用 React 作为前端。（https://dev.to/digvijayjadhav98/why-choose-react-for-frontend-4m23）现在我们来看看 React 开发者路线图，它将指导您从新手开发人员成长为熟练且经验丰富的开发人员。

React 是用于设计丰富且交互式的用户界面的最流行的 JavaScript 库之一。

以下是学习 React 的思维导图。

我记得刚开始学习 React 的时候，我很困惑，不知道该如何开始，也不知道在实际构建项目之前应该了解哪些东西。后来，我读了一些书，参考了一些博客、在线课程视频，并积累了两年的经验，对 React 有了足够的信心，知道什么该做，什么不该做。

假设你对 HTML、CSS 和 JS 有基本的了解

如果没有，请查看下面的资源部分。话虽如此，让我们开始吧。

我们将学习分为三个部分：基础知识、高级知识和生态系统

1.基本原理：

1. 创建 React 应用
2. 组件：React 应用程序由可重复使用的代码片段（称为组件）组成，在 React 中，您可以创建函数组件或类组件
3. 功能组件
4. 类组件
5. JSX：在 JavaScript 中编写类似 HTML 的代码，这就是所谓的 JSX，它是 JavaScript 的语法扩展，使用 JSX，你几乎可以描述 UI 应该是什么样子
6. Props 和 State：Props 代表属性，是组件的任意输入，在组件的可复用性方面起着重要作用。然而，Props 是只读的，组件永远无法修改自身的 Props。这时，你就可以开始学习 State 了，State 允许 React 组件更改其输出。
7. useState 和 useEffect Hooks
8. setState 和组件生命周期方法
9. 条件渲染
10. 列表和键
11. 构建简单表单

完成这些之后，我建议你做一个基本的小项目。这里有一些很酷的例子

✨每个初学者都应该尝试的 8 个 React 项目

2.生态系统：
React 不是框架，它是一个库，这意味着要完成你的 Web 应用程序，你需要有一个稳定的生态系统，涵盖样式、测试、可扩展性、性能和面向应用程序的依赖关系（例如，对于语言翻译，可以使用 i18Net，对于无服务器应用程序，可以检查 firebase 或 AWS lambda）

1. 状态管理：Redux / Mobx / Flux / redux-toolkit
2. 路由：React Router
3. 样式：样式组件、MaterialUI、Chakra、Tailwind.css、Bootstrap 等
4. 表单：Formik、React hook form
5. 测试：
   1. Cypress → 端到端测试
   2. Jest → 单元测试
6. 杂项：
   1. TypeScript
   2. 故事书
   3. React i18Net
   4. Firebase
   5. 实用的 React 库

了解完以上主题后，你将对 React 库有足够的信心，并准备好构建一些实时项目。接下来，你还应该关注性能优化、缓存、Cookie、安全性和 SEO。这将引出我们最后一点“进阶”部分。

1. 高级主题：

   1. 同构
   2. GraphQL
   3. 高阶组件
   4. 渲染道具
   5. 参考文献
   6. 错误边界
   7. 门户
   8. Http 请求：GET、PUT、POST、DELETE（fetch 或 axios）
   9. 缓存、Cookie、本地和会话存储 10.Hooks
      1. useContext
      2. useReducer
      3. useRef
      4. 使用备忘录
      5. useCallBack
      6. 定制挂钩

   学习之旅永无止境。如果你的 React 学习已经走到这一步，我建议你学习 Typescript，并转向 NextJS，因为 Next 消除了 React 的一些缺点，并提供了许多附加功能。人们也更喜欢学习 React Native，因为除了 Web 之外，你还可以构建 Android 和 iOS 应用程序。

   我的目的是从顶层介绍 React 的架构以及它包含的所有实用功能。以下是我在学习 ReactJS 时发现的一些最有用的资源。

   html 和 css：与 harry 一起编写代码：https://www.youtube.com/watch?v= GeykycZ4Ixs
   书籍：https://www.amazon.in/HTML-CSS-Design-Build-Websites/dp/1118008189

   React JS 所需的 JS：https://www.youtube.com/watch?v =XevQlT444qg

   普通 JS：https://www.youtube.com/watch?
   v=W6NZfCO5SIk JS ES6：https://www.youtube.com/watch ?v=NCwa_xi0Uuc

   React JS：
   播放列表：代码演变：https://www.youtube.com/watch?v =QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

   莫什：https://www.youtube.com/watch?v =Ke90Tje7VS0&t=813s

   *提示：*尝试在 Notion 或其他笔记应用上做笔记。尝试在文本信息中添加代码片段。这不仅能帮助你长时间记住，而且你不必每次都去谷歌搜索，可以直接参考你的笔记。