Reactのコンポーネントの使い方についてです。Reactでは「src」ディレクトリの中に「components」というディレクトリを作り、その中でコンポーネントファイルを管理します。

いちばん簡単な例としては「App.jsx」でコンポーネントファイルを読み込んで使うというのがあります。まず、デフォルトの「App.js」のファイル名を「App.jsx」に変更し、デフォルトで記載されているソースを削除し、下記を記載します。

propsを使わない簡単な例

1行目でこれから作成するコンポーネントファイル「Article.jsx」を読み込んでいます。Appという関数の中でArticleというコンポーネントを実行する簡単なプログラムです。

次に子コンポーネントを作成します。

Articleという関数を作り、「<h3>Hello World!</h3>」というHTMLを返します。

これで子コンポーネントのArticleが親の<Article />の部分で実行され表示されます。

今回のファイル構成は以下のようになります。

propsを使った親から子へデータを渡す方法

親から子コンポーネントに値を渡します。今回はtitle, name, age の3つの値を渡してみたいと思います。

<Article />の中に以下の内容を記載します。

表示したい項目名　= {‘表示させたい文字列’}　の形式で書きます。

次に子コンポーネントを作成します。

アロー関数の中にpropsという変数を記載します。受け取りたい変数を{props.変数名}の形式で記載します。これで親から子にデータが渡ります。

※returnの中にHTML要素を複数並べるときは、親が必要です。今回は<div>で囲んだ中に<h3><p>タグを並列で並べています。ReactではFragmentというものが用意されており、<div>の代わりに<Fragment>というものを使うことができます。<Fragment>はWebで描画されるときには何も表示されないという特徴があります。

propsで渡すことができるデータ

propsでは以下のデータを渡すことができます。ほとんどなんでも渡せます！

• 文字列
• 数字
• 変数
• 真偽値（True or False）
• 配列
• オブジェクト

コンポーネントを複数箇所で利用

今度はコンポーネントを複数回呼び出ししてみます。App.jsxの<Article />部分を２つ記載します。

これが実行されると下記の様に表示されます。