交代背景

本人本科工业设计，大四时怀揣一颗做独立产品的心开始自学前端，断断续续自学了 2 个多月，能做出静态的页面如下。

技术栈 React+Redux

项目地址 https://github.com/arvinxx/Air-Todo-App

而后正好要做毕业设计，决心自行写一款产品出来。于是又断断续续自学了一个月，开始上手功能复杂的产品。（一个用户研究工具，集成记录、整理、分析、导出等诸多功能）

这个产品我日夜颠倒写了差不多整一个半月，最终完成了基本可用的 Demo，还拿到了优秀毕设。（当然，当时不会后端，所以数据都是假数据）

技术栈用的是 React+AntD+Dva+Umi，整个框架直接用了 Ant Design Pro 的模板。

感觉这个产品做完之后就上道了。现在陆陆续续也做了很多小的产品，例如「 多译 」（桌面端 + Web）、大学生学习型社区「课否」（小程序）、国外的一个区块链项目 RChain 的社区钱包 MyRChainWallet 等等。

在此期间，我实打实用于学习的时间全部加起来应该差不多在 3 个月这样，而剩下的都是自我实践。

所以我觉得前端是一种非常重于实践的技术，最好的学习方式便是 Learn By Doing。

那在我的回答具体展开之前，有个前置思想和大家分享，它来自 超强的学习能力是怎样练就的？ 的回答

很多人都有这样的体验，在学生时代，学某个科目，怎么都学不好，浪费了很多时间，也伤害了自己的自信心。 对这样的内容，请果断放弃。放弃不是让你 “不学”，而是 “知道这是什么，可以用来干嘛，什么时候会用到它” 就可以了。到了真的要用到的时候，再来学。相信我，到时候学习的效果会完全不一样。
举个例子，我本人大学的时候就犯过一个错误。 当时我学什么都希望可以彻底的弄懂，比如学电子电路，我就希望可以把来龙去脉全部掌握，可是越挖越深，越来越无力。碰到啃不动的内容伤害了自己脆弱的自信心，也浪费了很多时间。
后来工作几年后，偶然的机会我要做一个互动装置，里面需要有一些电路控制机械和灯的变化效果。当时只有两天的时间，我在淘宝上看各种电子设备的说明书了解了不同电路能实现的功能，把它们组合起来，焊接了电路板搞定了任务。在这之后，才进一步学了比较系统的电路设计知识。
假如我一开始学习电路原理能知道 “不求甚解”，就不会纠结一些细节，事实上不懂那些细节也不影响我后来用它来解决实际问题。大多数情况下，“知道这是什么，可以用来干嘛，什么时候会用到它” 已经足够了。 现在是知识外包的时代，很多知识都直接在网上搜索，还有一些知识可以问别人。存在互联网上，和存在别人脑子里的知识，也是你的知识，只要你有迅速准确获取它们的能力。 （比如在我的例子里，我知道淘宝上会有一些现成的电子元件，可以去看它们的功能说明书从而了解什么样的电路能实现我要的功能。对我来说，花费大量的时间去 “ 钻研电子电路知识”，是非常没有投资回报率的做法。 ）
学什么，不学什么。 精通什么，略懂什么，这是一个你根据对自己 “知识版图” 的规划，和学习这些知识的 “回报率” 来分配自己时间，最大化 “收益” 的策略性问题。很多人会有学生思维，觉得非要跟自己学不懂的东西杠上了，花了九牛二虎之力弄懂了一些问同学、问前辈一秒钟就能得到答案的问题，还获得了 “战胜自己” 的成就感。其实这是浪费自己的时间！！！
—————————-具体怎么决定 “学什么，不学什么。精通什么，略懂什么” 呢？————————
在纸上画出你希望自己达到的“知识之树”，也就是你希望自己达到的 “知识版图”。 主干部分就是你需要精通的，树枝部分是你需要熟悉的，小树枝是你可以略懂的，而具体的叶子则是你可以完全去网上搜索的。

对于绝大部分人来说，把时间花在拓宽主干上，是回报率更高的做法，而不是花在添加叶子上。因为叶子多一片，少一片，并不会影响你的格局。 主干拓宽已经够你跨界做出新东西了。添加叶子，也就是 “弄懂弄透一些小知识”，可以放到做具体项目的时候按需要临时去学习。

而我的学习策略其实也是一样的。

第一步：研究目前主流的前端都是怎么在开发的。

在当时（2017 年），我发现大部分主流的声音都围绕 Angular/React/Vue 三大框架进行讨论，Angular 似乎没多少人用，Vue 也才刚开始火起来没多久。很多人说做小项目 Vue 可以，上手快。但是一旦涉及中大型的项目，只有 React 才可以 hold 住。而且 React 的社区生态发展最为繁荣，相对来说轮子多，很多问题能搜到，只是上手难度可能会有点大，因为和正常前端编程的思维会有点差异。

