Your First Component

A React component is just a JavaScript function that returns JSX. That's really it. The function name must start with a capital letter — that's how React knows it's a component vs a regular HTML tag.

A Minimal Component

button.jsx

// A basic React component
function Button() {
  return (
    <button className="btn btn-primary">
      Click me
    </button>
  );
}

export default Button;

// Use it anywhere:
// <Button />

To use it, treat it like an HTML tag: <Button />. React will call your function and render whatever it returns.

Composing Components

The real power of components is composition — using components inside other components to build complex UIs from simple pieces.

card.jsx

// Small, focused components
function Avatar() {
  return <img src="/avatar.png" alt="User" className="avatar" />;
}

function UserName({ name }) {
  return <h3 className="username">{name}</h3>;
}

// Composed into a bigger component
function UserCard() {
  return (
    <div className="card">
      <Avatar />
      <UserName name="Alex Johnson" />
      <p>React developer & coffee enthusiast</p>
    </div>
  );
}

export default UserCard;

Component Files

Each component typically lives in its own file. By convention, the filename matches the component name:

app.jsx

// App.jsx - the root component
import Button from './Button';
import UserCard from './UserCard';

function App() {
  return (
    <div className="app">
      <header>
        <h1>My App</h1>
        <Button />
      </header>
      <main>
        <UserCard />
        <UserCard />
        <UserCard />
      </main>
    </div>
  );
}

export default App;
// Note: the same UserCard is used 3 times!
// Components are reusable by design.

Start every component in its own file. It makes code easier to find, test, and reuse.

Rules of Components

Name starts with capital letter — MyButton not myButton
Returns JSX — always returns a single root element (or null)
Pure functions — given the same input, always returns the same output. No side effects during render.

← JSX — HTML in JavaScript Props — Passing Data →