在项目中使用react

运行cnpm i react react-dom -S安装包
react 专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
react-dom 专门进行DOM操作，主要运用场景就是ReactDOM.reader()
启用jsx语法：

安装babel插件
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
安装能够识别转换jsx语法的包
cnpm i babel-preset-react -D

添加.babelrc配置文件

{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}

webpack.config.js

module: {
rules : [
{test: /.js|jsx$/, use: 'babel-loader', exclude: /node_modules/}
]
}

搭建新react项目

全局安装

cnpm install -g create-react-app
create-react-app my-app
cd my-app
npm start
编译npm run build

定义组件的2中方法

javascript函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

使用es6的class来定义组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

react绑定事件最好这样

export default class Test extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: '哈哈',
            name: '张三',
            age: 23
        }
    }
    render() {
        return <div>
            <button onClick={() => this.handlerClick('wsd', '测试')}>提交</button>
            <h2>{this.state.msg}</h2>
            <h3>{this.state.name}</h3>
        </div>
    }
    //官方最推荐的使用方式
    handlerClick = (arg1, arg2) => {
        this.setState({//这个方法是异步的
            msg: arg2
        }, function () {//回调函数
            console.log("回调后" + this.state.msg)
        })
        console.log('回调前' + this.state.msg);
    }
}

input表单双向数据绑定

 render() {
        return <div>
            <button onClick={() => this.handlerClick('wsd', '测试')}>提交</button>
            <h2>{this.state.msg}</h2>
            <input type='text' value={this.state.msg} onChange={(e)=>this.handlerChange(e)}/>
        </div>
    }

    handlerChange = (e)=> {
        console.log(e.target.value);
        this.setState({
            msg: e.target.value
        })
    }
第二种方法通过refs双向绑定
this.state.refs.xxx.value