Rendering Elements in React

React components describe what the user interface should look like, but they still need to be rendered to appear on the screen.

In a typical React application, there is a single root element in the HTML file. React uses this root as the entry point where the entire application is rendered.

Below is a simplified example of how a component is rendered:

import ReactDOM from "react-dom/client";

function App() {
  return <h1>Hello, React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

In this example, React takes the App component and renders it inside the HTML element with the id root. You do not need to memorize this code yet. It is here to show how React connects components to the page.

Once rendered, React automatically updates the UI when the component output changes. This allows you to focus on describing the UI instead of manually updating the page.