コンポーネントとJSX/TSX

画面は「部品」を組み合わせて作る

React(リアクト)は、Webの画面を作るための仕組みです。いちばん大事な考え方は「画面を小さな部品に分ける」こと。ボタン、見出し、カード、入力欄……それぞれを独立した部品として作り、レゴのように組み合わせて1つの画面にします。この部品のことをコンポーネント(コンポーネント)と呼びます。

コンポーネントの正体は「見た目を返す関数」です。ふつうの関数が数値や文字列を返すように、コンポーネントは「画面に表示するもの」を返します。返すものを書くための特別な書き方が JSX(ジェイエスエックス)で、TypeScriptと組み合わせたファイルは拡張子 .tsx を使い、TSXと呼びます。

// 関数名は大文字始まりにする(Reactの決まり)
// JSXの中の <h1> はHTMLに似ているが、JavaScriptの式
function Hello() {
  return <h1>こんにちは</h1>;
}

export default Hello;

function Greeting() {
  const name = "田中";
  const hour = 9;
  return (
    <div>
      <p>{name}さん、こんにちは</p>
      <p>今は{hour}時です</p>
    </div>
  );
}

• コンポーネント名は大文字で始める(hello ではなく Hello)。小文字だとReactがただのHTMLタグと勘違いする
• return では1つの親要素にまとめる。複数並べたいときは <div> や <> </> で囲む
• class ではなく className と書く(class はJavaScriptの予約語のため)

function Bad() {
  return (
    <h1>タイトル</h1>
    <p>本文</p>
  );
}

function Good() {
  return (
    <>
      <h1>タイトル</h1>
      <p>本文</p>
    </>
  );
}

まとめると、コンポーネントは「JSXを返す大文字始まりの関数」です。まずはこの1文だけ覚えれば十分です。次のレッスンでは、部品に外から値を渡す方法(props)を学びます。