Vite + Reactプロジェクトを作成する
npm create vite@latest
Project name: <プロジェクト名>
Select a framework:
React
Select a variant:
JavaScript
cd <プロジェクト名>
npm install
npm run dev
ディレクトリ構造
node_modules
public
src
│ App.css
│ App.jsx
│ index.css
│ main.jsx
│
└───assets
hero.png
react.svg
vite.svg
.gitignore
eslint.config.js
index.html
package-lock.json
package.json
README.md
vite.config.js
viteでの開発サーバーを起動する：
npm run dev
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
<div id="root"></div>
<script src="/src/App.jsx" type="module" ></script>
</body>
</html>
src\App.jsx
// react-dom/client から createRoot を読み込む。
import { createRoot } from "react-dom/client"
// Reactアプリの「描画管理オブジェクト」を作成。
// document.getElementById("root")はHTML側の：<div id="root"></div>を取得しています
const root = createRoot(document.getElementById("root"))
// React が： <h1>Hello, React!</h1> をブラウザへ描画します。
root.render(<h1>Hello, React123!</h1>)
src\App.jsx（例２）
import { createRoot } from "react-dom/client"
const root = createRoot(document.getElementById("root"))
root.render(
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
)
src\App.jsx（例３）
import { createRoot } from "react-dom/client"
const root = createRoot(document.getElementById("root"))
const reactElement = <h1>Hello from JSX!</h1>
console.log(reactElement)
root.render(
reactElement
)