React 教程（一）

来源：菜鸟教程
React 是一个用于构建用户界面的 JAVASCRIPT 库。
在react中，我们用jsx来代替javascript，因为有如下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

不过也可以通过 {} 使用javascript

  
{1+1}

我们可以看如下实例

ReactDOM.Render{
            

              

              

            
,
        document.getElementById('example')
    }

我们可以在通过div元素代码中添加多个标签，也可以添加自定义属性，不过添加自定义属性需要使用 data- 前缀。

引入js文件
我们可以将 React JSX 代码放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，则 在HTML中按如下引入。

样式
React 可以使用内联样式，使用 camelCase 语法（就是将形如background-color转化为驼峰表示法：backgroundColor）来设置内联样式， React 会在指定元素数字后自动添加 px

  var myStyle = {
     fontSize: 100, 
     color: '#FF0000'
    };
  {/*注释...*/}
  ReactDOM.render( 
    
菜鸟教程
,    
    document.getElementById('example')
    );

注释实例如上

渲染 HTML 标签 (strings) 或 React 组件 (classes)
通过在 JSX 里使用小写字母的标签名可以渲染HTML 标签

  var myDivElement = 
;
  ReactDOM.render(myDivElement, document.getElementById('example'));

通过创建一个大写字母开头的本地变量可以渲染 React 组件

  var MyComponent = React.createClass;
  var myElement = ;
  ReactDOM.render(myElement, document.getElementById('example'));

React 组件

上面主要讲的是基本的使用

React的用途主要是创建组件使得应用更容易来管理,并且我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离

可以通过一个实例来理解

  var HelloMessage = React.createClass({ 
  render: function() { 
        return (
                  
               );
                      }
    });

  var Name = React.createClass({ 
        render: function() { 
              return ( 
{this.props.name}
 ); 
                  }
              });

  ReactDOM.render(
     , 
      document.getElementById('example')
  );

React.createClass 方法用于生成一个组件类 HelloMessage。
实例组件类并输出信息。
可以使用 this.props 对象,向组件传递参数。
HelloMessage 组件使用了** Name 组件**来输出对应的信息，也就是说 HelloMessage 拥有 Name 的实例