React 学习路线图 - 2018版

SangKa
10,234
原文链接： zhuanlan.zhihu.com
这个 React 学习路线的思维导图来源自 Adam Gołąb 的 react-developer-roadmap 。截止至本文发布时，原仓库已经有了中文版，大家可自行选择查阅，由于是 roadmap 的聚合类列表，所以翻译方面差异不会很大。

学习路线图

相关资源

  1. 基础
    1. HTML
      1. 学习 HTML 基础
      2. 学习 HTML 基础
    2. CSS
      1. 学习 CSS 基础
      2. 在上一步练习的基础上为页面添加样式
      3. 使用 grid 和 flexbox 为页面布局
    3. JS 基础
      1. 熟悉语法
      2. 学习 DOM 的基础操作
      3. 学习 JS 中的经典机制 (提升、事件冒泡、原型)
      4. 发起一些 AJAX (XHR) 请求
      5. 学习新功能 (ES 6+)
      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. 包管理工具
      1. npm
      2. yarn
      3. pnpm
    2. 任务执行工具
      1. npm scripts
      2. gulp
    3. 构建工具
      1. Webpack
      2. Rollup
      3. Parcel
  5. 样式
    1. CSS 预处理
      1. Sass/SCSS
      2. PostCSS
      3. Less
      4. Stylus
    2. CSS 框架
      1. Bootstrap
      2. Materialize、Material UI、Material Design Lite
      3. Bulma
      4. Semantic UI
    3. CSS 架构
      1. BEM
      2. CSS Modules
      3. Atomic
      4. OOCSS
      5. SMACSS
      6. SUITCSS
    4. CSS in JS
      1. Styled Components
      2. Radium
      3. Emotion
      4. JSS
      5. Aphrodite
  6. 状态管理
    1. Component State/Context API
    2. Redux
      1. 异步 actions (副作用)
        1. Redux Thunk
        2. Redux Better Promise
        3. Redux Saga
        4. Redux Observable
      2. 数据持久化
        1. Redux Persist
        2. Redux Phoenix
      3. Redux Form
    3. MobX
  7. 类型检查
    1. PropTypes
    2. TypeScript
    3. Flow
  8. 表单
    1. Redux Form
    2. Formik
    3. Formsy
    4. Final Form
  9. 路由
    1. React-Router
    2. Router5
    3. Redux-First Router
    4. Reach Router
  10. API 客户端
    1. REST
      1. Fetch
      2. SuperAgent
      3. axios
    2. GraphQL
      1. Apollo
      2. Relay
      3. urql
  11. 工具库
    1. Lodash
    2. Moment
    3. classnames
    4. Numeral
    5. RxJS
    6. Ramda
  12. 测试
    1. 单元测试
      1. Jest
      2. Enzyme
      3. Sinon
      4. Mocha
      5. Chai
      6. AVA
      7. Tape
    2. 端到端测试
      1. Selenium, Webdriver
      2. Cypress
      3. Puppeteer
      4. Cucumber.js
    3. 集成测试
      1. Karma
  13. 国际化
    1. React Intl
    2. React i18next
  14. 服务端渲染
    1. Next.js
    2. After.js
  15. 静态网站生成器
    1. Gatsby
  16. 后端集成框架
    1. React on Rails
  17. 移动端
    1. React Native
    2. Cordova/Phonegap
  18. 桌面端
    1. Proton Native
    2. Electron
    3. React Native Windows
  19. 虚拟现实
    1. React 360

仓库地址:

SangKa/react-roadmap
avatar
文章
阅读
粉丝