Hello World

React · Reference cheat sheet

📋 Overview

React Hello World is a component that returns a simple element (often an <h1>). Once it appears in the browser via your app’s root render, your toolchain is working.

🔧 Core concepts

In Vite, main.jsx mounts <App /> into #root.

💡 Examples

Minimal App:

export default function App() {
  return <h1>Hello, World!</h1>;
}

With a child component:

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

export default function App() {
  return (
    <div>
      <Hello />
      <p>Welcome to React.</p>
    </div>
  );
}

Mount (Vite-style main.jsx):

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Expression in JSX:

const name = "Ada";
export default function App() {
  return <h1>Hello, {name}!</h1>;
}

⚠️ Pitfalls

• getElementById("root") must match an element in index.html.
• Returning two sibling elements needs a wrapper or fragment (<>...</>).
• class in JSX is written className.
• Browser console errors are your friend — read the first red message carefully.

🔗 Related

• getting_started.md
• thinking_in_react.md
• fragments.md
• strict_mode.md