なぜ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アイテムコンポーネント（×何個も）
│   └── ...
└── フッターコンポーネント

npx create-next-app@latest my-app

✔ Would you like to use TypeScript? › No（← JavaScriptで学ぶため）
✔ Would you like to use ESLint? › Yes
✔ Would you like to use Tailwind CSS? › No（← 後で追加する）
✔ Would you like your code inside a `src/` directory? › No
✔ Would you like to use App Router? › Yes（← 必ずYes）
✔ Would you like to use Turbopack for next dev? › No
✔ Would you like to customize the import alias? › No

cd my-app
npm run dev

my-app/
├── app/                ← ページやレイアウトを置く場所（App Router）
│   ├── layout.js       ← 全ページ共通のレイアウト
│   ├── page.js         ← / にアクセスしたときに表示されるページ
│   └── globals.css     ← グローバルCSS
├── public/             ← 画像などの静的ファイル
├── package.json
└── next.config.mjs

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