When starting out with React, one of the most frustrating hurdles is watching your code compile without errors only to be greeted by a completely blank screen. If you've set up your component, imported hooks like useState, and verified your HTML, but still see nothing rendering, you are likely missing a single, crucial step: mounting your component to the DOM.

The Root Cause: Defining vs. Rendering

In the provided code, the Greeting functional component is declared correctly, and the useState hook is properly hooked up to manage the text input:

function Greeting() {
  const [name, setName] = useState("");
  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="enter your name"
      />
      <p>Hello, {name}</p>
    </div>
  );
}

However, React components do not render themselves automatically. A component is essentially a JavaScript blueprint. To tell React where and when to draw that blueprint inside the browser, you must explicitly connect it to an existing HTML container using React's rendering API.

The Solution: Connect React to the DOM with createRoot

Since React 18, the standard method for mounting a component into an HTML element is ReactDOM.createRoot(). In your HTML, you already prepared a target container:

<div id="Greeting"></div>

Now, add the following lines at the bottom of your JavaScript file to mount the component into that div:

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

Complete Working Code

Here is how your JavaScript file should look with everything put together:

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function Greeting() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="enter your name"
      />
      <p>Hello, {name}</p>
    </div>
  );
}

// Mount the component to the DOM
const root = ReactDOM.createRoot(document.getElementById("Greeting"));
root.render(<Greeting />);

Running React Smoothly in CodePen

If you are using CodePen specifically, there are two additional environment settings to check to ensure React works as expected:

  • Enable JSX Preprocessing: Under the JS Settings in CodePen, set the JavaScript Preprocessor to Babel. Plain JavaScript cannot parse JSX syntax (like <div> inside JS) natively without a compiler.
  • Ensure Package Resolution Works: If you are using native ES module imports (import React from "react"), ensure you have configured package imports via an import map, or use a CDN URL like https://esm.sh/react and https://esm.sh/react-dom/client. Alternatively, use CodePen's built-in external script search to load react and react-dom globally.

Quick Checklist for Blank React Screens

Whenever a React screen is blank without a console error, check the following:

  • Did you call createRoot().render(...)?
  • Does the id in document.getElementById() match the id in your HTML?
  • Is your JSX transpiler (like Babel or Vite) running properly?
  • Did you remember to export/import the component correctly if using multiple files?