大家好，我是Echa。
最近有部分粉丝们私信问小编，如何学习目前市场上非常流行的Vue 和React 开源框架呢？
该怎么入手去学习呢？小编在这里说说自身如何自学Vue 和React。一句话：阅读优秀的代码的目的是让我们能够写出优秀的代码，更好的理解框架的工作方式。
学习方法如下：
- 模仿学习：借由前端学习路线图，搜集相关前端视频教程，每天跟着老师学，老师怎么教，你就怎么做，这就是模仿学习大法。
- 主动学习：学习目标性强，就是想学习前端然后去互联网行业奋斗，这里就可以加入自己的理解，势必要突破老师所讲的内容的界限，而要多多开动自己的脑筋，让代码更优美，让运行更流畅
- 制定严格的计划表：每天学什么、学到什么程度，一定要有一个清醒的认知，最好是做一张表，将自己的时间划分规划好，每天一个大任务，大任务下细化小知识点，完成一项打一个勾，让学习有层次的持续进行，这样做可以避免三天打鱼两天晒网的学习模式。
- 不懂就问：不是有句话嘛，内事不决问百度，外事不决问谷歌，当你遇到问题的时候，第一时间就去百度找答案，利用这种方法，遇到其他非概念性的问题也可以积极发问。
- 勤能补拙：敲代码这个事儿最主要就是熟练，你可以不会那么高阶的技术，但是基础性知识务必要做到熟练，利用自己的勤奋好学去补上技能短板
总之，多看大佬们在github上，gitee 码云上优秀开源的项目，先在本地环境边看官方文档，一步一步部署搭建起来，然后从入口文件逐步断点深挖，实践得出真理，阅读时间长了，实践多了，自然而然就入门了。
另外小编之前文章也发布过相关学习资料，有兴趣的老铁们也看看：
今天小编给老铁们分享5个Vue源码解析开源和5个React源码解析开源项目，希望对好学的粉丝们有所帮助，如果在学习的过程中遇到任何问题，可以留言私信小编，小编只要有空看到留言，能解决的尽可能的为你们解答，小编是非常乐意为大家服务。接下来跟着小编一起从阅读官方文档开始。
全文大纲
Vue 系列
- Vue3官方文档源码系列
- Vue3 源码解释
- 图解 Vue、Vue-Router、Vuex 源码
- Vue.js 技术揭秘
- Vue源码逐行注释分析
React 系列
- React 技术揭秘
- React的秘密
- 图解React源码
- React源码分析
- React源码系列
Vue3官方文档源码系列
Github：https://github.com/vueClub/vue3doc
在线文档：https://vue3js.cn/start/
Vue 中文社区提供的 Vue3 源码解析系列文章。
阅读优秀的代码的目的是让我们能够写出优秀的代码
其实就跟我们写作文一样，你看的高分作文越多，写出高分作文的概率就越大
大部分程序员都只会写代码（改，抄，stackoverflow工程师，代名词: 搬砖），会阅读代码的很少，为什么呢？因为国内所有的教育，网课，培训都没有教你怎么去看代码，只教你怎么去写代码
再者基于现在的程序员工作模式(模块化开发，只需要拿到需求做自己的部分)，别说看源码，甚至就连项目里的代码都懒的去看，我认识的很多程序员就是这样的，一个项目摸了两三年，你要问他项目中webpack都干了哪些事情，他的回答是不知道，反而趾高气扬的告诉你，那些他从来都用不上，看了也没什么用，也看不懂，这里省略内心千字脏文
如下图：
Vue3 源码解释
在线文档：
https://kingbultsea.github.io/vue3-analysis/book/index.html
流程图：
https://www.processon.com/view/link/5f85c9321e085307a0892f7e
Vue3源码解释，提供了详细的测试用例和流程图。
如下图：
图解 Vue、Vue-Router、Vuex 源码
Github : https://github.com/biaochenxuying/blog
在线文档：
https://github.com/biaochenxuying/vue-family-mindmap
提供了多张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。
如下图：
Vue.js 技术揭秘
Github : https://github.com/ustbhuangyi/vue-analysis
在线文档：
https://ustbhuangyi.github.io/vue-analysis/
该电子书的目标是全方位细致深度解析 Vue.js 的实现原理，分析的版本为 Vue.js 2.5.17-beta.0。
如下图：
Vue源码逐行注释分析
Github : https://github.com/qq281113270/vue
Vue 源码逐行注释分析，提供了40MB+ 的 Vue 源码程序流程图思维导图。
如下图：
React 技术揭秘
在线阅读：
https://react.iamkasong.com/
《React技术揭秘》电子书的宗旨是打造一本严谨、易懂的 React 源码分析教程。内容不预设观点，所有观点来自React核心团队成员在公开场合的分享，其通过了丰富的参考资料，包括在线Demo、文章、视频。
如下图：
React的秘密
作者网址：
https://segmentfault.com/u/neronero
在线阅读：
https://segmentfault.com/blog/react-secret?_ea=103006355
本项目是作者在阅读React源码过程中搭建的调试环境，学习过程中对源码添加了较为详细的注释，并记录了一些自己的理解与思考，输出了十几篇文章。要感谢作者：nero
如下图：
图解React源码
Github : https://github.com/7kms/react-illustration-series
在线阅读：
https://7kms.github.io/react-illustration-series/
图解React源码，用大量配图的方式, 致力于将 React 原理表述清楚。
如下图：
React源码分析
Github :https://github.com/BUPTlhuanyu
在线阅读：
https://buptlhuanyu.github.io/ReactNote/
对 React 相关代码库以及框架的源码进行了一定的分析，并总结了一张详细的流程图。
如下图：
React源码系列
Github : https://github.com/lizuncong/mini-react
在线阅读：
https://buptlhuanyu.github.io/ReactNote/
手写React、react-dom、react reconciler主流程源码，加深对react源码的理解。包括fiber，合成事件，hooks实现原理，dom diff，reconciliation，scheduler等。
如下图：