React 学习路线图

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

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

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

免责声明

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

学习路线图

资料

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. 包管理工具
      • npm
      • yarn
      • pnpm
   2. 任务执行工具
      • npm scripts
      • gulp
   • Webpack
   • Rollup
   • Parcel
5. 样式
   1. CSS 预处理
      • Sass/SCSS
      • PostCSS
      • Less
      • Stylus
   2. CSS 框架
      • Bootstrap
      • Materialize、Material UI、Material Design Lite
      • Bulma
      • Semantic UI
   3. CSS 架构
      • BEM
      • CSS Modules
      • Atomic
      • OOCSS
      • SMACSS
      • SUITCSS
   4. CSS in JS
      • Styled Components
      • Radium
      • Emotion
      • JSS
      • Aphrodite
6. 状态管理
   1. Component State/Context API
   2. Redux
      1. 异步 actions (副作用)
         • Redux Thunk
         • Redux Better Promise
         • Redux Saga
         • Redux Observable
      2. 数据持久化
         • Redux Persist
         • Redux Phoenix
      3. Redux Form
   3. MobX
7. 类型检查
   • PropTypes
   • TypeScript
   • Flow
8. 表单
   • Redux Form
   • Formik
   • Formsy
   • Final Form
9. 路由
   • React-Router
   • Router5
   • Redux-First Router
   • Reach Router
10. API 客户端
    1. REST
       • Fetch
       • SuperAgent
       • axios
    2. GraphQL
       • Apollo
       • Relay
       • urql
11. 工具库
    • Lodash
    • Moment
    • classnames
    • Numeral
    • RxJS
    • Ramda
12. 测试
    1. 单元测试
       • Jest
       • Enzyme
       • Sinon
       • Mocha
       • Chai
       • AVA
       • Tape
    2. 端到端测试
       • Selenium, Webdriver
       • Cypress
       • Puppeteer
       • Cucumber.js
    3. 集成测试
       • Karma
13. 国际化
    • React Intl
    • React i18next
14. 服务端渲染
    • Next.js
    • After.js
15. 静态网站生成器
    • Gatsby
16. 后端集成框架
    • React on Rails
17. 移动端
    • React Native
    • Cordova/Phonegap
18. 桌面端
    • Proton Native
    • Electron
    • React Native Windows
19. 虚拟现实
    • React 360

总结

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

参与贡献

学习路线图是使用 Draw.io 画的。文件就放在 /src 目录下。想要修改思维导图，先打开 draw.io ，点击 Open Existing Diagram 然后选择 xml 文件。之后就会打开思维导图，修改之后上传后更新 README 的 PNG 图片 (需要导出)，然后提交 PR 。

• 提交 PR 以帮助改进
• 在 issues 中进行讨论想法
• 帮忙宣传

License