Render HTML

Rendering HTML in React might sound like a complicated task, but it’s actually quite simple once you understand the basics. In this tutorial, you will learn how to render HTML in React using several methods.

So, let’s get started with an overview of what is happening behind the scenes before rendering HTML.

Before Rendering HTML in React.js

When rendering HTML in a React application, several processes occur behind the scenes. These steps transform the React components into actual HTML elements that users can see in their browsers.

Here is what happens in detail:

Component Definition

When you define React components, they can be either class-based or function components. Each component returns a description of what the UI should look like.

JSX Compilation

It is time for JSX compilation, as the browser cannot understand JSX code, so Babel compiles it into JavaScript. Here is an example of compilation: <span>Hello CodedTag!</span> is compiled to React.createElement('span', null, 'Hello CodedTag!');.

Virtual DOM Creation

React keeps a simple version of the real DOM called the virtual DOM. When a component shows up on the screen, React makes a virtual DOM tree from the component’s JSX. This virtual DOM is a JavaScript object that looks like the actual DOM’s structure.

Reconciliation

When props or state change, React update the Virtual DOM. That can happen, according to a diffing algorithm to determine what has changed between the previous and current virtual DOM states.

Real DOM Updates

After determining the changes, React updates the real DOM. It does this efficiently by only changing the parts of the DOM that have actually been altered. This minimizes the number of manipulations and improves performance.

Finally, the real DOM updates are rendered to the screen. The browser takes care of displaying the updated DOM elements to the user.

Anyway, let’s see how to render the HTML using the render method in the following section.

Rendering HTML Using the Render Method

Acctually, the render method is a part of React’s Component class. It returns a single React element, which is then rendered to the DOM. Here’s a basic example:

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

class CodedTagSection extends React.Component {
  render() {
    return (
      <div>
        <h5>React.js Tutorial - CodedTag</h5>
        <b>Welcome to CodedTag Tutorial!</b>
      </div>
    );
  }
}

ReactDOM.render(<CodedTagSection />, document.getElementById('root'));

React also supports functional components, which are simpler and do not use classes. Here’s the equivalent example using a functional component:

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

const CodedTagSection = () => {
  return (
    <div>
      <h5>React.js Tutorial - CodedTag</h5>
      <b>Welcome to CodedTag Tutorial!</b>
    </div>
  );
};

ReactDOM.render(<CodedTagSection />, document.getElementById('root'));

So, the component method should have a return expression to return the HTML DOM elements. Then, pass the main component name into the render function to merge the new elements into the real DOM.

Additionally, you can render HTML tags using another method. Let’s move to the following section to see how to use it.

Rendering HTML Using dangerouslySetInnerHTML Attribute

The dangerouslySetInnerHTML attribute allows you to render raw HTML within your components. The general purpose of this attribute is that you can save raw HTML in a database, and then, when you retrieve it, it can be rendered using the dangerouslySetInnerHTML attribute.

Let’s see an example:

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

class CodedTagComponent extends React.Component {
  render() {
    const htmlContent = "<h1>Hello, CodedTag Students!</h1><p>This content is rendered using dangerouslySetInnerHTML.</p>";

    return (
      <div dangerouslySetInnerHTML={{ __html: htmlContent }}></div>
    );
  }
}

ReactDOM.render(<CodedTagComponent/>, document.getElementById('root'));

But Using dangerouslySetInnerHTML can expose your application to XSS attacks. And that can happen if the HTML content is not properly sanitized. So make sure you sanitize your inputs and it should be from trusted sources.

That’s all, let’s summarize it.

Wrapping Up

In this tutorial, you learned how to render HTML using the render function in React.js. Here are some processes that happen behind the scenes before rendering it:

Also, you understood how to display HTML using the dangerouslySetInnerHTML attribute, but using this attribute requires some attention, such as sanitizing the HTML elements to prevent your application from XSS attacks.

For more details, visit the official page of React.js. Thank you for reading. Happy Coding!