[react]读《React全栈》(一)

最近在学习react，我选择读的书是《React全栈》-redux+flux+webpack+babel整合开发。
全书总分为7章节，目前读了第一二章节，一二章节主要为React学习的初始，了解前端框架发展史以及webpack。

新一代的javaScript标准-ES6

看了些reactdemo工程，大量使用了es6语法，常用的大概就是这些：const,let,箭头函数,函数默认参数,Rest参数,模板字符串,解构赋值,以及类和模块的使用。在react项目中，es6能够大展身手。

最佳兼容方案Babel

虽然JS新新语法发展迅速，但由于浏览器的多样性导致近几年之间可能无法广泛普及或者兼容，所以这需要Babel,使用Babel可以在React中随意使用最新ES6语法特性，首页babel的基础当然是需要一个配置文件.babelrc，如果使用webacpk我们便可以直接把babel引入其中。

前端组件化方案

在我们使用vue开发的时候，就已经去接触使用组件化开发了，但是一看react工程会发现，前端的组件化方案在react中更是体现的淋漓尽致，组件化有利于功能的维护与拓展。

前端模块化方案

大概分了3个阶段：从一开始的全局变量+命名空间（namespace）到AMD&CommonJs 再到现在的ES6模块化。

webpack

使用react构建应用，webpack必不可少，它通过一个config文件实现打包，支持多种静态文件，还有code splitting，这是一个为前端模块打包构建而生的工具。

image.png

关于webpack学到的知识点:

1.loader

loader是作用于应用中资源文件的转换行为，简单举个例子:比如我们使用在react中使用jsx语法，是如何能在浏览器中运行的。这里是使用的jsx-loader对jsx代码做了转换，最终转换成浏览器能识别的js语言。

2.配置入口

如下图即为一个简单的配置入口文件 image.png

这里包含了entry 项目的入口文件，output构建输出结果，path：为输出目录，filename为输出的文件名。

3.plugin

在webpack中，我们可以把plugin看成loader实现不了或者是不适合在loader中去实现的功能。比如自动生成项目html页面的HTMLWebpakcPlugin,以及向构建过程中注入环境变量的EnvironmentPlugin,plugin的配置如下图：

image.png

4.webpack的实时构建

在开发中，每次我们代码的修改，为了能达到页面的实时刷新，工程实时打包更新，这需要webpack的webpack-dev-server来实现了，他提供了最基本的自动刷新，还有模块热替换。
配置模块热更新：

devServer:{

hot:true

},

plugins:[

new webpack.HotModuleReplacementPlugin(),

new webpack.NameModulesPlugin()

]