Your first component

What a component is

Lesson 1-2's render(user) was a plain function that turned data into UI, and in React terms a component is exactly that: a function that takes data and returns a description of UI.

A React component is a JavaScript function that receives data and returns a description of what should appear on screen. React calls it whenever it needs to draw or redraw that part of the page.

Note the two halves of that sentence, because both are load-bearing. It is a function, so everything you know about arguments, return values, and purity applies, and it returns a description rather than touching the page, which is what lets React decide when and how often to call it.

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 needs a build step to compile JSX, so it cannot be shown running here. So we read and predict JSX, and use plain JavaScript examples whenever the concept is really a JavaScript concept.

Reading a component with no inputs

function Status() {
  return <p>All systems go</p>;
}

root.render(<Status />);

The screen shows a paragraph reading All systems go.

React sees <Status />, calls the Status function, gets back the <p> description, and puts a real paragraph in the DOM. Components with no inputs are perfectly valid, and plenty of real ones are exactly this shape, such as a footer, a logo, or a loading spinner.

The self-closing syntax is required here, so <Status /> rather than <Status>. That is rule 2 from the next lesson arriving early, and forgetting the slash is a compile error rather than a subtle bug.

Note that root.render(<Status />) does not call Status yourself. You hand React the description <Status />, and React decides to call the function, which is why you never write root.render(Status()) even though it looks equivalent.

How React tells components from HTML tags

React checks capitalization, specifically whether the tag name starts with a capital letter.

Lowercase tags like div or h1 become real DOM elements, and capitalized tags like Greeting are treated as your component functions, so React calls them.

Writing <greeting /> would make React look for a built-in HTML tag named greeting, which does not exist, so nothing useful renders and no error necessarily appears. That silence is what makes the mistake annoying, since a lowercase component name produces an empty spot on the page rather than a crash.

The rule exists because JSX compiles to function calls, which the next lesson shows. A lowercase name compiles to the string "div", and a capitalized name compiles to the variable Greeting, so the capital letter is what turns a tag into a reference to your code.

That also explains a related rule you will hit later. A component stored on an object, as in <Icons.Star />, works because of the dot, and a component in a lowercase variable does not work at all no matter what it contains.