前言

当看到前端同事熟练使用webpack，react，es6….一堆概念的时候，我是完全懵圈的！

要知道，我不是做前端开发的，但是我因为个人兴趣，也曾写过2，3个站点试水。所用到的技术，无非就是基于百度/谷歌的html，css，jquery，写的多了自然也熟能生巧，各种效果和布局都是可以堆积出来的。

但是，在开发这些站点的时候，我深刻感受到随着页面复杂，代码堆叠的越冗长，成篇的DOM操作，冗长的CSS文件，要修改一次就要翻箱倒柜，毫无结构而言。

遇到这种困扰，大概也是因为我并没有前端积累，所以对如何组织代码结构并没有心得。不过恰好因为我没有这些积累，也许可以更顺利的投入到新的web开发模式/框架中。

基础

写过html，css，javascript。

不会es6语法，不会nodejs，不会npm，不会任何打包工具。

下面学习会用nodejs，如果你是mac os，那么千万不要使用brew安装nodejs（安装的版本不太好用），直接去nodejs官网下载mac版本点击安装即可。

启航

接下来可能要记录一系列的博客，对于要学的知识点我会列出我学习时发现的好文章，我相信你也可以和我一样顺利的理解掌握。同时，我也会写点我认为重要的理解和感悟，只言片语也许会帮助到你。

同时，我也不会对webpack是什么，react是什么去做讲解，我相信大家可以自己谷歌。

单页应用（SPA – single page application）

学习这一套技术，我的目的很明确：写H5应用。但是直接上来就学react，我觉得还是有些蒙圈，所以建议你读一下这篇文章，它大概介绍了如何裸写一个单页应用：开发无框架单页面应用

这里面主要讲了几个事情，监听锚点变化实现页面路由，对于每个页面来说通过ajax从服务端下载html到内存，直接填充到一个中央div容器中，最终调用一个渲染方法调用服务端接口获取数据，替换整个html内的一些标签占位，形成最终的页面。

我想一个单页应用大概就是这样吧，理解这个对接下来学习react的好处是什么？我想，大概是防止因为太陷入细节而忘记了本质。

先学webpack

我的理解

我们写过c,c++的同学知道，源代码要经过预编译，链接，最终生成一个可执行程序。webpack做的事情类似，它制定了一种概念，认为js，css，img相当于若干c语言的源文件，我们可以进行合理的模块化拆分，互相之间可以引入，调用，这和我们写c/c++程序没有什么两样。

发布上线之前，webpack会对每个文件进行编译，例如：把es6语法的文件转换成js语法，把react的jsx语法翻译成js代码。之后，会分析各个文件之间的依赖关系，例如：A调用了B，C也调用了B，那么B只需要保留一份，这个过程类似于链接。最终，产出物就是一个集合了js，css的完整文件，默认叫做bundle.js。

我们只要在网站的index.html里引入这个bundle.js，网站就会自动运行起来。这里，index.html很像是操作系统，bundle.js像是一个二进制程序，而main函数其实是webpack中指定的一个entry入口js文件。

夯实基础

说了这么多，不如把下面3个博客读一读，其中的代码也实际的去运行一下，体会一下每个参数配置的用途和规律，相信会对webpack形成理解。

阅读记得按顺序来：

Beginner’s guide to Webpack   英文的，小白入门，非常棒。（注意，文章里有点错误：文章后半部分使用es6语法后，app.js和hello.js后缀应改为es6，同时webpack.config.js中entry处也应修改为app.es6）

webpack-tutorial 中文的，补充一些css相关介绍，先作了解即可

webpack官方tutorial  前面基本覆盖了，可以再补充一下

有几个概念比较混淆，在学习中可以回过头到这里看一下。

• webpack是一个nodejs实现的编译工具，只用于开发发布阶段，在最终的产品中并不会依赖它。而上述例子中，在nodejs项目的package.json中devDependencies都是此类用途，也就是开发编译才会用到。
• 真正上线的依赖只有dependencies中的react和react-dom，它们的代码才会真正的发布出去。按照我对bundle.js的分析，只有用到的代码才会被打包进去，而项目中没有调用到的相关方法，并不会出现在bundle.js中，说明webpack对代码的依赖分析非常厉害，这样代码是非常精简的。
• 貌似前面的学习项目中，都只有js而没有html文件，网站怎么渲染出来的呢？其实react的jsx语法最终编译后就是一堆dom操作，所以我们并没有直接去写.html文件就是这个原因，一切皆js。

开始react

此时，我恰好开始react的学习，后续会补充相关心得到后续章节。

经过之前webpack的学习，已经有能力使用简单的react了，但是距离真正开发一个单页应用，至少还缺少2个东西，一个是路由，一个是状态维护。当然，如何将所有知识点串联起来，是学习react最困难的地方，只能继续学习了。

这是一个台湾同胞的github，里面记录了react的循序渐进的学习记录，我会基于这些内容逐渐深入学习，相信是个不错的选择：react-quick-tutorial

下一篇中，我学习了react部分的github教程，并记录了一下各类小知识点，可以学习过程中来查阅。[备忘录] 记录一下学习react中遇到的知识点