添加笔记

docs/.vuepress/dist/assets/js/v-236dc5ed.a9691033.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkvuepress=self.webpackChunkvuepress||[]).push([[241],{1160:(e,t,p)=>{p.r(t),p.d(t,{data:()=>o});const o={key:"v-236dc5ed",path:"/work/%E5%89%8D%E7%AB%AF/Web%E5%89%8D%E7%AB%AF%E7%9A%84%E4%B8%AA%E4%BA%BA%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF%E3%80%81%E8%B5%84%E6%96%99%E5%8F%82%E8%80%83.html",title:"",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[],filePathRelative:"work/前端/Web前端的个人学习路线、资料参考.md",git:{updatedTime:1667232308e3,contributors:[{name:"程序员小墨",email:"2291200076@qq.com",commits:1}]}}},1115:(e,t,p)=>{p.r(t),p.d(t,{default:()=>s});const o=(0,p(6252).uE)("<p>原文：https://t.zsxq.com/073Wahpb6</p><p>Web前端的个人学习路线、资料参考</p><p>写在前面： 有一些朋友私信问我前端有没有什么推荐的路线和资料，在Web开发领域，技术更迭非常快，常用的技术栈几乎每隔一段时间就会换一波，作为前端，搜索能力和持续学习能力很重要。本文提到的很多网站都可以直接Google到。</p><p>有同学会问，那怎么才能接触到最新的知识呢？个人认为需要关注一些国外平台，关注一些前端开源技术推，很多流行的开源项目都会有不定期的会议，比如React Conf、Vite Conf、Next Conf等，需要有比较好的英文听读能力。</p><p>以下是本人学习前端的一些资料和学习路线，仅供参考，掌握以下这些，个人认为加上不错的项目，进大厂足够。</p><p>基础的HTML CSS 这两个主要是靠MDN和w3c school，其中CSS可以上CSS Tricks网站找一些比较好看的样式动手实现一下，重点掌握常见标签、样式、选择器优先级、flex布局等。</p><p>JavaScript js的基础部分比较简单，推荐在MDN上学完基础语法，ES5阶段可以看B站的甲鱼课程，ES6高级语法推荐看阮一峰老师的《ES6入门》，前期不推荐红宝书，对于初学者来说太细，建议买一本当字典用，重点掌握原型链、作用域、闭包等特性（面试常问）。</p><p>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</p><p>TypeScript 推荐官方的Handbook，重点掌握常见的类型和泛型，以及tsconfig的常用配置（做项目的时候踩坑）。如果想进入深水区，推荐学习类型体操，掘金有神光的小册，github有type challenge这个项目可以练习。</p><p>Vite 做React项目的时候先用上，不用特意学，后期可以了解一下Vite原理，个人觉得神三元写的Vite小册不错。</p><p>前端的技术很多，更新也快，本文可能几年后会过时，但个人认为只要保持一颗热爱的心，打下坚实的基础，活用github，所谓的新技术都很好学。</p><p>#前端# #资源分享#</p>",12),a={},s=(0,p(3744).Z)(a,[["render",function(e,t){return o}]])},3744:(e,t)=>{t.Z=(e,t)=>{const p=e.__vccOpts||e;for(const[e,o]of t)p[e]=o;return p}}}]);