Components

Learning objectives#

• Create and use components
• Compose components into a tree
• Split components into files with import/export
• Decide when to extract a new component

Explanation#

A component is a JavaScript function whose name starts with a capital letter and that returns JSX. Use it like a tag: <Header />.

Components compose: App renders Header, ProductList and Footer; ProductList renders many ProductCard components. Data flows down this tree.

Put each component in its own file (ProductCard.jsx), export it, and import it where needed.

Extract a component when a piece of UI is repeated, when a section has its own purpose (a search bar), or when a component becomes too long to read.

Components must be pure during rendering: given the same inputs they return the same JSX and do not change outside variables.

Syntax#

1function Header() { return <header>Shop</header>; }
2function Footer() { return <footer>© 2026</footer>; }
3

4export default function App() {
5  return (
6    <>
7      <Header />
8      <main>…</main>
9      <Footer />
10    </>
11  );
12}

Code example: A page built from small components#

1function Header() {
2  return (
3    <header>
4      <h1>Asha’s Stationery</h1>
5      <nav>Home · Shop · Contact</nav>
6    </header>
7  );
8}
9

10function ProductCard({ name, price }) {
11  return (
12    <li>
13      <strong>{name}</strong> — ₹{price}
14    </li>
15  );
16}
17

18function ProductList() {
19  const products = [
20    { id: 1, name: 'Pen', price: 20 },
21    { id: 2, name: 'Notebook', price: 60 },
22    { id: 3, name: 'Bag', price: 650 },
23  ];
24  return (
25    <ul>
26      {products.map(p => <ProductCard key={p.id} name={p.name} price={p.price} />)}
27    </ul>
28  );
29}
30

31function Footer() {
32  return <footer>Free delivery over ₹500</footer>;
33}
34

35export default function App() {
36  return (
37    <>
38      <Header />
39      <main>
40        <ProductList />
41      </main>
42      <Footer />
43    </>
44  );
45}

The page shows a header with the shop name and navigation, a list of three products (“Pen — ₹20”, “Notebook — ₹60”, “Bag — ₹650”) and a footer. The component tree is App → Header, ProductList → 3× ProductCard, Footer.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Header, ProductList and Footer each own one part of the page.
2. ProductCard is reused three times with different props.
3. ProductList turns data into ProductCard elements with map.
4. App only arranges the pieces — easy to read at a glance.

Real-world use case#

Common mistakes#

Best practices#

• One component per file, named after the file
• Small, focused components
• Top-level component declarations only
• Pure rendering — no side effects in the body

Remember this#

Practice exercise#

1function SearchBar() {
2  return (
3    <form>
4      <input placeholder="Search products" aria-label="Search products" />
5      <button>Search</button>
6    </form>
7  );
8}
9

10function ResultsCount({ count }) {
11  return <p>{count} results</p>;
12}
13

14export default function Page() {
15  return (
16    <>
17      <SearchBar />
18      <ResultsCount count={3} />
19    </>
20  );
21}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.