Hello World App in React

By Darío Rivera

Posted On 2026-01-28 in React

Previously, we've seen different ways to create a React Project. Today, we will build the classic Hello World example using React, without installing build tools, bundlers, or frameworks. This approach is ideal for learning the basics and understanding how React works at its core.

We start with a simple HTML file. React will mount itself inside a single root element.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Hello World in React</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="main.js"></script>
    </body>
</html>

Instead of installing React with npm, we'll make it simple and import it directly using ES modules. Create a file called main.js

import React from "https://esm.sh/react@19";
import ReactDOM from "https://esm.sh/react-dom@19/client";

This allows us to use React in a modern browser without any build step. In React, the UI is built using components. A component is just a JavaScript function that returns JSX. Add the following to the main.js file.

function App() {
  const message = "Hello World";

  return (
    <div>
      {message}
    </div>
  );
}

JSX looks like HTML, but it is actually JavaScript. This is where React handles rendering and interpolation.

To display our component on the page, we create a React root and render the component.

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render();

Let's see how this example looks in CodePen.

See the Pen Hello world! React.js v19 by Darío Rivera (@fermius) on CodePen.

Opening the HTML file in the browser will display the text "Hello World". From here, you can start exploring state, events, and more advanced concepts. Happy coding 🚀.

Categories