React基礎② #React

React コンポーネント

コンポーネントはJavaScriptでいう関数みたいなもの。
propsと呼ばれる引数を受け取り、指定した動作をさせ
画面上に表示するためのReact要素を返す。

コンポーネントの定義

コンポーネントの定義としては関数コンポーネントと
クラスコンポーネントがある。

関数コンポーネント
JavaScriptの関数を書くことにより定義する。

//コード１
function Hello(props) {
  return <h1>Hello,{props.name}</h1>;
}

この関数（コード１）はpropsというデータの入ったオブジェクトを引数として受け取り
React要素を返している。

クラスコンポーネント


//コード2
class Hello extends React.Component{
    render(){
        return <h1>Hello,{this.props.name}</h1>;
    }
}

この上記の2つのコードの意味は等価である。

コンポーネントの基本利用方法

function Hello(props) {
  return <h1>Hello,{props.name}</h1>;
}
const element =<Hello name="Taro"/>;
ReactDOM.render(
    element,
    document.getElementById('root')
);

<Hello name="Taro" />を引数としてReactDOM.render()を呼び出す。
ReactはHelloコンポーネントを呼び出しpropsの中に｛name:'Taro'｝という属性を含んでおり、このpropsを渡す。
Helloコンポーネントは<h1>Hello, Taro</h1>要素を返す。
DOMでは作業をより軽量化するために、DOMの差分を調べ差分のみをrenderする。

注意１：コンポーネント名は常に大文字で始める。
上記のプログラムでは<Hello />はコンポーネントを表しており、スコープ内にHelloが存在する必要がある。
　ある要素の型が小文字から始まっているような場合、<div>や<session>などのコンポーネントを参照する。その後'div'や'session'という文字列に変換されReact.createElementに渡される。
　<Hello/>のような大文字から始まる型はReact.createElement（Hello）にコンパイルされ、スコープ内で定義されたもしくは、importされたコンポーネントを参照する。