1--react优势

组件化-便于分工、合作

虚拟DOM-性能高

跨平台-移动端

最强，即react核心：组件化、状态

2—react缺点

学习曲线特别陡

设计属性有点特别

3—react技术栈

react主体、webpack、flex、react-route、redux（view 层）、Mocha（测试）、Istanbul（覆盖率）、

4—JSX：

   增强型的js语法—html代码可以直接放在js里、需要编译、babel

 

Ps:有且只有一个父元素；模板字符串

 

Babel和react通过Git Bash 安装过程：

$ bower install babel命令可以用于下载babel

$ bower install react命令可以用于下载react

                       

小栗子：在div内渲染span元素

 

 

5—组件

（1）定义组件—组件==class类

class  名字 extends React.Component{

render(){

   return <span>666</span>;

   }

}

（2）使用组件

 跟标签一样使用

ReactDOM.render(   666,   oDiv);ReactDOM.render(  
     ,  oDiv);

 

小栗子：

 

小栗子：

 

Ps：{}表示模板，需要渲染的东西放在该模板中

6--属性-不变的、状态-可变的

  （1）状态是可变的

   在构造函数constructor里面可以通过this.state{ }直接进行初始化；但在其他方法里面，则需要使用react自带的方法，即this.setState({ });

  （2）事件大小写不能乱

   onChange、onClick、、、、、

  （3）绑定事件

   onChange={this.fn.bind(this)}

  （4）构造函数

   当用constructor的时候，必须用super父类，即需要先完成父类函数里的构造，才能再完成自身函数的构造。constructor用于初始化状态。

 

小栗子の输入框改变的渲染：

 

小栗子の点击显示隐藏：

 

小栗子の时钟：

 

7—组件-生存周期

  componentWillMount()         创建之前

  componentDidMount()         创建之后

 

  componentWillUpdate()        更新之前

  componentDidUpdate()        更新之后

 

  componentWillUnmount()      卸载之前

 

componentWillReceiveProps()   组件参数更新

小栗子1：

 

小栗子2：

 

8—组件重用、父子组件间通信

小栗子：

 

小栗子：

 

 

9—react输出成组元素

首先将元素push进数组

arr.push(<Item/>);//Item为组件

arr.push(<Item/>);

arr.push(<Item/>);

然后，直接将数组渲染出来

 <ul>

  {arr}

</ul>

 

10—组件内的节点（Node）

一切对属性的修改，利用setState，激活重新渲染

ref参数，类似于id

  refs内存在着所有节点

 

 

小栗子の拖拽（状态方式）：

 

Ps:$(function(){ })  等价于  $(document).ready(function(){  })

 

（1）react只提供组件和状态，可以和原生及其他库配合使用

（2）组件内节点：

    ref=”类似于id”

    this.refs[‘ref名字’]  //得到的即为原生对象

 

11—表单问题

（1）value值，表单中的默认值应该取defaultValue，这样输入框不会成为只读模式

 

（2）用checked问题，改为defaultChecked，否则就不能自由更改了

 

 

12—阻止事件冒泡

 

 

13—组件间通信

  （1）父级-->子级

 

父级往子级放东西

  （2）子级-->父级 

 

 

14—webpack

选择webpack原因：

（1）babel需实时编译，速度慢

（2）测试麻烦

（3）自己搭建服务器

（4）热更新

Webpack：

一种打包工具

（a）下载webpack工具：

   （1）可以先安装淘宝镜像cnpm：

npm install cnpm -g --registry=

   （2） cnpm install –g webpack              //webpack的cli环境

   （3）cnpm install –g webpack-dev-server     //开发用的服务器，webpack自带服务器，cli

   （4）cnpm init  产生一个package.json文档

{   "name": "react_webpack",   "version": "1.0.0",   "main": "index.js",   "dependencies": {     "babel-cli": "^6.24.1",     "babel-preset-env": "^1.4.0",     "babel-preset-es2015": "^6.24.1",     "vue": "^2.2.6",     "webpack": "^2.4.1"   },   "devDependencies": {     "babel-cli": "^6.24.1",     "css-loader": "^0.28.0",     "style-loader": "^0.16.1"   },   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "sxt",   "license": "ISC",   "description": "" }

 

