React 学习路线图 2018版
本文首发于知乎，各位可以通过点击文章下方的阅读原来来访问原文地址。
文中有多处学习资料链接，大家可以通过访问原文来获取
这个 React 学习路线的思维导图来源自 Adam Gołąb 的 react-developer-roadmap 。截止至本文发布时，原仓库已经有了中文版，大家可自行选择查阅，由于是 roadmap 的聚合类列表，所以翻译方面差异不会很大。
学习路线图
资料
1.基础
i.HTML
·学习 HTML 基础
·写些页面作为练习
ii.CSS
·学习 CSS 基础
·在上一步练习的基础上为页面添加样式
·使用 grid 和 flexbox 为页面布局
iii.JS 基础
·熟悉语法
·学习 DOM 的基础操作
·学习 JS 中的经典机制 (提升、事件冒泡、原型)
·发起一些 AJAX (XHR) 请求
·学习新功能 (ES 6+)
·此外，熟悉下 jQuery 库
2.开发通用技能
i.学习 GIT ，在 GitHub 上创建一些仓库，并与其他人分享你的代码
ii.了解 HTTP(S) 协议，请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)
iii.别害怕使用 Google Google 的强力搜索
iv.熟悉终端，配置 shell (bash、zsh、fish)
v.读一些数据结构和算法的书
vi.读一些设计模式的书
3.在官方网站上学习 React ，或者看一些教程
4.熟悉一些将会用到的工具
i.包管理工具
·npm
·yarn
·pnpm
ii.任务执行工具
·npm scripts
·gulp
○Webpack
○Rollup
○Parcel
5.样式
CSS 预处理
·Sass/SCSS
·PostCSS
·Less
·Stylus
CSS 框架
·Bootstrap
·Materialize、Material UI、Material Design Lite
·Bulma
·Semantic UI
CSS 架构
·BEM
·CSS Modules
·Atomic
·OOCSS
·SMACSS
·SUITCSS
CSS in JS
·Styled Components
·Radium
·Emotion
·JSS
·Aphrodite
6.状态管理
i.Component State/Context API
ii.Redux
a.异步 actions (副作用)
·Redux Thunk
·Redux Better Promise
·Redux Saga
·Redux Observable
b.数据持久化
·Redux Persist
·Redux Phoenix
·Redux Form
iii.MobX
7.类型检查
○PropTypes
○TypeScript
○Flow
8.表单
○Redux Form
○Formik
○Formsy
○Final Form
9.路由
○React-Router
○Router5
○Redux-First Router
○Reach Router
10.API 客户端
i.REST
·Fetch
·SuperAgent
·axios
ii.GraphQL
·Apollo
·Relay
·urql
11.工具库
○Lodash
○Moment
○classnames
○Numeral
○RxJS
○Ramda
12.测试
i.单元测试
·Jest
·Enzyme
·Sinon
·Mocha
·Chai
·AVA
·Tape
ii.端到端测试
·Selenium, Webdriver
·Cypress
·Puppeteer
·Cucumber.js
iii.集成测试
·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 中进行讨论想法
- 帮忙宣传