I wrote this quick article to help those that are like me and want to test the latest version of React, which is React 19 Beta.
In that way, we get to play around with the new cool stuff like Server Components.
Step 1 - Installation
In a terminal go to the folder with all your repos and execute the following command:
npm create vite@latest react-beta-test
In the prompts be sure to select React and Javascript or Typescript. I'm going to select Typescript as I prefer it. This command will create a new folder called react-beta-test (you can change this if you want in the command above).
CD into that folder: cd react-beta-test
and run the following command: npm install react@beta react-dom@beta
after the command finishes, run npm install
Step 1.a - React Typescript
If you selected the typescript version of React follow these commands. If not, and you have selected Javascript, you can move on to the next step.
Edit the package.json file and delete the dependencies and remove "@types/react" and "@types/react-dom" from the devDependencies. After that include the following lines in the file:
"dependencies": {
"@types/react": "npm:types-react@alpha",
"@types/react-dom": "npm:types-react-dom@alpha"
},
"overrides": {
"@types/react": "npm:types-react@alpha",
"@types/react-dom": "npm:types-react-dom@alpha"
}
Below is an example of what it looks like before and after the edit.
Before (Example package.json File:)
{
"name": "react-beta-test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
}
After (Example package.json File):
{
"name": "react-beta-test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@types/react": "npm:types-react@alpha",
"@types/react-dom": "npm:types-react-dom@alpha",
"react": "^19.0.0-beta-94eed63c49-20240425",
"react-dom": "^19.0.0-beta-94eed63c49-20240425"
},
"overrides": {
"@types/react": "npm:types-react@alpha",
"@types/react-dom": "npm:types-react-dom@alpha"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
}
Step 2 - Check the React version installed
To check that we have the right version we can edit the src/App.tsx file and change the first line:
From:
import { useState } from "react";
To:
import { useState, version } from "react";
and edit the line 19, from:
<h1>Vite + React </h1>
to:
<h1>Vite + React {version}</h1>
after in a terminal run: npm run dev
Hopefully, you should see something similar to the image on the top of this post. If not, leave me a comment below.
Connect with me
If you like this article be sure to leave a comment. That will make my day!
If you want to read other stuff by me you can check out my personal blog.
If you want to connect with me you can send me a message on Twitter/X.
You can also check other stuff that I have going on here
Top comments (0)