React開発を加速するVite入門：高速で柔軟なプロジェクトセットアップガイド

npm create vite@latest

cd vite-project
npm install
npm run dev

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

npm run build

npm run preview

function App() {
  const isDev = import.meta.env.DEV
  return (
    <>
      {isDev ? '開発モード' : '本番モード'}
    </>
  )
}

export default App

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
- import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

npm run dev

npm run build

npm run preview

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
+ server: {
+   port: 3000, // 開発サーバーのポートを指定
+   open: true, // 開発サーバー起動時にブラウザを自動で開く
+ },
});

const SampleComponent = () => {
  return (
    <div>
      sample
    </div>
  )
}

export default SampleComponent

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
- "include": ["src"]
+ "include": ["src", "components"]
}

import SampleComponent from "../../components/Sample"

function Test() {
  return (
    <div>
      <SampleComponent />
    </div>
  )
}

export default Test

npm install --save-dev @types/node

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path';

// https://vite.dev/config/
export default defineConfig(() => {
  return {
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './components'),
      },
    },
  };
});

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

+   "baseUrl": ".",
+   "paths": {
+     "@/*": ["src/*"],
+     "@components/*": ["components/*"]
+   }
  },
- "include": ["src"]
+ "include": ["src", "components"]
}

- import SampleComponent from "../../components/Sample"
+ import SampleComponent from "@components/Sample"

function Test() {
  return (
    <div>
      <SampleComponent />
    </div>
  )
}

export default Test