前端如何从入门进阶到高级

在前端学习的道路上，我们将其划分为三个阶段：入门、实战和进阶。以下是各阶段的学习指南

一、入门阶段

在入门阶段，我们的目标是掌握前端的基本语法和知识，以便能够独立解决一些基础问题。这一阶段，我们建议通过视频课程快速上手，而非阅读书籍，以提高学习效率。以下是一些推荐课程：

前端基础班就业班实战项目全套课程
聊聊前端开发的基础知识
4小时带你快速入门React全家桶
黑马程序员vue前端基础教程-4个小时带你快速入门vue入门系列博客

二、实战阶段

实战阶段的核心在于扩展知识面，通过阅读书籍和参与项目实践，将理论与实践相结合，提升理论水平和实战经验。

关于书籍方面，推荐如下基本

1、Vue.js设计与实现(豆瓣评分9.5)

深入探讨Vue.js的设计思想和内部实现原理，适合有基础的开发者。

2、深入浅出Vue.js(豆瓣评分7.9)

从基础到高级应用，全面介绍Vue.js框架。

3、React 学习手册(豆瓣评分8.6)

系统介绍React框架，适合初学者和开发者。

4、深入React技术栈(豆瓣评分7.9)

深入剖析React生态中的相关技术栈。

关于教学课程方面的推荐

vue3.2+vite+vant企业实战开发阅读app
ReactNative从0到1系统精讲与小红书APP实战
Vue3+ElementPlus+Koa2 全栈开发后台系统
[全栈]Vue3+NestJS 全栈开发企业级管理后台
React结合React Hook实战大型项目
Vue3最佳项目实践
Three.js可视化企业实战WEBGL课

这几个视频课程都是关于项目实战方面的，没什么好介绍的，跟着课程把里面的项目实战都实践一遍，对提升编程技能很有帮助。

关于项目方面的推荐

Github上也有很多优秀适合用于练手实战的项目，这里推荐几个比较优秀的。

1、sl1673495/vue-netease-music

一个基于 Vue2 和 Vue-CLI3 的高仿网易云 Mac 客户端播放器。使用了 Vue 全家桶、Sass、better-scroll、ElementUI 等技术实现。

2、SmallRuralDog/vue3-music

一个使用 Vue3+TS 开发的音乐播放器，界面模仿 QQ 音乐 Mac 客户端，支持黑夜模式。

3、dxx/react-bilibili

高仿B站 Web 移动端，基于 SSR 服务端渲染模板，使用 React 16.8，Typescript 开发，后端服务使用 Express 实现。

4、uniquemo/react-netease-music

一个基于 React、TypeScript 的高仿网易云 Mac 客户端播放器。使用 React Hook 做状态管理，没有使用额外的数据管理库。除此之外，还使用到了CSS Modules、Webpack、Graphql 等技术。

实战方面博客推荐

Vue系列

【前车之鉴】Vue，你真的熟练了么？
vue cli项目打包优化，我能做的就这些了
聊一聊 Vue3 的 9 个知识点
Vue+VantUI严选电商项目移动端实战项目
手把手教你写一个脚手架
一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧
vue-cli3 项目从搭建优化到docker部署
Vue3+ElementPlus+Koa2 全栈开发后台系统
vue3从入门到开发商城实战系统性学习课程
Vue.js 开发实践：实现精巧的无限加载与分页功能
Vue3.0高阶实战开发高质量音乐Web app
vue中Axios的封装和API接口的管理
前端Vue3.0从0到1手把手撸码搭建管理后台系统
VueCli3实战项目-还原饿了么订餐app
Web 仿 App 动画竟然引出了“性能杀手”
Vue.js 3.0 核心源码解析深入分析核心源码透彻理解
「Vue实践」武装你的前端项目
带你五步学会Vue SSR
Vue学习看这篇就够了
VueSSR高阶指南
Vue 项目里戳中你痛点的问题及解决办法（更新）
（4.2万字重启2020）“从零到部署”Vue全栈电商应用系列教程---正式完结
面试题：你能写一个Vue的双向数据绑定吗？
仿 vue-cli 搭建属于自己的脚手架
Vue中你不知道但却很实用的黑科技
带你全面分析vue-router源码（万字长文）
vue插件开发、文档书写、github发布、npm包发布一波流
vue多页面开发和打包的正确姿势
Vue-cli原理分析
三个很不错的 Vue 资料
Vue友最爱的10个开箱即用的开源项目
Vue源码阅读前必须知道javascript的基础内容
吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧《上》
Vue 3 源码导读
前端路由简介以及vue-router实现原理
Single-Spa + Vue Cli 微前端落地指南 + 视频 (项目隔离远程加载，自动引入)
Vue+微前端(QianKun)落地实施和最后部署上线总结
自己搭建过vue开发环境吗？
vue2 + koa2 + webpack4 的SSR之旅
基于Electron + nodejs + 小程序实现弹幕小工具
手把手教你 Electron + Vue 搭建前端桌面应用
Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】
Vue3 + TS + Vite2 + Electron16项目梳理

