目次
使用するプロジェクトのフォルダ構成
fold_structure
├── node_modules/
├── public/
│ └── vite.svg
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ ├── lectures.js
│ ├── main.jsx
│ └── (other components)
├── index.html
├── package.json
├── README.md
└── vite.config.js
index.htmlのソースコード
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
main.jsxのソースコード
main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import lectures from "./lectures.js";
ReactDOM.createRoot(document.getElementById("root")).render(
<App lectures={lectures} />
);
main.jsxのソースコードの解説
-
ReactDOM.createRoot(document.getElementById("root"))
ReactDOM.createRootは、React 18で導入された新しいAPIで、Reactアプリケーションのルートを作成します。
document.getElementById("root")は、HTMLドキュメント内のid属性がrootであるDOM要素を取得します。この要素は通常、Reactアプリケーションがレンダリングされるコンテナです。 -
.render(<App lectures={lectures} />)
.renderメソッドは、指定したReactコンポーネント（ここでは<App />）を先ほど取得したDOM要素にレンダリングします。
<App lectures={lectures} />は、Appコンポーネントを呼び出しています。このとき、lecturesという名前のプロパティをAppコンポーネントに渡しています。lecturesは、このコンポーネントで使用されるデータを含む変数です。
全体の流れ
1. DOM要素の取得
main.jsx
document.getElementById("root")
これは下記のHTMLのDOMから、idがrootの要素を取得します。
index.html
<div id="root"></div>
2. Reactアプリケーションのルート作成
main.jsx
ReactDOM.createRoot(document.getElementById("root"))
これはReactの新しいルートAPIを使用して、root要素をReactアプリケーションのルートとして設定します。
3.Reactコンポーネントのレンダリング
main.jsx
.render(<App lectures={lectures} />）
これはAppコンポーネントをroot要素にレンダリングし、lecturesというプロパティをAppコンポーネントに渡します。