React Components Explained — Building Blocks of React Apps

In this tutorial, you will learn about React Components Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React components are reusable JavaScript functions that return UI elements, letting you build complex interfaces by composing small, isolated pieces of code together.

What You'll Learn

• What React components are and why they matter
• How to create function components
• How to compose components together
• How to organize components in a project
• Best practices for component design

Why It Matters

Components are the heart of React. Every React app is a tree of components. Learning to build and compose components well determines whether your codebase is maintainable or a tangled mess.

Real-World Use

The Durga Antivirus Pro dashboard is a tree of components: Dashboard contains Header, Sidebar, and MainPanel. MainPanel contains ThreatGraph, ScanStatus, and FileList. Each is independently developed and tested.

flowchart TD
    A[App] --> B[Header]
    A --> C[Sidebar]
    A --> D[MainContent]
    D --> E[ThreatGraph]
    D --> F[ScanStatus]
    D --> G[FileList]
    G --> H[FileRow]
    G --> I[FileRow]
    style A fill:#3b82f6,color:#fff

Function Components

A function component is a JavaScript function that returns JSX:

function WelcomeMessage({ name, lastLogin }) {
  const hoursSinceLogin = Math.floor(
    (Date.now() - new Date(lastLogin).getTime()) / 3600000
  );

  return (
    <div className="welcome-card">
      <h2>Welcome back, {name}!</h2>
      <p>Last login: {hoursSinceLogin > 0 ? `${hoursSinceLogin} hours ago` : "Just now"}</p>
    </div>
  );
}

// Usage
<WelcomeMessage name="Alice" lastLogin="2026-06-28T10:00:00Z" />

Expected output: A welcome card showing the user's name and time since last login.

Components receive data through props (the first argument). They return JSX that describes what should render. Components should be pure functions of their props — same props, same UI.

Component Composition

Compose small components into larger ones:

function Avatar({ src, alt, size }) {
  return (
    <img
      src={src}
      alt={alt}
      width={size}
      height={size}
      style={{ borderRadius: "50%", objectFit: "cover" }}
    />
  );
}

function UserInfo({ user }) {
  return (
    <div className="user-info">
      <Avatar src={user.avatar} alt={user.name} size={48} />
      <div>
        <h3>{user.name}</h3>
        <p>{user.email}</p>
      </div>
    </div>
  );
}

function Card({ children, className }) {
  return (
    <div className={`card ${className || ""}`}>
      {children}
    </div>
  );
}

function UserCard({ user, onSelect }) {
  return (
    <Card className="user-card" onClick={() => onSelect(user.id)}>
      <UserInfo user={user} />
      <p className="user-role">{user.role}</p>
      <button onClick={(e) => { e.stopPropagation(); onSelect(user.id); }}>
        View Profile
      </button>
    </Card>
  );
}

// Usage
<UserCard user={{ name: "Alice", email: "alice@example.com", avatar: "/img/alice.png", role: "Admin" }} />

Expected output: A card showing avatar, user info, role badge, and a view profile button.

Composition is React's primary mechanism for code reuse. Instead of inheritance, you build small focused components and compose them. The children prop lets components wrap arbitrary content.

Component Organization

Organize components by feature or domain:

src/
├── components/          # Shared generic components
│   ├── Button.jsx
│   ├── Card.jsx
│   ├── Input.jsx
│   └── Modal.jsx
├── features/            # Feature-specific components
│   ├── auth/
│   │   ├── LoginForm.jsx
│   │   ├── RegisterForm.jsx
│   │   └── AuthGuard.jsx
│   ├── tasks/
│   │   ├── TaskList.jsx
│   │   ├── TaskCard.jsx
│   │   └── TaskForm.jsx
│   └── dashboard/
│       ├── Dashboard.jsx
│       ├── StatsCard.jsx
│       └── ActivityFeed.jsx
├── pages/               # Page-level components (routes)
│   ├── HomePage.jsx
│   ├── TasksPage.jsx
│   └── SettingsPage.jsx
└── App.jsx

Expected output: A clean project structure where related components are grouped together.

Feature-based organization scales better than type-based (components, containers, etc.). Each feature folder contains everything it needs: components, hooks, styles, and tests.

Splitting Components

Split large components into smaller ones:

// Before: One large component
function BlogPost({ post }) {
  return (
    <article>
      <header>
        <h1>{post.title}</h1>
        <div className="meta">
          <AuthorInfo author={post.author} />
          <time>{post.date}</time>
          <TagList tags={post.tags} />
        </div>
      </header>
      <BlogContent content={post.content} />
      <footer>
        <LikeButton likes={post.likes} />
        <ShareButtons url={post.url} />
      </footer>
    </article>
  );
}

// After: Small focused components
function AuthorInfo({ author }) {
  return (
    <span className="author">
      <img src={author.avatar} alt={author.name} />
      {author.name}
    </span>
  );
}

function TagList({ tags }) {
  return (
    <div className="tags">
      {tags.map(tag => <span key={tag} className="tag">{tag}</span>)}
    </div>
  );
}

function LikeButton({ likes }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "Unlike" : "Like"} ({likes + (liked ? 1 : 0)})
    </button>
  );
}

Expected output: The BlogPost component reads clearly as a composition of smaller, independently useful pieces.

A good rule: if a component renders more than 5-7 elements or has nested conditional logic, extract a sub-component. Aim for components that do one thing well.

Common Mistakes

1. Giant components that do everything — A component rendering 200+ lines of JSX is hard to maintain. Split it into smaller components.

2. Deeply nested conditional rendering — Too many ternaries and && expressions make JSX unreadable. Extract sub-components or use early returns.

3. Components with too many props — A component with 10+ props is a sign it does too much. Consider splitting or using composition.

4. Mutating props directly — Props are read-only. Never assign to props.something or mutate objects/arrays received as props.

5. Missing displayName for debugging — Anonymous arrow function components show as Unknown in React DevTools. Use named functions or displayName.

Practice Questions

1. What is a React component? A reusable JavaScript function that returns JSX to describe a part of the UI.

2. How do components receive data? Through props, the first argument of the function component.

3. What is component composition? Building complex UIs by combining smaller, simpler components together.

4. What is the children prop used for? To pass nested JSX content into a component, enabling flexible wrapper components.

5. Why should components be small and focused? Small components are easier to test, reuse, understand, and maintain.

Challenge

Refactor a monolithic CheckoutForm component into smaller components: ShippingAddress, PaymentMethod, OrderSummary, and SubmitButton. Each should manage only its own concern. Compose them in CheckoutPage.

FAQ

Mini Project

Build a DashboardLayout component that composes: Sidebar with navigation links, Header with user avatar and search bar, and MainContent with a children prop. Then create AnalyticsDashboard that uses the layout and contains StatsGrid (4 stat cards), ActivityChart (placeholder SVG), and RecentActivity (list). Each piece should be its own component in a feature folder.

What's Next

Continue with props and state management:

React Props, React State, React Hooks