【React】コンポーネントの使い方を知る

目次

コンポーネントとは？

Reactで画面に表示される部品のことです。

表示に必要なデータや処理などを1つのオブジェクトにまとめたものです。ReactはUIを「コンポーネント」という部品単位で構築します。

つまり、独立した再利用できる部品に分割して、UIの一部分となるビュー（View）を切り出したものをコンポーネントと言います。

コンポーネントのメリット

コンポーネントを使うことで、複雑なUIでも個別で管理することができるため、管理がやしやすくなります。

また、別の箇所でも同じUIが必要になった際に、コンポーネントとして切り出しておけば再利用も可能です。

コンポーネントの命名規則

コンポーネント名は必ず先頭を大文字から初めます。

正しい例
  • App
  • SomeComponent
エラーとなる例
  • app
  • someComponent

先頭が大文字で始まり、単語の区切りを大文字とする変数名の付け方を「パスカルケース」と呼びます。

Reactのコンポーネントはこのパスカルケースで命名しましょう！

コンポーネント化の流れ

コンポーネント化する場合、ふたつのファイルが登場します。コンポーネント化するためのファイルと、コンポーネント化したファイルを呼び出すファイル、です。

簡単ではありますが、下のコードを関数部分をコンポーネント化してみたいと思います。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => { // ここの関数部分をコンポーネント化
   return (
     <>
      <h1>こんにちは！</h1>
      <p>お元気ですか？</p>
     </>
　　)
};

ReactDOM.render(<App />, document.getElementById('root'));

コンポーネント化するためのファイル

まず、コンポーネント化する場合、拡張子は.jsxにします。.jsでもエラーは起きませんがreactのコンポーネントだよ！というのわかりやすくするためにも拡張子は.jsxの方がいいでしょう。

コンポーネント化するためには関数の頭にexportをつけます。

そうすることで他のファイルでもApp関数が使えるようになります。

import React from 'react';

export const App = () => { // 関数の頭にexportをつける
   return (
     <>
      <h1>こんにちは！</h1>
      <p>お元気ですか？</p>
     </>
　　)
};

コンポーネント化したものを呼び出すファイル

exportできたので、呼び出したいファイルでimportします。

✅{ APP }部分は関数名を指定します。

✅”./App”の部分はファイルの場所とファイルを指定します。

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from "./App"; //この部分を追加

ReactDOM.render(<App />, document.getElementById('root'));

このようにコンポーネント化するには、

①レンダリングしたい部分を作成して、exporする

②コンポーネント使いたいファイルからimportする

という流れになります！

タイトルとURLをコピーしました