ファイル分割
1ファイルに全部書くと読めなくなる
ここまで Card も Profile も App.jsx の中に並べて書いてきました。部品が3つくらいまでは平気ですが、10 個になると目当ての部品を探すだけで時間がかかります。React では 1部品1ファイル に分けるのがふつうです。
分けたファイルは components というフォルダにまとめます。App.jsx から見た置き場所はこうなります。
App.jsx
components/Card.jsx
components/Profile.jsxexport default で外に出す
ファイルの中で定義しただけでは、外からは見えません。外に出すほうに export default を付けます。
// components/Profile.jsx
export default function Profile({ name, title }) {
return <p>{name} / {title}</p>;
}受け取る側は import します。名前は自由に付けられますが、部品と同じ名前にするのが決まりごとです。
// App.jsx
import Profile from "./components/Profile.jsx";./ は「このファイルと同じ場所から」という意味です。頭の ./ を忘れて import Profile from "components/Profile.jsx" と書くと、React は npm で入れたライブラリを探しにいって見つけられません。自分で書いたファイルは必ず ./ か ../ ではじめます。
default と名前付きの違い
export default は「このファイルの主役は1つ」という出し方です。1ファイル1部品ならこれで足ります。
// 出す側
export default function Card() {}
export function CardTitle() {}
// 受ける側
import Card, { CardTitle } from "./components/Card.jsx";default で出したものは波かっこなし、名前付きで出したものは波かっこで囲んで受け取ります。この波かっこの有無を取り違えると Card is not defined や、画面が真っ白のまま何も出ない状態になります。エラーメッセージに部品の名前が出てきたら、まず import の波かっこを疑ってください。
どこまで分けるか
はじめから細かく分ける必要はありません。App.jsx が読みづらくなってきたら、そのとき大きい部品から順に出していきます。ファイルを分けても画面は何も変わりません。変わるのは、あとから直したい部品をすぐ見つけられるかどうかだけです。
演習
components フォルダに置いてある Card と Profile を、App.jsx から import して使います。