このページの詳細なサンプルは「GitHubの React_sample1 funcブランチ」にあります。
コンポーネント
Reactの思想としてUIの基本単位をコンポーネントと考えています。コンポーネントは部品と考えることができます。
Reactでコンポーネントを表現するには、関数を使ったコンポーネントとクラスを使ったコンポーネントの2種類の方法があります。
関数型コンポーネント
今回は関数型コンポーネントの説明です。
ReactはJSXで作られたDOMを返す関数をコンポーネントと認識する仕組みです。
そのため、コンポーネント関数は「return文」の中にJSXを使ってアプリケーションのDOMを記述します。
関数でコンポーネントを作成する時に注意すべき点として、関数名を大文字から始めることです。
return文の中でDOMを記述する際に、JSXを使うことができます。
注意点として、複数のタグを兄弟の関係で置くことはできません。その場合はdivなどを使って親要素を作成して、その子要素として兄弟要素を配置していきます。
また、今回の例はアロー関数の記述ですが、通常のfunction関数でも使えます。
propsを使って外部から値を渡す方法
コンポーネントが関数で作られている以上、引数の仕組みをうまく使わない手はありません。
引数として、特別な値「props」を使うことでrender関数で関数型コンポーネントを呼び出す際に特定の値を渡すことができます。
引数にはpropsオブジェクトを指定します。関数内での使い方はprops.nameのようにして使います。
また、return のあとの()は複数行のタグを記述できるようにしています。
コンポーネントはこのpropsを受け取ってその値に応じてDOMを組み立てます。
注意点として、propsは呼び出し側で設定した値を受け取り側で受け取るもので、受け取ったコンポーネントの中で値を変更してはいけません。
関数型コンポーネント定義の例
const ReturnReactElement = (props) => {
return (<div>
<h2>{props.name}</h2>
<p>{props.age}</p>
</div>)
}
関数型コンポーネントの読み込み
コンポーネントを関数で定義しただけでは何も起こりません。このコンポーネントをブラウザに反映するにはHTMLページの特定idで指定されたタグにマウントする必要があります。それは前回学習した render関数を使用します。
関数型コンポーネントをrendar関数で読み込む場合は、タグのように関数名を山括弧で囲んで記述をします。
render関数から固有の値をコンポーネントに渡す方法
作成したコンポーネントをrender関数に値を渡すには、HTMLタグの属性のような書き方をします。
属性名がプロパティ名となり値をそのまま属性の記法で記述します。
コンポーネントをrender関数で使う例
ReactDOM.render(<ReturnReactElement name="Tahara" age=38/>, document.getElementById("root"));
