Page cover
Modern tooling makes React development a joy - fast builds, type safety, and instant feedback.

How to Set Up a React Project with TypeScript and Vite

Development Beginner 15-20 minutes December 18, 2024

A comprehensive guide to creating a modern React application with TypeScript, Vite, and essential development tools.

Things You'll Need

  • Node.js 16+ installed
  • npm or yarn package manager
  • Code editor (VS Code recommended)
  • Basic knowledge of React

Steps

Follow these 9 steps to complete this guide

1

Create a New Vite Project

Use Vite's create command to scaffold a new React TypeScript project. Vite is much faster than Create React App and is the recommended way to start new React projects.

bash 
# Create new project
npm create vite@latest my-react-app -- --template react-ts

# Navigate to project directory
cd my-react-app

Tips

  • Vite offers instant server start and lightning-fast HMR (Hot Module Replacement)
  • The 'react-ts' template includes TypeScript configuration out of the box
2

Install Dependencies

Install the project dependencies using npm or yarn. This will download all required packages for React, TypeScript, and Vite.

bash 
# Using npm
npm install

# Or using yarn
yarn install
3

Understand the Project Structure

Familiarize yourself with the generated project structure. The main files you'll work with are in the 'src' directory.

text 
my-react-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.tsx          # Main app component
│   ├── index.css
│   ├── main.tsx         # Entry point
│   └── vite-env.d.ts
├── index.html           # HTML template
├── package.json
├── tsconfig.json        # TypeScript config
└── vite.config.ts       # Vite config

Tips

  • The index.html is at the root level, not in public/ like in Create React App
4

Configure TypeScript Settings

Review and customize the TypeScript configuration in tsconfig.json for stricter type checking.

json 
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Tips

  • Enable 'strict' mode for better type safety
  • Add 'noUnusedLocals' and 'noUnusedParameters' to catch unused code
5

Install Essential Development Tools

Add ESLint for code quality and Prettier for code formatting. These tools help maintain consistent code style.

bash 
# Install ESLint and Prettier
npm install -D eslint prettier eslint-config-prettier eslint-plugin-react
npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Create .eslintrc.json
echo '{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}' > .eslintrc.json

# Create .prettierrc
echo '{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}' > .prettierrc
6

Add Path Aliases

Configure path aliases to use '@/' instead of relative imports like '../../../'. This makes imports cleaner and easier to refactor.

typescript 
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

// Add to tsconfig.json compilerOptions
{
  "compilerOptions": {
    // ... other options
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Tips

  • Install @types/node if you get errors: npm install -D @types/node
7

Create Your First Component

Create a simple TypeScript component to test your setup. Use proper typing for props.

typescript 
// src/components/Button.tsx
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

export const Button = ({ label, onClick, variant = 'primary' }: ButtonProps) => {
  return (
    <button
      onClick={onClick}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
};

Tips

  • Always define proper TypeScript interfaces for component props
  • Use optional properties with default values when appropriate
8

Run the Development Server

Start the Vite development server to see your application in action. The server will automatically reload when you make changes.

bash 
# Start dev server
npm run dev

# Server will start at http://localhost:5173

Tips

  • Vite's dev server starts instantly compared to traditional bundlers
  • Press 'o' in the terminal to open the browser automatically
9

Build for Production

When you're ready to deploy, create an optimized production build. Vite will bundle and minify your code.

bash 
# Create production build
npm run build

# Preview production build locally
npm run preview

Tips

  • The build output goes to the 'dist' folder by default
  • Use 'npm run preview' to test the production build before deploying
Tags: React TypeScript Vite Frontend

Was this guide helpful?

Check out more step-by-step guides for development, deployment, debugging, and configuration.

← More How-To Guides Get in Touch