Functional Components

Build your first React function that returns JSX, understand the component lifecycle, and create reusable DataFlow dashboard pieces.

Functional components are React's modern way of building UI pieces. Think of them as JavaScript functions that return HTML-like code called JSX. Every piece of your DataFlow dashboard — the header, sidebar, stats cards — will be a functional component. If you know regular JavaScript functions, you already understand 80% of functional components. The main difference? Instead of returning a number or string, React components return JSX that describes what should appear on screen.

What Makes a Function "React-Ready"

A regular JavaScript function becomes a React component when it follows three rules. First, the function name starts with a capital letter — Header instead of header. Second, it returns JSX. Third, you can use it as an HTML tag in other components.

// Regular function - not React-ready
function calculateRevenue() {
  return 45000;
}

// React functional component - ready to use
function RevenueCard() {
  return (
    <div>
      <h3>Monthly Revenue</h3>
      <p>$45,000</p>
    </div>
  );
}

What just happened?

React took our function, called it, and placed the returned JSX into the browser. Notice how RevenueCard became a custom HTML tag. Try this: change the revenue amount and run again.

The capital letter rule isn't just convention — it's how React tells the difference between HTML tags and your custom components. When React sees <div>, it knows that's regular HTML. When it sees <RevenueCard>, it knows to call your function.

JSX Anatomy: The Return Statement

Every functional component must return something. Usually that's JSX, but you can also return null to render nothing, or a string for plain text. The return statement is where your component describes its appearance. JSX looks like HTML but has a few React-specific rules. You can only return one top-level element. If you need multiple elements, wrap them in a <div> or use React fragments with <></>.

// DataFlow stats bar with multiple cards
function StatsBar() {
  return (
    <div style={{display: 'flex', gap: '16px'}}>
      <div>Revenue: $45,000</div>
      <div>Users: 2,340</div>
      <div>Orders: 567</div>
      <div>Growth: +12%</div>
    </div>
  );
}

What just happened?

React rendered four stat cards in a flexbox layout. Each card got its own background color and styling. The outer <div> wrapped everything into one returnable element. Try this: add a fifth card for "Conversion Rate".

Notice how we used style={{display: 'flex'}} instead of style="display: flex". JSX uses JavaScript objects for inline styles, not CSS strings. The double braces look weird at first — the outer braces mean "JavaScript expression" and the inner braces create the style object.

Component Composition: Building Blocks

Real applications don't put everything in one giant component. They compose smaller components together, like building blocks. Your DataFlow dashboard might have a Header component that contains a Logo and UserMenu component. Component composition makes your code easier to test, debug, and change. If the header design needs tweaking, you only touch the Header component. If the logo needs updating, you only touch Logo.

// Small, focused components
function Logo() {
  return <h1>DataFlow</h1>;
}

function UserMenu() {
  return (
    <div>
      <span>John Doe</span>
      <button>Logout</button>
    </div>
  );
}

// Compose them together
function Header() {
  return (
    <header style={{display: 'flex', justifyContent: 'space-between'}}>
      <Logo />
      <UserMenu />
    </header>
  );
}

What just happened?

React called three functions: Header() first, then Logo() and UserMenu(). Each component focused on its own job. Try this: create a SearchBox component and add it to the header.

Component composition follows the same patterns as good function design. Keep components small and focused. A component should do one thing well. If your component is getting long, split it into smaller pieces.

JavaScript Inside JSX

JSX isn't just static markup. You can embed JavaScript expressions using curly braces. Any valid JavaScript expression — variables, function calls, calculations — works inside {}. This is where functional components become powerful. You can calculate values, format data, and make decisions right inside your JSX. Perfect for displaying dynamic DataFlow metrics that change based on real data.

function LiveStats() {
  const revenue = 45000;
  const target = 50000;
  const progress = Math.round((revenue / target) * 100);
  const isOnTrack = progress >= 80;

  return (
    <div>
      <h3>Revenue Progress</h3>
      <p>${revenue.toLocaleString()} of ${target.toLocaleString()}</p>
      <p>{progress}% complete</p>
      <p style={{color: isOnTrack ? 'green' : 'red'}}>
        {isOnTrack ? '✅ On track' : '⚠️ Behind target'}
      </p>
    </div>
  );
}

What just happened?

React calculated the progress percentage, formatted numbers with commas, and chose colors based on performance. The progress bar width and status message updated automatically based on the calculation. Try this: change the revenue to 42000 and see how the display updates.

JavaScript expressions in JSX make your components responsive to data changes. When DataFlow receives new revenue numbers from your API, this component automatically recalculates percentages and updates the visual indicators.

Component Tree Visualization

React applications are trees of components. Your main App component sits at the root. It renders child components, which render their own children, creating a hierarchy that mirrors your UI structure. Understanding the component tree helps you plan your DataFlow architecture. The dashboard layout naturally maps to components: App contains Header and Main. Main contains Sidebar and Content. And so on.

App Component

Header

Sidebar

MainContent

Component Flow

1. App renders first
2. App calls Header()
3. App calls Sidebar()
4. App calls MainContent()
5. React builds DOM tree

Each component in the tree is independent but can communicate through props (coming next lesson). When React renders your app, it starts at the root and calls each component function in order, building up the final DOM structure.

Common Patterns and Best Practices

Functional components work best when they follow established patterns. Keep components pure — given the same inputs, they should always return the same output. Avoid side effects like API calls or timers directly in the component body. Those belong in special React hooks you'll learn soon. Name your components clearly and specifically. RevenueChart is better than Chart. UserProfileCard is better than Card. Specific names make your code self-documenting and easier to navigate.

Performance Tip

React compares your component's return value on every render. Keep your JSX structure consistent — don't conditionally return completely different elements. If you need different layouts, use CSS classes or inline styles to hide/show content instead.

Large companies like Airbnb and Netflix organize functional components by feature, not by type. Instead of folders called "components" and "utils", they create folders like "revenue-dashboard" and "user-management". Each feature folder contains all its components, styles, and tests together. Export your components as named exports when possible: export function Header() {} instead of export default Header. Named exports make refactoring easier and prevent import/export mismatches that cause subtle bugs.

Quiz

Up Next: Props

Pass data between your DataFlow components using React's props system.

← Previous Course Index Next →