【React】コンポーネント

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

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;

コンポーネントの粒度

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

最後に

特にありません。

コメントを残す

メールアドレスが公開されることはありません。

© DeNnie.Lab All Rights Reserved.