React + TypeScript + Vite Starter

This project template provides a minimal, modern setup to kickstart React development using Vite with TypeScript support. Hot Module Replacement (HMR) is enabled for an efficient workflow. The setup encourages best practices, including initial ESLint configuration and easy expansion for production-level code.

---

Overview

This template helps you scaffold a new React project with TypeScript and Vite in seconds. It integrates essential tools and recommends plugins for optimal developer experience and code quality.

• ⚡ Vite for ultra-fast development and builds
• ⚛️ React for building user interfaces
• 🦾 TypeScript for static typing and better code confidence
• 🔥 HMR (Hot Module Replacement) for instant feedback

---

Supported Plugins

You can choose between two official React plugins for Vite, depending on your needs:

Plugin Name	Description	Technology
@vitejs/plugin-react	Uses Babel (or oxc on rolldown) for Fast Refresh	Babel/oxc
@vitejs/plugin-react-swc	Uses SWC for Fast Refresh	SWC

Both plugins enable Fast Refresh for React components, giving you a seamless development experience.

---

React Compiler

⚠️ React Compiler is not enabled by default.

The React Compiler is a new, experimental optimization that can impact dev and build performance. If you wish to enable it, please follow this documentation.

---

ESLint Configuration

By default, the template provides basic ESLint rules. For a production-ready application, you should enable type-aware lint rules to catch more issues early.

Enabling Type-Aware ESLint Rules

For advanced linting, update your ESLint configuration as shown below:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Replace 'recommended' with type-aware configs:
      tseslint.configs.recommendedTypeChecked,
      // For stricter rules:
      tseslint.configs.strictTypeChecked,
      // Optional, for stylistic suggestions:
      tseslint.configs.stylisticTypeChecked,
      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // Other options...
    },
  },
])

---

Adding React-Specific ESLint Plugins

For even more robust linting, install these plugins:

• eslint-plugin-react-x
• eslint-plugin-react-dom

Example configuration:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // Other options...
    },
  },
])

---

Quick Start

To get started with this template:

1. Install dependencies

   npm install

2. Start development server

   npm run dev

3. Build for production

   npm run build

---

Recommended Project Structure

A typical directory layout:

├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── ... 
├── public/
├── tsconfig.json
├── eslint.config.js
└── vite.config.ts

---

Additional Reading

• Vite Documentation
• React Documentation
• TypeScript Handbook

---

🙌 Happy Hacking!

This template is designed to provide a solid foundation for your next React + TypeScript project. Expand as needed to suit your workflow and application requirements!