初识React全家桶

react全家桶包括技术栈及框架如下：

• react：
• webpack
• react-router
• redux
• bable
• webpack-dev-server

一、react：

react起源于facebook的内部项目。react的出现是革命性的创新，react是一个颠覆性的前端框架。在react官方这样介绍它：一个声明式、高效的、灵活的、用于创建用户界面的javascript库。是一个前后端通吃的webapp解决方案。

react声明式特点减少了操作DOM的性能损耗，同时利用项目的解耦及组件化的开发思想，更便于开发人员相互配合及组件代码复用。内部实现的虚拟DOM和DOM diff算法使DOM的操作变得高效。

二、webpack

由来：由于前端之前js、css、图片等项目资源都需要独立打包和压缩，这样很繁琐，然而Instagram团队想让这些工作自动化，webpack应用而生。

介绍：webpack是一个模块打包器（module bundler），webpack视HTML，JS，CSS，图片等文件都是一种 资源 ，每个资源文件都是一个模块（module）文件，webpack就是根据每个模块文件之间的依赖关系将所有的模块打包（bundle）起来。

作用：

• 对 CommonJS 、 AMD 、ES6的语法做了兼容
• 对js、css、图片等资源文件都支持打包（适合团队化开发）
• 比方你写一个js文件，另外一个人也写一个js文件，需要合并很麻烦，现在交给webpack合并很简单
• 有独立的配置文件webpack.config.js
• 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
• 具有强大的Plugin（插件）接口，大多是内部插件，使用起来比较灵活

三、react-router

介绍：用于界面跳转。

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

四、redux

介绍：是一个极其简单的状态管理框架，清晰的描述应用的状态。

几个概念性词汇：

action：定义发送及接收的事件名称

reducer：就是一个函数，计算view新状态的过程函数

store：用于创建reducer函数，维持应用的state；getState()方法获取state；提供 dispatch(action) 触发reducers方法更新 state；通过 subscribe(listener) 注册监听器; 通过 subscribe(listener) 返回的函数注销监听器。

五、bable

javascript转译器，为什么会有babel存在呢?原因是javascript在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为javascript增加了箭头函数、块级作用域等新的语法和 Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。

六、webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能：

• 为静态文件提供服务
• 自动刷新和热替换(HMR)