なぜReactを使うのか

<!-- index.html -->
<ul id="todo-list"></ul>
<input id="input" type="text" />
<button onclick="addTodo()">追加</button>
 
<script>
  function addTodo() {
    const input = document.getElementById('input')
    const li = document.createElement('li')
    li.textContent = input.value
    document.getElementById('todo-list').appendChild(li)
    input.value = ''
  }
</script>

素のJS: データが変わる → 自分でDOMを探して書き換える（手動）
React:  データが変わる → UIが自動で再描画される（自動）

ページ全体
├── ヘッダーコンポーネント
├── Todoリストコンポーネント
│   ├── Todoアイテムコンポーネント（×何個も）
│   └── ...
└── フッターコンポーネント

cd ~/Desktop
npx create-next-app@latest my-app

Ok to proceed? (y) ... y

√ Would you like to use the recommended Next.js defaults? » No, customize settings
√ Would you like to use TypeScript? ... No (←この章ではJavaScriptで学ぶため)
√ Which linter would you like to use? » Biome (←Linter (コードの品質をチェックするツール) は Biome を使用)
√ Would you like to use React Compiler? ... Yes (←Webサイトのパフォーマンスを自動調整してくれるツール)
√ Would you like to use Tailwind CSS? ... No (←あとで追加する)
√ Would you like your code inside a `src/` directory? ... No (←この章では `src/` なしの構成で学ぶ)
√ Would you like to use App Router? (recommended) ... Yes (←必ずYesを選ぶ！)
√ Would you like to customize the import alias (`@/*` by default)? ... No (←デフォルトのままでOK)
√ Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? ... Yes (←AIが参照するためのガイドを含めるか。YesでOK)

cd my-app
code .

npm run dev

my-app/
├── app/                ← ページやレイアウトを置く場所（App Router）
│   ├── layout.js       ← 全ページ共通のレイアウト
│   ├── page.js         ← / にアクセスしたときに表示されるページ
│   └── globals.css     ← 全ページで使用されるCSS
├── public/             ← 画像などの静的ファイル (そのまま配信したいファイルを置く場所)
├── package.json
├── AGENTS.md         ← AIが参照するためのガイド
└── next.config.mjs

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>こんにちは、React！</h1>
      <p>Next.js のセットアップが完了しました。</p>
    </main>
  )
}