接著React基礎(chǔ)（一）

1.用.createClass創(chuàng)建一個(gè)簡單的組件(es5)

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

注意：
1.組件的首字母必須大寫
2.組件只能存在一個(gè)根元素

2.組件的屬性：props

var titles=‘標(biāo)題’；
var Hello = React.createClass({
        render:function(){
          return(
            <div>{this.props.title}{this.props.content}</div>
                    //要獲取倆個(gè)時(shí)要用{}分開
          )
        }
    });

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

3.添加樣式

3.1內(nèi)聯(lián)樣式：必須遵循駝峰樣式

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外聯(lián)樣式

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

注意：
不能用class，因?yàn)閏lass是es6關(guān)鍵字，es5保留關(guān)鍵字，所以要改成className,
在樣式表中寫樣式

不變的樣式用外聯(lián)，動(dòng)態(tài)的樣式用內(nèi)聯(lián)