一、React概述
1、什么是React
React是一种描述应用程序用户界面的方法，是一种在数据发生变化时随时更改用户界面的机制；
使用React可以避免不必要的DOM操作；
2、常用术语
组件：是React构建用户界面的基本单位；
JSX：JSX（JavaScript XML）是对js语法的扩展；它可以将HTML直接嵌入在js代码中，在js代码中以类似HTML的方式创建React元素。
虚拟DOM：基于React进行开发时，所有的DOM构造都是通过虚拟DOM进行，每当数据变化时；React都会重新构建整个DOM树，并将当前的整个DOM树和上一次的DOM树进行对比；得到DOM结构的区别，然后仅仅将需要变化的部分进行更新。
二、创建React元素
1、安装React
官网下载安装包；下载后进行解压，然后将build文件夹下面的react.js和react-dom.js
两个文件拷贝到指定路径，在操作的HTML文件中引入这两个文件即可。
2、使用JavaScript创建React元素。
(1)createElement(()方法；
语法格式：createElement（type,[props],[children...]) //type:指定要创建的元素类型；
props：指定元素的附加属性； children：设置创建元素的子元素。
React.createElement('a',{href:'http://www/mingrirusoft.com'},'加优势网")(2) render()方法
语法格式：render(element,container,[callback]) //element使用createElement()方法创建的React（）元素，,container：真实DOM中的HTML元素,[callback]：设置渲染完成或更新后执行的回调函数；
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="example"></div>
<script>
var test = React.createElement('h1',null,'Hello React');
ReactDOM.render(
test,document.getElementById('example')
);
</script>3、使用JSX创建React元素
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<p>明日学院</p>,
document.getElementById('example')
);
</script>在JSX的语法中，HTML代码可以直接编写在JavaScript代码中，但是不能加任何引号。
如果变量为数组，则遍历所有数组。
<div id="example"></div>
<script type="text/babel">
var arr ={
<h1>Hello World</h1>
<h2>Hello JavaScript</h2>
};
ReactDOM.render(
<div>(arr)</div>,
document.getElementById('example')
);
</script>三、创建组件
1、创建无状态React组件的方法
定义组件使用的是React对象中的createClass()方法。所有的组件在定义后都必须通过render（）方法将其渲染到页面中。
<div id="example"></div>
<script type="text/babel">
var Message = React.createClass({
render:function(){
return<h1>你好{this.props.name}<h1>;
}
});
ReactDOM.render(
<Message name = "React">
document.getElementById('example')
);
</script>2、创建有状态React组件的方法
定义组件的初始状态使用的是React对象中的getInitialState()方法。而设置组件的状态使用的是setState（）方法。
<div id="example"></div>
<script type="text/babel">
var InputState = React.createClass({
getInitialSate:function(){
returnv(enable:false);
},
handleClick:function(event){
this.setState({enable:this.state.enable});
},
render:function(){
return (
<p>
<input type="text" disabled = {this.state.enable});>
<button onClick={this.handClick}更改输入状态</button>
</p>
)
}
})
ReactDOM.render(
<Message name = "React">
document.getElementById('example')
);
</script>
