React Components

A React component is a reusable piece of UI. Think of components like Lego bricks: you build small, self-contained pieces and snap them together to create a full interface.

A typical React app has many components. A navbar is a component. A card is a component. A button can be a component. Each one handles one piece of the UI, and you can use them as many times as you need.

What a component looks like

At its simplest, a component is a JavaScript function that returns JSX:

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

To use that component somewhere else, write it like an HTML tag:

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  );
}

That renders two “Hello, world!” headings. One component, used twice. That is the core idea.

Components form a tree

A React app is a tree of components. At the top sits one root component, usually called App. Everything else nests inside it.

App
├── Navbar
├── Sidebar
└── MainContent
    ├── ArticleList
    │   ├── ArticleCard
    │   └── ArticleCard
    └── Footer

Each component knows nothing about the others unless you explicitly pass data between them. This keeps things predictable and easy to change.

Passing data with props

Components can receive data from their parent through props (short for properties). You pass props like HTML attributes:

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

function App() {
  return <Greeting name="Alice" />;
}

Props let you reuse the same component with different data. The Functional Components page covers props in detail.

Components return JSX

The return value of a component is JSX : a syntax that looks like HTML but lives inside JavaScript. JSX lets you describe what the UI should look like in a familiar way.

function Card() {
  return (
    <div className="card">
      <h2>Card Title</h2>
      <p>Some description text.</p>
    </div>
  );
}

Note: use className instead of class in JSX. That is one of the key differences from plain HTML.

Two types of components

React supports two ways to write components:

  • Functional components (recommended): plain JavaScript functions. This is how you should write all new components. See Functional Components .
  • Class components (legacy): ES6 classes that extend React.Component. Still supported, but not recommended for new code. See Class Components .

Functional components, combined with React Hooks , can do everything class components can do. Stick with functional components unless you are working in an existing codebase that uses classes.

Mounting the root component

Every React app starts by mounting one root component into the HTML page. With React 18 and later, you do this with createRoot:

// main.jsx (or index.js)
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

The HTML file has a <div id="root"> and React takes it from there. You only call createRoot once. Everything else happens through the component tree.

Common mistakes

Component names must start with a capital letter.

// Wrong: React treats this as a plain HTML element
function greeting() { ... }

// Correct
function Greeting() { ... }

If your component name starts with a lowercase letter, React will try to render it as a native HTML element (like <div> or <span>) and it will not work as expected.

A component must return a single root element.

// Wrong: two siblings at the top level
function App() {
  return (
    <h1>Title</h1>
    <p>Paragraph</p>
  );
}

// Correct: wrap in a fragment
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

The empty <> and </> are a React Fragment. They group elements without adding an extra <div> to the DOM.

What to learn next