Creating a React Project with Vite and TypeScript

Vite is a modern frontend development and build tool.

It helps developers create and run applications using technologies such as React, Vue, and TypeScript.

Vite provides:

• A fast development server.
• Hot Module Replacement (HMR).
• TypeScript support.
• React integration.
• Production builds.
• Support for CSS and CSS Modules.

Why Use Vite with React?

React is a library for building user interfaces, but it does not provide a complete development environment by itself.

Vite helps us prepare and run the application.

For example, Vite processes files such as:

App.tsx
main.tsx
App.css
index.css

and makes the application available in the browser.

Official documentation:

https://vite.dev/

---

Before creating the project, make sure the following tools are installed:

Check Node.js

Open the terminal in VS Code and run:

node --version

Example output:

v24.13.0

The exact version depends on your installation.

Use a Node.js version supported by your installed Vite release. The current Vite documentation requires Node.js 20.19+ or 22.12+.

Check npm

npm --version

Check Git

git --version

If these commands display version numbers, the tools are available.

---

GitHub allows you to store your project online and track changes.

Step 1

Open:

https://github.com/

Sign in to your account.

Step 2

Select New repository.

Step 3

Enter a repository name, for example:

pizza-ordering-app

Step 4

Choose whether the repository should be public or private.

Step 5

For this workflow, create an empty repository.

Do not initialize it with a README, .gitignore, or license.

Step 6

Click Create repository.

GitHub will display the repository address.

For example:

git@github.com:YOUR_USERNAME/pizza-ordering-app.git

Replace YOUR_USERNAME with your GitHub username.

---

Cloning downloads a copy of the GitHub repository to your computer.

Open Git Bash or the VS Code terminal.

Navigate to the folder where you want to store your projects.

Example:

cd ~/projects

Clone the repository:

git clone git@github.com:YOUR_USERNAME/pizza-ordering-app.git

This command uses SSH. Your GitHub SSH authentication must already be configured.

Alternatively, you can use an HTTPS repository URL.

Open the Project Folder

cd pizza-ordering-app

Open it in VS Code:

code .

The dot means the current directory.

Important: We are now inside the cloned repository. This matters when creating the Vite project.

---

Inside the project folder, run:

npm create vite@latest

Vite starts an interactive setup process.

Project Name

When Vite asks for the project name, enter:

.

The dot means:

Create the project inside the current directory.

This is useful because we already cloned an empty GitHub repository.

Select the Framework

Choose:

React

Select the Variant

Choose:

TypeScript

The available templates and options can vary depending on the Vite version.

If the setup asks additional questions, follow the instructions displayed in the terminal.

Alternative: Create the Project Directly

You can also use:

npm create vite@latest . -- --template react-ts

This command creates a React + TypeScript project in the current directory using the standard template.

Use this alternative when you do not need the interactive framework selection.

---

After Vite creates the project, install its dependencies:

npm install

What Does npm install Do?

npm reads the package.json file and installs the required packages.

These packages are usually stored in:

node_modules/

npm also creates or updates the dependency lock file:

package-lock.json

What Is package.json?

package.json contains information about the project.

It defines dependencies and scripts.

A simplified example:

{
  "name": "pizza-ordering-app",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

Actual files generated by Vite may contain additional scripts and dependencies.

---

Run:

npm run dev

Vite starts a local development server.

The terminal may display:

Local: http://localhost:5173/

Open the displayed address in your browser.

You should see the initial Vite + React application.

What Is localhost?

localhost refers to your own computer.

The application is running locally, not on a public hosting server.

What Is Hot Module Replacement?

Hot Module Replacement (HMR) allows Vite to update parts of the application while the development server is running.

For example, edit the heading in App.tsx and save the file.

Vite updates the browser without requiring you to manually restart the development server.

---

A typical React + TypeScript project created by Vite contains files similar to:

pizza-ordering-app/
│
├── node_modules/
├── public/
│
├── src/
│   ├── assets/
│   ├── App.tsx
│   ├── App.css
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
│
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts

The exact structure depends on the Vite version and template.

Important Files

index.html

The HTML entry document.

It contains the element into which React renders the application.

<div id="root"></div>

src/main.tsx

The application entry point.

It connects React to the DOM.

src/App.tsx

The main application component.

We will place many of our initial React exercises here.

src/index.css

Global CSS styles.

src/App.css

Styles commonly included with the starter application.

package.json

Project scripts and dependencies.

vite.config.ts

Vite configuration.

tsconfig.json

TypeScript project configuration.

node_modules

Installed packages. This folder is normally excluded from Git using .gitignore.

---

A typical Vite React project uses code similar to:

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>
);

Step-by-Step Explanation

Import StrictMode

import { StrictMode } from "react";

StrictMode enables additional development checks.

Import createRoot

import { createRoot } from "react-dom/client";

createRoot creates a React root associated with a DOM element.

Import Global CSS

import "./index.css";

This loads global styles.

Import App

import App from "./App.tsx";

This imports the main component.

Find the Root Element

document.getElementById("root")

This finds the element with id="root" in index.html.

The ! tells TypeScript that we expect the element to exist.

Render App

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

React renders the App component inside the root element.

What Is StrictMode?

StrictMode helps detect certain problems during development.

For example, it can trigger additional checks and extra render calls in development.

These development-only checks do not run in the same way in production builds.

---

Open:

src/App.tsx

Replace its contents with:

export default function App() {
  return (
    <main>
      <h1>Pizza Palace</h1>

      <p>
        Vite and TypeScript are ready for your first online pizza order.
      </p>
    </main>
  );
}

