Lesson 8 — Components in React (Function vs Class)

Introduction 😊

In React, everything is built using components.

A component is like a small building block 🧱 that helps you divide your UI into reusable and manageable parts.

In this lesson, you will learn:

• What components are in React
• Types of components
• Function components
• Class components
• Difference between Function and Class components
• Which one you should use

Let’s begin 🚀

What is a Component in React? ⚛️

A component is a reusable piece of UI.

Examples of components:

• Header
• Footer
• Button
• Login Form
• Navbar

👉 Each component handles its own logic and UI.

Real-life example 🌍

Think of a mobile phone 📱:

• Screen
• Camera
• Speaker
• Battery

Each part works independently, but together they form a phone.
That’s exactly how React components work.

Types of Components in React

React mainly has two types of components:

1️⃣ Function Components
2️⃣ Class Components

Let’s understand both.

Function Components (Recommended ✅)

Function components are simple JavaScript functions that return JSX.

Example of Function Component

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

export default Welcome;

Key Features of Function Components

• Simple and easy to write ✍️
• Use JavaScript functions
• Less code
• Better performance
• Can use React Hooks

👉 Today, function components are the most widely used in React.

Class Components

Class components are ES6 classes that extend React.Component.

Example of Class Component

import React, { Component } from "react";

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

export default Welcome;

Key Features of Class Components

• More verbose
• Uses render() method
• Can manage state (older approach)
• Cannot use hooks directly

👉 Class components were popular before hooks were introduced.

Function vs Class Components (Comparison Table)

Why Function Components Are Preferred Today 💡

React introduced Hooks to make function components powerful.

With hooks, function components can:

• Manage state
• Handle side effects
• Use lifecycle features

👉 Because of this, class components are now considered legacy.

When Should You Use Class Components? 🤔

You may still see class components:

• In old React projects
• In legacy enterprise applications

For new React projects, always use function components.

Creating Reusable Components ♻️

Components are reusable by design.

Example:

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

You can use it multiple times:

<Button />
<Button />
<Button />

👉 This makes React apps clean and maintainable.

Common Mistakes Beginners Make ❌

• Mixing class and function components
• Writing everything in one component
• Forgetting to export components
• Naming components in lowercase

💡 Always name components with Capital letters.

Conclusion 🎯

Components are the foundation of React applications.

Key takeaways:

• React apps are built using components
• Function components are simple and powerful
• Class components are older and mostly legacy
• Hooks made function components the best choice
• Reusable components keep code clean

👉 If you master components, you master React basics 💙

Frequently Asked Questions (FAQs) ❓

Are class components still used?

Yes, but mostly in old projects.

Can function components use state?

Yes, using React Hooks.

Which component should beginners learn?

Function components.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 9 — Props in React
Understanding how to pass data from one component to another.