JSXと関数コンポーネントの基礎

Reactを始めるうえで避けて通れないのが「JSX」と「関数コンポーネント」。
この2つを押さえれば、ほとんどのReactコードが読めるようになるし、自分でも簡単なUIが組めるようになる。

今回は、このカウンターアプリを題材に、基本をざっくりおさえていく。

JSX（JavaScript XML）は、JavaScriptの中にHTMLっぽいタグを書ける記法。
ReactではUIをこのJSXで組み立てていく。

tsxコピーする編集するreturn <button>クリックしてね</button>;

これ、見た目はHTMLだけど、中身はJavaScript。
JSXがあることで、UIの構造をコードの中に自然に書けるようになる。

ポイント：

Reactのコンポーネントは大きく「関数コンポーネント」と「クラスコンポーネント」があるけど、今はほぼ関数コンポーネント一択。

tsxコピーする編集するconst Hello = () => {
  return <p>こんにちは</p>;
};

これが最小の関数コンポーネント。
Helloという関数が、JSXを返してるだけ。Reactはこれをコンポーネントとして扱ってくれる。

コンポーネントに引数（＝props）を渡すことで、再利用しやすくなる。

tsxコピーする編集するconst Greeting = (props: { name: string }) => {
  return <p>こんにちは、{props.name}さん</p>;
};

使う側はこう書く：

tsxコピーする編集する<Greeting name="太郎" />

これで "こんにちは、太郎さん" と表示される。

今回のカウンターアプリは、Reactの超基本が詰まってる。

👇 使ってる技術スタック：