Your First Component

A React component is a function. Two rules:

1. Its name must start with a capital letter — Profile, not profile. (Lowercase names are treated as HTML tags.)
2. It must return JSX (or null).

That’s it. No class, no extends, no boilerplate.

The Smallest Component

function Hello() {
  return <h1>Hello, React</h1>;
}

To use it, treat it like an HTML tag:

function App() {
  return <Hello />;
}

Composing Components

You can render components inside other components. That’s how every real app is built.

function Avatar() {
  return <img src="/me.png" width={48} height={48} alt="" />;
}

function Name() {
  return <strong>Ada Lovelace</strong>;
}

function Card() {
  return (
    <div className="card">
      <Avatar />
      <Name />
    </div>
  );
}

Card doesn’t know how Avatar works internally. That’s the whole point — small, focused, reusable pieces.

A Component Can Return null

Returning null means “render nothing”:

function MaybeWarning({ show }) {
  if (!show) return null;
  return <p className="warn">Heads up!</p>;
}

Capitalization Matters

// ✗ lowercase — React thinks <profile> is an HTML tag
function profile() { return <p>...</p>; }
<profile />

// ✓ Uppercase — React treats it as a component
function Profile() { return <p>...</p>; }
<Profile />

One File, One Component (Usually)

A common convention: each component gets its own file, named after it. Card.jsx exports Card, Avatar.jsx exports Avatar.

// src/components/Avatar.jsx
export default function Avatar() {
  return <img src="/me.png" alt="" />;
}

// src/App.jsx
import Avatar from "./components/Avatar.jsx";

function App() {
  return <Avatar />;
}

Small helper components can share a file with the main one.

Up Next

How does a component end up on screen? You need to render it into the DOM.