Rendering HTML In React

At the heart of rendering HTML in React is JSX, which stands for JavaScript XML. JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. It provides a more declarative way to define the structure of your UI in React components.

JSX: The Language of React Rendering

JSX Syntax

Here’s a basic example of JSX syntax:

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

In this example, the code enclosed in angle brackets <h1> and </h1> resembles HTML tags. However, this is JSX, not HTML. JSX allows you to define elements and their attributes just like in HTML, but it’s actually JavaScript code.


Embedding Expressions

One of the powerful features of JSX is the ability to embed JavaScript expressions within curly braces {}. This allows you to dynamically generate content based on variables or expressions:

const name = "Alice";
const greeting = <h1>Hello, {name}!</h1>;
 

In this example, the value of the name variable is embedded within the JSX expression, resulting in a personalized greeting.


JSX Elements as Variables

You can assign JSX elements to variables, making it easy to reuse or compose parts of your UI:

const header = <h1>Hello, React!</h1>;
const paragraph = <p>This is a React application.</p>;

const app = (
<div>
{header}
{paragraph}
</div>

);

Here, header and paragraph are JSX elements that are later combined in the app variable.


React Components: Structuring the UI

In React, rendering HTML is typically done through components. Components are reusable, self-contained building blocks of your application’s user interface. They encapsulate the logic, behaviour, and structure of a specific part of the UI.


Functional Components

Functional components are JavaScript functions that take props (short for properties) as arguments and return JSX elements. They are commonly used for rendering UI components that don’t have state or lifecycle methods.

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
 

In this example, the Greeting functional component accepts a name prop and renders a personalized greeting.


Class Components

Class components are JavaScript classes that extend React.Component. They are used when a component needs to manage its own state, handle lifecycle events, or perform more complex logic.

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>

);
}
}

Here, the Counter class component maintains a count state and updates it when a button is clicked.


Composing Components

React encourages component composition, allowing you to build complex UIs by combining simpler components. This promotes reusability and maintainability.

function UserProfile(props) {
return (
<div>
<Avatar imgUrl={props.user.imgUrl} />
<UserInfo username={props.user.username} bio={props.user.bio} />
</div>

);
}
 

In this example, the UserProfile component composes an Avatar component and a UserInfo component to display user profile information.


Rendering React Components

To render React components and display them as HTML in a web page, you need a root element. React provides a method called ReactDOM.render() to achieve this.


Rendering a Single Component

To render a single React component, you specify the component and the target HTML element where it should be rendered:

const element = <Greeting name="Alice" />;
ReactDOM.render(element, document.getElementById("root"));
 

In this example, the Greeting component is rendered within the HTML element with the id of “root.”


Rendering Multiple Components

You can also render multiple components by nesting them within a parent component or container:

const app = (
<div>
<Header />
<MainContent />
<Footer />
</div>

);
ReactDOM.render(app, document.getElementById("root"));
 

Here, the Header, MainContent, and Footer components are composed within a parent div and then rendered to the “root” element.


React Fragments: Grouping Elements Without Extra Wrappers

In some cases, you may need to group elements without adding an additional wrapping element to the DOM. React Fragments provide a solution for this by allowing you to group elements without creating extra nodes in the rendered output.

function MyComponent() {
return (
<React.Fragment>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</React.Fragment>

);
}
 

Alternatively, you can use the shorthand syntax <> and </> as a more concise way to create fragments:

function MyComponent() {
return (
<>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</>

);
}
 

This ensures that the rendered output contains only the p elements without any extra div or container elements.

Rendering HTML in React is at the core of building dynamic and interactive user interfaces. JSX allows you to declaratively define the structure of your UI, while React components provide a modular and reusable way to structure and display content. By understanding JSX, creating components, and using React’s rendering capabilities, you can efficiently build web applications with rich and responsive user interfaces.

Build something ULTIMATE!

About Us

Learn about HTML, CSS, SASS, Javascript, jQuery, PHP, SQL, WordPress. From basics to tips and tricks.

Connect With us

© 2023 Ultimate WebDev

This website uses cookies to improve your experience. By browsing this website, you agree to our cookies. Accept Read More