1.推薦一個React學習中文網站：http://www.css88.com/react/

2.使用jsx來將代碼封裝成React組件，然後像插入普通 HTML 標簽一樣，在其他地方插入這個組件。使用React.createClass用於生成一個組件

var MyComponent=React.createClass({
  render: function() {
   return <h1>Hello world!</h1>;
 }
});
ReactDOM.render(
 <MyComponent />,
 document.getElementById(
 
‘example‘)
);

上面代碼中，變量 MyComponent就是一個組件類。模板插入 <MyComponent /> 時，會自動生成 MyComponent 的一個實例（下文的"組件"都指組件類的實例）。所有組件類都必須有自己的 render 方法，用於輸出組件。

3.React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。

註意：在react中通常約定組件類的第一個字母必須大寫，html標簽都是小寫

//要渲染 HTML 標簽，只需在 JSX 裏使用小寫字母開頭的標簽名。
var myDivElement = <div className="
 
foo" />;
React.render(myDivElement, document.getElementById(‘example‘));


//要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent  />;
React.render(myElement, document.getElementById(‘example‘));

4.重點之一:復合組件

var WebSite = React.createClass({
  render: function() {
    
 
return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 
ReactDOM.render(
  <WebSite name="菜鳥教程" site=" http://www.runoob.com" />,
  document.getElementById(‘example‘)
);

5.重點之二：動態組件

var MyComponent=React.createClass({
  getInitialState: function() {
       return {clickNum: 0};
  },
  handleClick:function(){                       //組件的事件動作
    var num=this.state.clickNum;               //組件的狀態
    num++;
    this.setState({clickNum:num});
  },
  render: function() {
   return (
      <div>  
        <h1 onClick={this.handleClick}>Hello {this.props.name}!</h1>       //組件的屬性
        <h2 style={{color:‘red‘}}>點擊{this.props.name}次數：{this.state.clickNum}</h2>
      </div>
    );
 }
});
ReactDOM.render(
  <div>
     <MyComponent name="張三" />
     <hr/>
     <MyComponent name="李四" />
  </div>,
 document.getElementById(‘example‘)
);

上面代碼中定義的MyComponent組件包含屬性，狀態和事件，是一個簡單的比較完整的組件。使用props通過父組件進行傳遞值，使用state定義組件自己的狀態，組件支持的大部分的DOM操作事件。

6.關於狀態state：

React 裏，只需更新組件的 state，然後根據新的 state 重新渲染用戶界面（不要操作 DOM）。

• 組件免不了要與用戶互動，React 將組件看成是一個狀態機，一開始有一個初始狀態，然後用戶互動，導致狀態變化，從而觸發重新渲染 UI。
• getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以後，自動調用 this.render 方法，再次渲染組件。
• 由於 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。
• 一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。
• 例如：

7.關於Props：

（1）state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什麽有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById(‘example‘)

（2）Props驗證：

Props 驗證使用 propTypes，它可以保證我們的應用組件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時，JavaScript 控制臺會拋出警告。

以下實例創建一個 Mytitle 組件，屬性 title 是必須的且是字符串，非字符串類型會自動轉換為字符串 ：

var title = "菜鳥教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
 
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById(‘example‘)
);

8.獲取真實的DOM：

組件並不是真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以後，才會變成真實的 DOM 。
有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性。

var MyComponent = React.createClass({
   handleClick: function() {
     this.refs.myTextInput.focus();
   },
   render: function() {
     return (
     <div>
       <input type="text" ref="myTextInput" />
       <input type="button" value="Focus the text input" onClick={this.handleClick} />
     </div>
     );
   }
});

2017.11.30 React基礎語法之一組件