React技术栈学习路线图

最近,项目上使用React构建前台,我突击了一下相关的知识,暂时搭建了一个简单的开发环境,总结了期间的学习资料,如下:

传统前端基础

  1. HTML+JavaScript+CSS

    1. W3school HTML教程
    2. W3school CSS教程
    3. 廖雪峰JavaScript基础教程
    4. 阮一峰JavaScript 标准参考教程
  2. 传统的前端模块化规范CommonJS和RequireJS

    1. Javascript模块化编程(一):模块的写法
    2. Javascript模块化编程(二):AMD规范
    3. Javascript模块化编程(三):require.js的用法

新规范

  1. HTML5规范

    1. W3school HTML5教程
  2. ES6规范:JavaScript最新规范,以及如何使用Babel等工具将ES6代码转换为ES5代码。

    1. ES6标准入门
    2. Babel入门教程

现代前端流程化工具

  1. npm包管理工具使用,安装、卸载,package.json配置文件

    npm用法小结

  2. webpack打包工具

    入门 Webpack,看这篇就够了

  3. 使用npm和webpack实现前端工作流,可以结合第三方的脚手架

    Creat React App Readme文件

React相关

  1. React框架:组件化

    React 入门实例教程

  2. React Router:前端路由

    React Router 使用教程

  3. Redux:状态管理

    Redux 入门教程

控件库

  1. Ant Design:蚂蚁金服基于React的控件库

    Ant Design官网

  2. ECharts:百度提供的前端图表库

    ECharts官网

开发工具

  1. IDE,熟悉Visual Studio Code

    Visual Studio Code自带的“帮助→欢迎使用”

  2. Chrome浏览器,熟悉Chrome浏览器的开发者模式

    Chrome打开开发者模式,自行研究。

其他

  1. 前端工程师手册
  2. JavaScript 全栈工程师培训教程
  3. Github和各工具的官网