React Components

Components are the core building blocks of any React application. A component is an independent, reusable piece of the user interface. Think of a webpage as a puzzle — each piece of that puzzle is a component. Components can be as small as a button or as large as an entire page layout.

Every React application is made up of components that work together. These components can be combined, nested, and reused throughout the application.

Why Use Components?

Consider a website that displays a list of product cards. Without components, the same HTML code for each card would need to be written over and over. With components, a single ProductCard component is defined once and used as many times as needed — with different data each time.

This approach follows the principle of DRY (Don't Repeat Yourself), which keeps code clean and maintainable.

Types of Components in React

React has two types of components:

• Functional Components — The modern and preferred way to write components. They are JavaScript functions that return JSX.
• Class Components — The older way of writing components. They use JavaScript classes. Class components are still found in older codebases but are no longer recommended for new projects.

Functional Components

A functional component is simply a JavaScript function that returns JSX. The function name must start with a capital letter — this is how React distinguishes between custom components and regular HTML elements.

function Welcome() {
  return <h1>Welcome to My Website!</h1>;
}

This component can be used anywhere in the application like an HTML tag:

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

When <Welcome /> appears in the JSX, React calls the Welcome function and renders whatever it returns.

Class Components (For Reference)

Class components were the standard before React Hooks were introduced. They are written using JavaScript classes and include a render() method that returns JSX:

import { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Welcome to My Website!</h1>;
  }
}

Both functional and class components produce the same result in this example. However, functional components with Hooks are now the standard. This course focuses on functional components throughout.

Nesting Components

Components can be placed inside other components — this is called nesting. Just as HTML elements can be nested inside each other, React components can be nested to build complex layouts from simple parts.

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

function Footer() {
  return <footer><p>© 2025 My Blog</p></footer>;
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>This is the main content area.</p>
      </main>
      <Footer />
    </div>
  );
}

In this example, App is the parent component that contains both Header and Footer as children. This creates a component tree where App is at the root.

The Component Tree

In React, components form a tree structure. The top-level component (usually called App) is the root, and all other components branch from it. This hierarchical structure helps organize the application logically.

App
├── Header
├── Main Content
│   ├── Sidebar
│   └── ArticleList
│       ├── ArticleCard
│       ├── ArticleCard
│       └── ArticleCard
└── Footer

Reusing Components

One of the greatest advantages of components is reusability. A single component can be used multiple times with different content each time. Here is an example using a simple Button component:

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

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

This renders three identical buttons. In the next topic, Props will be introduced to make each instance of a component display different content.

Component Naming Convention

React component names must always start with a capital letter. This is not just a style choice — it is required by React:

• <button> — React treats this as the built-in HTML button element.
• <Button> — React treats this as a custom component and looks for a function or class named Button.

Exporting and Importing Components

In real applications, each component is usually written in its own file and then imported where needed.

In Button.jsx:

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

export default Button;

In App.jsx:

import Button from './Button';

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

export default App;

The export default statement makes the component available to be imported in other files. The import statement at the top of App.jsx brings it in.

Key Points

• Components are the building blocks of a React application.
• Functional components are the modern standard — they are simple JavaScript functions that return JSX.
• Component names must always start with a capital letter.
• Components can be nested inside each other to create complex layouts.
• Components should be written in separate files and imported where needed.
• Reusing components keeps code clean and avoids repetition.

The next topic introduces Props, which are used to pass data into components so each instance can display different content.