React （构造和渲染React组件）

1.传统方法（es5)

/**
 * 构造组件
 * 我们通过 JavaScript 对象传递一些方法到 React.createClass() 来创建一个新的 React 组件。
 * 其中最重要的方法是 render ，该方法返回一棵 React 组件树，这棵树最终将会渲染成 HTML 。
 * 这里的 <div> 标签不是真正的 DOM 节点；他们是 React div 组件的实例。你可以认为这些标签就是一些标记或者数据， React 知道如何处理它们。React 是安全的。
 * 我们不生成 HTML 字符串，因此默认阻止了 XSS 攻击。
 */
var CommentList = React.createClass({
    render: function () {
        return(
            <div className='commentList'>
                Hello, world! I am a CommentList.
            </div>
        );
    }
})

2.使用es6语法

/**
* es6 将组件是为class
**/
class Clock extends React.Component{
    render(){
        return(
            <div>
                <h1>Hello</h1>
                <h2>现在是{this.props.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
}

3.渲染 HTML 标签

// 要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名
const divElement = <div className="jin"/>;
ReactDOM.render(
    divElement,
    document.getElementById('content')
)

4.渲染组件

// 要渲染 React 组件，只需创建一个大写字母开头的本地变量。
const recElement = React.createClass(
    {/*住宿。。。*/}
)
ReactDOM.render(
    <Clock/>,
    document.getElementById('content')
)