React Render HTML

Navdeep kaur React

If you are interested to learn about the React Array Methods

React’s goal is in many ways to render HTML in a web page. React renders HTML to the web page by using a function called ReactDOM.render().

The Render Function

The ReactDOM.render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.

But render where?

There is another folder in the root directory of your React project, named “public”. In this folder, there is an index.html file. You’ll notice a single <div> in the body of this file. This is where our React application will be rendered.

Example

Display a paragraph inside an element with the id of “root”:

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

The result is displayed in the <div id="root"> element:

<body>
  <div id="root"></div>
</body>

How it works

It renders a provided HTML string into a React element.

import renderHTML from 'react-render-html';
 
renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")
// => React Element
//    <a className="github" href="https://github.com"><b>GitHub</b></a>

It may be used in the render method in a React component:

let App = React.createClass({
  render() {
    return (
      <div className='app'>
        {renderHTML(someHTML)}
      </div>
    );
  }
});
ReactDOM.render(renderHTML(someHTML).document.getElementById('app'));

If a provided HTML contains several top-level nodes, the function will return an array of React elements.

renderHTML('<li>hello</li><li>world</li>');
// => [React Element <li>hello</li>, React Element <li>world</li>]

Pros and cons

Pros

  • Can make use of React’s reconciliation for plain HTML too
  • Fully compatible with JSX

Cons

  • It uses parse5 to parse HTML, which can result in large bundle size
  • Can result in slower rendering speed, mainly for parsing

Install

Install with NPM:

npm i --save react-render-html

Import with CommonJS or whatever:

const renderHTML = require('react-render-html'); import renderHTML from 'react-render-html';

A bug!

When a bug is found, please report them in Issues. Also, any form of contribution(especially a PR) will absolutely be welcomed 🍻

Methods for rendering HTML

Easiest – Use Unicode, save the file as UTF-8 and set the charset to UTF-8.

<code>;div>{'First · Second'} /div></code>

Safer – Use the Unicode number for the entity inside a Javascript string.

<code>;div>{'First \u00b7 Second'};/div></code>or<code>;div>{'First ' + String.fromCharCode(183) + ' Second'};/div></code>

Or a mixed array with strings and JSX elements.

<code>;div>{['First ' ;span>&amp;middot;;/span>, ' Second']};/div></code>

Last Resort – Insert raw HTML using dangerouslySetInnerHTML.

<code>;div dangerouslySetInnerHTML={{__html: 'First &amp;middot; Second'}} /></code>

Rendering Elements

Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen:

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

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

Rendering an Element into the DOM

Let’s say there is a <div> somewhere in your HTML file:

<div id="root"></div>

We call this a “root” DOM node because everything inside it will be managed by React DOM. Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

To render a React element, first pass the DOM element to ReactDOM.createRoot(), then pass the React element to root.render():

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Try it on CodePen

It displays “Hello, world” on the page.

React Render HTML
Show Buttons
Hide Buttons