React Components: Function Components Explained

A component is a JavaScript function that returns JSX. Components are the building blocks of every React app: buttons, cards, menus and whole pages are all components.

Defining and using a component#

function Greeting() {
  return <p>Welcome to Laviyx Learn!</p>;
}

export default function App() {
  return (
    <div>
      <h2>Home</h2>
      <Greeting />
      <Greeting />
    </div>
  );
}

Two rules:

• Component names start with a capital letter. <Greeting /> is a component; <greeting /> would be treated as an unknown HTML tag.
• Use a component like a tag: <Greeting />. You write it once and reuse it as many times as you like.

The component tree#

Components contain other components, forming a tree. A typical page:

App
├── Header
│   ├── Logo
│   └── NavLinks
├── ProductList
│   ├── ProductCard
│   ├── ProductCard
│   └── ProductCard
└── Footer

Splitting the interface this way keeps each piece small and focused, and lets you reuse pieces such as ProductCard.

function Header() {
  return (
    <header style={{ borderBottom: "1px solid #ddd", paddingBottom: 8 }}>
      <strong>ShopKart</strong> · Home · Deals · Cart
    </header>
  );
}

function ProductCard() {
  return (
    <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12, width: 140 }}>
      <div style={{ height: 60, background: "#eef" }} />
      <p>Product name</p>
      <button>Add to cart</button>
    </div>
  );
}

function Footer() {
  return <footer style={{ color: "#777", marginTop: 12 }}>© 2026 ShopKart</footer>;
}

export default function App() {
  return (
    <div>
      <Header />
      <main style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 12 }}>
        <ProductCard />
        <ProductCard />
        <ProductCard />
      </main>
      <Footer />
    </div>
  );
}

Every card is identical for now. The next lesson, Props, shows how to give each one its own data.

Components in separate files#

In a real project, each component usually lives in its own file and is exported:

// src/components/ProductCard.jsx
export default function ProductCard() {
  return <div className="card">Product name</div>;
}

// src/App.jsx
import ProductCard from "./components/ProductCard.jsx";

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

A file can have one default export (imported with any name) and any number of named exports (export function Button() {}, imported as import { Button } from "./Button.jsx"). Both styles are common; pick one convention for a project.

Keep components pure#

React expects components to be pure functions: given the same inputs, they return the same JSX, and they do not change anything outside themselves while rendering. React may call your component many times (and calls it twice in development with StrictMode to help you spot problems), so rendering must not have side effects.

let guests = 0;

function ImpureCup() {
  guests = guests + 1;                 // changes a variable outside the component: impure
  return <p>Tea cup for guest #{guests}</p>;
}

function PureCup({ guest }) {
  return <p>Tea cup for guest #{guest}</p>;   // depends only on its input
}

export default function App() {
  return (
    <div>
      <ImpureCup />
      <ImpureCup />
      <hr />
      <PureCup guest={1} />
      <PureCup guest={2} />
    </div>
  );
}

Here the impure version happens to show 1 and 2, but only because each one was rendered exactly once in that order. If React renders them again (for example in development with StrictMode, or after an update), the numbers keep growing. The pure version always shows the same output for the same input. Side effects such as changing variables, fetching data or setting timers belong in event handlers or effects, not in the component body.

Do not define components inside components#

Practice#

function Navbar() {
  return <nav>Laviyx Learn · Tutorials · Practice</nav>;
}

function Hero() {
  return (
    <section>
      <h1>Learn React</h1>
      <button>Start now</button>
    </section>
  );
}

function Footer() {
  return <footer>Made with React</footer>;
}

export default function App() {
  return (
    <div>
      <Navbar />
      <Hero />
      <Footer />
    </div>
  );
}

Key takeaway#

Next: Props.