REACT104 - Components in React

Components are the core building blocks of every React application.
In this lesson, you will learn what components are, why they exist, and how to create and organize them properly.

What Is a Component?

A component is a reusable piece of UI that encapsulates structure, logic, and presentation.
React applications are built by combining many small components into larger ones.

Examples of components:

• Button
• Header
• Footer
• ProductCard
• Navbar

Each component represents a specific responsibility in the UI.

Functional Components

Modern React uses functional components instead of class components.

A functional component is simply a JavaScript function that returns JSX.

function Hello() {
  return <h1>Hello React</h1>;
}

Components must start with a capital letter so React can distinguish them from HTML elements.

Using Components

Once defined, components can be used like HTML tags.

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

This allows you to reuse the same UI logic multiple times.

Component File Structure

A common pattern is one component per file.

Example structure:

• src/
  • components/
    • Header.jsx
    • Footer.jsx
    • Button.jsx

This keeps your codebase organized and scalable.

Returning Multiple Elements

React components must return a single parent element.

Use a wrapper element:

function Card() {
  return (
    <div>
      <h2>Title</h2>
      <p>Description</p>
    </div>
  );
}

Or use React Fragment:

function Card() {
  return (
    <>
      <h2>Title</h2>
      <p>Description</p>
    </>
  );
}

Fragments avoid unnecessary DOM elements.

Component Composition

Components can include other components inside them.

function Layout() {
  return (
    <div>
      <Header />
      <main>Content here</main>
      <Footer />
    </div>
  );
}

This is called component composition and is a fundamental React pattern.

Single Responsibility Principle

Each component should have one clear responsibility.

Bad example:

• Component handles layout
• Fetches data
• Manages form logic
• Styles UI

Good approach:

• Separate components for layout
• Separate components for logic
• Smaller, focused components

This makes components easier to test and maintain.

Naming Conventions

Recommended conventions:

• Component names use PascalCase
• File names match component names
• Keep names descriptive but concise

Examples:

• UserCard
• ProductList
• LoginForm

Summary

In this lesson, you learned:

• What React components are
• How to write functional components
• How to use and reuse components
• Component file organization
• Returning multiple elements safely
• Component composition
• Best practices for naming and structure

In the next lesson, we will explore Props and learn how components communicate with each other.