Components

Components

In the JSX lesson, we saw React's syntax. Now let's look at what we actually use JSX inside: components. In React, everything is built out of components -- this lesson covers what a component is and how to write and use one, with simple examples.

What Is a Component?

A component is a small, independent piece of a UI -- a button, a card, even an entire page can be a component. As we mentioned in What Is React?, a React application is really just many small components put together.

Writing a Component as a Function

At its simplest, a component is a JavaScript function that returns JSX:

// At its simplest, a component is a JavaScript function that returns JSX.
// The difference: its name starts with an UPPERCASE letter -- React treats
// names starting with a lowercase letter as normal HTML tags like "div",
// "h1", and recognizes names starting with an uppercase letter as a
// component you wrote.
function Welcome() {
  return <h1>Hello!</h1>;
}

console.log(Welcome());

That's it. There's no new syntax or special keyword -- just a regular function that returns JSX.

Using a Component (Rendering It)

Using a component (this is called "rendering" it) means writing it as a tag inside JSX:

// USING (rendering) a component means writing it into JSX like an HTML tag:
// <Welcome />. A component can also be used inside another component --
// just like App uses Welcome here.
function Welcome() {
  return <h1>Hello!</h1>;
}

function App() {
  return (
    <div>
      <Welcome />
      <p>This is my first page built with React.</p>
    </div>
  );
}

console.log(App());

<Welcome /> works just like writing <h1> or <div> -- the only difference is that this one is a component you wrote. A component can also be used inside another component, like App using Welcome.

The Component Naming Rule

How does React tell a component apart from a regular HTML tag? Simple: by whether the name starts with an uppercase or lowercase letter.

// React tells components and normal HTML tags apart by their capitalization:
// - Starts with a lowercase letter ("div", "button") -> a normal HTML tag.
// - Starts with an uppercase letter ("Welcome", "UserCard") -> your component.

function userCard() {
  // Because this function starts with a lowercase letter, even if you write
  // <userCard /> in JSX, React will try to interpret it as an unknown HTML
  // tag rather than as a component -- this is why component names must
  // ALWAYS start with an uppercase letter.
  return <div>Incorrect naming example</div>;
}

function UserCard() {
  // This is correct: a name that starts with an uppercase letter.
  return <div>Correct naming example</div>;
}

console.log(userCard(), UserCard());

A name starting with a lowercase letter (div, button, userCard) is treated by React as a regular HTML tag. That's why component names must always start with an uppercase letter (Welcome, UserCard). Forgetting this is one of the most common mistakes in this lesson.

Reusable Components

The biggest benefit of a component: write it once, use it as many times as you want.

// The biggest benefit of a component: write it ONCE, use it AS MANY TIMES
// AS YOU WANT. We can reuse the same Button component in different places
// over and over -- no need to rewrite the same HTML/CSS each time.
function Button() {
  return <button>Click</button>;
}

function Toolbar() {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
}

console.log(Toolbar());

The same Button component is used three times -- no need to rewrite the same HTML each time. In the next lesson (Props), we'll see how to customize the same component with DIFFERENT data on each use.

Summary and Glossary

A component is a function that returns JSX. Its name must start with an uppercase letter, it's used as a tag inside JSX, and it can be written once and reused as many times as needed.

Glossary

Component — A JavaScript function that returns JSX, describing a small, independent piece of a UI.

Rendering — Using a component inside JSX (like <Welcome />).

Function Component — A component written as a function (the most common kind of component in React today).