React Hello World!

"Hello World" in React is the first step of building a simple application with the library. React is a popular JavaScript library for building user interfaces, and a "Hello World" program is the classic first step when learning a new language or technology.

A React "Hello World" usually involves these steps:

1. Adding React: The React and ReactDOM libraries are added to the project — either with <script> tags in an HTML file or installed with npm or yarn in a Node.js project.

2. Creating a root DOM element: The HTML contains a root element (root), usually a <div>, where React renders the components.

3. Writing a component: In its simplest form a component describes what to show. In "Hello World" it is a function that returns the text "Hello, World!".

4. Rendering with ReactDOM: ReactDOM.createRoot() creates a React root for the DOM element, and root.render() renders the component into it.

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

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

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

This code shows the heading "Hello, World!" on the page — the basic use of React and a good starting point for beginners.

Note: Before React 18, components were rendered with ReactDOM.render(<HelloWorld />, document.getElementById('root')). That method was deprecated in React 18 and removed in React 19.