Rendering of HTML in React

Rendering HTML in React is a fundamental aspect of building user interfaces. In React, HTML is rendered using JSX (JavaScript XML), a syntax extension that looks similar to XML or HTML. JSX allows developers to write HTML-like code within JavaScript, making it more readable and expressive. Here’s how you can render HTML in React components:

Table of Contents

1. JSX Syntax:

In React, JSX allows you to write HTML-like code directly in your JavaScript files. JSX elements resemble HTML elements but are actually JavaScript objects. JSX gets compiled into JavaScript by tools like Babel.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a React component rendering HTML.</p>
    </div>
  );
};

export default MyComponent;

2. Expressions in JSX:

You can embed JavaScript expressions within JSX using curly braces {}. This allows you to dynamically generate content based on variables or expressions.

import React from 'react';

const MyComponent = () => {
  const name = 'John';

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>This is a React component rendering HTML.</p>
    </div>
  );
};

export default MyComponent;

3. Rendering HTML Tags Dynamically:

You can use variables or expressions to dynamically render HTML tags or components based on certain conditions.

import React from 'react';

const MyComponent = () => {
  const isUserLoggedIn = true;

  return (
    <div>
      {isUserLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>}
    </div>
  );
};

export default MyComponent;

4. Rendering HTML from Props:

Passing data to React components through props allows you to render dynamic content.

import React from 'react';

const Greeting = (props) => {
  return <p>Hello, {props.name}!</p>;
};

const App = () => {
  return <Greeting name="John" />;
};

export default App;

5. Using HTML Entities:

If you need to render special characters or HTML entities, you can use them directly in JSX.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <p>&copy; 2023 My Company</p>
      <p>&#9733; Star Rating: 4.5</p>
    </div>
  );
};

export default MyComponent;

In summary, rendering HTML in React is achieved through JSX, allowing developers to seamlessly integrate HTML-like syntax within JavaScript. JSX provides a concise and expressive way to build user interfaces while leveraging the power of JavaScript for dynamic content and interactivity.

React render HTML by ReactDOM.render() function. ReactDOM.render() uses two parameters to render HTML.

Example:

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

The output of this will display in index.html root div

E.g

<body>

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

</body>

In React HTML tags use JSX to write code in javaScript