FASTEST Way to Install React 19 with Vite in 3 min
Learn how to set up a React 19 project with Vite, upgrade from React 18, and stay ahead before Vite officially integrates React 19.
In this article, we’ll go through the process of setting up a new React application using Vite, specifically upgrading to the latest stable React version (React 19).
By default, Vite still generates React applications with React 18, so we’ll need to manually upgrade to React 19 to get the latest features and improvements.
This step is necessary because Vite’s default configuration hasn’t been updated yet to include React 19. However, once Vite does update its configuration, this upgrade process won’t be required anymore.
Step 1: Create a New React Application with Vite
First, we’ll create a new React application using Vite, a modern build tool that simplifies setup and improves development speed.
1.1 Run the Vite Create Command
In your terminal, run the following command to create a new Vite project:
npm create vite@latest
This will start the setup process. You’ll be prompted to choose a project name, framework, and language.
1.2 Choose Project Settings
Project name: You can name your project whatever you like. For example,
my-project
.Framework: Select React.
Language: Choose JavaScript.
Vite will generate a new React project based on your choices.
1.3 Install Dependencies
After Vite generates the project, navigate to the project folder in your terminal and install the required dependencies:
npm install
This will install all the necessary packages for your new React application.
Step 2: Upgrade React to Version 19
At this point, Vite will have generated a project using React 18 by default. Since React 19 has been officially released, we’ll need to manually upgrade to React 19. This step is necessary because Vite’s default configuration has not yet been updated to use React 19.
2.1 Upgrade React and React DOM
To upgrade React to version 19, follow these steps:
1. Run the following command to install the latest version of React:
npm install react@19
2. Similarly, upgrade React DOM to version 19 by running:
npm install react-dom@19
Once you run these commands, Vite will install the latest stable version of React and React DOM in your project.
2.2 Update Type Definitions for React and React DOM
Since we’re working with JavaScript, you might not need to worry about TypeScript definitions. But it’s still a good practice to ensure you have the correct type definitions if you’re using TypeScript or planning to upgrade in the future.
To update the type definitions, run:
npm install @types/react@19
npm install @types/react-dom@19
This will ensure that your project has the latest type definitions for React and React DOM.
Step 3: Verify the Upgrade
Now that React and React DOM are upgraded to version 19, you can verify the upgrade by checking your package.json
file. Under dependencies, you should see the new version numbers for react
and react-dom
.
Additionally, run the development server to make sure everything is working correctly:
npm run dev
This should start the React application on your local development server.
Conclusion
By following these steps, you’ve successfully upgraded your Vite-generated React application to React 19.
If you're looking to learn React in-depth and build real-world projects, check out my full React course where I cover everything from basics to advanced concepts, helping you become a confident React developer 👇