REACT Lesson 5 – Components Overview | Dataplexa

Lesson 5

Components Overview

Master the building blocks of React apps and understand how components transform code from chaos to organized, reusable pieces.

Components are the heartbeat of every React application. Think of them like LEGO blocks — each piece has a specific purpose, they snap together perfectly, and you can build anything from a simple house to a massive castle. But unlike LEGO blocks, components are smart. They remember things, respond to events, and can even talk to each other. If you've ever built a website with regular HTML and JavaScript, you know the pain. Copy-paste the same navigation bar across 20 pages. Change one button color? Edit 47 files. A component solves this nightmare. Write once, use everywhere. Change once, update everything.

What Components Actually Are

A component is simply a JavaScript function that returns JSX. That JSX describes what should appear on screen. React takes that description and turns it into real DOM elements that users see and interact with. Here's the simplest possible component for the DataFlow dashboard:

// A component is just a function that returns JSX
function DashboardHeader() {
  return (
    <header>
      <h1>DataFlow Analytics</h1>
      <p>Your business insights dashboard</p>
    </header>
  );
}

What just happened?

React found the DashboardHeader function, called it, got back some JSX, and turned that JSX into real HTML elements on the page. The component name must start with a capital letter — that's how React tells the difference between components and regular HTML tags.

Notice something crucial here. The component name starts with a capital letter. React uses this to distinguish between your custom components and regular HTML elements. Write <header> and React creates an HTML header tag. Write <DashboardHeader> and React calls your function.

Component Anatomy Breakdown

Every React component follows the same basic pattern. Understanding this pattern is like learning to read — once you get it, every component makes sense.

1. Function Declaration

function ComponentName()

Always starts with capital letter. Can also use arrow functions.

2. Function Body

{ /* JavaScript logic goes here */ }

Variables, calculations, event handlers — any JavaScript you need.

3. Return Statement

return ( <JSX goes here> );

Must return exactly one parent element. Can return null or false too.

4. Component Usage

<ComponentName />

Self-closing tag like HTML img. Can also have children.

Types of Components

React components come in different flavors. Modern React heavily favors functional components, but understanding the landscape helps you read older codebases and make informed decisions.

Functional Components

JavaScript functions that return JSX. Simple, clean, and work with React hooks. This is what you'll use 99% of the time in modern React.

Class Components

ES6 classes that extend React.Component. More verbose but still used in legacy codebases. You'll rarely write new ones.

Higher-Order Components

Functions that take components and return enhanced versions. Advanced pattern mostly replaced by hooks and custom hooks.

Render Props

Components that share logic via props that are functions. Clever pattern but also mostly superseded by hooks.

For the DataFlow dashboard, we'll stick with functional components. They're simpler to understand, easier to test, and play nicely with React's modern features.

Building Reusable Pieces

The real power of components emerges when you start building reusable pieces. The DataFlow team needs to display key metrics — revenue, user count, orders, and growth rate. Instead of copying HTML four times, they build one flexible component.

// One component, infinite possibilities
function MetricCard({ title, value, color }) {
  return (
    <div style={{ 
      padding: '20px', 
      backgroundColor: color, 
      borderRadius: '12px',
      color: 'white',
      textAlign: 'center'
    }}>
      <h3 style={{ margin: '0 0 8px', fontSize: '14px' }}>{title}</h3>
      <p style={{ margin: 0, fontSize: '24px', fontWeight: 'bold' }}>{value}</p>
    </div>
  );
}

function StatsBar() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }}>
      <MetricCard title="Revenue" value="$47,382" color="#0f766e" />
      <MetricCard title="Users" value="12,847" color="#1d4ed8" />
      <MetricCard title="Orders" value="3,291" color="#7c3aed" />
      <MetricCard title="Growth" value="+23%" color="#059669" />
    </div>
  );
}

What just happened?

The MetricCard component received props — title, value, and color. React passed those props as the first argument to our function. We used curly braces to extract the values and display them. Try changing the revenue value to see how props make components flexible.

Notice how MetricCard receives props — data passed from parent to child. Props are like function arguments but for components. The parent decides what data to pass down, and the child uses that data to render something specific.

Component Composition

Real applications are built by composing components together like nesting dolls. Each component handles one responsibility, and you combine them to create complex interfaces. The DataFlow dashboard demonstrates this perfectly.

// Small focused components
function Logo() {
  return <h1 style={{ color: '#0f766e', margin: 0 }}>DataFlow</h1>;
}

function UserProfile() {
  return (
    <div style={{ textAlign: 'right' }}>
      <p style={{ margin: 0, fontWeight: 'bold' }}>Sarah Chen</p>
      <p style={{ margin: 0, fontSize: '12px', color: '#64748b' }}>Admin</p>
    </div>
  );
}

// Composed together into a larger component
function Header() {
  return (
    <header style={{ 
      display: 'flex', 
      justifyContent: 'space-between', 
      alignItems: 'center',
      padding: '16px 24px',
      borderBottom: '1px solid #e2e8f0'
    }}>
      <Logo />
      <UserProfile />
    </header>
  );
}

This composition approach makes code incredibly maintainable. Need to change the logo? Edit one component. Want to add a notification bell next to the user profile? Drop in a new component. Each piece has a single responsibility and can be developed, tested, and updated independently.

Component Tree Structure

React applications form a tree structure where components nest inside other components. Understanding this tree helps you visualize data flow and debug issues. Here's how the DataFlow dashboard components relate to each other:

App
Header
Logo
UserProfile
StatsBar
4x MetricCard

Each level in the tree represents a different level of abstraction. The App component orchestrates the overall layout. Header and StatsBar handle their specific sections. Logo, UserProfile, and MetricCard are the leaf components that render actual content.

Component Naming Rules

Component names must start with a capital letter. React treats lowercase names as regular HTML elements. Write button and get an HTML button. Write Button and React looks for your component function.

Common Component Patterns

Certain patterns emerge in every React codebase. Learning these patterns speeds up development and makes your code more predictable. Here are the essential ones:

Container vs Presentation Components

Container components handle logic and state. Presentation components receive props and render UI. This separation makes components easier to test and reuse. The DataFlow StatsBar is a container — it knows what metrics to show. MetricCard is presentational — it displays whatever data you give it.

Companies like Airbnb and Netflix build massive component libraries using these patterns. Their design systems contain hundreds of reusable components — buttons, cards, modals, forms — that teams can compose into any interface they need. But don't over-engineer early. Start simple. Build components when you find yourself copying code. Extract reusable pieces when patterns emerge. The DataFlow dashboard will grow from a few simple components to a sophisticated system as we add features throughout this course.

Quiz

Up Next: Functional Components

Dive deep into functional components, learn the modern React way of building interfaces, and see how they make your code cleaner and more predictable.

← Previous Course Index Next →