React Element Rendering | Tutorial

React Element Rendering

In React 18, element rendering has some changes compared to previous versions, especially regarding the use of ReactDOM.createRoot and new concurrent features. Below is a detailed example and explanation showing how to render elements in React 18.

Example

import React from 'react';
import ReactDOM from 'react-dom/client';

// Create a simple React component
function App(){
  return <h1>Hello, React 18!</h1>;
}

// Get the DOM container with id "example" and create a React root node
const root = ReactDOM.createRoot(document.getElementById("example"));

// Render the React component into the root node in the DOM
root.render(<App />);

React elements are the smallest building blocks of React applications. They describe what you want to see on the screen. React elements are immutable objects; once created, they cannot be changed.

const element = <h1>Hello, world!</h1>;

Unlike browser DOM elements, React elements are actually plain objects. React DOM ensures that the browser DOM data matches the React elements.

Rendering Elements to the DOM

First, we add a <div> with id="example" to an HTML page:

<div id="example"></div>

All content within this div will be managed by React DOM, so we call it the "root" DOM node.

When developing React applications, we typically define only one root node. However, if you are integrating React into an existing project, you might need to define separate React root nodes in different sections.

To render React elements into the root DOM node, we pass them to the root.render() method to display them on the page:

Example

// Create a React element
const element = <h1>Hello, world!</h1>;

// Get the DOM container and create a root node
const root = ReactDOM.createRoot(document.getElementById("example"));

// Render the React element into the root node in the DOM
root.render(element);

Try it »

The root.render method renders the element into the previously created root node, so the element will be displayed within the DOM element with id "example".

Updating Rendered Elements

React elements are immutable. Once an element is created, you cannot change its content or attributes.

The only way to update the UI currently is to create a new element and pass it to the ReactDOM.render() method:

Let's look at this timer example:

Example

const root = ReactDOM.createRoot(document.getElementById("example"));

function tick(){
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>The current time is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

Try it »

The above example uses the setInterval() method to call ReactDOM.render() every second.

We can encapsulate the part to be displayed. The following example uses a function to represent it:

Example

function Clock(props){
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>The current time is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick(){
  const root = ReactDOM.createRoot(document.getElementById("example"));
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

Try it »

In addition to functions, we can also create an ES6 class that extends React.Component. This class encapsulates the elements to be displayed. Note that in the render() method, you need to use this.props instead of props:

Example

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>The current time is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick(){
  const root = ReactDOM.createRoot(document.getElementById("example"));
  root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

Try it »

React Only Updates What's Necessary

It's worth noting that React DOM first compares the differences in element content before and after, and during the rendering process, it only updates the parts that have changed.