コンポーネントを作る
コンポーネントは JSX を返す関数
React の画面は コンポーネント の集まりでできています。コンポーネントとは「JSX を返す関数」のことです。特別な書き方はありません。名前を付けた関数が JSX を返せば、それがそのまま画面の部品になります。
function Profile() {
return <p>あおい / Web エンジニア</p>;
}これで Profile という部品ができました。使うときは、HTML のタグと同じ書き方で呼び出します。
export default function App() {
return (
<div>
<h1>あおいのプロフィール</h1>
<Profile />
</div>
);
}<Profile /> と書いた場所に、Profile が返した JSX がそのまま差し込まれます。App もコンポーネントなので、コンポーネントの中でコンポーネントを使っていることになります。この入れ子が React の画面の作り方です。
名前は必ず大文字ではじめる
コンポーネント名の先頭は大文字にします。React は先頭が小文字のタグを「HTML の要素」、大文字のタグを「自作のコンポーネント」として区別しているためです。
<Profile /> // 自作のコンポーネントとして呼ばれる
<profile /> // profile という HTML 要素を探しにいく小文字で書いてもエラーにはなりません。ただ何も表示されないだけです。エラーが出ないぶん気付きにくく、原因を探して長く悩むことになります。「画面に出ない」と思ったら、まずタグの先頭が大文字かを見てください。
切り出す順番
はじめから部品に分けようとすると手が止まります。まず App の中に全部書いて動く画面を作り、それからまとまりごとに関数へ移すほうが楽です。移すときにやることは3つあります。
- 新しい関数を作り、移したい JSX を return で返す
- もとの場所を
<Profile />に置きかえる - 画面が前と同じに見えるか確かめる
見た目が変わらないのが正解です。部品に分けても画面は1ミリも変わりません。変わるのは、あとから値を差し替えたり同じ部品を並べたりできるようになる、という将来の話だけです。
つまずきどころ
コンポーネントが返せる JSX は1つのかたまりだけです。名前と肩書きのように要素を2つ返したいときは、div や section で包みます。また、コンポーネントの関数は App の外側に置きます。関数の中に関数を書いても動きはしますが、React では画面を書きかえるたびに部品が作り直され、あとで state を持たせたときに値が消えます。
演習
App に直接書いていた自己紹介を、Profile というコンポーネントに切り出します。