Your first component

Define a component, nest components inside each other, and move them into their own files with export and import.

You have seen components already. Now you will write them yourself, from an empty file. This is the moment where everything from today comes together: functions, export default, imports and JSX.

By the end of this lesson you will have everything you need for today's project step, a BookCard component for the Reading List.

Defining a component

A component takes three steps:

Export it, if other files need it (export default).
Define a JavaScript function whose name starts with a capital letter.
Return some JSX.

Live code· A first component

That is a complete component. Here, Quote is the default export of App.js, so it is the one the sandbox shows.

When the JSX spans several lines, wrap it in round brackets after return. Without them, JavaScript treats the line break after return as the end of the statement, and the component returns nothing.

Lowercase component names

React uses the first letter to tell your components apart from HTML tags. <quote /> (lowercase) is treated as an HTML tag called "quote", which does not exist, so nothing useful appears.

// Wrong: React looks for an HTML tag called <bookCard>
function bookCard() {
  return <h2>Dune</h2>;
}

// Right
function BookCard() {
  return <h2>Dune</h2>;
}

Using and nesting components

Once you have defined a component, you can use it inside another component like a tag: <Quote />. You can use it as many times as you like. This is nesting, and it is how a whole app is built.

Live code· Nesting components

App is the parent of Header and Quote, and they are its children. App is also the root component: the one at the top of the tree, which main.jsx hands to createRoot.

Notice that the two quotes are identical. A component that always shows the same thing is not very reusable yet. Tomorrow you will give components inputs, called props, so each copy can show different data.

Defining a component inside another component

Always define components at the top level of a file, side by side. Never define one inside another.

// Wrong: Quote is re-created every time App runs
export default function App() {
  function Quote() {
    return <p>...</p>;
  }
  return <Quote />;
}

// Right: both at the top level
function Quote() {
  return <p>...</p>;
}

export default function App() {
  return <Quote />;
}

Defining a component inside another one creates a brand-new component each time the outer one runs. React then throws away everything inside it and starts again, which is slow and causes strange bugs once you add state on Day 3.

Components in their own files

As an app grows, one file per component keeps things tidy. Move a component into its own file, export default it there, and import it where you need it. The file is usually named after the component.

Live code· One component per file

Click the Header.js and Quote.js tabs to see each file. This is exactly the module system from earlier today: each component is a default export, imported without braces.

In your own Vite project, these files would be src/Header.jsx and src/Quote.jsx, and you would import them with import Header from './Header.jsx'.

Deep diveWhat does React do with your component?

You never call a component yourself, like Header(). You write <Header />, and React calls the function for you when it needs to know what to draw. This step is called rendering. Because React is in charge of calling your components, it can decide when to call them again, for example after your data changes. That is why components must be plain functions that return JSX, and why Day 2 talks about keeping them pure.

Try it

Build a page from components

Create two new components in this sandbox:

Footer, in its own file Footer.js, which shows a paragraph: "Made with React".
Stats, defined in App.js (at the top level), which shows "3 books read this month".

Then render the page in this order: Header, Stats, Footer.

Live code· Challenge: build a page

Show solution

Footer.js

export default function Footer() {
  return <p>Made with React</p>;
}

App.js

import Header from './Header.js';
import Footer from './Footer.js';

function Stats() {
  return <p>3 books read this month</p>;
}

export default function App() {
  return (
    <main>
      <Header />
      <Stats />
      <Footer />
    </main>
  );
}

Footer is a default export, so App.js imports it without braces. Stats lives in the same file as App, but outside it, at the top level.

Quick check

Why does React need component names to start with a capital letter?

Quick check

Header.js has export default function Header() {...}. How do you use it in App.js?

Day 1 progress

0/8

Next: Describing the UI

Defining a componentCopy Anchor Link

Using and nesting componentsCopy Anchor Link

Components in their own filesCopy Anchor Link

On this page

Defining a component

Using and nesting components

Components in their own files