roadmap.png

基础

HTML
学习 HTML 基础学习 HTML 基础
CSS
学习 CSS 基础在上一步练习的基础上为页面添加样式使用 grid 和 flexbox 为页面布局
JS 基础
熟悉语法学习 DOM 的基础操作学习 JS 中的经典机制 (提升、事件冒泡、原型)发起一些 AJAX (XHR) 请求学习新功能 (ES 6+)此外，熟悉下 jQuery 库

开发通用技能

学习 GIT ，在 GitHub 上创建一些仓库，并与其他人分享你的代码了解 HTTP(S) 协议，请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)别害怕使用 Google Google 的强力搜索熟悉终端，配置 shell (bash、zsh、fish)读一些数据结构和算法的书读一些设计模式的书
在官方网站上学习 React ，或者看一些教程熟悉一些将会用到的工具
包管理工具
npm yarn pnpm
任务执行工具
npm scripts gulp
构建工具
Webpack Rollup Parcel

样式

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

状态管理

Component State/Context API Redux
异步 actions (副作用)
Redux Thunk Redux Better Promise Redux Saga Redux Observable
数据持久化
Redux Persist Redux Phoenix
Redux Form
MobX
类型检查
PropTypes TypeScript Flow
表单
Redux Form Formik Formsy Final Form

路由

React-Router Router5 Redux-First Router Reach Router
API 客户端
REST
Fetch SuperAgent axios
GraphQL
Apollo Relay urql

工具库

Lodash Moment classnames Numeral RxJS Ramda
测试
单元测试
Jest Enzyme Sinon Mocha Chai AVA Tape
端到端测试
Selenium, Webdriver Cypress Puppeteer Cucumber.js
集成测试
Karma

国际化

React Intl React i18next

服务端渲染

Next.js After.js

静态网站生成器

Gatsby

后端集成框架

React on Rails

移动端

React Native Cordova/Phonegap

桌面端

Proton Native Electron React Native Windows

虚拟现实

React 360