React + Vite

前提条件

WSL or Linux or macOS
WSLのインストール方法は下記記事を参照。

WSL(Windows Subsystem on Linux) Windows Subsystem for Linuxのインストール方法

pnpm and Node.js
Node.jsとpnpmのインストール方法は下記記事を参照。

Node.jsとpnpm Node.jsとpnpmのインストール方法について

`pnpm create`を使ってReact + Viteのプロジェクトを作成する

pnpm createコマンドを使っていくつかの質問に答えるだけでReact + Viteのプロジェクトを作成できる。

はじめに

次世代フロントエンドツール

ja.vite.dev

$ pnpm create vite
? Project name: vite-project # プロジェクト名 ディレクトリの名前にもなる
? Select a framework:  # 何のUIフレームワークを使うか # 矢印キーで選択してEnterで決定
  Vanilla # フレームワークなし
  Vue # Vue.js を使う
> React # React を使う
  ...
? Select a variant: # どんな構成にするか # 矢印キーで選択してEnterで決定
  TypeScript # TypeScriptを使う
  TypeScript + SWC # TypeScript + SWCを使う
> JavaScript # JavaScriptを使う
  JavaScript + SWC # JavaScript + SWCを使う
  React Router v7 # React Router v7を使う

Scaffolding project in /home/naotiki/playground/vite-project...

Done. Now run:

  cd vite-project
  pnpm install
  pnpm run dev

これでReact + Viteのプロジェクトが作成される。

起動してみる

プロジェクトのディレクトリに移動
pnpm installで依存関係をインストール
pnpm run devで開発サーバーを起動
これで最初の画面をとりあえず表示できる。

$ cd vite-project #
$ pnpm install
Packages: +255
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 296, reused 200, downloaded 55, added 255, done

dependencies:
+ react 18.3.1 (19.0.0 is available)
+ react-dom 18.3.1 (19.0.0 is available)

devDependencies:
+ @eslint/js 9.17.0
+ @types/react 18.3.18 (19.0.2 is available)
+ @types/react-dom 18.3.5 (19.0.2 is available)
+ @vitejs/plugin-react 4.3.4
+ eslint 9.17.0
+ eslint-plugin-react 7.37.3
+ eslint-plugin-react-hooks 5.1.0
+ eslint-plugin-react-refresh 0.4.16
+ globals 15.14.0
+ vite 6.0.5

Done in 3.7s
$ pnpm run dev

> vite-project@0.0.0 dev /home/naotiki/playground/vite-project
> vite


  VITE v6.0.5  ready in 164 ms

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

URLが出てくるので、ブラウザで開いてみると…

デフォルトページ

このようなデフォルトページが表示される。
開発サーバーはCtrl + Cで終了できる。

ファイル構成

Directorynode_modules/ ライブラリなどが入っているファイル
- …
Directorypublic/ そのまま公開されるファイル
- vite.svg
Directorysrc/ ソースコードが入っているファイル
- Directoryassets/ バンドラーによって処理される画像などのリソースファイル
  - react.svg
- App.css
- App.jsx アプリ本体のファイル
- index.css
- main.jsx 一番最初に呼び出されるファイル
.gitignore gitで管理しないファイルを指定するファイル
eslint.config.js ESLintの設定ファイル
index.html アプリのHTMLファイル
package.json npmの設定ファイル
pnpm-lock.yaml pnpmの依存関係を管理するファイル
README.md プロジェクトの説明ファイル
vite.config.js Viteの設定ファイル

React + Vite

前提条件

pnpm createを使ってReact + Viteのプロジェクトを作成する

起動してみる

ファイル構成

`pnpm create`を使ってReact + Viteのプロジェクトを作成する