来源：菜鸟教程
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 的实例