web框架学习
以React为例
1.理清框架应用场景基础知识
因为是一个前端框架所以必然要对JavaScript、CSS、HTML这些知识非常熟悉,尤其是DOM的API,尤其是一个非常容易被忽略的点就是DOM的API,比如Document.createElement这些基本的API应该要了如指掌,可以从mdn的document api去看一遍,不用所有都背出来,但要知道如果之后遇到应该去哪里找相关的信息,DOM API是一切前端框架实现的基础，如果想了解前端框架这是必须掌握的知识
利用好框架官网资源
了解之后去过一遍框架官网上的QUick Start,官网是一每一个框架最好的免费学习资源,它可以快速帮助你了解框架基本应用和核心概念！
比如React的边做边学的实践教程,自己过一遍,然后开始重新从零开始不看教程把这些内容重新做一遍,因为在看教程的时候你只是不动脑子地抄代码很难留下有用的信息,再重新做一遍的时候如果卡壳了,首先推荐去官网看api,自己想办法解决如果找不到就去google或者StartOverflow上面搜索相关的解答,如果还是解决不了再去看自己之前写过的代码,这样一来可以充分培养你在今后遇到bug时解决问题的能力
探寻最佳实践的模板
去网上搜索这个框架的最佳实践Boilerplate,也就是模板 直接google搜索对应框架名如 react boilerplate github就可以了,找一个start数最高的研究它的设计模式和读它的代码,一上来肯定无从下手,不要怕先把这个库clone下来,先看readme文档 大部分都有Quick Start 教你如何在本地如何把这个模版跑起来再往下看就有讲解他是如何设计框架架构的,这里推荐大家好好学英语,因为英语的编程学习资源要比中文好上百倍,实在不行就谷歌对比原文凑合着看,配合这篇文档我们来看代码
首先来看package.json文件大致了解下它用了哪些依赖包接下来看script这一部分它是如何运行项目的,我们可以看得在start它是node server，也就是说server文件夹里的index.js就是项目的入口了,打开这个文件可以看到他大致的使用Express来做服务器的,其实前端项目的话不需要了解太多 我们直接进入app文件夹下看他的前端代码就可以了
首先入口文件一般是app.js文件 可以看到这里定义了Redux的store然后设置react-hot-loader,然后逐个文件夹去看大概就是这个路线
模仿最佳实践做项目
模仿这个项目来做一个博客,强烈推荐JSONPlaceholder这个网站他可以模拟基本博客RESTful API 学习框架做玩具的时候非常好用当你完成这个博客的时候你的基本实战经验就已经到位了而且你还是使用社区上最流行的最佳实践！前端可以做一个常用的基本组件
阅读源码
找一些框架迷你版实现源码,一般github上会有很多迷你版的实现,比如Preact实现了框架的核心功能推荐先从src文件的create-element开始读起学习Preact是如何创建虚拟DOM节点的,在桌面上创建一个文件夹,然后一行一行的去抄这些代码想办法融会贯通,就可以解决面试中的绝大部分问题了
框架源码issue区
去解决简单issue问题
之后就是慢慢积累实战经验去读源码学无止境这是最花时间的一个部分了