Zenn
🤔

【React】Componentsについて

に公開
JavaScript
React
tsx
component
tech

Reactのコンポーネントについて自分の考えをまとめるための記事になります。
最近、Reactをフロントに使用してバックにJavaを使って開発する機会が多いです。

Reactはコンポーネントを作ってそれを組み合わせて使うことが多いフレームワークだと感じていますのでこの概念についてはしっておいて損はないかと思います

なぜComponentをする必要があるのか

アプリの管理のしやすさやコードの可読性を向上させるために使用します。
部品（Component）を分割して記載することでわざわざどこにその部品となった機能のプログラムがあるかを探し出す必要がなくなります。
また、将来的に機能の追加や一部の修正などがある場合そのcomponentファイルのみを変更・追加すれば済むようになります。

Componentの定義

よく再利用されている箇所があればそれはコンポーネントになります。

一般的なUI要素からコンポーネントを作成することで、コードを1箇所で管理できるようになります。そのコンポーネントを変更することで使用されている箇所全てに適用されかなり効率的に開発ができるようになります。

使用手順

最終的に作成したコンポーネントを以下のようにして呼び出せるようにします。

function App() {
    return (
        <>
            <Hello />
        </>
    )
}


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
現状はApp.tsxに直接記載をしている状態になります。

import "./App.css"

function App() {
    return (
        <>
           <section className='flex column_section'>
                <div>works</div>
                <div>works</div>
                <div>works</div>
            </section>
        </>
    )
}

export default App

Componentsディレクトリを作成

コンポーネントファイルを配置するディレクトリとそのファイルを作成します。
作成箇所はsrcディレクトリ配下になります

# componentsディレクトリ作成
mkdir src/components 
# componentファイルの作成
touch src/components/Hello.tsx

Hello.tsxには以下のファンクションを定義して準備完了です
export default Helloと記載することで他のファイルでの呼び出しができるようになります。
以下の状態がシンプルな形となり基礎の状態です。

const Hello = () => {
	
}
export default Hello;

ではHello関数にコンポーネントとなる要素を記載していきましょう。
今回はApp.tsxが描画しているカラムをコンポーネントとしたいのでApp.tsxの中身をカットしてきてHello関数に貼り付けます。

const Hello = () => {
    return (
        <>
           <section className='flex column_section'>
                <div>works</div>
                <div>works</div>
                <div>works</div>
            </section>
        </>
    )
	}
}

ペースとした状態になります。
return ()の中にhtmlを記載します。

注意点としてはreturnは1つの要素しか返すことができないので、以下のように2つの要素を記載するとエラーが発生します。

const Hello = () => {
    return (
           <section className='flex column_section'>
                <div>works</div>
                <div>works</div>
                <div>works</div>
            </section>
            <div>
                <h2>これは2つ目の要素になります</h2>
            </div>
    )
	}
}

必ず全体を<></>や何かしらのタグで加工必要があります。
以上で、コンポーネントの作成は完了です
残りは呼び出すだけです！！

呼び出し

呼び出しかたはとてもシンプルです。
importすることで作ったコンポーネントを使用することができるようになります。

// 呼び出し元のパスを記載します。
import Hello from "./components/Hello/Hello"

import "./App.css"

function App() {
    return (
        <>
            <Hello />
        </>
    )
}

export default App

import Hello from ‘./components/Hello/Hello’の説明をすると
importで読み込みをしています。これはコンポーネント側でexportをしているので読み込めるようになっています。

import HelloのHelloは読み込んだコンポーネントの名前を指定しています。基本的にexport defaultでつけたときの名前と同じものにするのが主流のようです。

from './component/Hello/Hello'はコンポーネントファイルのパスを指定しています。
この場合はcomponentディレクトリのHelloディレクトリにあるHello.tsxを読み込むとしています。

最後のHelloはHello.tsxとしても同じ効果がありますが、Reactの機能で領略することができます。

コンポーネントを呼び出すときはタグとして呼びます
今回は<Hello />となります。

また、ファイル名や変数名は大文字から始まるように記載するようにしてください。
これでコンポーネント分割の説明を終わります！

最後までご覧いただきありがとうございました！！

Discussion