[React-章节1]如何一脸懵逼的学习webpack,react?

前言

当看到前端同事熟练使用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中遇到的知识点

发表评论

电子邮件地址不会被公开。