Zenn
🐦

【Hello World⑩】React @ JavaScript

2024/04/12に公開
Docker
JavaScript
React
Vite
tech

ReactでJavaScriptのWebアプリを作ります

Windows11のDocker環境上で
JavaScript言語のReactを使ってシングルページアプリケーション(SPA)のアプリを作ります。

環境

Windows 11 Pro 23H2
WLS 2.1.5.0（Ubuntu 22.04.1 LTS）
Docker Desktop 4.28.0
Visual Studio Code

①フォルダ・ファイルを作成

以下の構成でフォルダとファイルを作ります。

フォルダ構成
react
 └─compose.yaml   # コンテナ作成時の指示を記載したファイル

以下のコマンドでフォルダ・ファイルを作成します。

PowerShell
mkdir react            ;`
cd react               ;`
New-Item compose.yaml  ;`
code compose.yaml

ファイルには以下の内容を記載します。

compose.yaml
services:
  web:
    image          : node:18.18.2-bullseye-slim
    container_name : react
    working_dir    : /web
    command        : bash -c "yarn dev --host"
    volumes:
      - ./web:/web
    ports:
      - "5173:5173"

②Reactのプロジェクトを作成

以下のコマンドを実行し、Reactのプロジェクトを作成します。

PowerShell
docker compose run --rm -it web `
bash -c 'yarn create vite ./ --template react-swc && npm install'
作成されるフォルダ・ファイルの構成と「package.json」の内容
フォルダ構成
react
 ├─web
 │  ├─node_modules
 │  ├─public
 │  ├─src
 │  │  ├─assets
 │  │  ├─App.css
 │  │  ├─App.jsx         # main.jsxから呼び出されるファイル
 │  │  ├─index.css
 │  │  └─main.jsx        # index.htmlから呼び出されるファイル
 │  ├─.eslintrc.cjs
 │  ├─.gitignore
 │  ├─index.html         # Webブラウザで読み込まれるファイル
 │  ├─package-lock.json
 │  ├─package.json
 │  ├─README.md
 │  └─vite.config.js     # 設定ファイル
 └─compose.yaml
package.json
{
  "name": "web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }
}

③設定ファイルを変更

設定ファイル（vite.config.js）にホットリロード（プログラムを変更すると直ぐにアプリに変更が反映されるしくみ）を設定します。

PowerShell
code web/vite.config.js
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    watch: {
      usePolling: true
    }
  }
})

④Reactのコンテナを起動

以下のコマンドを実行し、Reactのコンテナを起動します。

Powershell
docker compose up -d

⑤Vite + Reactの画面が表示されることを確認

http://localhost:5173に接続して、Vite + Reactの画面が表示されることを確認します。

⑥画面表示内容を修正

App.jsx（Vite + Reactの画面内容を記述しているJavaScript XMLファイル）の下の方に
<p>Hello World Vite + React on Docker!</p>を追記します。

PowerShell
code web/src/App.jsx
App.jsx
省略
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
+     <p>Hello World Vite + React on Docker!</p>
    </>
省略

⑦Hello Worldが表示されることを確認

http://localhost:5173に接続して、一番下にHello Worldが表示されることを確認します。
※設定ファイル（vite.config.js）にusePolling: trueを設定しているので、App.jsxの内容を変更するとページをリロードしなくても、自動的に表示されている内容が変わります。

Discussion