前回までの状態
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で別ファイルのコンポーネントを読み込み、描写している。