Component Basics

A React component is just a JavaScript function that returns JSX. That's the entire definition — no special class, no framework registration step:

function WelcomeBanner() {
  return <h2>Welcome back!</h2>;
}

By convention, component names are PascalCase (WelcomeBanner, not welcomeBanner), because JSX uses capitalization to distinguish your components from built-in HTML tags, as covered in the previous lesson.

Using a component

Once defined, a component is used like any other JSX tag:

function App() {
  return (
    <div>
      <WelcomeBanner />
      <WelcomeBanner />
    </div>
  );
}

Each <WelcomeBanner /> here is a separate, independent instance — React renders the function once per tag, and (once you add state in a later lesson) each instance keeps its own state, completely isolated from the others.

One component per file

Real projects put each component in its own file and export it, so it can be imported wherever it's used:

// WelcomeBanner.jsx
export default function WelcomeBanner() {
  return <h2>Welcome back!</h2>;
}

// App.jsx
import WelcomeBanner from "./WelcomeBanner";

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

export default is the common convention for a file whose whole job is exporting one component — it lets the importer name it anything, though matching the file name keeps things easy to trace.

Components can't be defined inside other components

It's tempting to nest a function component definition inside another component's body, but avoid it:

// Don't do this
function App() {
  function Header() {
    return <h1>Title</h1>;
  }
  return <Header />;
}

Every time App re-renders, this redefines Header as a brand-new function, which React treats as a brand-new component type — it gets thrown away and recreated from scratch instead of just updating, losing any state it had. Always define components at the top level of a module.

The next lesson covers composing multiple components together into larger trees, including how to pass content through a component using children.