文章首发于个人博客序言。内容是我学习前端开发最好的方式，不一定适合其他人，所以就写一下自己的前端学习历程吧。关于我：一个精通Vue、ReactAPI的用户，一个会写一点后端的前端页面男孩。希望本文对对前端感兴趣的同学有所帮助。不是前端进阶文章，而是小白自主学习前端技术的指南。TL;RD如果你不想看这么长的文章，可以直接看这一节。从零开始学习HTML/CSS和JavaScript。关于JS，可以在《JS 权威指南》、《JS 高级程序设计》、《JS 忍者秘籍》三本书中任选其一，然后边看边练习。然后就是学习Css了。你可以从一个简单的菜鸟教程Css入手。熟悉了一些语法之后，推荐看张新旭老师的《Css 世界》一书。这本书需要经常阅读。如果学习过程觉得枯燥，也可以同时试试这个仓库。每天一个小项目50天，通过Js+Css就能实现一个小东西，已经很不错了。无论你学到什么，你都需要积极的反馈。以上完成后，可以看看Vue/React，可以看看Vue/React的官方文档。/React写一个简单的小东西。如果在学习过程中有什么不懂的，一定要看Vue/React的文档。当你不懂的时候，你会进步最快。在这个过程中，建议每天看30s的代码，了解一个常用的array,object,Date,String,NumberAPI，这些片段也可以在项目中使用。同时，如果你对Vue和React项目比较感兴趣，也可以看看别人写的开源库。我会列出几个仓库，记得经常去看看。vue:vue-element-admintodomvcawesome-vueReact:todomvcawesome-react这时候写完一个小东西，可以选择看书《你不知道的 JS》上，下，下，巩固JS基础知识，看看对应的CSS世界。ts可以看看官方的ts文档和各个版本的changelog。如果想深入了解，可以看看对应的知识点，尝试做TypeScriptChallenges。另外，我也可以推荐大家多刷算法题，锻炼逻辑思维能力，可以刷刷LeetCodeHot100题，正好是面试的常问题。以后可以看看Next.js（React的ssr）/Nuxt.js（Vue的ssr）项目，这里可以自己自由发挥。我的前端学习历程与Android的爱恨情仇在学习前端之前，我有半年的Android经验，也学习了flutter、kotlin等相关知识。那时候每天都呆在图书馆很晚才实现qq界面。写完了，很有成就感。当时就在想能不能实现一个左滑删除的功能。之后的事情记不清了，印象是看不懂Android，什么都不懂，不知道怎么学，各种自定义视图等操作让我望而却步。简而言之，学习曲线相对陡峭。可能是我的学习方法不对，渐渐对Android失去了兴趣。来一场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？于是开始研究这个仓库的行程。当时也是直接看源码。后来在research的时候，发现了一些bug，所以提了一个issue。作者（chenshuaishuai）也很积极的说，我可以来个Pr吗？提交后Pr会被采纳，感觉很有成就感，自己写的代码被合并了！我开始在issue中寻找可以实现的功能和bug，后来成功提交了几个PR。为什么要参与开源社区的建设？好的仓库有好的规范和代码风格。光看他们的代码，发现React可以这样写，Ts类型也可以这样用。一直到现在，我一直保持着多看别人仓库代码的习惯，总能从中学到一些东西。PR的提交远不止是写两个commit，它涉及到多人的合作，如何快速向别人解释，当前PR做了什么，做什么，怎么做，这些都是softskillsother比代码，他们也需要改进。PR需要涉及前期讨论、代码实现、单元测试和文档编写。这些都是我们需要改进的地方。我当时比较懒，没写文档，写代码只是其中的一部分。提高一个人的影响力是面试或体验的重要组成部分。后面校招的机会很大一部分是因为这几个PR。如何参与开源社区呢？我没有很好的解决方案，但我建议你去看看你是否对UI组件和功能包更熟悉。我们在使用它们时可能会出现错误。我们可以通过查看源代码来修复它们吗？你在这里？如果不行，你可以看看你对哪个仓库感兴趣，直接找到issue，看你能修复哪个，自己修复。这是不贡献就来了？在学习资源的最后，我会列出资料。希望对大家有用。学习不是三分钟热血。需要不断的学习、输出和反思。JavaScript然后你可以先看看Vue的东西。看书《JavaScript 权威指南》、《JavaScript 高级程序设计》、《JavaScript 忍者秘笈》选一本Mdn词典现代JavaScript教程30s代码：零碎的时间片段可以学习JavaScript常见小问题Js运行机制详解css阅读：《Css 权威指南》、《Css 世界》CssTrickstypescriptTypeScriptChallenges，简称Ts类型体操TypeScript官方手册TypeScriptReleaseNotes，主要讲的是TsTypeScript各个版本的功能变化DeepDiveVueVue官方文档VueUseawesome-vueVue好久没用了，我推荐在awesome-vue中寻找好的学习资源和代码仓库。ReactReact文档Beta版kentcdodds写了很多关于React的文章。React+TypeScript指南。Dan的博客都很棒。awesome-react写在最后不管学什么，都需要时间，每天坚持一点点学，量变导致质变，共同努力，互相鼓励。
