文章首发于个人博客
前言
这一篇文章我一直在思考该不该写，因为每一个人的学习方式都不一样，这篇文章提到的内容是我学习前端开发的最佳方法，可能并不适用于其他人，所以就随心写一写自己的前端学习之旅吧。
关于我：熟练的 Vue、React 的 API 使用者以及会写一点后端的前端页面仔。
希望这篇文章对前端感兴趣的同学有用，它并不是一篇前端进阶的文章，更适合小白独立学习前端技术的指南。
TL;RD
如果不想读这么长的文章，可以直接读这一个小节。
从零开始学习 HTML/CSS 和 JavaScript。
关于 JS 可以看书《JS 权威指南》、《JS 高级程序设计》、《JS 忍者秘籍》三本书里面选一本，然后边看边实践即可。
然后就是学习 Css，可以先简单的菜鸟教程 Css，熟悉了一些语法之后，推荐去看张鑫旭大佬的《Css 世界》这本书，这本书需要经常翻。
如果学习过程觉得比较枯燥，也可以同时看看试试这个仓库50 天每天一个小项目，可以通过 Js + Css 就实现一个小东西，挺不错的，不管学什么东西都需要有积极反馈哦。
上面完成之后可以看看 Vue/React，Vue/React 可以看看官方文档，写的挺不错的，如果看文档比较困难的话，可以去中国 Bilibili 大学搜 Vue/React 视频，一大把，通过用 Vue/React 写一个简单的小东西，在学习过程中有什么不懂一定要去看 Vue/React 文档，不懂的时候是进步最快的时候。
在这个过程中，推荐每天看看30s code，了解一个常用的数组、对象、Date、String、Number 的 API，也可以在项目中使用到这些片段。
同时如果你对 Vue、React 项目比较感兴趣时，也可以去看别人写得好的开源库。
我就列举几个仓库，记得常去看。
Vue:
- vue-element-admin
- todomvc
- awesome-vue
React:
- todomvc
- awesome-react
这个时候，写完一个小东西后，可以选择去看书《你不知道的 JS》上中下，巩固一下 JS 基础知识以及看相对应的 CSS 世界。
Ts 可以看看 TS 官方文档以及每一个版本的变更日志，如果想加深了解可以看相对应的知识点，尝试做一做 TypeScript Challenges 即可。
此外，我也可推荐你可以刷一刷算法题，锻炼逻辑思维能力，可以刷一刷 LeetCode Hot 100 题，这些刚好也是面试常考的题目。
后面的话可以去看看 Next.js(React 的 ssr)/Nuxt.js(Vue 的 ssr)项目，这里就靠自己自由发挥了。
我的前端学习之旅
与安卓的爱恨情仇
在学前端之前，我有半年的安卓经验，也学过 flutter、kotlin 等相关知识, 那个时候我为了实现 qq 界面每天在图书馆待到很晚，写出来之后很有成就感，当时想着能不能实现一个左滑删除的功能，在那之后的事情记不清楚了，但是我印象中的是安卓我学不明白，对于它我一无所知，我不知道怎么学习, 各种自定义视图等操作要我望而却步, 简称对于学习曲线比较陡, 可能是我的学习方法不对, 也渐渐的对安卓失去了兴趣.
跟前端来一场 jsp 的邂逅
前端是一个缘分，当时在软件协会学长学姐布置了一个关于登录注册的 jsp 任务，我当时觉得用一个很简陋的登录注册实现了功能，但是我看到别人的登录注册那么好看，我就开始了美化之旅，当然现在的我再来看之前的页面、代码，那绝对是丑不堪言，不过在那个时候已经是我的巅峰了，就因为这样子，我走上了前端之旅，而这个时间是在 2018 年, 因为 jsp 跟前端来了一场邂逅~。
那个时候 vue 很火，（那个时候说 vue3 要出来了，结果到现在才出来），所以我没有什么 js、css 基础，就直接上手的框架(Vue)，然后基本上是用到啥搜索啥。
跌跌撞撞的前段之旅
学习 Vue 当时看的是黑马程序员、尚硅谷 Vue、JavaScript 的课, 但是看完之后的感觉就是：懂了，没有完全懂。
现在如果要我去学习一个东西，我不会选择看视频，对我来说有两个缺点：
- 即使全部看完之后，自己去写一个东西的时候完全无法下手就很苦恼，完全没有成就感。
- 挺浪费时间的，一系列的课程就几十个小时，真的理解和消化到实际运用这个周期很长。
但是那时的我并不懂，如果是前端小白不知道从哪里下手的时候，可以尝试一下看看相关的视频，至少对新的东西有一个整体的把握和了解。
最终我回到了文档，开始啃 MDN、Vue 的官方文档，那时候我发现文档比看视频进度快很多，而且要容易吸收和理解。
加上一看到知识点我就直接直接动手实践，有什么问题就依靠强大的谷歌，它总能解决我的问题，我的问题解决能力就是在这里得到了锻炼。
如果你有一定的编码能力之后，我比较推荐你去看看别人的代码。组件可以这么抽象、类型可以这么用、数组 API 有这么多。
我比较喜欢学习的时候去看看别人写的代码，开阔自己的视野。
有自己的产品嘛?
如果你问我，我有什么产品，第一时间会说博客，当然我们也可以选择拿得出手的其他产品。
博客是我一直在用心去写的一个网站，一个简单的博客项目形成了我的命名规范、目录规范以及相关的开发规范。
你有自己的产品嘛，它是你的名片，它不一定要是博客，它也可以是论坛、商城等其他项目，但是它一定是你可以自信满满可以分享出来的项目。
输出
有一点是我没做好的，每天花了很多时间就感觉啥也没学，直到现在才发现，我那时只有输入，没有输出也没有自己的反思和复盘。
之前就停留在”抄”笔记与实践这一层，这样子看起来比较快，但是少了最重要的一步，把”抄”的笔记用自己的话语写成文章，结合自己的所思所想去表达出来。
很多东西看似自己懂了，但如果要写成文章或者说跟别人去表达，还是不能清晰准确的表达，我最近在看一本书，也在强调，知识的输入和输出，这一点真的很重要。
如果要学一个什么知识点，就带着我能把这个知识点跟别人说清楚嘛？
与开源的碰撞
在想要不要写这个章节，因为自己开源经历并不是很多，只有几个 commit，不过我觉得大家有时间可以去尝试一下参与开源项目，就从我个人说起吧。
上一次做贡献已经是 20 年的事情了
在 20 年的时候，当时有两个月时间的暑假，然后在长沙准备简历就找了一份 React 相关的工具，进去之后发现使用 Antd3 搭建的后台管理系统，有很多很多相同的表格。
我当时就无意之间看到了一个 Antd 的一个子仓库：Pro-Table，现在已经改名成 pro-components 了，当时这个仓库只兼容 Antd4，所以我就在想，能不能自己”抄一抄”它的代码，向下兼容 Antd3 在公司内部使用呢？
所以就开始研究这个仓库之旅，当时也是直接读源码啥的，后面自己在研究的时候发现了几个 bug，就提了 issue，作者(chenshuaishuai)也是很积极的说，可以来一个 Pr？
提交完 Pr 会采用之后，很有成就感，我写的代码被合并了！就开始在 issue 里面找我可以实现的功能和 bug，然后后面也是成功的提交了几个 pr。
为什么要参与开源社区建设呢?
- 一个好的仓库有好的规范和代码风格, 光是看他们代码, 才发现原来 React 可以这么写, 原来 Ts 类型可以这么用, 直到现在我一直都保持着多看看别人仓库代码的习惯, 我们总会在里面学到一些东西.
- pr 的提交远不止写两个 commit 那么简单, 涉及到多人合作, 如何快速和别人说清楚, 当前 Pr 做了啥, 要做啥, 怎么做的, 这些都是代码之外的软实力, 也是需要好好提升的.
- pr 需要涉及到前期讨论、代码实现、单测和文档编写, 这些都是我们要去完善的, 我当时懒并没有写文档，写代码只是其中的一环.
- 提高自己的影响力, 在面试或者经历都是浓墨重彩的一笔, 后面校招很大一部分机会就是因为这几次的 pr.
怎么样参与到开源社区呢?
我没有好的办法, 不过我推荐你可以去看看自己比较熟悉 UI 组件、功能包, 我们在使用的时候可能会有 bug, 我们能不能看源码去修复他们呢? 这不贡献就来了吗?
实在不行, 可以看看自己对那个仓库感兴趣, 直接找 issue, 看看自己可以修复哪一个, 动手修复, 这不贡献就来了吗?
学习资源
最后我就列一下资料把，希望对大家有用，学习不是三分钟热度哦，需要不断持续的学习、输出和反思。
JavaScript
然后之后可以先看看 Vue 的东西。
- 看书《JavaScript 权威指南》、《JavaScript 高级程序设计》、《JavaScript 忍者秘笈》三选一
- Mdn 字典
- 现代 JavaScript 教程
- 30s code：碎片化时间可以学习的片段
- 常见的 JavaScript 小问题
- 关于 Js 运行机制的解释
Css
- 看书：《Css 权威指南》、《Css 世界》二选一
- 张鑫旭大佬的博客
- Css Tricks
typescript
- TypeScript Challenges 简称 Ts 类型体操
- TypeScript 官方手册
- TypeScript Release Notes，主要说了每一个版本 Ts 的功能变更
- TypeScript Deep Dive
Vue
- Vue 官方文档
- Vue Use
- awesome-vue
Vue 我好久没用了，推荐在 awesome-vue 中找好的学习资源和代码仓库
React
- React 文档 Beta 版
- kentcdodds 写了很多关于 React 的文章
- React + TypeScript 指南
- Dan 的博客都是精品
- awesome-react
写在最后
不管学什么东西，都需要时间，每天坚持学一点点，量变引起质变，一起努力，共勉。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
