Reactコンポーネントとprops

コンポーネントにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

code: function_component.js

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}

}

コンポーネントの戻り値（クラスコンポーネントならインスタンス）が要素か

コンポーネントは自身の出力の中で他のコンポーネントを参照できます。

既存のアプリに React を統合する場合は、Button のような小さなコンポーネントからボトムアップで始め、徐々にビューの階層構造の頂上に向かって進んでいってもよいでしょう。

コンポーネントの抽出を積極的にやろうね

全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばなりません。

state により React コンポーネントは上述のルールを壊すことなく、時間と共にユーザのアクション、ネットワークのレスポンスや他の様々な事に反応して、出力を変更することができます。