webpack 里的刷新

webpack 里涉及了多种形式的刷新,其中包括文件监听,修改内容时,页面的整体刷新,还有修改组件时,只针对组件的局部刷新。从最基本的 webpack -w,到 webpack-dev-serverhtml-webpack-plugin 的结合,再到 Hot Module Replacement,它们都有其对应的应用场景。

注:本文的内容是对上一篇文章【webpack】的补充与提高,所以,项目结构和文件是相同的。

全文»

webpack

本文有些内容会前后穿插,需仔细阅读 loader 和 plugin 部分。

说到前端自动化工具,我们总会想到它的这些功能:

编译

将sass、less这类css预处理语言,编译成浏览器可识别的css,如: sass less -> css

将es6,es7这类下一带JavaScript标准或者react的jsx模板,编译成浏览器可识别的 es5,如:es6,es7,coffee,ts,jsx -> es5

全文»

判断空对象的N种方法

有的时候,我们会在页面初始化时,定义一个空对象。当用户进行了某项操作,就给该对象添加对应的属性。最后,当用户完成一系列操作后,将该对象的数据提交给后台,然后作相应反馈。

全文»

ES6创建React组件的绑定方法

在前面的文章,我们说到使用ES6 extends React.Component 这种方式创建的组件,其中的的事件函数句柄不会自动绑定当前实例的 this,我们需要手动绑定 this。

而绑定this的方法主要有两种方法,每种方法又有两种表现形式:

全文»

React以及组件创建

JSX 最简单的语法的可能是这样的:

const greetWord = <span>HI</span>;

可以看到,它既然不是字符串,也不是变量。而是一个不带双引号的、HTML标签与文本内容混合在一起的格式。

要想在页面显示上面的内容,我们必须把它放入一个组件中。首先,定义一个组件,再利用 {} 符号,把上面的 jsx 内容插入组件中:

全文»