A piece of the page with a name

In Why React? you saw that React builds a page out of components: pieces like a header, a product card, or a cart. This lesson is about writing them. Here is the smallest component there is. Its result is live, under the code:

1export default function WelcomeBanner() {2  return <h1>Welcome to the tea shop</h1>;3}

Line 1 makes a function named WelcomeBanner. Line 2 is its only job: it returns <h1>Welcome to the tea shop</h1>, markup that looks like HTML, and React shows that heading on the page. That's all a component is: a JavaScript function that returns markup. Press Edit & run, change the words between <h1> and </h1>, and watch the heading follow as you type.

The markup inside a component is called JSX. It looks like HTML but it's part of your JavaScript; the next lesson, Writing markup with JSX, covers its rules. In this lesson, the JSX is plain tags like <h1>, <p>, and <article>.

Writing a component, line by line

A real component usually returns more than one tag. Here is a card for one tea on a shop's menu. The example has two files, in tabs: App.jsx with the component, and styles.css, which draws the card's border.

1export default function TeaCard() {2  return (3    <article className="tea-card">4      <h3>Green tea</h3>5      <p>Fresh leaves from the hills.</p>6      <p>$3</p>7    </article>8  );9}

It has three parts, one per job:

1. Export it. export default on line 1 is plain JavaScript, not React. It marks TeaCard as this file's main export, so another file can import it, and so the live result knows what to show.
2. Define the function. function TeaCard() on line 1 is an ordinary function declaration. Its name starts with a capital letter; the next section shows why that matters.
3. Return the markup. Lines 2 to 8 return one <article> holding a heading and two paragraphs (lines 3 to 7). className on line 3 is how JSX spells HTML's class; the next lesson explains why.

The round brackets on lines 2 and 8 matter. When the markup takes several lines, open a bracket on the same line as return. Here is what happens without one:

