Rendering elements in React

Introduction

Rendering elements means showing things on the screen using React. It helps you display text, images, or other content in your app.

When you want to show a greeting message on a webpage.

When you need to display a list of items like tasks or products.

When you want to update what the user sees after they click a button.

When you want to show different content based on user actions.

When you want to build a user interface that changes over time.

Syntax

React

const element = <tag>content</tag>;
ReactDOM.createRoot(document.getElementById('root')).render(element);

Use JSX syntax inside <tag></tag> to create elements.

The render method shows the element inside the chosen HTML container.

Examples

This shows a big heading with the text "Hello, world!" on the page.

React

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

This renders a simple paragraph on the screen.

React

const element = <p>This is a paragraph.</p>;
ReactDOM.createRoot(document.getElementById('root')).render(element);

This shows a clickable button labeled "Click me".

React

const element = <button>Click me</button>;
ReactDOM.createRoot(document.getElementById('root')).render(element);

Sample Program

This React code creates a heading element and shows it inside the HTML element with id "root".

React

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

const element = <h2>Welcome to React!</h2>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

Important Notes

Always make sure your HTML container (like a div with id "root") exists in your HTML file.

JSX looks like HTML but it is JavaScript under the hood.

React updates the screen efficiently when elements change.

Summary

Rendering elements means showing content on the screen using React.

Use JSX syntax to create elements and render to display them.

This is the first step to building interactive React apps.