What Is a React Component? A Beginner's Guide

A React component is a small, reusable piece of code that describes part of a user interface (UI) — for example, a button, a search bar, or a whole page. You write a component once, and you can reuse it anywhere in your app. In plain words: a component is a JavaScript function that returns HTML-like markup, and React uses that function to draw part of the screen. This guide explains what components are, how to write one, and how they fit together, with small examples you can copy and run.

What is a React component, in simple terms?

Think of a web page like a set of building blocks. A navigation bar is one block. A product card is another block. A footer is another block. In React, each of these blocks is a component. A component is just a JavaScript function whose job is to return a piece of UI. React takes what each component returns and puts it on the screen.

Two rules make something a React component: its name starts with a capital letter (like Button, not button), and it returns markup written in JSX — a syntax that looks like HTML but lives inside JavaScript. That's it. Once you have a component, you can reuse it as many times as you like, just like reusing a function.

Why components matter

• Reusability — build a Button component once, use it on every page instead of retyping the same HTML.
• Organization — a big app becomes a tree of small, understandable pieces instead of one giant file.
• Easier updates — fix or restyle a component in one place and every use of it updates automatically.
• Testability — small components are easier to check in isolation than one huge page.

Your first component

Here is the smallest possible React component. It shows a greeting on the screen.

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

export default Greeting;

Line by line: function Greeting() defines a normal JavaScript function named Greeting (capital G, so React treats it as a component). The return statement gives back a piece of JSX — here, an h1 heading. export default Greeting makes this component available so other files can import and use it.

Using a component

Defining a component does nothing by itself — you also need to render it, meaning place it somewhere so React draws it on the page. You use a component the same way you'd use an HTML tag, but with a capital letter.

import Greeting from './Greeting';

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

import Greeting brings the component into this file. Inside App, writing <Greeting /> renders one copy of it — notice the self-closing slash, just like an HTML img tag. Because App uses <Greeting /> twice, the "Hello, world!" heading appears twice on the page. That's reuse in action.

Passing data into a component with props

A static "Hello, world!" is not very useful. Usually you want each copy of a component to show different data — for example, greeting a different person by name. You do this with props (short for "properties"), which work like arguments passed into a function.

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

// Using it:
<Greeting name="Amara" />
<Greeting name="Diego" />

Greeting(props) now accepts one argument, props, which is an object React builds from the attributes you write on the tag. {props.name} inside the JSX inserts the value of that prop — curly braces let you drop plain JavaScript values into markup. So <Greeting name="Amara" /> renders "Hello, Amara!", and <Greeting name="Diego" /> renders "Hello, Diego!" — same component, different output, because the data passed in is different.

Nesting components inside each other

Real apps are built by nesting small components inside bigger ones, like putting Lego pieces together. A Card component might contain a Title component and a Button component.

function Card({ title }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <Button label="Learn more" />
    </div>
  );
}

function Button({ label }) {
  return <button>{label}</button>;
}

Card({ title }) uses destructuring to pull the title value straight out of props, which is a shortcut for writing props.title everywhere. Inside its returned markup, Card renders a Button component and passes it a label prop. Button then reads that label and shows it as clickable button text. This is how a handful of small components combine into a full page.

Function components vs. the old class syntax

You may see older tutorials use "class components" instead of functions. Modern React (and this guide) uses function components — they are shorter, easier to read, and are what the official docs recommend today.

Rules for naming and writing components

1. Start the component name with a capital letter (Greeting, not greeting) — lowercase names are treated as regular HTML tags.
2. A component must return exactly one top-level element (wrap multiple elements in a single div, or an empty <>...</> fragment).
3. Keep each component focused on one job — if it's doing too much, split it into smaller components.
4. Never modify props inside a component — treat the data passed in as read-only.

Common mistakes beginners make

• Naming a component with a lowercase letter, so React quietly treats it as an unknown HTML tag instead of a component.
• Forgetting to import a component before using it in JSX.
• Returning two sibling elements without wrapping them in one parent element or fragment.
• Trying to change a prop's value directly inside the component instead of passing new data in from the parent.

Components are the foundation everything else in React is built on. Once you're comfortable writing and nesting them, the natural next steps are learning how to pass data with props in more detail and how components store their own data using state.