React Components

React components are the building blocks of every React app. A component is a JavaScript function that returns JSX describing a piece of the user interface, such as a button, a card, or an entire page.

By splitting your UI into components, you can build each part separately, reuse it many times, and reason about it in isolation.

Creating a Function Component

A component name must start with a capital letter. React uses this to tell your components apart from built-in HTML tags like <div>.

function Welcome() {
  return <h2>Welcome to my site</h2>;
}

// Arrow function version
const Footer = () => <footer>© 2026 Naeem Amin</footer>;

Welcome to my site
© 2026 Naeem Amin

Composing Components

Components can render other components. This is called composition, and it is how small pieces become a whole app.

function Header() {
  return <header><h1>Portfolio</h1></header>;
}

function Project() {
  return <article>A weather dashboard built with React</article>;
}

export default function App() {
  return (
    <>
      <Header />
      <Project />
      <Project />
    </>
  );
}

Portfolio
A weather dashboard built with React
A weather dashboard built with React

Components in Separate Files

In real projects each component usually lives in its own file. Export it from one file and import it where you need it.

// src/components/Button.jsx
export default function Button() {
  return <button>Click me</button>;
}

// src/App.jsx
import Button from './components/Button.jsx';

export default function App() {
  return <Button />;
}

[Click me]

Rules for Components

• Start the name with a capital letter: UserCard, not userCard.
• Return JSX, or null to render nothing.
• Never define a component inside another component; define them at the top level of a file.
• Keep components pure: given the same inputs, return the same JSX without changing outside variables.

Class Components

Older React code uses class components that extend React.Component and have a render method. They still work, but new code should use function components with hooks, which are shorter and easier to reuse. This tutorial uses function components throughout.

Frequently asked questions

Why must React component names start with a capital letter?

JSX treats lowercase tags as HTML elements and capitalized tags as components. A lowercase component would be rendered as an unknown HTML tag instead of calling your function.

Should I use function or class components?

Use function components. They work with hooks, need less code, and are the approach recommended by the React team for all new code.

What is the difference between default and named exports for components?

A file can have one default export, imported with any name, and many named exports, imported with matching names in braces. Both work; many teams use one component per file with a default export.