前端的学习路线是前平后抖的，入门上手都还比较简单。对于做后端的或多或少的都接触过不少的前端，但是现在的前端技术发展是越来越成熟，也拥有了丰富的技术栈和独立的架构。

不管是工作的应用还是兴趣性学习，前端的学习也都是从基础来的，基础就是一些概念和语法的东西；有了基础才能理解封装出来的前端框架，比如vue、react，因为这些框架本身就是js写的，而且js强大到抛弃了html，发展出node.js；之后，前端的项目结构就翻天覆地了，形成了现在的这种由脚手架（vue-cli、create-react-app）搭建出来的、有依赖包管理（npm、yarn）的、要进行打包（webpack）的项目结构。

随着前端的发展，前后端分离，同时多出了路由（router）、跨域处理、数据驱动模式（MVVM）等等很多的概念。前端也需要调优，更快的渲染、更普适的样式、更精简的代码……

所以，前后端的技术学习思路类似，基础=》框架=》原理，技术高阶的东西都是设计模式、设计思想，要想把前端技术应用到我们工作中，基础是要必须的，高阶的东西可以找专业的前端解决，但是进阶的东西还是要去掌握的。

重点理解和掌握dom操作、bom概念，常见标签和属性

要学习布局和样式，能熟练使用Chrome工具调整样式，了解Less、Sass

解构赋值（语法糖）、lambda表达式（参照java8的）、匿名函数、箭头函数、Promise函数（掌握这些就能看懂项目里大部分的代码了）

https://es6.ruanyifeng.com/#docs/intro【ES6百宝书】

还有一些要去了解：HTTP协议、Ajax的知识

然后理解一下浏览器怎么把前端代码变成页面展示出来的，对框架的理解学习有很大帮助

https://www.cnblogs.com/zhaowy/p/8435751.html【浏览器加载、解析、渲染的过程】

从React入门，先推荐B站上一套讲React的比较精辟的视频

https://www.bilibili.com/video/BV1hE411c7L1【2020最新课程React入门】

Node.js 是一个基于Chrome V8 引擎的 JavaScript 运行环境，先了解一下node是做什么用，因为现在很多东西都是基于node开发出来的； npm 实际是node的包管理器，可以进下面的网址找一些包：https://www.npmjs.com

yarn也可以进行包管理优点是速度快，二者的对比可以参考下篇博客：

https://www.jianshu.com/p/254794d5e741【npm和yarn的区别，我们该如何选择】

类似maven的pom.xml，前端的包管理看package.json文件。

React是前端技术最核心的东西了，要知道react的核心设计理念，最大限度的减少了dom操作，加快了渲染速度，又使开发变得简洁，国内的vue就是仿照react来设计的。

针对核心React的学习，首推的当然是官网文档，从helloworld着手，多多实践，就会慢慢理解组件化、有状态组件等概念。 https://react.docschina.org【React官网中文文档】 https://juejin.cn/post/6844904160794673159【掘金 React语法梳理】

antDesign实际也是一种UI框架，基于react框架来的。UI框架对我们开发来说就是使用，会查文档、会使用api就可以了。

打包工具，这部分大多是系统组和架构组那边了，我们要知道打包成开发模式和生产模式的包不一样；也会转换less为css等功能。webpack官网描述的最为详细： https://webpack.docschina.org/concepts【webpack概念】

eslint是用来规范代码的，不规范的代码会警告，对应的配置文件是.eslintrc.js；

JSX是react的一部分，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。

元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

渲染调优、函数式组件写法、WebHooks、组件粒度、代码风格

1、推荐前端标配开发工具VsCode，推荐插件如下：（也使用webstorm，跟IEDA用起来一样）

2、核心学习的是es6和react；提及的脚手架、yarn、npm、webpack、Eslint这些理解为工具，目前会使用即可，理解这些技术的原理都要去深入node。

3、经典的dva数据流图（hzero就是完全这么使用的），看懂之后就知道前端怎么调后端的接口了

4、推荐一篇文章：前端开发的演变（蚂蚁金服的ant design教程的第一课，后面也可以看看他们的前端架构）https://www.yuque.com/ant-design/course/sc1lvc

千里之行，始于足下！