【React】コンポーネントとは-意味と定義方法

2022年11月18日React

Reactのコンポーネントの意味や定義方法について紹介します。

Reactのコンポーネントとは

Reactのコンポーネントとは、Reactで定義した画面の各構成要素のことです。
・再利用性が高まる
・疎結合になる(バグが減る)
・可読性が上がる
といったメリットがあります。

Reactのコンポーネントの定義方法

function Hi() {
 return <h3>Hi</h3>;
}

上のようにしてコンポーネントはJavaScriptの関数として定義します。
コンポーネントはJSX(htmlみたいなもの）を返します。

<Hi/>

そして、上のようにしてコンポーネントを実行します。

    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      function Hi() {
        return <h3>Hi</h3>;
      }
      root.render(<Hi/>);
    </script>

上が実際の例になります。

コンポーネント定義のときの注意点

コンポーネント名は必ず大文字から始めます。
小文字の場合、Babelが正しく反応しなくなり、htmlのタグとご認識されてしまい、機能しません。

コンポーネント定義複数行のとき

    <div id="app"></div>
    <script type="text/babel">
      const appEl = document.querySelector("#app");
      const root = ReactDOM.createRoot(appEl);
      const Hi = () => {
        return (
          <div>
            <h3>Hi</h3>;
          </div>
        );
      };
      root.render(<Hi />);
    </script>

上のように、()で囲ってまとまりを示します。
()がない状態でreturn　の次を改行してしまうと、undefinedが返されます。

アロー関数の場合は、{}とreturnは省略できるので、
以下のように記述することも可能です。

const Hi2 = () => (
        <div>
          <h3>Hi</h3>;
        </div>
      );