Your first JSX content

In this section, we'll implement the obligatory "Hello, World" JSX application. At this point, we're just dipping our toes in the water; more in-depth examples will follow. We'll also discuss what makes this syntax work well for declarative UI structures.

Hello JSX

Without further ado, here's your first JSX application:

import * as React from "react";
import * as ReactDOM from "react-dom";
 
const root =
  ReactDOM.createRoot(document.getElementById("root"));
 
root.render(
  <p>
    Hello, <strong>JSX</strong>
  </p>
);

Let's walk through what's happening here.

The render() function takes JSX as an argument and renders it to the DOM node passed to ReactDOM.createRoot().

The actual JSX content in this example renders a paragraph with some bold text inside. There's nothing fancy going on here, so...