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.

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

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.

After you create the project, go to the project directory:

cd my-react-app

Once inside the project folder, install the required dependencies:

npm install

Or, if using yarn:

yarn install

Or, if using pnpm:

pnpm install

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.

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.

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"
  }
}

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

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.

Setting up a React 19 project with Vite is straightforward and efficient. With its fast development server, optimized build process, and easy configuration, Vite is an excellent choice for modern React development. Follow these steps, and you’ll be up and running with your React 19 app in no time!