React + TypeScript + Vite Starter

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React + TypeScript + Vite Starter</title>
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #0a0a0f;
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
  }

  .card {
    max-width: 640px;
    width: 100%;
    background: linear-gradient(135deg, rgba(34,211,238,0.04), rgba(59,130,246,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
  }

  .header p {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
  }

  h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22d3ee;
    margin-bottom: 0.5rem;
  }

  .cli-block {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #cbd5e1;
    overflow-x: auto;
  }

  .cli-block .prompt { color: #22d3ee; }
  .cli-block .flag { color: #a78bfa; }
  .cli-block .comment { color: #475569; }

  .tree {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #94a3b8;
  }

  .tree .dir { color: #3b82f6; }
  .tree .file { color: #cbd5e1; }
  .tree .config { color: #a78bfa; }

  .key-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .key-file {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.82rem;
  }

  .key-file code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .key-file span {
    color: #94a3b8;
  }

  .extend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .extend-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
  }

  .extend-item strong {
    font-size: 0.8rem;
    color: #f1f5f9;
    display: block;
    margin-bottom: 2px;
  }

  .extend-item span {
    font-size: 0.72rem;
    color: #64748b;
  }

  .links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .links a {
    font-size: 0.78rem;
    color: #22d3ee;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
  }

  .links a:hover { color: #67e8f9; }
  .links a::before { content: '->'; font-family: monospace; font-size: 0.7rem; }
</style>
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="icon">R</div>
      <div>
        <h1>React + TypeScript + Vite</h1>
        <p>Production-ready starter with ESM dev server &amp; Rollup builds</p>
      </div>
    </div>

    <section>
      <h2>Quick Start</h2>
      <div class="cli-block">
        <span class="prompt">$</span> npm create vite@latest my-app <span class="flag">-- --template react-ts</span><br/>
        <span class="prompt">$</span> cd my-app<br/>
        <span class="prompt">$</span> npm install<br/>
        <span class="prompt">$</span> npm run dev <span class="comment"># http://localhost:5173</span>
      </div>
    </section>

    <section>
      <h2>Project Structure</h2>
      <div class="tree">
        <span class="dir">my-app/</span><br/>
        ├── <span class="dir">public/</span><br/>
        │   └── <span class="file">vite.svg</span><br/>
        ├── <span class="dir">src/</span><br/>
        │   ├── <span class="dir">assets/</span> <span class="comment">react.svg</span><br/>
        │   ├── <span class="file">App.tsx</span><br/>
        │   ├── <span class="file">App.css</span><br/>
        │   ├── <span class="file">main.tsx</span><br/>
        │   ├── <span class="file">index.css</span><br/>
        │   └── <span class="file">vite-env.d.ts</span><br/>
        ├── <span class="file">index.html</span><br/>
        ├── <span class="config">vite.config.ts</span><br/>
        ├── <span class="config">tsconfig.json</span><br/>
        └── <span class="file">package.json</span>
      </div>
    </section>

    <section>
      <h2>Key Files</h2>
      <div class="key-files">
        <div class="key-file">
          <code>vite.config.ts</code>
          <span>Plugins, aliases, build options</span>
        </div>
        <div class="key-file">
          <code>tsconfig.json</code>
          <span>Project references for app &amp; node configs</span>
        </div>
        <div class="key-file">
          <code>main.tsx</code>
          <span>Entry point, renders into #root via createRoot</span>
        </div>
        <div class="key-file">
          <code>index.html</code>
          <span>Vite entry with module script to main.tsx</span>
        </div>
      </div>
    </section>

    <section>
      <h2>Extend With</h2>
      <div class="extend-grid">
        <div class="extend-item">
          <strong>React Router</strong>
          <span>Client-side routing</span>
        </div>
        <div class="extend-item">
          <strong>TanStack Query</strong>
          <span>Server state &amp; caching</span>
        </div>
        <div class="extend-item">
          <strong>Vitest</strong>
          <span>Vite-native unit testing</span>
        </div>
        <div class="extend-item">
          <strong>Tailwind CSS</strong>
          <span>Utility-first styling</span>
        </div>
      </div>
    </section>

    <div class="links">
      <a href="https://vite.dev/guide/">Vite Docs</a>
      <a href="https://react.dev/">React Docs</a>
      <a href="https://github.com/RicardoValdovinos/vite-react-boilerplate">Community Boilerplate (1k+)</a>
    </div>
  </div>
</body>
</html>

React + TypeScript + Vite Starter

The fastest way to scaffold a modern React project with full TypeScript support. One command gives you a production-ready setup with Vite’s blazing-fast ESM dev server and optimized Rollup builds.

Quick Start

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

This scaffolds a complete React 18+ project with TypeScript, JSX transform, HMR, and a pre-configured build pipeline.

What You Get

Vite dev server — Native ESM, sub-50ms HMR, no bundling during development
TypeScript — Strict mode enabled, path aliases ready via tsconfig.json
React 18+ — Concurrent features, automatic JSX runtime
Rollup production builds — Tree-shaking, code splitting, optimized chunks
ESLint — Pre-configured with React and TypeScript rules
CSS Modules — Supported out of the box, no extra config needed

Generated Project Structure

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts

Key Files

vite.config.ts — Plugins, aliases, build options. Add @vitejs/plugin-react-swc for faster refresh.
tsconfig.json — Project references setup. tsconfig.app.json handles app code, tsconfig.node.json handles config files.
main.tsx — App entry point. Renders into #root using createRoot.
index.html — Vite uses this as the entry; the <script type="module"> tag points to main.tsx.

Extend With

Tool	Purpose
React Router	Client-side routing with loaders and actions
TanStack Query	Server state management, caching, and synchronization
Vitest	Vite-native unit testing with Jest-compatible API
Tailwind CSS	Utility-first CSS framework
Zustand	Lightweight state management

References

Vite Official Guide — Full documentation for Vite configuration, plugins, and features
RicardoValdovinos/vite-react-boilerplate (1k+ stars) — Community boilerplate with React Router, Vitest, Husky, and more