React Fundamentals: Components (Function & Class)

Introduction

Components are the building blocks of React applications. Every React app is made up of small, reusable pieces called components.

In this article, you’ll learn:

• What components are
• Types of components in React
• Functional vs Class components
• Differences, examples, and interview points

This topic is very important for beginners and interviews.

What is a Component in React?

A component is a reusable piece of UI that returns JSX.

Examples of components:

• Header
• Footer
• Button
• Login Form
• Product Card

In simple words: A component is a JavaScript function or class that returns UI.

Types of Components in React

React mainly has two types of components:

1. Functional Components
2. Class Components

1. Functional Components

Functional components are JavaScript functions that return JSX.

Example: Functional Component

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

export default Welcome;

Using Arrow Function

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

Features of Functional Components

• Simple and clean syntax
• Easier to read and test
• Uses Hooks for state and lifecycle
• Preferred in modern React development

2. Class Components

Class components are ES6 classes that extend React.Component.

Example: Class Component

import React, { Component } from 'react';

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

export default Welcome;

Features of Class Components

• Uses lifecycle methods
• Uses this.state and this.setState
• More verbose than functional components
• Mostly used in legacy projects

Functional vs Class Components

State in Components (Quick Intro)

Functional Component State

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Class Component State

class Counter extends Component {
  state = { count: 0 };

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Count: {this.state.count}
      </button>
    );
  }
}

Which Component Should You Use?

Use Functional Components because:

• They are simpler
• Supported by Hooks
• Recommended by React team
• Used in all modern projects

Class components are mostly for older React codebases.

Common Beginner Mistakes

• Forgetting to return JSX
• Using this inside functional components
• Not exporting components
• Mixing class and function syntax incorrectly

Components – Interview Quick Answer

What are components in React?

Components are reusable, independent UI blocks in React, written as functions or classes, that return JSX to define the user interface.