components 重點

1、components 是小型、可重用、負責單一任務的的程式碼塊，通常包含渲染html的功能

2、components 由component class 產生，呼叫 React.createClass() 方法建立一個新的component class，class名稱開頭必須是大寫，這是通用規則，component class不是component，它比較像是一個專門生產component的工廠

const React = require('react');

const MyComponentClass = React.createClass();

createClass方法接受一個參數，此參數必須是一個js物件，這個物件像是一份說明書，告訴component class如何去生產component

這個參數物件通常會有一個render function，這個render function必須要有return陳述式，並通常會是return一個jsx陳述式

建立一個component class
const MyComponentClass = React.createClass({
  render: function () {
    return <h1>Hello world</h1>;
  }
});

使用component class產生components 的方式透過jsx語法，jsx元素可以是html tag或是component instance，js利用名稱開頭大小寫的差異分辨兩者，這就是為何component class名稱必須開頭必須是大寫的原因

使用class產生一個component的方式如下
<MyComponentClass />

每個component instance都會繼承其parent class的"說明書"中的所有屬性和方法，某component class說明書中有render方法傳回一個jsx元素，則所有該class的component instance都有render方法傳回定義好的jsx元素

要呼叫instance的render方法只要把instance丟給DOM 的render方法做為首個參數即可，DOM的render方法會告訴component instance去呼叫它的render方法，然後DOM的render方法會接收其傳回的jsx元素，並將之渲染在畫面上


將component做為DOM render方法的第一個參數傳入

ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')
);

畫面上將會出現h1大小的Hello world


3、stateless functional component:

一個表現型元件通常只有一個render function，沒有其他了，這種類型的元件可以用一種特殊寫法，像寫一般js的function一樣的方式，如下:

// 元件一般定義方式
var MyComponentClass = React.createClass({
  render: function(){
    return <h1>Hello world</h1>;
  }
});

// 同樣的元件，使用無狀態功能型元件寫法:
function MyComponentClass () {
  return <h1>Hello world</h1>;
}

// 不同寫法，一樣的運作結果:
ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')

);

無狀態功能型元件寫法(以下稱sfc寫法)接收props的方式是定義一個參數，習慣上取名為props，這個參數對應到props物件，傳入的prop自動對應到props參數物件的屬性與值

// 一般方式顯示props屬性值:
var MyComponentClass = React.createClass({
  render: function () {
    return <h1>{this.props.title}</h1>;
  }
});

// 無狀態功能型元件顯示props屬性值的方式:
function MyComponentClass (props) {
  return <h1>{props.title}</h1>;
}

// 一般方式使用變數顯示props屬性值的方式:
var MyComponentClass = React.createClass({
  render: function () {
  var title = this.props.title;
    return <h1>{title}</h1>;
  }
});

// 無狀態功能型元件使用變數顯示props屬性值的方式:
function MyComponentClass (props) {
var title = props.title;
  return <h1>{title}</h1>;

}

無狀態的功能型元件寫法除了簡潔，也稍稍的禪示了元件就像function，輸入可選的state與props參數，輸入html或其他元件

為sfc寫法加入propTypes的方法:

function Example (props) {
  return <h1>{props.message}</h1>;
}

Example.propTypes = {
  message: React.PropTypes.string.isRequired
};