1function TeaCard() {2  return3    <article className="tea-card">4      <h3>Green tea</h3>5      <p>$3</p>6    </article>;7}8 9export default function App() {10  return (11    <section>12      <h2>Today's teas</h2>13      <TeaCard />14    </section>15  );16}

The result shows the heading from line 12, Today's teas, and no card. App (lines 9 to 16) uses TeaCard on line 13; the section after next explains how that works. The bug is on line 2: return stands alone. JavaScript ends a return statement at the end of its line when nothing follows it there (the semicolons lesson explains this rule), so TeaCard returns undefined and lines 3 to 6 never run. React shows nothing for a component that returns undefined, and no error tells you. Press Edit & run and change line 2 to return (, then add a line with ); after line 6, in place of its ;. The card appears.

A component can also be an arrow function stored in a constant. React treats it the same way. This course uses function declarations, as React's own documentation does:

const TeaCard = () => (
  <article className="tea-card">
    <h3>Green tea</h3>
  </article>
);

Line 1 stores the function in TeaCard. The brackets on lines 1 and 5 hold the markup the arrow function returns. It isn't exported, so this block has no result of its own.

Capital letters: your component or an HTML tag

React components must start with a capital letter. This is the rule beginners break most, so here is what happens when you don't follow it:

1function teaCard() {2  return <p>Green tea, $3</p>;3}4 5export default function App() {6  return (7    <section>8      <h2>Today's teas</h2>9      <teaCard />10    </section>11  );12}

Line 1 defines a function named teaCard, and line 9 uses <teaCard />. The result shows only the heading. Nothing crashed, but React never called teaCard. A tag that starts with a small letter is a tag name for the browser, like <section> or <h2>, even when a function by that name exists. So the page got an element called <teacard>: an unknown tag with nothing inside. Press Edit & run to see the console. React warns about line 9 twice:

• <teaCard /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
• The tag <teaCard> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

PascalCase means every word starts with a capital letter, as in TeaCard and ShopHeader. React needs only the first letter to be a capital; the rest is a habit every React project shares. Fix the example: rename the function on line 1 to TeaCard and the tag on line 9 to <TeaCard />. The card appears, and the warnings go away.

The reason is in how JSX works. Before your code runs, each tag becomes a function call that tells React what to make. For a tag with a small first letter, that call gets the tag's name as text, "section", and the browser makes the element. For a capital letter, it gets your function itself, TeaCard, and React calls it. The next lesson shows those calls, compiled by a real compiler.

How to read this table: each row is a tag you might write, what React takes it to mean, and what ends up on the page.

Components inside components

Components get useful when they use each other. A menu page has a header and some tea cards. Each is its own component, and a third one, MenuPage, puts them together:

1function ShopHeader() {2  return (3    <header>4      <h1>Asha's Tea Shop</h1>5    </header>6  );7}8 9function TeaCard() {10  return (11    <article className="tea-card">12      <h3>Green tea</h3>13      <p>$3</p>14    </article>15  );16}17 18export default function MenuPage() {19  return (20    <main>21      <ShopHeader />22      <TeaCard />23      <TeaCard />24      <TeaCard />25    </main>26  );27}

Lines 1 to 7 define ShopHeader, which returns a <header> with the shop's name. Lines 9 to 16 define TeaCard. MenuPage (lines 18 to 27) returns a <main> that uses <ShopHeader /> once, on line 21, and <TeaCard /> three times, on lines 22 to 24. The result shows the heading and three cards. They're all the same tea for now; the Passing props to a component lesson shows how to give each card its own.

MenuPage is the parent of ShopHeader and the cards, and they are its children. A tag like <TeaCard /> that has nothing inside it ends with />, which closes it. MenuPage is the one with export default, so it's the component this file gives to whoever imports it, and the one the live result shows. Press Edit & run and copy line 24 twice: five cards. Delete line 21: the header goes.

So what does the browser get? It never sees MenuPage or TeaCard: those are your functions. React calls each one, and only the HTML tags they return reach the page.

Try it below. The buttons change how many cards MenuPage uses, and Use ShopHeader adds or removes ShopHeader. React renders the page right here, and the last box is the page's real HTML, read back from the page after every change.

1function ShopHeader() {2  return (3    <header>4      <h1>Asha's Tea Shop</h1>5    </header>6  );7}8 9function TeaCard() {10  return (11    <article className="tea-card">12      <h3>Green tea</h3>13      <p>$3</p>14    </article>15  );16}17 18export default function MenuPage() {19  return (20    <main>21      <ShopHeader />22      <TeaCard />23      <TeaCard />24      <TeaCard />25    </main>26  );27}

1 

With three cards and the header, you used 5 components, and the HTML has 12 elements: <main>, the <header> and its <h1>, and an <article>, <h3>, and <p> for each card. Not one component name. Notice className became the HTML attribute class. Turn off Use ShopHeader, and the <header> and its <h1> leave the HTML.

One rule comes with nesting: use components inside other components, but always define them at the top level of the file, as in the menu page. Never write one function component inside another:

export default function MenuPage() {
  // Don't: a new TeaCard function every time MenuPage runs
  function TeaCard() {
    return <article className="tea-card">Green tea</article>;
  }

  return <TeaCard />;
}

It looks tidy, and the page even looks right. But every time MenuPage runs, lines 3 to 5 make a brand-new TeaCard function. React compares components by the function itself, so it sees a different component every time: it removes that part of the page and builds it again from scratch, losing anything the card remembered, like text typed into a box. It's slow and causes bugs that are hard to find. The Preserving and resetting state lesson shows it happening. Keep TeaCard above MenuPage, as the menu page does.

Moving a component into its own file

One file with every component gets long. React projects usually give each bigger component its own file, named after it. Moving one takes three steps:

1. Make a new file, such as TeaCard.jsx.
2. Move the component there and export it.
3. Import it in the file that uses it.

Here is the result. Click the tabs to read both files:

1import TeaCard from "./TeaCard.jsx";2 3export default function App() {4  return (5    <main>6      <h1>Asha's Tea Shop</h1>7      <TeaCard />8      <TeaCard />9    </main>10  );11}

In TeaCard.jsx, line 1 exports the component with export default. In App.jsx, line 1 imports it: import TeaCard from "./TeaCard.jsx";. The ./ means "in the same folder as this file". Lines 7 and 8 use it twice, exactly as if it were written in App.jsx. Many projects leave off the .jsx, as in "./TeaCard"; their build tool finds the file either way.

App.jsx is the root component file: the one at the top of the tree, holding the component that the whole page starts from. Every live example on this site has one more file that hands App to React, as you saw in Why React? (Pop out shows it). In a framework like Next.js, each page of the site has its own root component instead.

A file can also export more than one thing. JavaScript has two kinds of exports, which you met in The JavaScript you need for React: a default export, at most one per file, and named exports, as many as you like. Here Menu.jsx has both:

1import Menu, { TeaCard } from "./Menu.jsx";2 3export default function App() {4  return (5    <main>6      <h2>Today's pick</h2>7      <TeaCard />8      <Menu />9    </main>10  );11}

In Menu.jsx, line 1 is a named export, export function TeaCard(), and line 10 is the default export, Menu. In App.jsx, line 1 imports both at once: Menu without braces for the default export, and { TeaCard } in braces for the named one. Line 7 shows one card as today's pick, and line 8 shows the whole menu.

How to read this table: each row asks the same question of both kinds of export.

The import must match the export. Ask for a named export the file doesn't have, and the page can't start at all. Line 1 here uses braces, but TeaCard.jsx only has a default export:

1import { TeaCard } from "./TeaCard.jsx";2 3export default function App() {4  return (5    <main>6      <h1>Asha's Tea Shop</h1>7      <TeaCard />8    </main>9  );10}

The result shows the browser's own error, SyntaxError, with the full address the preview gives the file: The requested module '…/TeaCard.jsx' does not provide an export named 'TeaCard'. The browser checks every import before any of the code runs, so nothing shows, not even the heading on line 6. Press Edit & run and remove the braces on line 1; the page comes back. Try every pairing in the playground below: it runs two small files as real modules in your browser.

1export default function TeaCard() {2  return "Green tea";3}

1import TeaCard from "./TeaCard.js";2 3console.log(TeaCard());

Matching pairs print Green tea. A default export with braces fails with does not provide an export named 'TeaCard', and a named export without braces fails with does not provide an export named 'default'. A common habit: a default export when a file has one main component, and named exports when it shares several. Whichever you choose, give the component a name. An unnamed one, like export default () => …, has no name of its own: error messages and React's developer tools show it as default or Anonymous, which makes bugs harder to find.

Splitting a real page into components

Real pages often start as one long component. This shop page works, but everything is in App: the header, two tea cards, and the footer.

1export default function App() {2  return (3    <main>4      <header>5        <h1>Asha's Tea Shop</h1>6        <p>Open every day, 8 to 6</p>7      </header>8      <section>9        <article className="tea-card">10          <h3>Green tea</h3>11          <p>$3</p>12        </article>13        <article className="tea-card">14          <h3>Mint tea</h3>15          <p>$4</p>16        </article>17      </section>18      <footer>19        <p>12 Park Street</p>20      </footer>21    </main>22  );23}

Lines 4 to 7 are the header, lines 8 to 17 a section with the two cards, and lines 18 to 20 the footer. To change how every card looks, you edit both copies. To use the header on a second page, you copy it. Look for parts with a name of their own, like "the header" or "the tea list", and make each one a component:

1import ShopHeader from "./ShopHeader.jsx";2import TeaList from "./TeaList.jsx";3import ShopFooter from "./ShopFooter.jsx";4 5export default function App() {6  return (7    <main>8      <ShopHeader />9      <TeaList />10      <ShopFooter />11    </main>12  );13}

Now App.jsx reads like a table of contents: lines 1 to 3 import three components, and lines 8 to 10 put them in order. Each tab holds one of them. TeaList.jsx keeps two small components, GreenTea and MintTea, without exporting them: only TeaList uses them, so they stay in that file. The page looks the same, and the browser gets the same HTML. Open the ShopFooter.jsx tab in Edit & run and change the address: only the footer changes.

Common mix-ups

• "A component is a special object that React makes." No. It's an ordinary JavaScript function that you write. React only calls it. (Older code also writes components as classes; React still runs them, but new code uses functions.)
• "The browser sees my <TeaCard> tag." No. Component names never reach the page. The browser gets only the HTML tags your components return, as the playground shows.
• "A small first letter is fine if the function exists." No. <teaCard /> is read as an HTML tag name, so React never calls your function and the page gets an empty <teacard>.
• "A file can hold only one component." No. It can have one default export, any number of named exports, and components it keeps to itself, like GreenTea in TeaList.jsx.
• "Every file with JSX needs import React from "react"." Not any more. Since React 17, the build adds what JSX needs by itself. You import from react only what you use by name, like useState. None of this lesson's files import React.
• "Defining a component inside another keeps it private and tidy." No. It makes a new component every time the outer one runs, so React rebuilds it from scratch. Define components at the top level, and leave them unexported to keep them private.

Practice exercises

Each exercise shows its code's result under it, or when you press Edit & run. Change the code, and the result updates as you type. Try a guess first, then use the hints.

function TeaCard() {
  return (
    <article className="tea-card">
      <h3>Green tea</h3>
    </article>
  );
}

function TeaShelf() {
  return (
    <section>
      <TeaCard />
      <TeaCard />
    </section>
  );
}

export default function App() {
  return (
    <main>
      <TeaCard />
      <TeaShelf />
      <TeaCard />
    </main>
  );
}

1function TeaCard() {2  return (3    <article className="tea-card">4      <h3>Green tea</h3>5    </article>6  );7}8 9function TeaShelf() {10  return (11    <section>12      <TeaCard />13      <TeaCard />14    </section>15  );16}17 18export default function App() {19  return (20    <main>21      <TeaCard />22      <TeaShelf />23      <TeaCard />24    </main>25  );26}

1function cakeCard() {2  return (3    <article className="tea-card">4      <h3>Lemon cake</h3>5      <p>$4</p>6    </article>7  );8}9 10export default function App() {11  return (12    <main>13      <h2>Cakes</h2>14      <cakeCard />15    </main>16  );17}

1function CakeCard() {2  return (3    <article className="tea-card">4      <h3>Lemon cake</h3>5      <p>$4</p>6    </article>7  );8}9 10export default function App() {11  return (12    <main>13      <h2>Cakes</h2>14      <CakeCard />15    </main>16  );17}

1function TeaCard() {2  return3    <article className="tea-card">4      <h3>Mint tea</h3>5      <p>$4</p>6    </article>;7}8 9export default function App() {10  return (11    <main>12      <h2>Today's teas</h2>13      <TeaCard />14    </main>15  );16}

1function TeaCard() {2  return (3    <article className="tea-card">4      <h3>Mint tea</h3>5      <p>$4</p>6    </article>7  );8}9 10export default function App() {11  return (12    <main>13      <h2>Today's teas</h2>14      <TeaCard />15    </main>16  );17}

1function TeaCard() {2  return (3    <article className="tea-card">4      <h3>Green tea</h3>5      <p>$3</p>6    </article>7  );8}9 10export default function App() {11  return (12    <main>13      <TeaCard />14    </main>15  );16}

1function TeaCard() {2  return (3    <article className="tea-card">4      <h3>Green tea</h3>5      <p>$3</p>6    </article>7  );8}9 10function ShopFooter() {11  return (12    <footer>13      <p>Open every day, 8 to 6</p>14    </footer>15  );16}17 18export default function App() {19  return (20    <main>21      <TeaCard />22      <ShopFooter />23    </main>24  );25}

1function TeaCard() {2  return (3    <article className="tea-card">4      <h3>Green tea</h3>5      <p>$3</p>6    </article>7  );8}9 10export default function App() {11  return (12    <main>13      <h1>Asha's Tea Shop</h1>14      <TeaCard />15    </main>16  );17}

1import TeaCard from "./TeaCard.jsx";2 3export default function App() {4  return (5    <main>6      <h1>Asha's Tea Shop</h1>7      <TeaCard />8    </main>9  );10}

import TeaCard from "./TeaCard.jsx";

export default function App() {
  return (
    <main>
      <h1>Asha's Tea Shop</h1>
      <TeaCard />
    </main>
  );
}

1import { TeaCard } from "./TeaCard.jsx";2 3export default function App() {4  return (5    <main>6      <h1>Asha's Tea Shop</h1>7      <TeaCard />8    </main>9  );10}

Check your understanding

For code questions, find each component first, then follow the tags from the exported one. Press Edit & run on a question's code to check your answer.

Key takeaways

• A React component is a JavaScript function that returns markup. You use it like a tag, as often as you like.
• Its name must start with a capital letter. <TeaCard /> calls your function; <teaCard /> is only a tag name for the browser.
• When the markup takes several lines, open a bracket on the return line. A bare return returns nothing.
• Components use other components, forming a tree. The browser gets only the HTML tags they return, never their names.
• Define every component at the top level of its file, never inside another component.
• Move a component into its own file with export default and import X from "./X.jsx", or a named export and an import with braces. The import must match the export.

Coming next: Writing markup with JSX. It shows what each tag turns into, and why JSX has rules like one root element, closed tags, and className.