来源：菜鸟教程
React 是一个用于构建用户界面的 JAVASCRIPT 库。
在react中，我们用jsx来代替javascript，因为有如下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
不过也可以通过 {} 使用javascript
<h1>{1+1}</h1>
我们可以看如下实例
ReactDOM.Render{
<div>
<h1></h1>
<p data-myattribute = "somevalue"></p>
</div>,
document.getElementById('example')
}
我们可以在通过div元素代码中添加多个标签，也可以添加自定义属性，不过添加自定义属性需要使用 data- 前缀。
引入js文件
我们可以将 React JSX 代码放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，则 在HTML中按如下引入。
<script type="text/babel" src="helloworld_react.js"></script>
样式
React 可以使用内联样式，使用 camelCase 语法（就是将形如background-color转化为驼峰表示法：backgroundColor）来设置内联样式， React 会在指定元素数字后自动添加 px
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
{/*注释...*/}
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
注释实例如上
渲染 HTML 标签 (strings) 或 React 组件 (classes)
通过在 JSX 里使用小写字母的标签名可以渲染HTML 标签
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
通过创建一个大写字母开头的本地变量可以渲染 React 组件
var MyComponent = React.createClass;
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
React 组件
上面主要讲的是基本的使用
React的用途主要是创建组件使得应用更容易来管理,并且我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离
可以通过一个实例来理解
var HelloMessage = React.createClass({
render: function() {
return (
<Name name={this.props.name} />
);
}
});
var Name = React.createClass({
render: function() {
return ( <h1>{this.props.name}</h1> );
}
});
ReactDOM.render(
<HelloMessage name="World"/>,
document.getElementById('example')
);
React.createClass 方法用于生成一个组件类 HelloMessage。
<HelloMessage /> 实例组件类并输出信息。
可以使用 this.props 对象,向组件传递参数。
HelloMessage 组件使用了** Name 组件**来输出对应的信息，也就是说 HelloMessage 拥有 Name 的实例