（b）各种依赖库：

 

Babel相关的库

  （1）cnpm install babel-core   //后台编译babel的工具

  （2）cnpm install babel-core –save-dev  或者  cnpm install babel-core –D

 此时package.json文档多了一个babel-core依赖库

{   "name": "hello",   "version": "1.0.0",   "main": "index.js",   "dependencies": {     "babel-cli": "^6.24.1",     "babel-preset-env": "^1.4.0",     "babel-preset-es2015": "^6.24.1",     "vue": "^2.2.6",     "webpack": "^2.4.1"   },   "devDependencies": {     "babel-cli": "^6.24.1",     "babel-core": "^6.24.1",     "css-loader": "^0.28.0",     "style-loader": "^0.16.1"   },   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "sxt",   "license": "ISC",   "description": "" }

  （3）cnpm install babel-preset-es2015 –D    //babel对于2015的一个预设，可以理解为简单的configure

  （4）cnpm install babel-loader -D       //帮助babel加载的一个环境 ，babel加载器

 

Webpack本身：

cnpm install webpack –D              //webpack的本地依赖库

cnpm install webpack-dev-server –D     //webpack服务器的本地依赖库，开发库，可以实时更新热更新

 

cnpm install babel-preset-react –D     //babel对react的预设

 

cnpm install react –D                //react库本身

cnpm install react-dom –D           //react-dom本身

 

cnpm install react-hot-loader –D      //react热更新

 

cnpm install style-loader –D

cnpm install css-loader -D

 

所有需要的package.json文档：

{   "name": "react_webpack",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "sxt",   "license": "ISC",   "devDependencies": {     "babel-core": "^6.24.1",     "babel-loader": "^7.0.0",     "babel-preset-es2015": "^6.24.1",     "babel-preset-react": "^6.24.1",     "css-loader": "^0.28.1",     "react": "^15.5.4",     "react-dom": "^15.5.4",     "react-hot-loader": "^1.3.1",     "style-loader": "^0.17.0",     "webpack": "^2.5.1",     "webpack-dev-server": "^2.4.5"   } }

 

Ps:上面各种依赖库可以直接用cnpm install 即可下载安装,即把node_modules文件夹删掉，保留package.json文件，在命令行输入cnpm install，则会根据package.json文件自动下载该文件内用到的依赖。

（c）webpack的配置文件

  （1）入口 entry

  （2）出口output

  （3）source-map

  （4）指定loaderss

   devtool:  开发工具

 

Webpack.config.js               //webpack的配置文件

module.exports={     entry:'./index.js',     output:{         path:__dirname,         filename:'bundle.js'     },     devtool:'source-map',     module:{         loaders:[             {test:/\.css$/,loader:'style!css'},             {test:/\.js$/,loader:'react-hot-loader!babel-loader',exclude:/node_modules/},         ]     } };

 

.babelrc                       //babel的预设文件

{  presets:[['es2015'],['react']] }

 

启动服务器命令：

方法1：直接在相应文件夹目录下输入：webpack

可以直接将文件打包。利用webpack打包，可以理解为将各种依赖库都重新放到一个新的文件bundle.js中了，在我们的html中，只需要引入这一个文件，省得引入那么多依赖库了。作为入口的index.js直接跟react一样写

命令行中：webpack-dev-server –hot  可以实现页面的实时更新热更新

方法2：

 

例子：

1.html

 

Index.js：

const React=require('React'); class Test extends React.Component{     constructor(...args){     super(...args);     this.state={
  value:''}; } fn(){    this.setState({       value:this.refs['txt1'].value    }); } render(){     return 
    
              
             
     {
  this.state.value}      
    
; } }

其中，bundle.js是由webpack打包得到的，可以理解为webpack将.json文件中所需要用到的依赖都整合到了bundle.js，这样只有引入一个bundle.js文件就可以了。