Function Components

In modern React, components are functions. You don’t need classes, constructors, or this. Hooks (which you’ll meet soon) give functions everything classes used to provide.

The Shape

function Greeting() {
  return <h1>Hello!</h1>;
}

export default Greeting;

That’s it. Capital name, returns JSX, exported.

You can write it as an arrow function, too:

const Greeting = () => <h1>Hello!</h1>;
export default Greeting;

Both are equivalent. Pick one style and stay consistent.

Export Patterns

Default export — one main thing per file:

// Card.jsx
export default function Card() { ... }

// import
import Card from "./Card.jsx";

Named exports — useful when a file exports several:

// ui.jsx
export function Button() { ... }
export function Input() { ... }

// import
import { Button, Input } from "./ui.jsx";

Many teams use named exports consistently because the imported name has to match — fewer surprise renames.

A Component Is “Just” a Function

It runs every time React decides to render. Anything you do inside runs again — declare variables, call helpers, set up event handlers.

function Now() {
  const time = new Date().toLocaleTimeString();
  return <p>The time is {time}</p>;
}

Calling expensive things inside a render is fine in moderation; you’ll learn useMemo later for the rare case where it matters.

Old: Class Components (Skim Only)

Class components still work and you’ll see them in older codebases. For reference:

import { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

For anything new, write functions. Hooks only work in functions, and hooks are how modern React solves every problem classes used to.

The “What Goes in a Component” Question

For now, anything you can put inside a function:

• Local variables
• Calls to helper functions
• Calls to hooks like useState, useEffect (coming up)
• A return of JSX (or null)

What you should NOT do:

• Side effects (network, subscriptions, DOM mutation) directly in the render body — that’s what effects are for
• Mutate props or shared objects

Up Next

Components without props are stamps. Props are how a component receives data from its parent.