Html文件里，弄一個(gè)container，但會(huì)被replace

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

js里，一個(gè)render方法，（A,B），A是組件名稱，里面還能插入組件屬性，如下面的name="world"，并通過this.prop.xxx調(diào)用，B是插入到html的那個(gè)標(biāo)簽并replace掉

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

關(guān)于組件新建，就是
React.createClass（{
XXX:XXX;
XXX:xxx;
...
}
）
就是一個(gè)對象下面各種屬性方法哈
react與css
兩種寫法，一個(gè)寫在css文件中，但要注意的是，給標(biāo)簽添加class時(shí)，根據(jù)es6最新特性，要寫成className

<Hello name="World" className="ddd" />

另一種寫法，是寫在js新建組件里面，render方法return時(shí)加上style={（鍵值對寫法）}（react規(guī)定）
來個(gè)例子

var Hello=React.createClass({
  render:function(){
      var styleObj={
                     color:"red";(react規(guī)定要以字符串形式，所以雙引號)
                     fontSize:"40px"(react規(guī)定名字要駝峰式寫法）
      }；
      return<div style={styleObj}></div>;
   }

生命周期和this.state

• 一張圖，一個(gè)hook的理念，在creatClass方法中的hook方法進(jìn)行使用，應(yīng)該就把生命周期闡述完了。

• 講到生命周期，不得不說this.state.在圖中你能看到，mounting階段，有一個(gè)getinitialState()方法是處于所有hook之前，這個(gè)方法用于定義初始狀態(tài)，也就是一個(gè)對象，這個(gè)對象可以在接下來的creatClass方法通過 this.state.xxx讀取屬性

• 既然有了this.state了，肯定要有改變值的方法，就是this.setState，這個(gè)可謂是核心，每次修改以后，自動(dòng)調(diào)用 this.render方法，再次渲染組件。就是所謂的動(dòng)態(tài)改變了，弄一個(gè)例子看看

var LikeButton = React.createClass({

getInitialState: function() {

return {liked: false};

},

handleClick: function(event) {

this.setState({liked: !this.state.liked});

},

render: function() {

var text = this.state.liked ? 'like' : 'haven\'t liked';

return (

<p onClick={this.handleClick}>

You {text} this. Click to toggle.

</p>

);

}

});

ReactDOM.render(

<LikeButton />,

document.getElementById('example')

);

獲取真實(shí)的dom
其實(shí)就是給標(biāo)簽綁定一個(gè)ref值，通過索引ref值得到真實(shí)dom節(jié)點(diǎn)

最后來一個(gè)實(shí)例來結(jié)束入門

var TestClickComponent=React.createClass({
  render:funtion(){
     handleClick:function(event){
      var tipE =React.findDomNode(this.refs.ddd);
       if(tipE.style.display="none")
        {
              .......
         }

     return(
              <div>
                   <button onClick={this.handleClick}>顯示隱藏</button><span ref="ddd">測試點(diǎn)擊隱藏
               <div>
         );
    }
});
var TestInputComponent=React.createClass({
 getInitialState:function(){
    return {
         inputContent:""
     }
},
 render:function(){
     changHandler:function(event){
      this.setState({
          inputContent:event.target.value
   })；


       }

     return(
        <div>
            <input type="text" onChange={this.changeHandler}}/><span>{this.state.inputContent}</span>
        <div>
     );
}
});  

React.render(
<div>
     <TestClickCompent/>
     <TestInputCompent/>
</div>
document.getElementById("container"));

• 文本輸入框的值，不能用this.props.value讀取，而要定義一個(gè)onChange
  事件的回調(diào)函數(shù)，通過event.target.value讀取用戶輸入的值。textarea元素，select元素，radio元素都屬于這種情況
• 盡量都使用駝峰式寫法命名，能避免很多bug，有一個(gè)特別注意，組件命名第一個(gè)字母要大寫的
• React的監(jiān)聽事件中，要獲取真實(shí)的dom，有React.findDomNode(this.refs.XXX)，就是相當(dāng)于原來的選擇器，但這里要和文本框內(nèi)容區(qū)分開
• 在render中，對兩個(gè)組件用了個(gè)div包起來，因?yàn)閞ender不能直接放兩個(gè)組件
• 第一個(gè)組件，就是在button中添加事件（注意大小寫）handleClick，在handClick方法中獲取span的真實(shí)dom節(jié)點(diǎn)及其屬性并進(jìn)行操作
• 第二個(gè)組件中，就是一個(gè)state和setState進(jìn)行動(dòng)態(tài)交互的一個(gè)小例子，在 getInitialState中定義屬性inputContent，并在事件對調(diào)函數(shù)中改變他進(jìn)行動(dòng)態(tài)輸出（event.target.value）