【React】Viteを使用した環境構築

やりたいこと

• Reactの環境構築
• サンプルコードの実行

導入

# nvm(Node.jsのバージョン管理ツール)のインストールスクリプトを取得して実行
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
$ source ~/.bashrc

# Node.jsのバージョン20をインストール
$ nvm install 20
$ nvm use 20
$ node -v

# npmのインストール
$ sudo apt install npm nodejs
$ npm -v
$ node -v

# viteでプロジェクトの雛形を作成
$ npm create vite@latest my-app

# React, JavaScript, No, Yesを選択
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes

$ cd my-app    # ディレクトリを移動
$ npm run dev  # コードを実行, package.jsonのscripts.devを実行

結果

• 以下のような画面が出れば成功
  

フォルダの構成

my-app/
├─ node_modules/        ← npmで入れたライブラリ（触らない）
│
├─ public/              ← 静的ファイル置き場
│  └─ vite.svg
│
├─ src/                 ← ★ここがメイン作業場所
│  ├─ assets/           ← 画像・音声など
│  │  └─ react.svg
│  │
│  ├─ App.jsx           ← ★メインのReactコンポーネント
│  ├─ App.css           ← App.jsx 用のCSS
│  │
│  ├─ main.jsx          ← ★Reactの起点（エントリーポイント）
│  │
│  └─ index.css         ← 全体に適用するCSS
│
├─ index.html           ← HTMLの土台（基本触らない）
│
├─ package.json         ← 使用ライブラリ一覧・npm設定
├─ package-lock.json
│
├─ vite.config.js       ← Viteの設定
│
└─ README.md

• src/main.jsx
  • App.jsxを１回だけ読み込む処理

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

/*起動時にApp.jsxを実行*/
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

• src/App.jsx
  • 表示される画面の構成を表す処理
  • 読み込むファイルを指定

App.jsx

import { useState } from "react"
import SampleA from "./SampleA"   /*自作ファイルを読み込む*/
import SampleB from "./SampleB"   /*自作ファイルを読み込む*/

function App() {
  const [mode, setMode] = useState("A");

  return (
    <div style={{ padding: "40px" }}>
      <h1>React 切り替えサンプル</h1>

      <button onClick={() => setMode("A")}>Aを表示</button>
      <button onClick={() => setMode("B")}>Bを表示</button>

      <hr />

      {mode === "A" && <SampleA />}
      {mode === "B" && <SampleB />}
    </div>
  );
}

export default App;

• src/SampleA.jsx，SampleB.jsx
  • 機能を実装したファイル

SampleA.jsx

export default function SampleA() {
  return (
    <div>
      <h2>Sample A</h2>
      <p>これはサンプルAです</p>
    </div>
  );
}

SampleB.jsx

export default function SampleB() {
  return (
    <div>
      <h2>Sample B</h2>
      <p>これはサンプルBです</p>
    </div>
  );
}

実行

$ cd react-sample
$ npm run dev

結果

感想

• 次回以降，Webアプリを開発していきます．