コンポーネントとは役割を持った部品のようなものです。

Reactで作成されたアプリケーションはコンポーネントの集合体です。
今回はコンポーネントを作成し、使ってみましょう。

コンポーネントの例

前回は App.js で簡単な文字をブラウザに表示させました。

前回

今回は App.js 以外に Sample.js と言うファイルを作成します。
Sample.js の内容は以下の通りです。

function Sample() {
    return (
      <p>{"SAMPLE"}</p>
    );
  }
  
export default Sample;

この関数はブラウザに “SAMPLE” と言う文字を表示させます。
export を使用して、Sample関数を外部でも使用出来るようにしています。

コンポーネントの使用

作成した Sample関数を App.js で使用します。
App.js の内容は以下の通りです。

import Sample from './Sample';

function App() {
  return (
    <>
      <div>{"TEST"}</div>
      <Sample />
    </>
  );
}

export default App;

インポートした Sample関数を使用するには Sampleタグ(要素) として使用します。HTMLのタグと書き方が違うことに注意して下さい。
ブラウザには “TEST” と “SAMPLE” が表示されるはずです。

このように App関数や Sample関数によってブラウザに文字が表示されました。
App関数や Sample関数はコンポーネントになります。これらが結合して一つのアプリケーションとなっています。
コンポーネントはReactアプリケーションを構成する部品や要素と思って下さい。

今回は Sample.js ファイルを作成し、Sample コンポーネントを作成しました。
このように、コンポーネントの実態は React要素を返却する関数 になります。
以下のような形式となります。

function コンポーネント名() {
    return (
      React要素
    );
  }
  
export default コンポーネント名;

関数名がコンポーネント名となります。コンポーネント名は先頭大文字となります。

単一の要素を返却します。
以下は2つの要素を返却してしまっているのでNGです。

import Sample from './Sample';

function App() {
  return (
      <div>{"TEST"}</div>
      <Sample />
  );
}

export default App;

フラグメントは空の要素を使用して複数の要素を返す時に使用します。
今回の例では div要素と p要素を返却した買ったのですが、2つ要素を返却する事になるので、空の要素で囲い返却しました。

import Sample from './Sample';

function App() {
  return (
    <>
      <div>{"TEST"}</div>
      <Sample />
    </>
  );
}

export default App;

コンポーネントの実態は React要素を返却する関数 になるので、読み込んだコンポーネントは要素として使用します。

import コンポーネント名 from './Sample';

function App() {
  return (
      <コンポーネント名 />
  );
}

export default App;

コンポーネントはどのような粒度で作成すれば良いか？人によっても異なる部分なので、まずは色々作成しフィードバックを貰ったり、自分で見直してコンポーネントを再作成するとかを繰り返していきましょう。

特にありません。