How It Works

function App() defines a React component.

return provides JSX describing the interface.

<h1> creates a heading.

<p> creates a paragraph.

export default allows the component to be imported into main.tsx.

Browser Preview

localhost:5173

Pizza Palace

Vite and TypeScript are ready for your first online pizza order.

Save the file.

Vite should update the application in the browser.

---

Several extensions can improve the development experience.

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint helps identify potential problems and enforce code-quality rules.

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier automatically formats code.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Path Intellisense provides suggestions for file paths in imports.

These extensions are useful but not all are required for React itself to run.

---

ESLint analyzes source code and reports potential errors or rule violations.

Modern Vite React templates commonly include ESLint configuration.

For example:

eslint.config.js

How ESLint Helps

ESLint can detect problems such as unused variables or violations of configured React rules.

In VS Code, errors and warnings may be underlined.

You can hover over a highlighted problem to read the explanation.

Run ESLint

If the project includes a lint script:

npm run lint

This runs the project's configured lint command.

You can check the available scripts in package.json.

---

Prettier automatically formats code.

For example, it can convert inconsistent formatting into a consistent style.

Install Prettier

npm install --save-dev prettier

Create a Configuration File

In the project root, create:

.prettierrc

Example configuration:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all"
}

Explanation

semi: true adds semicolons where appropriate.

singleQuote: false prefers double quotes in JavaScript and TypeScript.

tabWidth: 2 uses two spaces for indentation.

trailingComma: "all" enables trailing commas where supported.

Format Files

You can run:

npx prettier --write .

This formats supported files in the project, except those excluded by Prettier's ignore rules.

In VS Code, you can also enable Format On Save and select Prettier as the default formatter.

---

Source maps help development tools relate generated JavaScript code to the original source files.

They are useful for debugging compiled applications.

Some course review workflows require source maps so reviewers can inspect the original code after deployment.

Open vite.config.ts

A standard configuration may look like:

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

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

Enable Source Maps

Add:

build: {
  sourcemap: true,
}

Complete example:

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

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

How It Works

defineConfig() defines the Vite configuration.

react() enables React integration.

build.sourcemap: true tells Vite to generate production source maps.

React Compiler Configuration

Some course materials also use React Compiler through additional Babel tooling.

For example, a course configuration may include reactCompilerPreset and @rolldown/plugin-babel.

These are additional build configuration choices, not requirements for every React project.

If your course provides a specific working configuration, use the versions and dependencies required by that configuration.

For a standard beginner React + TypeScript project, the default Vite React plugin configuration is sufficient.

Important Security Note

Production source maps can expose original source code to anyone who can access the published map files.

Do not include passwords, API secrets, or other sensitive information in frontend source code.

If public source maps are not required, consider disabling them for production deployments.

---

During development, we use:

npm run dev

But before deployment, we normally create a production build.

Run:

npm run build

Vite processes the application and creates optimized production files.

By default, they are stored in:

dist/

What Is dist?

dist contains the files prepared for deployment.

These commonly include HTML, JavaScript, CSS, and static assets.

The source TypeScript and JSX are transformed into browser-compatible JavaScript.

---

After building the project, run:

npm run preview

Vite starts a local server that serves the production build.

The terminal displays an address, commonly:

http://localhost:4173/

Open the displayed address to preview the production version.

Important: vite preview is intended for local previewing, not as a production web server.

---

After creating and testing the application, save your changes using Git.

Check the Repository Status

git status

This displays modified and untracked files.

Add Files

git add .

This stages changes for the next commit.

Create a Commit

git commit -m "Initialize pizza ordering app with Vite"

A commit records a version of your project.

Push to GitHub

git push -u origin main

This sends your commits to the remote repository and sets the upstream branch.

If your current branch has a different name, use that branch name instead.

---

Running Commands in the Wrong Folder

Before running:

npm install

or:

npm run dev

make sure the terminal is inside the project folder containing package.json.

Forgetting npm install

If dependencies are missing, the development server may fail to start.

Run:

npm install

Creating an Unwanted Nested Project Folder

When working inside an already cloned empty GitHub repository, enter:

.

as the Vite project name.

Otherwise, you may accidentally create another folder inside the repository.

Importing a File from the Wrong Path

For example:

import App from "./App.tsx";

works when App.tsx is located in the same directory as the importing file.

If you move the component, update the import path.

Forgetting to Export a Component

A component imported using a default import must have a corresponding default export.

export default function App() {
  return <h1>Pizza Palace</h1>;
}

Committing node_modules

Do not commit node_modules to Git.

Ensure it is excluded through .gitignore.

The dependencies can be reinstalled using:

npm install

---

---

• Vite provides the development server and production build workflow for the React project.
• The react-ts template creates a React project configured for TypeScript.
• Run commands from the folder that contains package.json.
• src/main.tsx connects React to the root element, while src/App.tsx defines the main component.
• ESLint checks code quality, while Prettier handles formatting.
• npm run build creates deployable files in dist/.
• npm run preview is for local verification and is not a production server.
• Keep secrets out of frontend source code and review the security impact of public source maps.
• Commit the generated project files, but do not commit node_modules.

---

Vite getting started guide:

https://vite.dev/guide/

Vite production build guide:

https://vite.dev/guide/build

Vite static deployment guide:

https://vite.dev/guide/static-deploy.html

GitHub repository documentation:

https://docs.github.com/en/repositories/creating-and-managing-repositories

Next lesson: JSX and React component fundamentals.