前回までの状態

Hello worldした。

復習

ReactDOM.render()は、第一引数の内容(以下、コンポーネントと呼ぶ)を第二引数の描画対象(以下、DOM要素と呼ぶ)に描画している。

問題点

今後indexにプログラムを追加していくとファイルが大きくなり、後々困ることになる。そのため、ファイル分割する方法の知識が必要。

今回の目的

ReactDOM.render()から別ファイルのコンポーネントを呼び出す。

手順

前回使用したプロジェクトフォルダにapp.tsxというファイルを作成する。

touch app.tsx

内容は以下のように記述する。

const PrintHelloWorld =()=> {
    return (
        <h1>Hello, world!</h1>
    );
}
export {PrintHelloWorld};

また、前回使用したindex.htmlを以下のように変更する。

import React from 'react';
import ReactDOM from 'react-dom';
//追加開始
import {PrintHelloWorld} from './app';
//追加終了

ReactDOM.render(  
  //変更開始
  <React.StrictMode>
    <PrintHelloWorld />
  </React.StrictMode>,
  //変更終了
  document.getElementById('root')
);

変更したらnpm startでプロジェクト実行。

前回と同様にHello, world!と表示されたら成功。

解説

app.tsx

const PrintHelloWorld =()=> {
    return (
        <h1>Hello, world!</h1>
    );
}

関数の形をしたコンポーネント。関数コンポーネントと呼ばれる。アロー関数という書き方で書いている。functionを使用した記法も存在するが、検索してみたところアロー関数を使用したほうがよさそうだったため、アロー関数にしている。
Reactコンポーネントにはパスカルケース(先頭大文字)を使用すると決まっているため、関数名の頭文字は大文字。(小文字にするとエラーになる)

export {PrintHelloWorld};

関数コンポーネントを他のファイルで使用するために宣言している。

index.tsx

import {PrintHelloWorld} from './app';

./app(.tsx)からPrintHelloWorldコンポーネントを読み込む。
インポートするファイルのファイル拡張子は不要。

<React.StrictMode>
</React.StrictMode>,

潜在的な問題点を洗い出す機能を有効にする。必須ではないが、npx create-react-appした際にデフォルトで記述されていたため追加している。

<PrintHelloWorld />

PrintHelloWorldコンポーネントを呼び出している。

要約

exportで別のファイルから使用できるように宣言し、importで別ファイルのコンポーネントを読み込み、描写している。

次

関数コンポーネントとクラスコンポーネント

参考文献