React Components

A component is a self-contained, reusable piece of UI described as a JavaScript function that returns JSX. Components are the fundamental building block of every React application — a whole app is really just a tree of components nested inside one another, starting from a single root component rendered into the page.

Modern React code is written almost entirely with function components rather than the older class-based components. A function component is simply a JavaScript function whose name starts with a capital letter and which returns JSX describing what should appear on screen. Capitalization matters: React treats lowercase tags like <div> as built-in HTML elements and capitalized tags like <UserCard /> as references to your own components.

Why it matters

A React application is a tree of components, each responsible for one piece of the screen. Splitting an interface into small, named components is what keeps a large application understandable and lets a piece such as a button or a card be reused everywhere.

Writing a Function Component

A function component takes a single object of props as its argument (often destructured directly in the parameter list) and returns JSX. It can contain plain JavaScript logic above the return statement — computing values, calling hooks, formatting data — before describing the resulting markup.

Composition Over Inheritance

React favors composition: instead of building deep class hierarchies, you build UI by nesting smaller components inside larger ones and passing data or even other components through props. A component can render other components, which in turn render more components, forming a tree that mirrors the structure of the rendered page.

Splitting UI into Small Components

Breaking a large UI into small, focused components keeps each piece easy to understand, test, and reuse. A good rule of thumb is that if a chunk of JSX represents one clear concept (a card, a button, a form field) or is duplicated in more than one place, it is a good candidate to extract into its own component.

• Each component should ideally do one thing — rendering a user profile, a single list item, or a navigation bar — rather than mixing many unrelated responsibilities.
• Small components are easier to give clear prop interfaces to, which makes their behavior predictable from the outside.
• Component trees make it easy to reuse the same building block in many places, such as a Button or Card component used across an entire application.

Example

function Avatar({ src, alt }) {
  return <img className="avatar" src={src} alt={alt} width={48} height={48} />;
}

function UserName({ name, title }) {
  return (
    <div>
      <strong>{name}</strong>
      <p>{title}</p>
    </div>
  );
}

function UserCard({ user }) {
  return (
    <div className="user-card">
      <Avatar src={user.avatarUrl} alt={user.name} />
      <UserName name={user.name} title={user.title} />
    </div>
  );
}

export default function App() {
  const user = { name: 'Priya Rao', title: 'Frontend Engineer', avatarUrl: '/priya.jpg' };
  return <UserCard user={user} />;
}

Renders a "user-card" container showing a 48x48 avatar image next to the bold name "Priya Rao" and the subtitle "Frontend Engineer", built by composing three separate components (Avatar, UserName, UserCard).

Exercise

Do this in src/App.jsx of a Vite + React project. Split the page below into three components: Header, which renders the title; Footer, which renders the copyright line; and App, which composes them around the main paragraph.

Expected result: the page looks exactly the same, but App now uses <Header /> and <Footer />.

export default function App() {
  return (
    <div>
      <header>
        <h1>WebNest Learn</h1>
      </header>
      <main>
        <p>Pick a course to begin.</p>
      </main>
      <footer>
        <p>Copyright WebNest Studio</p>
      </footer>
    </div>
  );
}

function Header() {
  return (
    <header>
      <h1>WebNest Learn</h1>
    </header>
  );
}

function Footer() {
  return (
    <footer>
      <p>Copyright WebNest Studio</p>
    </footer>
  );
}

export default function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Pick a course to begin.</p>
      </main>
      <Footer />
    </div>
  );
}

Quick quiz

Interview questions