React教程

核心思想：1.组件化开发模式 2.单项数据流进行数据渲染。

核心控制框架 ：react.js

用git进行下载安装

npm install -g webpack(打包工具)

npm install react  - - save-dev(react.js文件下载)

npm install react  -dom - -save-dev(dom控件)

npm install babel-core babel-loader --save-dev

npm install babel-preset-stage-o  - -save-dev

npm install babel-preset-es2015 --save -dev

npm install babel -preset -react

npm install classNames --save(下载className插件)

命令 webpack -p压缩打包代码；

webpack -w 边监听状态边进行打包；

语法：

五、ReactJS组件

1、组件属性

前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：

看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：

1）获取属性的值用的是this.props.属性名

2）创建的组件名称首字母必须大写。

3）为元素添加css的class时，要用className。

4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

2、组件状态

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：

这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。效果如下：

原理分析：

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

这里值得注意的几点如下：

1）getInitialState函数必须有返回值，可以是NULL或者一个对象。

2）访问state的方法是this.state.属性名。

3）变量用{}包裹，不需要再加双引号。

3、组件的生命周期

组件的生命周期分成三个状态：

• Mounting：已插入真实 DOM

• Updating：正在被重新渲染

• Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()

• componentDidMount()

• componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

下面来看一个例子：

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

4、组件的嵌套

React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：

这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属性searchType传入值，最终显示结果如图：

六、ReactJS小结

关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：

1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

4、组件名称首字母必须大写。

5、变量名用{}包裹，且不能加双引号。

注意：

1）获取属性的值用的是this.props.属性名

2）创建的组件名称首字母必须大写。

3）为元素添加css的class时，要用className。

4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

使用react最重要的是使用flux

流程图

使用react热替换操作：

插件安装

首先，需要通过npm安装这么几个插件：

1. webpack-dev-server：这是Webpack提供的一个基于Express的开发服务器，是一个静态资源Web服务器，可以直接在浏览器里以这样的方式访问：http://localhost:8080/public/dist/html/user/login.html
这是我本地项目的一个链接，webpack-dev-server是直接使用html页面的路径访问的。使用express的npm start命令启动的话，是通过路由访问的，类似于http://localhost:3000/user/login，二者是不一样的。
另外，express的端口默认是3000，webpack-dev-server则是8080。修改端口的方式下面会讲到。

2. babel-plugin-react-transform：代替react-hot-loader的插件，是基于Babel Plugin的。这是一个基本的架子，要实现热替换还要安装其他插件。

3. react-transform-hmr：安装这个才能实现热替换的功能。

4. babel-preset-react-hmre：让Babel知道HMR（热替换），涉及到了webpack.config.js里loader为babel（也就是js、jsx使用babel-loader地方）的配置。

5. react-transform-catch-errors、redbox-react：这两个插件把catch到的错误直接显示到页面上，就不用再打开控制台看了 。不过这两个是为了看到错误方便而安装的，实际可以不安~


开始配置

1. 配置babel

之前babel处理jsx文件中es6的配置都写在webpack.config.js中，大概是这个样子：



如果项目中还有js文件，就要复制粘贴一遍这个并且把jsx改成js。。。但随着项目越来越大，babel的配置可能越来越多，全写在这里可能会显得比较臃肿，可以这样处理——在根目录新建一个Babel的配置文件: .babelrc，把这一句话粘贴进去：



然后在webpack.config.js里babel配置的地方就可以把这句话删掉了：



接下来，加入babel-preset-react-hmre这个插件的配置，在.babelrc文件中，加入这样一段话：



这样最终的.babelrc文件的内容是：




2. 配置webpack server

在module.exports中加入这样一段devServer的配置：



这里contentBase是访问路径，如果html文件和css img等文件打包后都在这个路径下是没有问题，否则会找不到文件的。
不配置这个默认路径的话，在浏览器地址栏中访问一个页面，路径是要从根目录下开始的，本项目是使用express建立，打包后的html页面放在/public/dist/html下，因此地址栏中访问路径是这样：



如果配置了contentBase，就可以把url中的/public/dist/html省去了。


3. 修改package.json

把package.json中，scripts的设置改成这样：



webpack server默认的端口是8080，如果需要修改的话，可以在命令中用--port修改，这里改成了9999。


完成

完成以上配置后，就可以在根目录下打开命令行，执行npm run dev了。
在浏览器中访问http://localhost:9999/public/dist/html/user/login.html，页面出现，修改一下文案或者样式等等，页面内容改变但是没有刷新。
在render方法中故意弄出一些错误，像这样：



浏览器上打开的页面自动就变成了这样的一片红色：



说明安装的react-transform-catch-errors、redbox-react两个插件起作用了，大功告成~
不过有些错误还是在控制台里提示的，所以控制台还是必要的调试工具。