Viteのテンプレートを用いてReact + TyepScriptアプリ開発環境の構築

次世代フロントエンドツールと言われているViteのテンプレート機能を利用しReact + TypeScriptの開発環境の構築例

前提

node.js,npmが利用できること

node -v

v16.15.0

npm -v

8.5.5

環境構築

任意のディレクトリでviteで初期化

npm init vite@latest

設定はvite-projectは任意のプロジェクト名、reactを選択しTypeScriptで実装するためreact-tsを選択

npm init vite@latest
? Project name: › vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
   vanilla
    vue
❯   react  
    ...
? Select a variant: › - Use arrow-keys. Return to submit.
    react
❯   react-ts 


✔ Project name: … vite-project
✔ Select a framework: › react
✔ Select a variant: › react-ts

初期化が完了したらプロジェクトディレクトリに遷移

cd vite-project

パッケージのインストール

npm install

インストールが完了したらpackage.jsonを確認

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

"scripts"で定義されている"dev"がdev serverの起動コマンドなので実行

npm run dev

レスポンスで出力されたLocal(今回はhttp://127.0.0.1:5173/)に指定されてるURLをコピーしブラウザでアクセス

> vite-project@0.0.0 dev
> vite


  VITE v3.0.0  ready in 381 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

画面が表示されれば起動成功（環境構築成功）