Welcome to the Future: React 19 Setup Guide (2025 Edition)

Written by

Sanjay Jyani
Front End Developer
Table of contents
Build with Radial Code
React 19 is the latest major release of React, bringing new features and optimizations for improved performance and developer experience. Vite, a modern build tool, is one of the best ways to set up a React project efficiently. This guide walks you through installing and configuring React 19 with Vite, ensuring a smooth development experience.
Why Choose Vite for React 19?

Vite offers several advantages over traditional build tools like Create React App (CRA):
- Lightning-fast development server: Uses native ES modules to serve code, making hot module replacement (HMR) extremely fast.
- Optimized production build: Uses Rollup for bundling, resulting in smaller and more efficient output.
- Minimal configuration: Comes with sensible defaults and requires little to no configuration.
- Support for modern JavaScript: Supports ES6+, TypeScript, and JSX out of the box.
Prerequisites
Before getting started, ensure you have the following installed:
- Node.js (v18 or later) - Download here
- npm or yarn - Installed with Node.js
- A terminal or command prompt
Step 1: Create a New React 19 Project with Vite
To create a new React project using Vite, follow these steps:
Using npm:
npm create vite@latest my-react-app -- --template react
Using yarn:
yarn create vite@latest my-react-app --template react
Using pnpm:
pnpm create vite@latest my-react-app --template react
Replace my-react-app with your desired project name.
Step 2: Navigate to the Project Directory
After you create the project, go to the project directory:
cd my-react-app
Step 3: Install Dependencies
Once inside the project folder, install the required dependencies:
npm install
Or, if using yarn:
yarn install
Or, if using pnpm:
pnpm install
Step 4: Start the Development Server
To start the Vite development server, run:
npm run dev
Or using yarn:
yarn dev
Or using pnpm:
pnpm dev
The output will show a local development server URL, typically http://localhost:5173/. Open it in your browser to see your React 19 app running.
Step 5: Project Structure Overview
After running the setup, your project structure will look like this:

Key Files and Directories
- src/ - Contains your main application logic.
- main.jsx - Entry point for the React app.
- App.jsx - Main application component.
- vite.config.js - Vite configuration file.
- index.html - Template file where the React app is injected.
Step 6: Configure ESLint and Prettier (Optional but Recommended)
To keep your code quality and consistency high, set up ESLint and Prettier:
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks
Create an .eslintrc.json file:
{
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
"plugins": ["react", "react-hooks"],
"rules": {
"react/react-in-jsx-scope": "off"
}
}
Step 7: Add TypeScript Support (Optional)
If you prefer using TypeScript, create a new project with the React + TypeScript template:
npm create vite@latest my-react-app -- --template react-ts
Or install TypeScript in an existing project:
npm install --save-dev typescript @types/react @types/react-dom
Step 8: Build and Deploy
When ready to deploy your project, run:
npm run build
This generates an optimized dist/ folder that can be deployed to any static hosting service like Vercel, Netlify, or GitHub Pages.