React系列

React Native 跨端APP 探花交友项目实战
你应该尝试的 8 个 React 库
200行代码实现简版react
Redux + React-router 的入门和配置 ‍ 教程
React 22从入门到实战开发移动端学习平台
React17+TS4+React Hook仿Jira企业级项目
React17系统精讲结合TS打造旅游电商平台
React服务端渲染+pm2自动化部署
【长文慎入】一文吃透 React SSR 服务端渲染和同构原理
ReactNative 学习资源大汇集
最新React从入门进阶到企业级实战项目
React 深入浅出搞定知识链路和底层逻辑
分享 50 个完整的 React Native 项目
React 开发必须知道的 34 个技巧【近1W字】
React SSR 详解【近 1W 字】+ 2个项目实战
react进阶」一文吃透React高阶组件(HOC)
React路由鉴权
掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入)
React + TypeScript实践
Vue 转 React不完全指北
还不开始学react吗？| react 入门必知必会知识点(万字总结✍)
三千字讲清TypeScript与React的实战技巧
React Hooks 详解【近 1W 字】+ 项目实战
你要的 React 面试知识点，都在这了
「react进阶」年终送给react开发者的八条优化建议(篇幅较长，占用20-30分钟)
「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结)
学习 React.js 比你想象的要简单
React 中 setState 是一个宏任务还是微任务？
一篇文章总结redux、react-redux、redux-saga
「React18新特性」深入浅出用户体验大师—transition
可能是你需要的 React + TypeScript 50 条规范和经验
这可能是最通俗的 React Fiber(时间分片) 打开方式
React精髓！一篇全概括(急速)
你真的了解 React 生命周期吗
30分钟精通React Hooks
为何我们要用 React 来写小程序 - Taro 诞生记
怎样学习React？当然是自己动手实现一个React啦
适合Vue用户的React教程，你值得拥有
「react进阶」一文吃透react-hooks原理
图解ES6中的React生命周期
高频前端面试题汇总之React篇（下）
React Hooks 最佳实践

三、进阶阶段

进阶阶段的目标是深化对知识的理解，强化高级编程技能，如性能优化和项目架构选择，并提升编程理论水平。

关于书籍的推荐

1、高性能JavaScript(豆瓣评分9.0)

专注于提高JavaScript应用性能的策略和技巧。

2、你不知道的JavaScript（上卷）(豆瓣评分9.4)

深入剖析JavaScript语言的细节和概念。

3、JavaScript语言精粹(豆瓣评分9.2)

针对JavaScript的核心概念进行深入解析。

关于课程的推荐

JavaScript核心原理解析
进阶必备web前端架构全套课程
最新webpack原理与实践
大厂前端性能优化最佳实践
Node透析底层原理深入浅出
前端全流程性能优化实战极致性能流程体验
Vue.js 3.0 核心源码解析深入分析核心源码透彻理解
React 深入浅出搞定知识链路和底层逻辑
图解 Google V8 一门课搞懂 JavaScript 执行逻辑

这几门课程都涉及到了性能能优化方面的知识，对于了解前端底层原理有较大的帮助。

关于进阶的博客的推荐

设计无限滚动下拉加载，实践高性能页面真谛
前端性能优化掌握行业实用专业前沿的解决方案
前端全流程性能优化实战极致性能流程体验
5 分钟撸一个前端性能监控工具
前端性能优化三部曲(加载篇)
狙杀页面卡顿 —— Performance 指北
前端性能优化之加载技术
记Chrome的性能分析工具实践
前端黑科技：美团网页首帧优化实践
聊一聊前端性能优化
「前端进阶」高性能渲染十万条数据(时间分片)
从 8 道面试题看浏览器渲染过程与性能优化
「前端进阶」高性能渲染十万条数据(虚拟列表)
看完离编写高性能的JavaScript又近了一步
前端性能优化 24 条建议
首页白屏的引发的思考(一)
工作中如何进行前端性能优化(21种优化+7种定位方式)
前端性能优化指南
写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践
前端性能优化的常用手段
前端性能优化总结
这些前端性能优化的知识我从来不告诉别人
浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
浏览器工作原理及web 性能优化（上）
前端工程师面试题(性能优化)
三十分钟掌握Webpack性能优化
前端性能优化最佳实践
网站性能优化
揭秘 Vue.js 九个性能优化技巧