The React.createRoot function method should be the first function called on your React application. It replaces the older ReactDOM.render method (since React v18) and has several improvements that help make your application more efficient and responsive.
Here is the smallest possible React JS application and how you must use the createRoot function to begin using React:
1import React from 'react'; 2import ReactDOM from 'react-dom/client'; 3 4// Define a simple component that will be your entire React.js app (for now) 5const App = () => { 6 return ( 7 <div>Hello, World!</div> 8 ); 9}; 10 11// Create a root container and render the component 12const root = ReactDOM.createRoot(document.getElementById('root')); 13root.render(<App />);
The entire React.js is just a magic trick to make the developer's life easier, in reality, the only way to make dynamic websites with javascript is using the document object model, and it's really annoying to use it.
React still has to connect to the DOM before it can start doing its thing, the ReactDOM.createRoot method was created just for that; it binds your first ever react component (usually called <App>) to your first html div (usually with the id root).
You need a traditional and -almost- empty HTML website with at least one <div> tag with the ID root like this:
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Smallest React App</title> 7</head> 8<body> 9 <div id="root"></div> 10 <script src="index.js"></script> 11</body> 12</html>
And then you can call the ReactDOM.createRoot function using javascript like this:
1// Create a root container and render the component 2const root = ReactDOM.createRoot(document.getElementById('root')); 3root.render(<App />);
Note how the
<App />component is referenced as the first React.js component on this application.
After calling the createRoot function, you don't have to care about The DOM ever again, you can create as many react js components as you need and reference them within the code, for example:
1const Card = () => { 2 return ( 3 <div>I'm a card</div> 4 ); 5}; 6 7// Your main App component 8const App = () => { 9 return ( 10 <div>Hello, World!</div> 11 <div>Here is the cars: <Card /></div> 12 ); 13}; 14 15// Create a root container and render the component 16const root = ReactDOM.createRoot(document.getElementById('root')); 17root.render(<App />);
ReactDOM.render is no longer usedIn previous versions of react we used ReactDOM.render instead of ReactDOM.createRoot but that function is deprecated and not recomended any more. The switch was made since React v18 because the new function has way better performance and many other advantages like:
ReactDOM.render vs ReactDOM.createRootIf we want to get technical, what makes createRoot a better function is its capacity to do concurrent rendering: Concurrent rendering allows React to work on multiple tasks simultaneously. It can start rendering an update, pause it if something more urgent comes up (like user input), and then continue the rendering process later. This non-blocking behavior helps keep the UI responsive.