Reactのフォルダ構成

Reactのフォルダ構成について学びます

フォルダ構成の全体像（Vite + React + TypeScript）

ts-todolist/
├─ node_modules/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ App.tsx ⭐
│  ├─ main.tsx ⭐
│  ├─ index.css 
│  └─ vite-env.d.ts
├─ index.html ⭐
├─ package.json
├─ tsconfig.json
├─ tsconfig.app.json
├─ tsconfig.node.json
└─ vite.config.ts

• HTMLは 1枚だけ
• Reactは rootに描き続ける
• main.tsx は起動係
• App.tsx はアプリ本体

特に重要なファイルは以下の通り

① index.html

役割：HTMLの入口（1枚だけ）

• 普通のWebだと HTML が何枚もある
• Reactは HTMLは1枚だけ
• Reactはこの中に画面を描き続ける

② src/main.tsx

役割：Reactを起動する場所（エンジン始動）
イメージ：
「Reactアプリを起動して、Appをrootに描画して！」
ここは 触ることはほぼないが仕組みとして超重要

③ src/App.tsx

役割：私が作るアプリ本体
TODOアプリのロジックは ほぼ全部ここから
コンポーネントを増やしていく起点
👉 一番触るファイル

---

その他

• package.json
  依存関係・コマンド定義
  npm run dev の正体が書いてある

• tsconfig*.json
  TypeScriptの設定

• vite.config.ts
  Viteの設定
  Tailwind導入時に少し触る程度

---

Reactが画面を出す流れ

index.html
  ↓
<div id="root"></div>
  ↓
main.tsx が root を見つける
  ↓
App.tsx を描画する
  ↓
App.tsx の中身が画面になる

-----------------------------
図解

[ index.html ]
      |
      |  ← HTMLの空箱
      v
<div id="root"></div>
      |
      |  ← React起動
      v
[ main.tsx ]
      |
      |  ← アプリ本体
      v
[ App.tsx ]