React Component Types

In the previous lesson, we learned how to nest components inside other components to build complex user interfaces. Now, let’s explore the different types of components you can create in React.

📦 React Component Types

There are two main ways to create components in React:

1. Functional Components: JavaScript functions that return JSX (Modern approach)
2. Class Components: ES6 classes that extend from React.Component (Legacy approach)

🎯 Functional Components

Functional Components are JavaScript functions that return JSX. They are the most popular way to create components in modern React applications.

Basic Functional Component Syntax

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

More Complex Functional Component

function UserProfile() {
  const userName = "John Doe";
  const userAge = 25;
  const userEmail = "john@example.com";

  return (
    <div className="user-profile">
      <h2>User Profile</h2>
      <p>
        <strong>Name:</strong> {userName}
      </p>
      <p>
        <strong>Age:</strong> {userAge}
      </p>
      <p>
        <strong>Email:</strong> {userEmail}
      </p>
    </div>
  );
}

Arrow Functional Components

You can also write Functional Components using arrow function syntax:

const Welcome = () => {
  return <h1>Welcome to React!</h1>;
};

// Or even shorter for simple components
const SimpleGreeting = () => <h1>Hello, World!</h1>;

🏗️ Class Components

Class Components are ES6 classes that extend from React.Component. While they’re still supported, they’re considered the legacy approach.

Basic Class Component Syntax

import React from "react";

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

More Complex Class Component

import React from "react";

class UserProfile extends React.Component {
  render() {
    const userName = "John Doe";
    const userAge = 25;
    const userEmail = "john@example.com";

    return (
      <div className="user-profile">
        <h2>User Profile</h2>
        <p>
          <strong>Name:</strong> {userName}
        </p>
        <p>
          <strong>Age:</strong> {userAge}
        </p>
        <p>
          <strong>Email:</strong> {userEmail}
        </p>
      </div>
    );
  }
}

Class Component Structure

🔄 Converting Between Component Types

Let’s see how to convert the same component between different types:

Example: Shopping List Item

Functional Component Version:

function ShoppingItem() {
  const itemName = "Apples";
  const quantity = 5;
  const price = 3.99;
  const isUrgent = true;

  return (
    <div className="shopping-item">
      <h3>{itemName}</h3>
      <p>Quantity: {quantity}</p>
      <p>Price: ${price}</p>
      {isUrgent && <span className="urgent">🔴 Urgent!</span>}
      <p>Total: ${(quantity * price).toFixed(2)}</p>
    </div>
  );
}

To convert this to a Class Component, you would do the following:

1. Change the function declaration to a class declaration
2. Move the return statement into a render method
3. Move the const declarations into the render method, why we need to do this? Because class components require all variables to be defined within the class scope.

Class Component Version:

import React from "react";

class ShoppingItem extends React.Component {
  render() {
    const itemName = "Apples";
    const quantity = 5;
    const price = 3.99;
    const isUrgent = true;

    return (
      <div className="shopping-item">
        <h3>{itemName}</h3>
        <p>Quantity: {quantity}</p>
        <p>Price: ${price}</p>
        {isUrgent && <span className="urgent">🔴 Urgent!</span>}
        <p>Total: ${(quantity * price).toFixed(2)}</p>
      </div>
    );
  }
}

⚡ Functional Components vs Class Components

🚀 Why Functional Components Are Preferred

1. Simpler Syntax

Functional components have less boilerplate code:

// Function Component (4 lines)
function Greeting() {
  return <h1>Hello, World!</h1>;
}

// Class Component (7 lines)
import React from "react";

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

2. Better Performance

Functional components are slightly more performant because they don’t have the overhead of class instantiation.

3. Hooks Support

Functional components can use React Hooks (which we’ll learn about later), while class components cannot.

4. Easier Testing

Functional components are easier to test because they’re just functions.

5. Future of React

The React team focuses new features on functional components.

🎯 When to Use Each Type

Use Functional Components When:

• ✅ Starting a new project
• ✅ Creating simple components
• ✅ Want to use React Hooks
• ✅ Want cleaner, more readable code
• ✅ Building modern React applications

Use Class Components When:

• 🔄 Working with legacy code
• 🔄 Maintaining existing class-based components
• 🔄 Team specifically requires class components
• 🔄 Converting gradually from class to function components

🔄 Can we use class components inside functional components and vice versa?

Yes, you can use class components inside functional components and vice versa. This allows you to leverage existing class-based components while building new features with functional components. However, it’s generally recommended to convert class components to functional components when possible, especially for new development.

🔧 Practice Exercise

Let’s create a simple blog post component using both approaches:

Function Component Solution:

function BlogPost() {
  const post = {
    title: "Getting Started with React",
    author: "Jane Developer",
    date: "March 15, 2024",
    content: "React is a powerful library for building user interfaces...",
    readingTime: 5,
    isPublished: true,
  };

  return (
    <article className="blog-post">
      {post.isPublished && (
        <>
          <h1>{post.title}</h1>
          <div className="meta">
            <p>
              By {post.author} • {post.date}
            </p>
            <p>📖 {post.readingTime} min read</p>
          </div>
          <div className="content">
            <p>{post.content}</p>
          </div>
        </>
      )}
      {!post.isPublished && (
        <p className="draft">This post is still in draft mode.</p>
      )}
    </article>
  );
}

⚠️ Common Mistakes to Avoid

🧩 What You’ve Learned

• ✅ React has two main component types: Functional Components and Class Components
• ✅ Functional Components are modern, simple functions that return JSX
• ✅ Class Components are ES6 classes that extend React.Component with a render method
• ✅ Functional Components are preferred in modern React development
• ✅ Class Components are still supported but considered legacy
• ✅ How to convert between component types
• ✅ When to use each type and common mistakes to avoid
• ✅ Practical examples of both component types

🚀 What’s Next?

Excellent! You now understand the different types of React components and when to use each.