react-roadmap

by SangKa

React 学习路线图 - 2018 版

200 Stars 30 Forks Last release: Not found Other 37 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React 学习路线图

此学习路线将指引你在 2018 年成为 React 开发者

此仓库是 react-developer-roadmap 的中文版。

下面的思维导图展示了 React 的学习路线以及在学习道路上所需要学习的东西。我画此图的目的主要是为了让问我“我接下来要学什么才能成为 React 开发者?”的人有一个清晰的目标。

免责声明

此学习路线图的目的是为了 React 整体生态有个概念。如果你对于接下来要学习什么感到困惑的话,它将指引你,但并不会鼓励你去盲目地追从一些时髦和新潮的技术。你应该理解为什么某个工具在某些情况下比另一个更加适合,记住时髦和新潮的技术并不总是最适合用于工作当中

学习路线图

Roadmap

资料

  1. 基础
    1. HTML
      • 学习 HTML 基础
      • 写些页面作为练习
    2. CSS
      • 学习 CSS 基础
      • 在上一步练习的基础上为页面添加样式
      • 使用 grid 和 flexbox 为页面布局
    3. JS 基础
      • 熟悉语法
      • 学习 DOM 的基础操作
      • 学习 JS 中的经典机制 (提升、事件冒泡、原型)
      • 发起一些 AJAX (XHR) 请求
      • 学习新功能 (ES 6+)
      • 此外,熟悉下 jQuery 库
  2. 开发通用技能
    1. 学习 GIT ,在 GitHub 上创建一些仓库,并与其他人分享你的代码
    2. 了解 HTTP(S) 协议,请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)
    3. 别害怕使用 Google Google 的强力搜索
    4. 熟悉终端,配置 shell (bash、zsh、fish)
    5. 读一些数据结构和算法的书
    6. 读一些设计模式的书
  3. 官方网站上学习 React ,或者看一些教程
  4. 熟悉一些将会用到的工具
    1. 包管理工具
    2. 任务执行工具
    3. Webpack
    4. Rollup
    5. Parcel
  5. 样式
    1. CSS 预处理
    2. CSS 框架
    3. CSS 架构
    4. CSS in JS
  6. 状态管理
    1. Component State/Context API
    2. Redux
      1. 异步 actions (副作用)
      2. 数据持久化
      3. Redux Form
    3. MobX
  7. 类型检查
  8. 表单
  9. 路由
  10. API 客户端
    1. REST
    2. GraphQL
  11. 工具库
  12. 测试
    1. 单元测试
    2. 端到端测试
    3. 集成测试
  13. 国际化
  14. 服务端渲染
  15. 静态网站生成器
  16. 后端集成框架
  17. 移动端
  18. 桌面端
  19. 虚拟现实

总结

如果你认为此学习路线图还有改进之处,请提 PR 或 issues 。还有,我会持续进行补充与完善,所以你可能会想要给我个 star 以便于以后浏览。

参与贡献

学习路线图是使用 Draw.io 画的。文件就放在

/src
目录下。想要修改思维导图,先打开 draw.io ,点击 Open Existing Diagram 然后选择
xml
文件。之后就会打开思维导图,修改之后上传后更新 README 的 PNG 图片 (需要导出),然后提交 PR 。
  • 提交 PR 以帮助改进
  • 在 issues 中进行讨论想法
  • 帮忙宣传

License

License: CC BY-NC-SA 4.0

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.