Cookie Consent by Free Privacy Policy Generator 📌 How to install React 19 Beta


✅ How to install React 19 Beta


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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

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

...

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 29.08 Punkte

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 29.08 Punkte

✅ What’s New in React 19? React Canaries, Actions, and React Compiler


📈 21.81 Punkte

✅ Handling React OTP Input Auth Web | React Native using react-otp-kit package


📈 21.81 Punkte

✅ Handling React OTP Input Auth Web | React Native using react-otp-kit package


📈 21.81 Punkte

✅ How to install React 19 Beta


📈 18.37 Punkte

✅ Apple Seeds iOS 10.3.2 Beta 1 to Public Beta Testers, Here's How to Install It


📈 16.04 Punkte

✅ Apple Outs iOS 12.4 Beta 6, macOS Mojave 10.14.6 Beta 4, and watchOS 5.3 Beta 5


📈 14.8 Punkte

✅ Apple Outs iOS 12.4 Beta 5, watchOS 5.2 Beta 4, and macOS Mojave 10.14.6 Beta 3


📈 14.8 Punkte

✅ React Rooting (react-router-dom)


📈 14.54 Punkte

✅ Build complex PDFs using React: react-print-pdf


📈 14.54 Punkte

✅ Оптимизация React приложения с помощью React.lazy


📈 14.54 Punkte

✅ How To Create Alert In React JS. Master Alerts In React JS.


📈 14.54 Punkte

✅ React Hook Form's Ritual: Elegant Forms in React


📈 14.54 Punkte

✅ Demystifying React Memoization: Understanding React.memo() and the useMemo hook


📈 14.54 Punkte

✅ Figma to React: Convert designs to clean React code


📈 14.54 Punkte

✅ React Testing Library Tutorial – How to Write Unit Tests for React Apps


📈 14.54 Punkte

✅ 21 Must-Bookmark React GitHub Repositories Every React Developer Should Know


📈 14.54 Punkte

✅ This Week In React #179: useActionState, Redwood, React-Navigation, RN-Screens, CodePush, VisionOS...


📈 14.54 Punkte

✅ Elevating React Development: Unleashing the Power of ChatGPT for React Developers


📈 14.54 Punkte

✅ React TypeScript - Vite + React


📈 14.54 Punkte

✅ Build complex PDFs using React: react-print-pdf


📈 14.54 Punkte

✅ This Week In React #187: Next.js, Expo, Popover, rethrow, SWR, React-Query, Astro, PPR...


📈 14.54 Punkte











matomo

Datei nicht gefunden!