Reactプロジェクトの構造：App.jsx と main.jsx を読む – 4/12

React

2026.03.07

Reactの学習は「どこに何を書くか」で迷子になりがちです。ここで最低限のファイル構造と役割を整理し、編集する場所を固定します。

重要ファイルの全体像
main.jsxの役割
App.jsxの役割
コンポーネントを増やす場所
練習：Headerを作って読み込む

重要ファイルの全体像

Vite + Reactの典型構造は次の通りです（細部はバージョンで差があります）。

index.html：<div id="root"></div> がある
src/main.jsx：ReactをDOMへ接続する入口
src/App.jsx：画面の中心コンポーネント
src/assets/：画像など

初心者がまず触るのは App.jsx です。

main.jsxの役割

main.jsx は「Reactアプリを起動してrootに描画する」場所です。例：

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App.jsx"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

ここは基本的に触らなくても学習できます。まずは「Appがrootに描画される」ことだけ押さえます。

App.jsxの役割

App.jsx が「最初に自分で編集する画面」です。最初は次のように簡単にしてしまってOKです。

export default function App() {
  return (
    <div>
      <h1>React Tutorial</h1>
      <p>ここから学習を進めます。</p>
    </div>
  )
}

この時点で「編集→保存→ブラウザが更新」を確認しておくと安心です。

コンポーネントを増やす場所

コンポーネントは src/components/ のようなディレクトリを作って管理すると見通しが良くなります。

例：

src/components/Header.jsx
src/components/TodoList.jsx

ここはプロジェクトの規模で変えられますが、学習中は「componentsに分ける」だけで十分です。

練習：Headerを作って読み込む

src/components/Header.jsx を作る
App.jsx から import して表示する

Header.jsx:

export default function Header() {
  return <header><h1>React Tutorial</h1></header>
}

App.jsx:

import Header from "./components/Header.jsx"

export default function App() {
  return (
    <div>
      <Header />
      <p>本文</p>
    </div>
  )
}

表示されれば成功です。