那对于我一个啥也不懂的只能靠自己的小白来说，选择 React 是最稳妥的。为什么这么说？

因为一方面，社区生态好意味着能少踩坑，可能很多问题自己遇到了别人也会遇到，很快就能找到解决方案。另一方面，学 React 对我来说没有历史包袱——反正我连正常的前端也不懂，既然是一张白纸，直接把第一次接触到的 React 当成正常的前端编程模式不就好了么~

所以，我最终决定的学习路径就两步：

1. 学习 html/css/JS 基础语法；
2. 直接学习 react 开发。

第二步：找到最合适的教程。

当然一开始我其实自己也是走了点弯路，看了些质量不太高的教程，然后开了点就马上弃坑了。直到我找到这套教程。基本上第一步学习 html/css/js 基础，只要看完下面这套就够了。（这套教程的老师还出过一套同样高质量的 CSS 教程，我在 为什么 CSS 这么难学？ 这个问题中提过）

这段独自摸索的基础的阶段，我差不多花了三个礼拜左右。（17 年 8 月多~ 9 月的样子）而后又花了 2 个礼拜的样子，通过刚刚提到的 CSS 课程进阶了一下 CSS。

在 10 月份左右的时候（中间摸了一个月的鱼） ，我开始自学 React，可惜那个时候并没有找到特别好的教程，所以东看点，西看点。Udemy 上的 React 课程扒着看了一点，然后也看了 老师的《深入浅出 React 和 Redux》。（对，我的第一个 TODO App 就是照着这本书上的代码写出来的），大致折腾了快一个月，水平刚达到认识 React 和 Redux 的阶段。

（然后又摸了两个月的鱼。。。。）

等到了一月，调研 React 生态的时候发现了 Ant Design 然后顺势发现了 Ant Design Pro、Dva 和 Roadhog （算是 Umi 的前身）。我大呼惊为天人，然后看了 Ant Design 的官网好半天，还补了不少的交互知识。

然后到了这个阶段之后，我自学的速度和进程开始加速，扒下来 Ant Design Pro 的框架后一点一点看，研究路由是怎么走的、组件是怎么组合的，参数是怎么传的、Dva （Redux）在里面是怎么用的。

很快，我就做出了人生中第一个功能组件——一个可增删改的标签组合。就是下面这玩意。每个横向的是一个标签组。左侧是组名，右侧是标签。每个标签双击后可以修改，点击加号后可以新增。悬浮到组名时会显示删除图标可以删除。

这货写了我快半个月的时间。但是所幸最终实现出来了。然后剩下的很多功能就都是类似这样的功能叠加。利用 Ant Design 的组件和数据流模型，基本上都是时间问题。然后狂肝了一个多月，产品的成型度肉眼可见的增加，而我的经验值也随之暴增。

在码了一万多行之后，我完成了这个产品的 Demo，整个流程均可体验，找了几个同学来试用，都说感觉很棒。

这个产品的 demo 完成阶段，算是我前端学习的一个里程碑，意味着我有能力去完成一款功能略显复杂的产品。

在此非常衷心地感谢 Ant Design 的主创团队们，感谢 老师，感谢 老师，没有你们我的前端之路真的是挺不过来的(:з」∠)

但是话又说回来，到这个阶段，我其实连下面这个的具体是干啥的也不清楚。

const node = document.getElementById('#root')

所有 DOM 的原生操作我几乎没接触过，但这并不妨碍我去完成一款略显复杂的产品。而我现在回想起来，也挺庆幸自己一开始没接触 DOM 操作，让自己的开发思维一直处于函数式、操作虚拟 DOM 的阶段中，大大降低了认知负荷，也养成了一些不愿去操作 DOM 的 “贵气” 习惯。

而等我 React 开发经验到达一定水准之后，我才捶胸顿足地发现其实 iMooc 上有好几套很棒的 React 教程。例如这套：

这门课程讲的内容深入浅出。我把这套好几次推荐给想要学前端的学弟学妹们，好多人跟我反馈说这套教程真的很不错，讲的很细致，也很全面。（不过可能现在有点点过时，毕竟大家都开始用 hooks 了嘛）

而 这门课的作者 Dell 老师其他几门课，例如《TypeScript 系统入门到项目实战 趁早学习提高职场竞争力》、《前端要学的测试课 从 Jest 入门到 TDD/BDD 双实战》等，光听名字我就觉得很戳中行业需求。（哎，要是我当年自学的时候能发现，能少走多少弯路啊！！！！）

