Your first component

Your first component

Components exist because whole pages are too big to reason about. A component is a named, reusable piece of UI with its own function: a navbar, a search box, one row of a list. Real React codebases are thousands of them, and teams split work along component boundaries, one person owns the checkout form, another owns the product card. Here is a real React component:

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

Two new things:

• JSX: the <h1>...</h1> inside JavaScript. It looks like HTML but it is JavaScript syntax that describes UI. We cover its rules in the next lesson.
• Capitalized name: component names always start with a capital letter, Greeting not greeting. That is how React tells your components apart from built-in tags like h1.

Once defined, you use a component like a custom HTML tag:

<Greeting />

When React sees <Greeting />, it calls your Greeting function and uses whatever it returns.

How a component reaches the page

A React app has one entry point. You pick a real DOM element (usually a <div id="root"> from Web Development Fundamentals) and hand React control of it:

import { createRoot } from "react-dom/client";

function App() {
  return (
    <div>
      <h1>My first app</h1>
      <p>Rendered by React.</p>
    </div>
  );
}

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

You call root.render once. From then on you never touch the DOM again. React owns everything inside #root and repaints it whenever data changes.

React code will not run in this course's plain JavaScript sandbox, because JSX needs a build step to compile. So we read and predict JSX here, and use runnable plain JavaScript whenever the concept is really a JavaScript concept.