1. 參考http://www.ruanyifeng.com/blog/2015/03/react.html，阮一峰日誌 https://reactjs.org/docs/introducing-jsx.html
2. 起源於Facebook。Js中MVC框架
3. react獨有的JSX語，凡是使用 JSX 的地方，都要加上 type=”text/babel”。核心庫為react.js，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。 JSX produces react ‘elements’。
4. 例子

function formatName(user) {
    return user.firstName + ‘‘ + user.lastName;
}
const user = {
    firstName: ‘Harper‘,
    lastName: ‘Perez‘
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);
ReactDOM.render(
    element,
    documnet.getElemnetById(‘root‘)
)
 

1. JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組，則會展開這個數組的所有成員

var arr = [
    <h1>Hello world!</h1>
    <h2>ReactDOM is awesome</h2>
];
ReactDOM.render(
    <div>{arr}</div>
    document.getElementById(‘example)
)

上面代碼的arr變量是一個數組，結果 JSX 會把它的所有成員，添加到模板
6. 組件。react允許將代碼封裝成組件，然後像插入普通HTML標簽一樣，在網頁中插入這個組件。React.createClass方法就用於生成一個組件類

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

添加組件屬性，有一個地方需要註意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
7. this.props.children。表示組件的所有子節點。
this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點。

var NotesList = React.createClass({
render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

8 . PropTypes。組件的屬性可以接受任意值，字符串、對象、函數等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數是否符合要求。組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求。

var MyTitle = React.createClass({
  propTypes: function () {
    return {
      title : ‘Hello World‘
    };
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
  }
});
ReactDOM.render(
  <MyTitle />,
  document.body
);

9 . 獲取真是的DOM節點
組件並不是真是的DOM節點，而是存在於內存之中的一種數據結構，叫做虛擬DOM（virtual DOM）。只有當它插入文檔以後，才會變成真實的DOM。根據React設計，所有的DOM變動，都先在虛擬DOM上發生，然後再將實際發生變動的部分，反映在真實的DOM上，這種算法叫做DOM diff，它可以極大提高網頁的性能表現。
但是，有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性。
10 . this.state。組件免不了要與用戶互動，React 的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然後用戶互動，導致狀態變化，從而觸發重新渲染 UI。

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‘)
);

上面代碼是一個 LikeButton 組件，它的 getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以後，自動調用 this.render 方法，再次渲染組件。

由於 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。
11. 表單
用戶在表單填入的內容，屬於用戶跟組件的互動，所以不能用 this.props 讀取。

var Input = React.createClass({
  getInitialState: function() {
    return {value: ‘Hello!‘};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

12 . 組件的生命周期
三個狀態：Mounting：已插入真實DOM
Updating：正在被重新渲染
Unmounting: 已移出真實DOM
13. Ajax
組件的數據來源，通常是通過 Ajax 請求從服務器獲取，可以使用 componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法重新渲染 UI

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: ‘‘,
      lastGistUrl: ‘‘
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}‘s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
);

上面代碼使用 jQuery 完成 Ajax 請求，這是為了便於說明。React 本身沒有任何依賴，完全可以不用jQuery，而使用其他庫。

react學習筆記