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 中进行讨论想法
• 帮忙宣传