How to Create a React App from Scratch

In this tutorial, you'll learn about How to Create a React App from Scratch. We cover key concepts, practical examples, and best practices.

The Problem

You want to start a new React project but Create React App is deprecated. Vite is the modern, fast alternative.

Why Vite replaced Create React App

Create React App (CRA) was the standard way to bootstrap React projects, but it became slow — development server startup could take 30-60 seconds. Vite solves this by using native ES modules, starting the dev server in under 300 milliseconds. It also supports TypeScript, JSX, and CSS imports out of the box.

Prerequisites

You need Node.js version 18 or later installed on your system. You can check with node --version. If you do not have Node.js, install it using nvm or the official installer from nodejs.org before proceeding.

Quick Fix

1. Scaffold the project

npm create vite@latest my-app -- --template react

This command downloads the latest Vite scaffolding tool, asks you to confirm, and generates a new React project in the my-app directory. The --template react flag tells Vite to use the React JavaScript template. If you prefer TypeScript, use --template react-ts instead.

2. Install dependencies

cd my-app
npm install

This installs React, React DOM, Vite, and supporting tools like @vitejs/plugin-react into the node_modules folder. The installation usually takes 10-30 seconds depending on your internet speed, which is much faster than CRA's install time.

3. Start the dev server

npm run dev

Expected output:

VITE v6.0.0  ready in 200 ms
Local:   http://localhost:5173/

Open http://localhost:5173 — you'll see the default Vite + React page.

The dev server uses Hot Module Replacement (HMR), which means changes to your code appear in the browser instantly without a full page reload. This makes the development loop much faster than with Create React App.

4. Edit your app

Open src/App.jsx:

function App() {
  return <h1>Hello, React!</h1>;
}
export default App;

The page auto-reloads when you save.

You can delete the default CSS and replace the component content with your own. Vite watches your source files for changes and sends only the changed module to the browser — no full rebuild needed.

Project Structure

my-app/
├── src/
│   ├── App.jsx      # Main component
│   ├── main.jsx     # Entry point
│   └── index.css    # Global styles
├── index.html       # HTML entry
├── vite.config.js   # Vite config
└── package.json

Unlike CRA, index.html is at the root level and Vite uses it as the entry point, injecting the script tag automatically. The vite.config.js file is where you configure plugins and build options.

Add React Router

npm install react-router-dom

After installing, wrap your app with <BrowserRouter> in main.jsx and define routes in App.jsx. Vite does not require any special configuration for React Router — it works out of the box because Vite is a bundler, not a framework with its own routing system.

Build for Production

npm run build

Output goes to the dist/ folder.

The build uses Rollup to create optimized bundles with minified JavaScript and CSS with hashed filenames. Deploy the dist/ folder to any static hosting service.

Prevention

Do not use Create React App for new projects. CRA is officially deprecated and no longer receives updates. All new React projects should use Vite or a framework like Next.js.

Pin your Node.js version. React and Vite evolve quickly. Use a .nvmrc file with nvm or engines in package.json to lock the Node.js version for your project. This prevents build failures when teammates use a different Node version.

Use TypeScript from the start. Converting a JavaScript React project to TypeScript later is tedious. Use --template react-ts when scaffolding to get TypeScript support immediately.

Commit the vite.config.js file. Unlike CRA which hid configuration, Vite's config file is meant to be version-controlled. Team members need it to get the same build behavior.