您从未意识到自己需要的针对初学者的 React 路线图。

React 是开发动态 Web 应用最常用的 JavaScript 库之一。它拥有庞大的社区和一支专业的开发团队。
虽然 React 本身相当简单，但仅仅学习一个库是远远不够的，尤其是在构建复杂的 Web 应用时。
在本文中，我将为您规划一个路线图，帮助您学习如何利用 React 构建实际应用。我将介绍一些您应该熟悉的关键 React 原则和库。

下面列出了在进入 React 之前必须熟悉的一些语言和框架。

1. 基础知识
   1. HTML
      • 学习 HTML 基础知识
      • 做几页作为练习
   2. CSS
      • 学习 CSS 基础知识
      • 上一步中的页面样式
      • 使用网格和弹性框构建页面
   3. JS 基础
      • 熟悉语法
      • 学习 DOM 的基本操作
      • 学习 JS 的典型机制（提升、事件冒泡、原型设计）
      • 进行一些 AJAX（XHR）调用
      • 学习新功能（ECMA Script 6+）
      • 此外，熟悉 jQuery 库
2. 通用发展技能
   1. 学习 GIT，在 GitHub 上创建一些存储库，与其他人分享你的代码
   2. 了解 HTTP(S) 协议、请求方法（GET、POST、PUT、PATCH、DELETE、OPTIONS）
   3. 不要害怕使用谷歌，用谷歌进行强力搜索
   4. 熟悉终端，配置你的shell（bash、zsh、fish）
   5. 阅读一些关于算法和数据结构的书籍
   6. 阅读一些关于设计模式的书籍
3. 在官方网站上学习 React或完成一些课程
4. 熟悉您将要使用的工具
   1. 包管理器
      • npm
      • 纱
      • 下午
   2. 任务运行器
      • npm 脚本
      • 吞咽
   3. Webpack
   4. 汇总
   5. 包裹
5. 造型
   1. CSS预处理器
      • Sass/CSS
      • PostCSS
      • 较少的
      • 触控笔
   2. CSS框架
      • 引导程序
      • Materialize、Material UI、Material Design Lite
      • 布尔玛
      • 语义用户界面
   3. CSS 架构
      • 边界元法
      • CSS 模块
      • 原子
      • 海外合作与交流服务
      • 斯玛特-麦克斯
      • 苏伊士运河交通安全局
   4. JS 中的 CSS
      • 样式化组件
      • 镭
      • 情感
      • 联合服务
      • 阿芙罗狄蒂
6. 状态管理
   1. 组件状态/上下文 API
   2. Redux
      1. 异步操作（副作用）
         • Redux Thunk
         • Redux 更好的承诺
         • Redux Saga
         • Redux 可观察对象
      2. 助手
         • 重赛
         • 重新选择
      3. 数据持久化
         • Redux 持久化
         • Redux Phoenix
      4. Redux 表单
   3. MobX
7. 类型检查器
   • PropTypes
   • TypeScript
   • 流动
8. 表单助手
   • Redux 表单
   • 福米克
   • 福尔姆西
   • 最终形态
9. 路由
   • React-Router
   • 路由器5
   • Redux-First 路由器
   • 到达路由器
10. API 客户端
    1. 休息
       • 拿来
       • 超级代理
       • axios
    2. GraphQL
       • 阿波罗
       • 中继
       • urql
11. 实用程序库
    • Lodash
    • 片刻
    • 类名
    • 数字
    • RxJS
    • ImmutableJS
    • 拉姆达
12. 测试
    1. 单元测试
       • 笑话
       • 酶
       • 西农
       • 摩卡
       • 柴
       • AVA
       • 磁带
    2. 端到端测试
       • Selenium和Web 驱动
       • 柏
       • 木偶师
       • Cucumber.js
       • Nightwatch.js
    3. 集成测试
       • 因果
13. 国际化
    • React Intl
    • React i18next
14. 服务器端渲染
    • Next.js
    • After.js
    • 流氓
15. 静态站点生成器
    • 盖茨比

现在您可以按照下面提供的路线图开始您的旅程。

来源

感谢您的阅读。

下次再见，
Abhiraj