つくる - 最初のコンポーネント
章のしめくくり
ここまでで、宣言的 UI の考えかた、JSX の書きかた、決まりごと、波かっこでの値の埋め込みを見てきました。新しいことは出しません。すでに知っていることだけで、自分の部品を1つ作ります。
作るのは、プロフィールサイトの一番上に置く見出し部分です。名前を付けて Header と呼びます。
コンポーネントは関数
コンポーネントは、JSX を返す関数です。今まで書いてきた App とまったく同じ形をしています。違うのは名前だけです。
export default function Header() {
return (
<header className="site-header">
<h1>あおいのプロフィール</h1>
</header>
);
}決まりが1つだけあります。コンポーネントの名前は大文字ではじめることです。React は <header> のように小文字ではじまるタグを HTML のタグとして扱い、<Header> のように大文字ではじまるタグを自分で作った部品として扱います。小文字で <header /> と書いてしまうと、自分の部品ではなく HTML の header タグが出るだけになります。
別のファイルから呼び出す
部品ごとにファイルを分けます。Header.jsx に書いた部品を App.jsx から使うには、import で持ってきます。
import Header from "./Header.jsx";
export default function App() {
return (
<div>
<Header />
<p>作品はこれから追加します</p>
</div>
);
}./Header.jsx の先頭のドットとスラッシュは「同じ場所にあるファイル」という意味です。export default で送り出したものを受け取っているので、受け取る側の名前は自由に付けられます。混乱するので、ふつうはファイル名と同じにします。
呼び出しかたは HTML のタグと同じで、<Header /> と書きます。中身を持たないので、そのまま閉じます。
部品にすると何が変わるか
App から見ると、見出しの中身がどうなっているかは分からなくなります。<Header /> と書いてあるだけで、h1 なのか2行あるのかは Header.jsx を見ないと分かりません。この「中を知らなくても置ける」状態が部品化のねらいです。あとから見出しにアイコンを足したくなっても、直すのは Header.jsx だけで済みます。
つまずきどころ
画面に何も出ないときは、名前の大文字と export default の書き忘れを疑ってください。この2つがほとんどです。import のパスは、拡張子まで書けば確実です。
演習
Header コンポーネントを自分で書き、App から呼び出して画面に出します。