该指南将助你在 2019 成为一名 React 开发者

你可以在下面找到一张图，该图展示了你可以选取的路径及你想学习的库，从而成为一名 React 开发者。“作为 React 开发者，我接下来应该学习什么？”，我把这张图作为建议给每个问过我这一问题的人。

免责声明

该指南的目的是为了给你心有个大概的轮廓。如果你对接下来要学习的内容感到困惑，指南将指导你而不是鼓励你选择时髦和新颖的东西。 你应该逐渐理解为什么一种工具比另一种工具更适合某些情况，并且记住时髦和新颖的东西并不总是意味着最适合这个工作。

资源

1. 基础
2. HTML

• 学习 HTML 基础知识
• 做几个页面来练习

1. CSS

• 学习 CSS 基础知识
• 完成上一步的样式页面
• 使用 grid 布局和 flexbox 布局构建页面

1. JS 基础

• 熟悉语法
• 学习 DOM 的基本操作
• 学习 JS 的典型机制（状态提升，事件冒泡，原型）
• 实现一些 AJAX（XHR）调用
• 学习新特性 (ECMA Script 6+)
• 另外，熟悉 jQuery 库

1. 常用开发技能
2. 学习 GIT 的使用, 在 GitHub 上创建一些仓库, 并和其他人分享你的代码
3. 掌握 HTTP(S) 协议, 及其请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)
4. 不要害怕使用 Google, 使用 Google 进行强力搜索
5. 熟悉终端，并配置你的 shell (bash, zsh, fish)
6. 阅读一些关于算法和数据结构的书籍
7. 阅读一些关于设计模式的书籍
8. 在官网上学习 React 或者完成一些课程
9. 熟悉你将用到的工具
10. 包管理器

• npm
• yarn
• pnpm

1. 任务运行器

• npm 脚本
• gulp
• Webpack
• Rollup
• Parcel

1. 样式
2. CSS 预处理器

• Sass/CSS
• PostCSS
• Less
• Stylus

1. CSS 框架

• Bootstrap
• Materialize, Material UI, Material Design Lite
• Bulma
• Semantic UI

1. CSS 架构

• BEM
• CSS Modules
• Atomic
• OOCSS
• SMACSS
• SUITCSS

1. JS 编写 CSS

• Styled Components
• Radium
• Emotion
• JSS
• Aphrodite

1. 状态管理
2. 组件状态/上下文 API
3. Redux
4. 异步操作 (Side Effects)

• Redux Thunk
• Redux Better Promise
• Redux Saga
• Redux Observable

1. 助手

• Rematch
• Reselect

1. 数据持久化

• Redux Persist
• Redux Phoenix

1. Redux Form
2. MobX
3. 类型检查器

• PropTypes
• TypeScript
• Flow

1. 表单助手

• Redux Form
• Formik
• Formsy
• Final Form

1. 路由

• React-Router
• Router5
• Redux-First Router
• Reach Router

1. API 客户端
2. REST

• Fetch
• SuperAgent
• axios

1. GraphQL

• Apollo
• Relay
• urql

1. 实用工具库

• Lodash
• Moment
• classnames
• Numeral
• RxJS
• ImmutableJS
• Ramda

1. 测试
2. 单元（Unit）测试

• Jest
• Enzyme
• Sinon
• Mocha
• Chai
• AVA
• Tape

1. 端到端（E2E）测试

• Selenium, Webdriver
• Cypress
• Puppeteer
• Cucumber.js
• Nightwatch.js

1. 集成测试

• Karma

1. 国际化（i18n)

• React Intl
• React i18next

1. 服务端渲染（SSR)

• Next.js
• After.js
• Rogue

1. 静态网站生成器

• Gatsby

1. 后端集成框架

• React on Rails

1. 移动端

• React Native
• Cordova/Phonegap

1. 桌面端

• Proton Native
• Electron
• React Native Windows

1. 虚拟现实（VR)

• React 360

文末

看完之后我不想学了咋办？

耐下心看看，如果你真是做前端的，里面没多少东西，你觉得呢？

好些工具了解下是什么，实战中用到了知道有这个东西，翻翻官方文档，拿过来用不就好了！

内容来源：https://github.com/adam-golab/react-developer-roadmap