如果我必须重新学习 JavaScript：从 2017 年至今的真实历程
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
- 高中刚毕业，没有计划，没有方向，只有一台笔记本电脑和一种“我应该好好想想自己的人生该何去何从”的感觉。八年后，我成为了一名全栈开发工程师，使用 Node、React 和 TypeScript 构建真正有价值的生产应用。
但学习编程这件事，没人会告诉你——它并非线性发展，而是充满曲折，处处是失败的尝试、迂回的弯路、放弃和重新开始。这就是真实的故事。
（顺便说一句，这里有些年份可能不太准确，重点不在于确切的日期，而在于奋斗的过程，我们都是从某个起点开始的。）
现在我用Node.js、React和TypeScript构建东西——这些东西我以前想都不敢想。
开端：HTML、CSS 以及假装我知道自己在做什么（2017）
2017年高中毕业后就开始了。我第一次接触代码？HTML和CSS。不是因为我有什么计划，而是因为某个YouTube视频里有人说“从这里开始”。
我做过一些丑陋不堪的网站。蓝色背景，到处都是 Comic Sans 字体，图片大到破坏了布局。但它居然能用。我输入内容，刷新浏览器，我的代码就出现在屏幕上了。这让我彻底着迷。
我大概花了一个月的时间摆弄HTML和CSS。做了一个作品集网站（很尴尬），一个假的餐厅菜单（更糟糕），还试图模仿谷歌首页，结果惨败。
但我其实在不知不觉中学到了很多：浏览器的工作原理、页面结构、以及出现问题时如何搜索错误信息。这些基础知识比我当时意识到的要重要得多。
真正有帮助的资源：
- W3Schools（https://www.w3schools.com/）——虽然大家都吐槽它，但它简单易用，适合初学者。
- MDN Web Docs（https://developer.mozilla.org/）——我收藏了每一页，至今仍在使用。
- CSS-Tricks ( https://css-tricks.com/ ) - 当我的布局出错时（这种情况总是发生）
然后我就变得自大了。“HTML和CSS都很简单，编程也肯定很容易。”
错误的。
大学/中学时代：一切都毫无进展（2017-2020）
残酷的真相是——学校并没有教给我多少真正的编程知识。当然，学校有计算机科学课，我们也“学”过循环和变量之类的东西。但这些知识都没真正记住，因为它们感觉不够“真实”。
老师会给我们展示伪代码。我们会用Java在纸上写一些代码（没错，就是在纸上）。然后参加考试。通过。第二天就把一切都忘得一干二净。
编程感觉就像背诵永远不会用到的数学公式。抽象、枯燥、毫无意义。
我只是机械地学习，但什么都没掌握。课程都及格了，但如果让我动手做点什么，我根本不知道从何下手。
现在回想起来，问题不在于我学不会，而在于我没有动手实践，只是照搬例子，然后在测试中生搬硬套。
绕道而行：CCNA 与命令行觉醒 (2018)
大约在2018年，我做了一个奇怪的决定：彻底放弃编程，转而投身网络领域，开始学习CCNA（思科认证网络工程师）课程。
听起来很奇怪，对吧？但事情是这样的。
我当时正在使用思科的命令行界面配置路由器和交换机。命令如下：
Router> enable
Router# configure terminal
Router(config)# interface fastethernet 0/0
Router(config-if)# ip address 192.168.1.1 255.255.255.0
突然间，我恍然大悟。这种命令行操作，输入命令就能立即看到结果，感觉……很强大。就像直接和机器对话，而不是通过图形界面。
我花了大概六到九个月的时间深入学习CCNA。学习了网络、IP地址、路由协议、VLAN等知识。说实话，我学得相当不错。
但始终有一种挥之不去的念头：“这很酷，但我想要创造东西，而不仅仅是配置东西。”
不过，命令行体验呢？它在我心中埋下了一颗种子。它让我对终端、脚本编写以及自动化操作（而不是点击按钮）产生了浓厚的兴趣。
真正的开始：重返编程领域（2018 年末）
2018 年末，我短暂休息了一段时间——期间思绪万千，一直在思考在通过 CCNA 认证后是否应该全身心投入编程。
我又开始编程了，但这次不一样。这次是有项目在身的，因为学校的作业快要做了。
我在谷歌上做了很多研究，最终决定做一个职位发布系统。就像一个内部招聘平台，公司可以在上面发布职位空缺，学生可以申请。我选择了这个项目。
我当时完全不知道自己在做什么。
还在摸索大学生活，你知道的——一半时间努力发展事业，一半时间努力应付课程。但我决心要把这件事做好。
改变一切的学校项目：求职门户网站
这个项目，这个求职门户系统，一切都在这里最终水到渠成。
我选择 PHP 是因为我找到一个教程，看起来很简单（其实不然）。我花了整整三个月才把它做出来。而且不是课后时间——我说的是通宵达旦、周末加班，甚至因为太投入而放弃社交活动。
对于一个初学者来说，这个范围简直太大了：
- 公司注册并发布招聘信息
- 学生创建个人资料并申请
- 管理面板用于管理所有内容
- MySQL数据库存储所有数据
- 会话登录/注销系统
- 简历和文档的文件上传
我的朋友们都觉得我疯了。“你干嘛要做这么多？就做个简单的东西，然后通过考试不就行了吗？”
但我做不到。我完全沉迷其中。这是我第一次建造真正的东西。是人们真正会用到的东西，但别忘了，这只是个学校项目。
那段代码简直一团糟，我反复阅读了好几遍。到处都是 SQL 注入漏洞（我对安全一窍不通）。大概 80% 的内容都是从 Stack Overflow 上复制粘贴的，剩下的 20% 是我自己琢磨出来的。但它居然能运行。
然后我就遇到了瓶颈。网站感觉……死气沉沉，毫无生气。点击一个按钮，页面刷新，然后等待。再点击一次，页面再次刷新。感觉既老旧又笨拙。
那时我发现了 jQuery。我找到了一些关于添加动画效果和实现表单提交而无需页面刷新的教程。之后我又花了几个星期学习 AJAX，实现了无需重新加载整个页面就能完成各种操作。
突然间，招聘网站仿佛活了起来。按钮点击后会动起来。职位列表加载流畅，无需刷新。表单验证实时完成。
当我把作品展示给全班同学时，他们都惊呆了。老师们也很困惑，因为这远远超出了他们的预期。一位老师甚至问我是不是抄的（我的确抄了一些内容，但我理解了它们，这才是最重要的）。
当然，我得了A。但更重要的是，我意识到了一件事：
这种交互性，这种JavaScript技术，正是让网站感觉现代的关键所在。这正是我想要做的。
如果你想看看我当时的代码有多混乱，这个项目仍然在 GitHub 上：https://github.com/elvis-sautet/job-portal-system
现在回看那个项目，我有点尴尬，但同时也感到自豪。正是那个项目让我成为了一名开发者。
JavaScript：它终于变得有意义了
完成招聘网站项目后，我就不想再用 PHP 了。JavaScript 才是真正神奇的地方，我渴望学习更多。
开始正式学习 JavaScript。不是通过课程，而是通过实际项目来学习。
javascript.info ( https://javascript.info/ ) 成了我的圣经。免费、全面，而且不会让你觉得我是傻瓜。
经历了：
- 变量（let、const、var——说实话，我对var仍然感到困惑）
- 函数（花了很长时间才理解返回值）
- 数组和对象（当发现对象可以包含函数时，简直太震撼了）
- DOM 操作（getElementById 成了我的好帮手）
- 异步 JavaScript（回调、Promise、async/await——这简直让我崩溃）
我能想到的一切都建造了：
- 计算器（显而易见）
- 待办事项应用（已经开发了大约 10 次）
- 支出追踪器（因为我当时没钱）
- 随机名言生成器
- 使用免费API的天气应用
这次最大的不同是什么？我做的是自己真正想用的东西，不是教程项目，而是我自己的项目。
我甚至还学习了 Node.js，虽然我已经掌握了 JS，但 Net Ninja 也一直在鼓励我去了解 Node，哈哈。
拯救我的 YouTube 频道：
Net Ninja（https://www.youtube.com/@NetNin ja ）
Shaun 的 JavaScript 播放列表堪称经典。他讲解的方式就像在和真人对话，而不是在跟一位计算机科学教授讲课。
Web Dev Simplified（https://www.youtube.com/@WebDevSimplified）
的 Kyle 能把复杂的事情讲得简单易懂。他的 React Hooks 视频终于让我在困惑了好几周之后彻底理解了 Hooks。
Mosh 的编程教学频道（https://www.youtube.com/@programmingwithmosh）
教学风格结构清晰，讲解透彻，非常适合学习基础知识。
Traversy Media（https://www.youtube.com/@TraversyMedia）
Brad 的速成课程教会了我比任何付费课程都多的实用技能。
但我学到了一个诀窍：看视频并不等于学习。我会看视频，暂停，然后试着自己动手搭建，不看视频。弄坏它，再修好。这样我就能记住了。
我每天花六到八个小时写代码，一点也不夸张。早中晚，笔记本电脑几乎成了我身体的一部分。我父母觉得我是在浪费时间，我的朋友觉得我简直是着了魔。
没错。正是这种执念成就了今天的我。
React：差点让我崩溃的框架（2021 年末-2022 年）
2021年12月底左右，我开始到处都能看到React的身影。招聘信息里要求会React的程序员，开发者们也在谈论它。于是，我决定深入研究一下。
我差点就彻底放弃编程了。
React 第一个月我完全摸不着头脑。组件？属性？状态？看起来像 HTML 但实际上不是 HTML 的 JSX？这到底是怎么回事？
我尝试学了三次才明白：
第一次尝试：看了10个小时的课程。什么都没听懂。头疼。放弃了。
第二次尝试：尝试搭建一个东西。花了一周时间与各种错误作斗争。再次放弃。
第三次尝试：回归基础。慢慢阅读React 文档（https://react.dev/），一次只理解一个概念。编写一些简单的示例。直到完全理解后才继续下一步。
那一刻我终于明白了。React 不是什么魔法，它只是用不同的方式处理用户界面的 JavaScript 而已。
我的突破性项目？一个使用 OMDB API 的电影搜索应用。输入电影名称，查看结果，点击查看详情。简单易上手，又足够复杂，可以从中学习。
然后我做了一件事，这件事巩固了我的理解：我没有看任何教程，而是从头开始重新构建了它。那时我才知道，我是真正学会了，而不仅仅是复制粘贴。
可用的 React 资源：
- React 官方文档（https://react.dev/）——认真地从这里开始。
- freeCodeCamp React 教程（https://www.freecodecamp.org/）——篇幅较长但内容详尽。
我深入学习了它，嗯，确实有所领悟，但也没到精通的程度。不过，嘿，我也深入学习了 Node.js，我在本地找到了一些工作，构建了一些项目，甚至我对 React 和 Node.js 也感到很熟悉，但我并不是“大师”，我只是略懂皮毛而已。
TypeScript：Boss 关卡（2023-2024）
2024年初，TypeScript 无处不在。招聘信息要求具备 TypeScript 技能。资深开发人员也对它赞不绝口。是时候升级你的 TypeScript 技能了。
“它不就是带类型的 JavaScript 吗？”他们说。“很简单。”他们说。
他们撒谎了。TypeScript 真的令人沮丧。
我写的每句话都出错。“为什么会出错？用 JavaScript 写明了就没问题！”这成了我每天对着虚空呐喊。
然后我找到了马特·波科克。
Matt Pocock（https://www.mattpocock.com/和https://www.youtube.com/@mattpocockuk）是 TypeScript 的大师。他在Total TypeScript（https://www.totaltypescript.com/tutorials）上的免费教程彻底改变了 TypeScript 的面貌。
他用通俗易懂的方式讲解了 TypeScript。既不晦涩难懂，也不过于复杂，非常实用。
真正有效的 TypeScript 学习路径：
- Matt Pocock 在 YouTube 上的 TypeScript 入门播放列表
- Total TypeScript 上的免费 TypeScript 入门教程
- TypeScript 官方文档（https://www.typescriptlang.org/docs/）——掌握基础知识后非常有用
- 将 JavaScript 项目转换为 TypeScript（过程痛苦但富有教育意义）
你真正需要的 TypeScript 基础知识：
- 变量和函数的类型注解
- 对象的接口
- 联合类型（
|运算符） - 基本泛型
- 实用程序类型
Partial，例如Pick，Omit
一开始可以跳过以下内容：
- 高级通用技巧
- 映射类型
- 条件类型
- 申报文件
等真正需要的时候再学吧，别给自己太大压力。
真正让我变得更好的事情（真正的经验教训）
我就不说那些励志鸡汤了，直接告诉你真正让我提升到更高层次的是什么：
1. 我关心的建设项目
别再开发待办事项应用了。开发你自己想用的应用。
我建造了：
- 习惯追踪器（用了一年）
- 副业项目创意管理器（仍在用）
- 工作时使用 Chrome 扩展程序屏蔽 Twitter（提高了我的工作效率）
- 个人财务仪表盘（帮我摆脱了贫困）
当你使用自己开发的东西时，你会发现漏洞。你会添加新功能。你会努力把它完善好。
2. 阅读他人的代码
在 GitHub 上找到了一些项目。都是些小项目，只有 500 到 1000 行代码。我把它们全部通读了一遍。
已学习：
- 实际项目是如何构建的
- 我在教程中从未见过的模式
- 我早已知晓的更好做事方法
- 如何浏览代码库
大概读过三四十个项目案例。从中学到的东西比任何课程都多。
3. 全面部署
做出来了？那就部署上线。我不在乎它丑不丑或者有没有bug。把它放到网上就行了。
- Vercel（https://vercel.com/）是一款免费的前端开发工具，只需 2 分钟即可完成。
- Railway（https://railway.app/）是一款全栈开发应用，已取代 Heroku。
- Netlify（https://www.netlify.com/）适用于静态网站，而且免费。
将实际项目发布到网上 > 把项目永远放在本地主机上。
4. 写下我的所学所得
大约在 2022 年开始在DEV.to ( https://dev.to/ ) 上写文章。写一些关于我弄明白的事情的短文。
请查看我在Dev.to上的帖子。
写作能让你理解问题。人们会评论并提出更好的解决方案。你也能从中学习。
5. 小时。愚蠢的小时数
没有捷径可走。我每天花6到8个小时写代码，有时甚至更多。周末也不例外。清晨早起，深夜熬夜。
不是因为我自律，而是因为我太着迷了，无法停止思考我试图解决的问题。
如果你对编程没有丝毫痴迷，这条路将会非常艰难。找到让你对编程着迷的原因。
如果今天重新开始，我会选择哪条路？
如果我从零开始，以我现在所掌握的一切知识，我会这样做：
第1-2个月：HTML、CSS、JavaScript基础
第 1-2 周：HTML 和 CSS 基础知识
- W3Schools 提供基础知识（https://www.w3schools.com/）
- 创建 3 个简单的页面（作品集页面、着陆页或其他任何页面）
第3-6周：JavaScript基础知识
- javascript.info ( https://javascript.info/ ) - 阅读以下章节：变量、函数、数组、对象、循环、条件语句
- 功能：计算器、成绩册、随机名言生成器
- 不使用任何框架，只用原生 JavaScript。
第 7-8 周：DOM 操作
- 学习 querySelector、addEventListener 和 innerHTML
- 开发项目：待办事项应用、计数器、简单游戏（石头剪刀布）
资源：
- javascript.info ( https://javascript.info/ )
- MDN 网络文档 ( https://developer.mozilla.org/ )
- 网络忍者 JavaScript 播放列表
第 3-4 个月：现代 JavaScript + 异步
- ES6+ 特性：箭头函数、模板字面量、解构赋值、展开/剩余行距
- Promise 和 async/await
- 获取 API，使用 API
开发项目：天气应用、GitHub个人资料查看器、电影搜索
第 5-6 个月：React
在 JavaScript 完全稳定之前，千万别碰 React。真的。
准备就绪时：
- React官方教程（https://react.dev/learn）
- 完成 3-4 个小型项目（用你自己的想法，而不是教程）
- 深入学习 Hooks：useState、useEffect、useContext
第 7-8 个月：Node.js 和后端
- Express.js 基础知识
- REST API 概念
- 数据库（MongoDB 或 PostgreSQL）
- 身份验证（JWT 或会话）
构建：全栈应用程序（待办事项、博客或简单的 CRUD 操作）
第 9-10 个月：TypeScript
现在就学习 TypeScript，不要提前学习。
- Matt Pocock 的免费教程（https://www.totaltypescript.com/tutorials）
- TypeScript 文档（https://www.typescriptlang.org/docs/）
- 将 JavaScript 项目转换为 TypeScript
第 11-12 个月：作品集和求职准备
- 完成 3-5 个实际项目
- 全部部署
- 写下你的学习心得
- 模拟面试（很遗憾，这是必要的）
- 申请职位
完全可以忽略的内容
跳过：在需要之前设计模式
单例模式、工厂模式、观察者模式——当你感受到这些模式能够解决的痛点时，就去学习它们。
跳过：同时使用多个框架
选择 React 或 Vue，精通其中一个。以后如果需要，可以再学习其他的。
跳过：新手教程地狱
如果你已经看过3个以上关于同一主题的教程，那就别看了，开始动手做吧。
跳过：证书
没人问过我的 Udemy 证书。不如多做项目。
跳过：完美主义
发布可运行的代码。重构可以稍后进行。完美但从未发布的代码毫无价值。
我的资源书签（真正的书签）
学习：
- javascript.info ( https://javascript.info/ )
- MDN 网络文档 ( https://developer.mozilla.org/ )
- W3Schools（https://www.w3schools.com/）
- React 文档（https://react.dev/）
- TypeScript 文档（https://www.typescriptlang.org/docs/）
- Node.js 文档（https://nodejs.org/docs/）
YouTube：
- 网络忍者（https://www.youtube.com/@NetNin ja）
- Web Dev Simplified（https://www.youtube.com/@WebDevSimplified）
- 与 Mosh 一起编程 ( https://www.youtube.com/@programmingwithmosh )
- Traversy Media（https://www.youtube.com/@TraversyMedia）
- Fireship（https://www.youtube.com/@Fireship）
对于 TypeScript：
- Matt Pocock（https://www.mattpocock.com/和https://www.youtube.com/@mattpocockuk）
- Total TypeScript（https://www.totaltypescript.com/）
社区：
- DEV.to ( https://dev.to/ ) - 写下你的学习心得
- freeCodeCamp（https://www.freecodecamp.org/）——结构化课程
- Frontend Mentor（https://www.frontendmentor.io/）- 真实项目简介
部署：
- 维塞尔 ( https://vercel.com/ )
- Netlify ( https://www.netlify.com/ )
- 铁路（https://railway.app/）
那些没人告诉你的令人不安的真相
比你想象的要花更长时间。
我已经入行八年（2017-2025），但仍然每天都在学习。学习永无止境。科技发展太快了。
你会一直觉得自己很蠢。
即使现在，我看代码的时候还是会想“这是什么？”这种感觉永远不会完全消失。要学会接受未知。
找到第一份工作很艰难。
我大概投了100多份简历才找到第一份工作。不过，一旦有了第一年的工作经验，一切就会变得容易得多。
冒名顶替综合症是真实存在的。
我有时还会去谷歌搜索“如何让div元素居中”。资深开发者也还在搜索一些基本的东西。我们都在摸索学习。
你不需要知道所有事情
精通一项技术栈：JavaScript、React、Node 或 TypeScript。这足以让你找到工作并构建实际项目。
我现在在哪里（2025）
如今我是一名全栈开发人员。使用Node.js、React、TypeScript和PostgreSQL。构建人们真正使用的生产环境应用程序。
我不是天才，也不是技术超群的工程师。我只是一个花大量时间编写代码、搞砸、修复、从错误中学习的人。
从2017年那些丑陋的HTML页面，到CCNA认证的迂回之路，再到2020年的PHP求职门户项目，最终到如今的生产应用，这条路并非线性发展，而是充满曲折，充满了失败的尝试、放弃和重新开始。
但我会再做一次。也许会跳过CCNA那一年（虽然命令行经验很有帮助）。把更多精力放在早期构建项目上。少花点时间在教程的泥潭里。
但核心不变：制造产品，发布产品，搞坏它，修复它，学习，重复。
如果你今天开始
你现在的处境比我 2017 年时好多了。有了更好的资源、更好的工具，还有人工智能辅助调试（不过不要完全依赖它）。
但基本原理是一样的：
花几个小时写代码。打造你真正关心的项目。即使产品并不完美，也要发布。坦然接受迷茫的感觉，因为这种感觉永远不会消失。
先从 HTML 和 CSS 入手，然后深入学习 JavaScript。不要急于使用框架。
然后是 React，然后是 Node，最后是 TypeScript。
一步一步来。一次只做一件事。一次只专注于一个小时。
几年后，当你回首往事，你会发现自己取得的成就远远超出了你的想象。
这就是我的故事，真实的故事。没有捷径，没有一夜成名，只有8年持之以恒的努力、不断学习，以及无数个凌晨3点盯着错误信息，苦苦思索哪里出了问题。
如果你对此有所共鸣，请分享给正在学习编程的朋友。我们都需要真实的故事，而不仅仅是精彩片段集锦。
关注我的旅程：
我仍在学习，仍在积累，仍在犯错。欢迎来打个招呼。
Elvis Sautet
全栈开发工程师 | JavaScript | TypeScript | React | Node.js
有问题吗？觉得我哪里说错了？欢迎在推特上联系我。我只是个还在摸索的普通开发者。
文章来源：https://dev.to/elvissautet/if-i-had-to-learn-javascript-again-the-real-journey-from-2017-to-today-28fg