React组件（二）

接着React基础（一）

1.用.createClass创建一个简单的组件(es5)

var Hello = React.createClass({
        render:function(){
          return(
            <div>hello</div>
          )
        }
    }); 
ReactDOM.render(<Hello />,document.getElementById("root"));

注意：
1.组件的首字母必须大写
2.组件只能存在一个根元素

2.组件的属性：props

var titles=‘标题’；
var Hello = React.createClass({
        render:function(){
          return(
            <div>{this.props.title}{this.props.content}</div>
                    //要获取俩个时要用{}分开
          )
        }
    });

  ReactDOM.render(
            <Hello title={titles} content="demo"/>,
            document.getElementById("root")
   );
           //title后的值，可以是具体的值也可以是对象，其他同理

3.添加样式

3.1内联样式：必须遵循驼峰样式

var HelloReact = React.createClass({
         render:function(){
               return(
                  <div style={{color:'red',fontSize:'20px'}}>hello React</div>
                )
          }
    });
ReactDOM.render(<HelloReact />， document.getElementById("root")
    );

或

var styleObj = {
      color:"red",
      fontSize:"40px"
    };
var HelloReact = React.createClass({
      render:function(){
           return(
              <div style={styleObj}>hello React</div>
            )
      }
   });
ReactDOM.render(<HelloReact />,document.getElementById("root"));

3.2外联样式

return(<div className='类名'>hello React</div>)

注意：
不能用class，因为class是es6关键字，es5保留关键字，所以要改成className,
在样式表中写样式

不变的样式用外联，动态的样式用内联