Reactのコンポーネント(部分テンプレート)の使い方その1

こちらでは、知っていると便利なコンポーネントの使い方について書いています。

ヘッダーなど同じ内容が続く場合、コピペが続いて作業量、コード量が増えて好ましくありませんし、場合によってはミスが起こります。
そこで少量のコードで同じ内容を引っ張ってくるのがコンポーネントという方法です

プロジェクトの作成

まず作業の土台となるプロジェクトを作成します。

npx create-react-app プロジェクト名 
cd my-app

必要機能のインストール

下記の機能をインストールします

npm install react-router-dom

これで諸準備が整いました。

コンポーネントの使い方

基本的にファイル名とコンポーネント名は同一で使用されますが
今回は違いをわかりやすくするため同一の必要がある部分をMyHomepageとし
ファイル名をHomePageとしています。

まずインポートしてくる記述を書きます。

App.js

import MyHomePage from './HomePage';
//⓵HomePage.jsをインポート

function App() {
    return (
        <div>
            <MyHomePage />
            {/* ⓶MyHomePage関数コンポーネントを表示 */}
        </div>
    );
}

HomePage.jsをインポートできるよう諸準備を行います。

HomePage.js

import React from 'react';

function MyHomePage() {
// ⓷MyHomePage(React)関数コンポーネントを定義
    return (
        <div>
            <h1>Welcome to My Home Page!</h1>
        </div>
    );
}

export default MyHomePage;
//⓸MyHomePageコンポーネントを他のファイルで利用できるようにエクスポート

これで完成です。

複数のfunctionを呼び出す場合

コンポーネントでfunctionが複数の場合はどうするのって疑問があると思うので
説明するとexport defaultを設定せずに行います。

utils.js

export function calculateSum(a, b) {
    return a + b;
}

export function Greeting() {
    return <h1>Hello!</h1>;
}

あとはfromより対象ファイルを設定して、対象のfunctionを読み込めば完了です。

App.js

import { calculateSum, Greeting } from './utils';

ユーティリティ関数（処理専用の関数）

途中で計算式(calculateSum)があったので豆知識として
ユーティリティ関数は何らかの計算やデータ処理を行うための関数です。
再利用可能なロジックを切り分けておくと、コードの可読性が向上します。

例: calculateSum()やformatDate()など。