Back to list
ReactViteTypeScriptpnpmnpmyarnSetup

[React][Setup] Create a React + Vite + TypeScript Project

Scaffold a modern React app with Vite and TypeScript using pnpm, npm, or yarn - and why CRA is no longer the default choice.

1. Environment

  • OS: Windows 11 / macOS
  • Platform: Node.js (v18 LTS or newer recommended)
  • Package managers: npm, yarn, pnpm
  • Terminal: PowerShell (Windows) / zsh (macOS)

2. Problem

In the past, starting a React project almost always meant running npx create-react-app (CRA).

As projects grew, starting the dev server got slow, and even small edits took a long time to show up in the browser. In today?’s frontend ecosystem, CRA?’s era is effectively over.

3. Cause

CRA?’s slowdown comes mainly from its bundler: Webpack.

With Webpack-based CRA, a one-line change often triggers a full rebuild before the browser updates.

In real apps with hundreds of files, that rebuild becomes a bottleneck and hurts day-to-day productivity.

4. Solution

Use Vite, a next-gen build tool that leans on the browser?’s native ESM (ECMAScript Modules) and hot-swaps only the modules that changed, together with TypeScript for safer code. Below is how to scaffold a modern React project with each package manager.

pnpm is usually the fastest option and saves a lot of disk space - a solid default for real work.

Windows / macOS:

# 1. Install pnpm globally if you do not have it yet
npm install -g pnpm

# 2. Create a Vite + React + TypeScript project
# (use '.' instead of my-react-app to scaffold in the current folder)
pnpm create vite my-react-app --template react-ts

# 3. Enter the project folder
cd my-react-app

# 4. Install dependencies (fast thanks to hard links)
pnpm install

# 5. Start the dev server
pnpm dev

Related: Enable pnpm with Corepack

2) Start with npm

npm ships with Node.js, so you can use it with no extra install.

Windows / macOS:

# 1. Create a Vite + React + TypeScript template
npm create vite@latest my-react-app -- --template react-ts

# 2. Enter the folder
cd my-react-app

# 3. Install dependencies
npm install

# 4. Start the dev server
npm run dev

3) Start with yarn

Windows / macOS:

# 1. Install yarn globally
npm install -g yarn

# 2. Create a Vite + React + TypeScript template
yarn create vite my-react-app --template react-ts

# 3. Enter the folder
cd my-react-app

# 4. Install dependencies (you can omit the word "install")
yarn

# 5. Start the dev server
yarn dev

5. Summary

For SPA (Single Page Application) frontends, React.js + Vite.js + TypeScript + pnpm is one of the strongest, fastest toolchains in the current ecosystem.

After the commands finish, the terminal prints a local URL (usually http://localhost:5173). Open it in a browser and confirm the starter page renders correctly.

Related posts