React框架入门

1. 在虚拟DOM上创建React对象的方法
   //createElement(type, [props], [children…])
   //参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用 字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。
   //参数props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。 我们在示例中简单的设置为null。
   //从第三个参数children开始的所有参数，都被认为是这个元素的子元素。考虑到 虚拟DOM好歹也是DOM，容易理解React需要通过这些子元素参数，让我们可以构造虚拟DOM树
   例：

var el = React.createElement(
        "ul",
        null,
        React.createElement("li",null,"China"),
        React.createElement("li",null,"Japan"),
        React.createElement("li",null,"Korea")
    );

1. 将虚拟DOM上的对象渲染到真实DOM上的方法
   //render(element, container, [callback])
   //参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！
   //参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法 的执行改变。
   //callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。

2. 在React中定义一个组件，组件就是一个实现与定义接口的JavaScript类。组件名称首字母必须大写。
   //React.createClass(meta)
   // 参数meta是一个实现预定义接口的JavaScript对象，用来 对React组件原型进行扩展。
   //在meta中，至少需要实现一个render()方法，而这个方法， 必须而且只能返回一个有效的React元素。
   //这意味着，如果你的组件是由多个元素构成的，那么你必须在外边包一个顶层 元素，然后返回这个顶层元素。
   例:

render:function(){
        return React.createElement(
            "div",null,
            React.createElement("div",null,"header"),
            React.createElement("div",null,"content"),
            React.createElement("div",null,"footer")
        );
    }

var Greet = React.createClass({
    render: function() {
        return <h1>Hello {this.props.name}</h1>;
    }
});

React.render(
    <Greet name="Jack" />,
    document.getElementById('contrainer')
);
//获取属性的值用的是this.props.属性名
//创建的组件名称首字母必须大写。
//为元素添加css的class时，要用className。
//组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。