原文：https://t.zsxq.com/073Wahpb6

Web前端的个人学习路线、资料参考

写在前面： 有一些朋友私信问我前端有没有什么推荐的路线和资料，在Web开发领域，技术更迭非常快，常用的技术栈几乎每隔一段时间就会换一波，作为前端，搜索能力和持续学习能力很重要。本文提到的很多网站都可以直接Google到。

有同学会问，那怎么才能接触到最新的知识呢？个人认为需要关注一些国外平台，关注一些前端开源技术推，很多流行的开源项目都会有不定期的会议，比如React Conf、Vite Conf、Next Conf等，需要有比较好的英文听读能力。

以下是本人学习前端的一些资料和学习路线，仅供参考，掌握以下这些，个人认为加上不错的项目，进大厂足够。

基础的HTML CSS 这两个主要是靠MDN和w3c school，其中CSS可以上CSS Tricks网站找一些比较好看的样式动手实现一下，重点掌握常见标签、样式、选择器优先级、flex布局等。

JavaScript js的基础部分比较简单，推荐在MDN上学完基础语法，ES5阶段可以看B站的甲鱼课程，ES6高级语法推荐看阮一峰老师的《ES6入门》，前期不推荐红宝书，对于初学者来说太细，建议买一本当字典用，重点掌握原型链、作用域、闭包等特性（面试常问）。

React 推荐新的官方文档beta.reactjs.org，做一个todo app。可以了解一下函数式编程和单向数据流的理念。现在React已经全面使用函数式组件以及hooks，市面上一切类式组件的课程可以标为过时不看。React社区生态非常好，各种轮子层出不穷，建议每个方向重点掌握一个，以下是个人做项目的最佳实践： 依赖管理：pnpm / yarn 状态管理：Jotai / Recoil /原生hooks 构建工具：Vite 路由管理：React Router UI框架：Ant Design / Material UI SSR框架：Next.js 远程数据：React Query 样式方案：CSS Modules / Styled Components / Tailwind / Sass 前后端联调：pont 代码格式：ESLint+Prettier+lint staged+husky

TypeScript 推荐官方的Handbook，重点掌握常见的类型和泛型，以及tsconfig的常用配置（做项目的时候踩坑）。如果想进入深水区，推荐学习类型体操，掘金有神光的小册，github有type challenge这个项目可以练习。

Vite 做React项目的时候先用上，不用特意学，后期可以了解一下Vite原理，个人觉得神三元写的Vite小册不错。

前端的技术很多，更新也快，本文可能几年后会过时，但个人认为只要保持一颗热爱的心，打下坚实的基础，活用github，所谓的新技术都很好学。

#前端# #资源分享#