Shivangam Soni
Getting Started with Vite React TypeScript Project using create-vite

Photo by Ferenc Almasi on Unsplash

Getting Started with Vite React TypeScript Project using create-vite

Shivangam Soni's photo
Shivangam Soni

Table of contents

If you're starting a new React project and want to take advantage of the benefits of TypeScript and the fast build speeds of Vite, you've come to the right place! In this tutorial, we'll go through the steps to set up a new Vite React project with TypeScript using the create-vite CLI tool.

Prerequisites

Before we get started, make sure you have the following installed on your system:

  • Node.js (v14.15.4 or later)

  • npm (v7.0.0 or later)

Creating a New Project

First, let's install the create-vite CLI tool globally by running the following command:

npm install -g create-vite

Now, let's create a new Vite React project with TypeScript by running the following command:

create-vite my-vite-react-ts-project --template react-ts

This will create a new project directory called my-vite-react-ts-project with a pre-configured setup for a React project with TypeScript.

Next, navigate to the newly created project directory:

cd my-vite-react-ts-project

Configuring the Project

Now that we've created the project, let's take a look at the pre-configured files to see how everything is set up. First, let's take a look at the tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "incremental": true
  }
}

This configuration sets up TypeScript to target ESNext, use the latest ES module syntax, resolve modules using Node-style resolution, enable JSX syntax for React, enforce strict type checking, enable ES module interoperability, skip checking declaration files from dependencies, enforce consistent casing in file names, allow importing JSON files as modules, enable isolated modules for faster compilation, prevent outputting files, and enable incremental compilation.

Next, let's take a look at the vite.config.ts file:

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

export default defineConfig({
  plugins: [react()],
});

This configuration sets up Vite to use the @vitejs/plugin-react plugin for React support.

Creating a React Component

Now that we've set up our project, let's create a simple React component to test everything out. Open the App.tsx file in the src directory and replace the contents with the following:

import React from 'react';

const App: React.FC = () => {
  return <h1>Hello, Vite!</h1>;
};

export default App;

This component simply renders a heading that says "Hello, Vite!".

Running the Project

We're all set up and ready to go! Run the following command to start the development server:

npm run dev

This will start the Vite development server and open a browser window with your React app. You should see the "Hello, world!" heading rendered on the page.

viteReactTypeScript