本記事では、Reactの基本を解説します。

---

1. Reactとは？

Reactは、ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。

特徴：

• コンポーネントベース設計
• 仮想DOMによる高速描画
• 宣言的UI

特に、SPA（シングルページアプリケーション）開発で広く使われています。

---

2. コンポーネントとは？

Reactでは、画面を「部品（コンポーネント）」として分割して作ります。

例：

• ヘッダー
• サイドバー
• ボタン
• フォーム

基本的な関数コンポーネント

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

Reactでは、このように関数でUIを定義します。

---

3. JSXとは？

JSXは、JavaScriptの中にHTMLのような記法を書ける構文です。

const element = <h1>Hello</h1>;

内部的にはJavaScriptに変換されます。

JSXのルール

• 必ず1つの親要素で囲む
• classは className を使う
• JavaScript式は {} で囲む

const name = "Taro";

return <h1>Hello, {name}</h1>;

---

4. props（プロパティ）

propsは、コンポーネントに値を渡す仕組みです。

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

<Greeting name="Taro" />

分割代入

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

propsは読み取り専用です。

---

5. state（状態）

stateは、コンポーネント内部で管理するデータです。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

ポイント

• stateが変わると再描画される
• 直接変更せず、set関数を使う

---

6. イベント処理

Reactでは、イベントをキャメルケースで記述します。

<button onClick={handleClick}>Click</button>

function handleClick() {
  alert("クリックされました");
}

---

7. 条件付きレンダリング

{isLoggedIn ? <p>ログイン中</p> : <p>未ログイン</p>}

または：

{isLoggedIn && <p>ログイン中</p>}

---

8. リスト表示

const items = ["Apple", "Banana", "Orange"];

<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

keyの重要性

• 一意の値を指定する
• 再レンダリング最適化に必要

---

9. React開発の基本的な流れ

1. コンポーネントを作る
2. propsでデータを渡す
3. stateで状態管理
4. イベントで操作
5. 再描画

---

まとめ

• ReactはUI構築のためのライブラリ
• コンポーネント単位で設計する
• propsは外部データ、stateは内部状態
• state変更で再描画
• JSXのルールを理解する

---