ReactDOM.render() Method in react js

by

React apps are mainly created using components that encapsulate a part of the user interface’s logic and presentation. To make these components visible on a web page, you can use ReactDOM.render() in react js to insert them into the actual HTML DOM.

ReactDOM.render() works as the bridge between the virtual representation of your components and the real DOM, allowing React to manage and update the user interface efficiently.

What is ReactDOM.render()

ReactDOM.render() is a javascript library for rendering the React components into the DOM (Document Object Model) of a web page.

It is mainly used to render a single root component into an HTML element on your web page.

Syntax –

ReactDOM.render(ElementOrComponent, DOMnode)
  • ElementOrComponent – It must be the react element or component at the first argument
  • DOMnode – It must be a selector that can render the react element or component to the specified position in the DOM.

Example –

ReactDOM.render(<h1>Welcome to CodingStatus</h1>, document.getElementById(“root”))

ReactDOM.render() returns an Element

If you need to render an element to the DOM in React JS, then you must use the ReactDOM.render() method.

Example –

reactElement = <h1>Welcome to CodingStatus!</h1>;
ReactDOM.render(reactElement, document.getElementById('root'));

ReactDOM.render()  returns a Component

If you need to render a component to the DOM in React JS, then you must use the ReactDOM.render() method

class App extends React.Component { 
    render() {return(<h1>Welcome to CodingStatus!</h1>);}
}
ReactDOM.render(<App />, document.getElementById('root'));

 

Steps to use ReactDOM.render()

Now, let’s start to use ReactDOM.render() with these simple steps

1. Create a React Component

You should create a React class or function component that you want to render to the dom.

function MyComponent() {
  return <div>Hello, CodingStatusd!</div>;
}

2. Select a DOM Element

Select an HTML element in your webpage using document.getElementById() (You may use other dom selection methods) where you want to render your React component.

In this example, we assume you have an HTML element with an id of “root” where you want to render your React component.

const rootElement = document.getElementById('root');

3. Import React and ReactDOM

First of all, you have to import React and ReactDOM at the beginning of the file.

import ReactDOM from 'react-dom';

4. Call ReactDOM.render()

Now, call ReactDOM.render() to render your React component into the selected DOM element.

This method takes two arguments:

  • The first argument is the component. In this case, it’s MyComponent.
  • The second argument is the HTML element. In this case, it’s rootElement.
ReactDOM.render(<MyComponent />, rootElement);

Here, we are rendering the MyComponent into the rootElement.

Note –  It will create an instance of your MyComponent, build a virtual DOM representation of it, and then efficiently update the real DOM inside the rootElement.

If this is the initial render, it will create the DOM elements and insert them into the rootElement.

If it’s a subsequent render, React will update the DOM to reflect any changes in your component’s state or props.

Suggestion

ReactDOM.render() has been available since the very beginning of React, starting with version 0.3.0, and it continues to be a fundamental part of React for rendering components into the DOM.

Note –

  • In the latest version of React, ReactDOM.render() is no longer used in React app.
  • React version 18 introduced a new way to render components using ReactDOM.createRoot(), and this feature is still in use in the latest React version.

We’ve shared simple steps with you to use ReactDOM.render() method. You’re now familiar with this method and understand why it’s important to learn.

If you found this tutorial helpful, please share it with your friends so they can learn too