React is a powerful JavaScript library used to build dynamic user interfaces, especially for single-page applications. One of the core concepts in React is “rendering”—the process by which React displays content on the web page. This is typically done using HTML-like syntax called JSX, which React transforms into real HTML that the browser can understand and display.
Let’s explore what it means to render HTML in React, how it works, and how developers use it effectively.
What Does “Render HTML” Mean in React?
In plain JavaScript, if you want to display some HTML, you might use:
document.getElementById("root").innerHTML = "<h1>Hello World</h1>";
In React, you do something similar, but in a more structured and efficient way. React allows you to write JSX (JavaScript XML) that looks like HTML. For example:
const element = <h1>Hello World</h1>;
React takes this JSX and renders it into actual HTML inside the browser DOM.
JSX – The Heart of React Rendering
JSX is not plain HTML—it’s syntactic sugar that looks like HTML but is actually JavaScript behind the scenes. Here’s an example:
function Welcome() {
return <h1>Welcome to My Website</h1>;
}
When this component is rendered, React translates it into HTML and inserts it into the DOM like this:
<h1>Welcome to My Website</h1>
How Rendering Works in React
React uses a virtual DOM—a lightweight copy of the actual DOM. When you update something in your UI, React updates the virtual DOM first. Then, it compares the new virtual DOM with the previous one and efficiently updates only the parts that changed.
This process is known as “Reconciliation”, and it helps React render HTML very quickly without reloading the entire page.
Example: Rendering HTML in React
Here’s a complete example:
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
<div>
<h1>Flower Shop</h1>
<p>Fresh flowers delivered to your door.</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
In this code:
- The
Appfunction is a React component. - It returns JSX that looks like HTML.
ReactDOM.render()takes this component and displays it inside the HTML element with idroot.
Where Does React Render HTML?
React usually renders content into a single HTML element—commonly a <div id="root"></div> in your index.html file.
Example:
<!-- public/index.html -->
<body>
<div id="root"></div>
</body>
React inserts all your JSX-based HTML inside this element.
Conditional Rendering
React also supports conditional rendering. You can decide what HTML to render based on some logic.
function Greeting(props) {
if (props.isLoggedIn) {
return <h1>Welcome Back!</h1>;
} else {
return <h1>Please Sign In</h1>;
}
}
Rendering Lists
You can dynamically render HTML lists using the .map() function:
const flowers = ["Rose", "Lily", "Tulip"];
function FlowerList() {
return (
<ul>
{flowers.map((flower, index) => (
<li key={index}>{flower}</li>
))}
</ul>
);
}
Inline HTML Styling in React
React uses a different syntax for styling. Instead of regular CSS strings, you use JavaScript objects:
const style = {
color: "red",
fontSize: "20px"
};
function StyledText() {
return <p style={style}>Beautiful Flowers</p>;
}
Why React Rendering is Powerful
- Reusable Components: React encourages splitting the UI into components that can be reused.
- Performance: React only updates parts of the DOM that actually changed.
- Declarative Code: You describe what you want to see, and React handles the rendering.
- Dynamic UI: It’s easy to render different HTML based on user interaction or data changes.
Summary
React rendering is the process of converting JSX into real HTML and displaying it in the browser. By using JSX, components, and the virtual DOM, React makes it fast and easy to build dynamic web applications.
In short:
- JSX looks like HTML but works with JavaScript.
ReactDOM.render()puts your component into the DOM.- React updates only what changes—making rendering efficient.
React’s rendering system is what makes it so popular for building modern, interactive websites and web apps.