自打发现 imooc 上的好课之后，我就从 Udemy 转战 imooc 了。要是遇到新的领域需求，我会先去 imooc 上找有没有这块领域的教程资料。

比如去年 2 月份我和小伙伴要做小程序，然后我调研了下 React 这种语法下的小程序框架，找到了 Taro。然后也顺利在 imooc 上找到了 Taro 的教程。跟着看了一半不到，就开始自己写。写了小半个月之后就上线了（后端由团队小伙伴完成）。

再比如去年 5 月份准备做多译，没有后端了，在 imooc 上找到了《Node.js 仿知乎服务端 - 深入理解 RESTful API》，看了一部分，最后拿着 Egg 的框架自个干完了后端。

等做完多译之后，我突然发现自己已经从一名设计师变成全干工程师了 (〃´ 皿`)q

不过也真的是只有在自己挽起袖子撸代码的时候，才会发现设计时根本预料不到的情况，也算是被迫提高了自己设计上的分类讨论能力了。

等到去年 8 月份多译正式上线，我才确认我自己已经是一名相对合格的前端开发者了。中间经历过的困难只有自己知道，但是一些积累下来的经验却可以和大家分享。

以下是我自己探索下来的完整版的高效学习路径，不保证全面，但是一定包括所有的前端主干道：

1. HTML/CS/JS 基础

入门看这个就可以，我已经提过啦，老师讲的不错。而且会拿一个网站案例来让大家练手，练完做出来的效果也是很不错的，让人很有成就感。比什么 W3CSchool 、菜鸟教程啥的妖艳贱货不知道好到哪去。

2. JS 进阶

如果觉得上面那套 JS 教的太少，那么可以看下这套，对 JS 会有更多的介绍和说明，一样有好多案例。当然，也可以直接跳过看 React，毕竟我是稍微有点点别的语言基础，一些基本的东西我还是了解的，所以这块我直接略过了。基本上都是实际遇到问题了去搜的。

3. CSS 进阶

这套教程我感觉应该是全网做好的 CSS 教程了吧？里面非常详细的介绍了 CSS 的知识体系，还有各种小工具。虽然教的是 sass，但是一样可以用在 less 上。

个人觉得这个可以作为选看。但是，如果你觉得 CSS 难，少废话，看它！

4.React 基础到实战

这套教程我也不多说啦，我推荐给过的人基本上都说好。可惜就是没有 hooks 相关内容，可以等看完之后去找点文章补一补 hooks。

5. 前端工程（构建相关）

构建基本上就是 Webpack 那一套，如果自己去研究 Webpack 也是挺头疼的，好在 Dell 老师有门课好好讲了 Webpack 相关的结构。看完这个基本上对前端工程化就有个不错的认知了。

6. 前端测试

我感觉网上关于前端测试的资料都很少，可能实际业务中比较鸡肋？但是我个人感觉这块还是很重要的，TDD 驱动的前端开发不要太爽啊。同样还是 Dell 老师的课程

7. Typescript

不学 TS 你肯定要落伍。还是看 Dell 老师的就 OK 了。

8. NodeJS

严格意义上来说这个已经是后端了，但是既然 JS/TS 能够写，说不定哪天就会有需求。如果是做后端的话，看这套就好。基本上梳理出了 RESTful 的最佳实践写法，也有 MongoDB 、Postman、JWT 的一些一线技术。而且每集短小精悍，非常不错。

至于其他的像 Electron、小程序、小游戏、React-native 等等，大家一样可以去看看 imooc 上有没有合适的课程，可以作为非常不错的系统化学习资料。

而在实际项目中，网页前端强推 React + Antd + Dva + Umi 全家桶！妈妈再也不用担心我的配置！再也不用担心我的路由！再也不用担心我的数据流！要是再加上 Pro， 再也不用担心登录注册、权限管理、动态标题等等各种细节！对于这个组合对于小团队来说绝对是省时省力又省钱的好东西啊！上它！

小程序端感觉目前也没有值得强推的，Taro 有各种奇怪的 bug，写起来不太爽。

Mobile 端没写过，但是似乎有个 UI Kitten 在设计上不输给 Ant Design，未来有机会准备试试。

以上，要是能把我推荐的这一条路径全部看下来，然后再自己做几个练手项目（像图床工具、CNode 新前端等等），我觉得对于本科生来说就非常棒了。

当然，这个路径并不全面（比如 jQuery 啥的根本没提，而我也根本不会），但是一定是系统的、合理的且高效的。当然如果有更好的教程也欢迎和我交流~ 毕竟一个人的眼界和经验也都是有限的。

以及 Udemy 和 imooc 是不是要给我塞些广告费才行啊！（｀へ ´）