コンポーネント | React入門

準備運動、お疲れさまでした。ここからが本編、Reactの世界です。

最初に、Reactの一番大事な考え方をひとつだけ。Reactでは、画面を「部品」の組み合わせで作ります。この部品のことをコンポーネントと呼びます。HTML/CSS教材のチャプター14で「ボタンやカードを部品として考える」練習をしましたね。あの考え方に、正式な道具が与えられるのがReactです。

コンポーネントの正体は「関数」

いきなり核心を見せます。これがReactのコンポーネントです。

const Greeting = () => {
  return <h1>こんにちは、Reactの世界</h1>;
};

じっと見てください。……これ、知っている形ではないですか? そう、チャプター1で練習したアロー関数です。引数なしで、何かをreturnしている。ただひとつ、見慣れないことが起きています——returnの後ろに、HTMLのようなタグが直接書かれている。

これがReactの魔法の正体です。コンポーネントとは「見た目(HTMLのようなもの)を返す関数」。JavaScriptの関数の中にタグが書ける、この拡張された書き方をJSXと呼びます(だからファイルの拡張子が .tsx になります——TypeScript + JSXの意味です)。

ひとつだけ、絶対のルールがあります。コンポーネントの名前は大文字で始める。