miyamo.me

Vite による React の開発環境構築

はじめに

React の開発環境を構築するために Vite を使う方法をまとめます。

前提

以下の環境で構築しています。

  • Windows 10 Pro
  • Node.js v22.11.0

Vite のプロジェクトを作成

以下のコマンドを実行します。

Terminal window
npm create vite@latest

プロジェクト名を入力します。

Terminal window
Need to install the following packages:
[email protected]
Ok to proceed? (y) y




> npx
> create-vite


√ Project name: ... vite-project

? Select a framework: で React を選びます。

Terminal window
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

使う言語を選びます（ここでは JavaScript）。

Terminal window
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
>   JavaScript
    JavaScript + SWC
    React Router v7 ↗

プロジェクトが作成されるので、コマンドを実行します。

Terminal window
Scaffolding project in C:\Users\miyamo\vite-project...


Done. Now run:


  cd vite-project
  npm install
  npm run dev
Terminal window
> npm run dev


> [email protected] dev
> vite




  VITE v6.0.3  ready in 1395 ms


  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

http://localhost:5173/ にアクセスして初期画面が表示されていれば OK です。

なお初期では index,html と /src 、/public が作られています。
以降はやりたいことに応じてモジュール追加したりして作っていく感じです。

参考