How to upgrade to React 18?

Install React 18 and React DOM from npm or yarn, like this:

npm install react react-dom

Then, you’ll want to use createRoot instead of render.

In your index.js, update ReactDOM.render to ReactDOM.createRoot to create a root, and render your app using root.

Here’s what it would look like in React 17:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.render(<App />, container);

And here’s what it looks like in React 18:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// create a root
const root = ReactDOM.createRoot(container);

//render app to root
root.render(<App />);

That’s how easy it is to upgrade React to V18.

Related Posts

semantic html

SEO Secret Weapon: Leverage Semantic HTML for Better Results

In the ever-evolving world of SEO, the key to success lies in clear communication, not just with your users, but also with search engines. This is where…

React Data Fetching & Management

Level Up Your React: Data Fetching & Management

Welcome back to the React 101 series! In this edition, we’ll learn about how to fetch data from APIs and manage data flow within your React applications….

secure nodejs

Securing Your Node.js Application: Best Practices and Strategies

Node.js is a popular and powerful runtime for building server-side applications with JavaScript. However, as with any web application, security should be a top priority. In this…

learning css variables

Learn CSS Variables and Theme Your Websites Like a Master

Elevate your web development game by embracing the power of CSS theming and providing users with a visually captivating and personalized experience.

React 19 New Features

React 19: New Features and Upcoming Major Releases in 2024

Get ready for some exciting news from the ReactJS official blog! If you love ReactJS, you’re in for a treat. We’ll take you through the latest cool stuff, like the supercharged React Compiler, the game-changing Actions, and new features in React Canary.

building ui elements with jsx

Building UI Elements with JSX and Components

Ready to dive into React? This chapter unlocks the secrets of JSX – writing HTML right in your JavaScript! We’ll also explore components, the reusable powerhouses of React .

Leave a Reply

Your email address will not be published. Required fields are marked *