⚛️ Component Definition

React Basics · Components

? Quick Overview

Components are the core building blocks of a React application. They define what appears on the screen and how it behaves. Each component is an independent, reusable piece of the UI.

In React, components can be defined as functions or classes. Both return JSX to describe the UI, but they differ in syntax and how features like state and lifecycle are handled.

? Key Concepts

Component – Reusable UI piece that returns JSX.
Functional Component – A plain JavaScript function that returns JSX.
Class Component – An ES6 class that extends React.Component.
Props – Read-only inputs passed into components.
State – Data managed inside a component that can change over time.
Hooks – Functions like useState and useEffect that bring state and lifecycle to functional components.

? Syntax & Theory

A React component must return JSX, which looks like HTML but is actually JavaScript syntax. React then converts this JSX into DOM elements.

You can define a component in two ways:

Function components – Modern, concise, and the recommended way using Hooks.
Class components – Older style using ES6 classes with lifecycle methods.

? Functional Components

A Functional Component is a JavaScript function that returns JSX. It receives data through props and renders UI based on them.

? View Code Example

// Functional component that greets the user by name
function Welcome(props) {
  return (
    <div>
      <h2>Hello, {props.name}!</h2>
      <p>This is a Functional Component.</p>
    </div>
  );
}

export default Welcome;

Functional components are preferred in modern React because they are easier to write, test, and enhance with Hooks like useState and useEffect.

?️ Class Components

A Class Component is defined using ES6 classes and extends React.Component. It must include a render() method that returns JSX.

? View Code Example

// Class component with the same behavior as the functional one
import React, { Component } from "react";

class WelcomeClass extends Component {
  render() {
    return (
      <div>
        <h2>Hello, {this.props.name}!</h2>
        <p>This is a Class Component.</p>
      </div>
    );
  }
}

export default WelcomeClass;

Class components were widely used before Hooks were introduced in React 16.8. They support lifecycle methods like componentDidMount() and componentDidUpdate().

? Using Both Components in App.js

You can render both components inside a single parent like App to compare their behavior.

? View Code Example

// App component rendering both functional and class components
import React from "react";
import Welcome from "./Welcome";
import WelcomeClass from "./WelcomeClass";

function App() {
  return (
    <div>
      <Welcome name="Akash" />
      <WelcomeClass name="Akash" />
    </div>
  );
}

export default App;

? Key Differences

Feature	Functional Component	Class Component
Syntax	Simple function returning JSX	ES6 class extending React.Component
State	Uses Hooks (e.g., `useState`)	Uses `this.state`
Lifecycle	Managed via Hooks (e.g., `useEffect`)	Uses lifecycle methods (e.g., `componentDidMount`)
Performance	Lighter and generally faster	Heavier due to class overhead
Code Readability	Short and simple	More verbose

?️ Live Output / Explanation

When you render the App component with the code above, the browser will show:

Hello, Akash! from the functional component.
Hello, Akash! from the class component.

Both components behave identically from the user’s point of view. The main difference is how they are written and how they manage state and lifecycle internally.

? Tips & Best Practices

Prefer functional components — they are the future of React.
Always start component names with a capital letter (e.g., MyButton).
Pass props to components to make them reusable and dynamic.
Keep each component focused on a single responsibility.
Use Hooks like useState and useEffect instead of class lifecycle methods in new code.

? When to Use Which?

✅ Use Functional Components for most modern React apps — they’re concise and powerful.
✅ Use Class Components only if you’re maintaining older React codebases.
⚠️ Functional components can do everything classes can — thanks to Hooks!

? Try It Yourself

Create a WelcomeMessage functional component that accepts name and course as props and displays a greeting.
Create another WelcomeClass component using the class syntax with the same output.
Render both inside App.js and observe that they behave identically.
Convert your class component into a functional one using Hooks syntax later.

Goal: Understand the syntax, structure, and behavior of both functional and class components in React, and know when to use each.