Components

Introduction

You have already seen JSX and React elements — the building blocks React uses to describe what should appear on screen. But writing raw elements for an entire application would be repetitive and hard to manage. React solves this with components: the single most important concept in the entire library.

Almost everything you build in React — a button, a navbar, a whole page — is a component. This lesson introduces what a component actually is, how components combine to build bigger UIs, the rules around naming them, and the two syntaxes React supports for writing them.

What is a Component?

A component is an independent, reusable piece of UI. Think of it like a custom HTML element you define yourself — instead of being limited to <div>, <button>, or <p>, you can create your own building blocks like <Navbar />, <ProductCard />, or <LoginForm />, each bundling up its own markup and logic.

Once you define a component, you can use it as many times as you like, anywhere in your application, just by referencing its name in JSX. Each usage is called an "instance" of that component, and each instance can display different data.

function Welcome() {
  return <h1>Hello, welcome to PrograMinds!</h1>;
}

// Using the component like a custom HTML tag
function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

Hello, welcome to PrograMinds!

Composing Components

Composing components simply means nesting them inside one another to build bigger pieces of UI from smaller ones — exactly the way HTML tags nest inside each other. A Page component might render a Header, a list of Card components, and a Footer, each of which might contain even smaller components.

function Header() {
  return <h1>My Store</h1>;
}

function ProductCard({ name }) {
  return <div className="card">{name}</div>;
}

function Footer() {
  return <p>© 2026 My Store</p>;
}

function Page() {
  return (
    <div>
      <Header />
      <ProductCard name="Keyboard" />
      <ProductCard name="Mouse" />
      <Footer />
    </div>
  );
}

My Store
Keyboard
Mouse
© 2026 My Store

Component Naming Rules

React uses a simple but strict rule to tell components apart from regular HTML tags: component names must start with a capital letter. Lowercase names like <div> or <button> are treated as built-in HTML tags, while capitalized names like <Welcome /> or <ProductCard /> are treated as your own components.

Two Ways to Write Components

React has always supported two syntaxes for defining a component: function components and class components. Both ultimately do the same job — accept some input and return JSX describing the UI — but they look and behave quite differently.

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

// Class component (legacy, still seen in older code)
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

You will rarely need to write a brand-new class component in modern React code, but you will still encounter them when reading older projects, tutorials, or libraries — which is exactly why the next two lessons cover both in detail.

Example: A Small Component Tree

Here is a slightly larger example showing composition in action: a top-level App component made entirely out of smaller, named components.

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

function UserInfo() {
  return (
    <div>
      <Avatar />
      <p>Amol Chipte</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Dashboard</h1>
      <UserInfo />
    </div>
  );
}

export default App;

Dashboard
[avatar image]
Amol Chipte

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Components are the core unit of React development: independent, reusable, nameable pieces of UI that compose together into full applications. Getting comfortable with the idea of building UIs out of small, named building blocks is the biggest mental shift when learning React.

In this lesson, you learned what a component is, how composition works, the capitalization naming rule, and that components can be written as functions or classes. Next, you will go deep on function components — the modern standard for writing React UIs.