React インストール(Vite)

Vite は、現代のブラウザのネイティブ ES モジュール対応を利用することで、高速な開発体験を提供することを目的とした、モダンなフロントエンドビルドツールです。

Vite は現在 React 公式が推奨する最優先ツールであり、従来の Create React App より速く、軽量で、開発体験も優れています。

Vite はネイティブ ES Modules に基づいており、秒単位のホットリロード（HMR）に対応し、起動時間は通常わずか数百ミリ秒です。

Vite の詳細はこちら:Vite チュートリアル。

なぜ Vite + React なのか？

  • 超高速起動: 開発サーバーが即座に起動し、ホットリロードはほぼリアルタイムです。
  • モダンな機能: JSX、TypeScript、CSS Modules、PostCSS などを標準サポート。
  • 軽量で柔軟: 設定ファイルがシンプルで、簡単にカスタマイズできます。
  • 本番向け最適化: Rollup ビルドを内蔵し、出力サイズが小さく、高性能です。
  • 公式の推奨: React 公式ドキュメントは Vite をデフォルトの推奨ツールとしています。

最初の Vite + React プロジェクトを作成する

ターミナルを開きます（Windows: PowerShell/コマンドプロンプト；macOS/Linux: ターミナル）。

npm を使用してインストール:

npm create vite@latest my-first-react-app -- --template react

推奨コマンド（pnpm を使用、最速でディスク容量も節約）：

pnpm create vite@latest my-first-react-app -- --template react

他のパッケージマネージャーのコマンド:

yarn を使用してインストール:

yarn create vite my-first-react-app --template react

コマンドの説明:

  • create vite@latest: 最新版の Vite 作成ツールを使用。
  • my-first-react-app: プロジェクト名（小文字 + ハイフンを推奨）。
  • -- --template react: React テンプレートを指定。

対話プロセス（選択を求められます）:

  • プロジェクト名: そのまま Enter を押して確定するか、変更します。
  • フレームワークを選択: 選択してくださいReact。
  • バリアントを選択:
    • JavaScript（入門におすすめ、まずは純粋な JS を使用）。
    • TypeScript（上級者向けにはこちら、型安全性が高く、後から切り替え可能）。

ここでは選択しますJavaScript。

数秒待つと、プロジェクトの雛形が作成されます。

依存関係をインストールしてプロジェクトを起動する

プロジェクトディレクトリに移動cd my-first-react-app、依存関係をインストール:

npm install

開発サーバーを起動:

npm run dev

ブラウザが自動的に http://localhost:5173 を開きます（Vite のデフォルトポート）。

Vite + React のロゴとカウンターの例が表示されたウェルカムページが確認できます。これが最初の React アプリケーションの実行です。

ホットモジュールリプレイスメント（HMR）体験: 任意のコード（後で説明）を変更して保存すると、ページが自動更新され、リフレッシュ不要です。これが Vite の魔法です。

プロジェクト構造の詳細

プロジェクトフォルダを開きます（VS Code 推奨:code .コマンドでワンクリックで開く）。

cd my-first-react-app
code .

代表的な構造は次のとおりです:

my-first-react-app/
├── public/              # 静态资源（直接复制到构建输出）
│   └── vite.svg         # Vite Logo
├── src/                 # 源码主目录（重点！）
│   ├── assets/          # 图片等资源
│   │   └── react.svg
│   ├── App.jsx          # 主组件（应用入口）
│   ├── main.jsx         # 入口文件（挂载根组件）
│   ├── index.css        # 全局样式
│   └── vite-env.d.ts    # TypeScript 声明（JS 项目可忽略）
├── .gitignore
├── index.html           # HTML 入口模板
├── package.json         # 依赖和脚本
├── vite.config.js       # Vite 配置文件（目前为空，可自定义）
└── README.md

主要ファイルの説明:

  • index.html: ページのエントリポイント、<div></div>React のマウントポイントです。
  • src/main.jsx: React の起動ファイル。React 18 の新しい API を使用してルートノードを作成します。
  • src/App.jsx: メインコンポーネント。デフォルトではカウンターの例が含まれています。

コードを修正: 最初の React コンポーネント

開くsrc/App.jsx、すべての内容を以下のコードに置き換えます（簡単な挨拶から始めましょう）:

例

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>こんにちは、React+ Vite！</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
現在のカウント:{count}
        </button>
      </div>
      <p>
編集<code>src/App.jsx</code>そして保存してホットリロードを体験！
      </p>
    </div>
  )
}

export default App

保存後、ページは自動更新されます。完全な関数コンポーネントが作成できました:

  • import { useState } from 'react': Hook をインポート。
  • useState(0): 状態変数を宣言し、count、初期値を 0 にします。
  • onClickイベント: ボタンをクリックして状態を更新し、再レンダリングをトリガーします。
  • JSX 構文: HTML のように見えますが、実際は JavaScript です。

ちょっとした演習：

  1. タイトルを自分の名前に変更:<h1>你好，[你的名字]！</h1>
  2. 新しいボタンを追加: 減算カウントを表示。
    <button onClick={() => setCount(count - 1)}>
  减一
</button>

エントリーファイル: src/main.jsx を理解する

開くsrc/main.jsx：

例

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

説明:

  • ReactDOM.createRoot: React 18 の新しい API。並行処理の機能を有効にします。
  • <App />: メインコンポーネントをレンダリングします。
  • <React.StrictMode>: 開発モードでの厳格なチェックで、問題の発見に役立ちます。

新しいコンポーネントを追加（コンポーネント化の実践）

にsrc/の下に新しいファイルを作成components/HelloWorld.jsx（先に手動でフォルダを作成）:

// src/components/HelloWorld.jsx
function HelloWorld({ name }) {
  return <h2>欢迎，{name || '陌生人'}！</h2>
}

export default HelloWorld

にApp.jsxでインポートして使用:

import HelloWorld from './components/HelloWorld.jsx'

// 在 return 中添加：
<HelloWorld name="サンプル" />

保存して更新すると、新しいコンポーネントがレンダリングされるのが確認できます。これがコンポーネント化の魅力です。再利用、組み合わせが可能！

スタイルとリソースの処理

  • CSS: 直接 import./App.css、通常の CSS をサポートします。
  • 画像: import 後に変数として使用します（Vite が自動最適化）。
  • 応用: CSS Modules をサポート（ファイル名.module.css）、Tailwind CSS（後で設定可能）。

プロダクションビルドを作成する

開発が完了したら、デプロイ用の静的ファイルをビルド:

npm run build

出力先はdist/フォルダ: 純粋な HTML/CSS/JS で、Vercel、Netlify などにアップロードできます。

その他の拡張