Reactコンポーネントのファンクショナルコンポーネントとは

Reactコンポーネントのファンクショナルコンポーネントとは

ファンクショナルコンポーネントとは、その名のとおり関数で定義します。

const Test = (attr) => {
  return <h1>hello, world</h1>;
};

引数にattrをとり、JSX文法をreturnしています。

ファンクショナルコンポーネントは再利用できる

Reactコンポーネントは再利用することが出来ます。

先ほどのファンクショナルコンポーネントも定義なので、再利用することが出来ます。

再利用する方法は以下のとおりです。閉じタグが必要となります。

<Test />

わかりやすいように以下のように記述してみます。

<div id="koko"></div>
  <script type="text/babel">
    const Test = (attr) => {
      return <h1>hello, world</h1>;
    };
    ReactDOM.render(
      <Test />,
      document.getElementById("koko")
    )
  </script>

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^