Vite + React + TypeScript でプロジェクトを立ち上げる

Viteでプロジェクトを作成

terminal_____none_____yarn create vite

プロジェクト作成時に聞かれるオプションを聞かれます。
今回はReact + TypeScriptでプロジェクトを作成するのでそのように回答します。

terminal_____none_____? Select a framework: react
? Select a variant: react-ts

ESLintとPrettierを追加してyarn

package.json_____json_____{
  "name": "{project-name}",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "format": "prettier --write ."
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.9",
    "prettier": "^2.5.1",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "eslint": "^8.9.0",
    "eslint-config-prettier": "^8.4.0"
  }
}

index.htmlをsrcディレクトリに移動しvite.config.tsを更新

typescript_____vite.config.ts_____import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'


// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  root: './src',
  build: {
    outDir: '../public', // デフォルトでは root で指定したディレクトリ / root からの相対パスで指定
    emptyOutDir: true, // root 外に outDir を設定する場合は指定
  },
  server: {
    open: true, // yarn dev でブラウザが自動で開かれる
  },
  plugins: [react()],
})

起動してみる

terminal_____none_____yarn dev
yarn run v1.22.11
$ vite

  vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 921ms.

デフォルトのApp.tsxにあるbuttonタグをstateと一緒にコンポーネントとして切り出し、
わかりやすくonClickで+2するようにだけ変更し、
そのまま呼び出して更新することでホットリロードを試してみる。

tsx_____Button.tsx_____import { useState } from 'react'
import './App.css'

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

    return (
        <button type='button' onClick={() => setCount((count) => count + 2)}>
            count is: {count}
        </button>
    )
}

export default Button

tsx_____App.tsx_____import logo from './logo.svg'
import './App.css'
import Button from './Button'

function App() {
    return (
        <div className='App'>
            <header className='App-header'>
                <img src={logo} className='App-logo' alt='logo' />
                <p>Hello Vite + React!</p>
                <p>
                    <Button />
                </p>
                <p>
                    Edit <code>App.tsx</code> and save to test HMR updates.
                </p>
                <p>
                    <a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
                        Learn React
                    </a>
                    <a className='App-link' href='https://vitejs.dev/guide/features.html' target='_blank' rel='noopener noreferrer'>
                        Vite Docs
                    </a>
                </p>
            </header>
        </div>
    )
}

export default App

保存した瞬間にVS Codeのターミナルに [vite] hmr update /App.tsx とだけ表示されました。
ターミナルに building... xx% のような表示が出ることもなく、瞬時に終わりました。
ブラウザでボタンをクリックするとカウントは2ずつ増えるようになっていたので、一瞬で反映されています。

このあとは src ディレクトリ配下で普段どおり開発を進められます。
Vite は型チェックを行いませんが、開発中にリアルタイムに型エラーを確認したいので、
package.json に "watch": "tsc -w" を追加し yarn dev しつつ別タブで yarn watch することにします。

これでより良い開発体験になりそうです。