Understanding React Components: A Complete Guide for Beginners

What Are React Components?

React components are the building blocks of any React application. They are independent, reusable pieces of UI that behave like JavaScript functions and return HTML via JSX (JavaScript XML).

 Why Use Components?

  • Reusability of code

  • Better separation of concerns

  • Simplified debugging and testing

  • Faster development with modularity

Types of React Components

React primarily supports two types of components:

Functional Components

A simple JavaScript function that returns JSX. Ideal for UI-focused logic and hooks.

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

Or using arrow function syntax:

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

Lightweight, easier to read, and support Hooks (like useState, useEffect).

Class Components

ES6 classes that extend React.Component. They use render() method and can hold state.

import React, { Component } from 'react';

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

Less preferred in modern development since Hooks provide similar power with simpler code.

Key Concepts in React Components

JSX

JSX allows writing HTML-like syntax inside JavaScript:

const element = <h1>Hello, world!</h1>;

Props (Short for Properties)

Used to pass data from parent to child component:

function Greet(props) {
  return <h2>Hello, {props.name}!</h2>;
}

Usage:

<Greet name="Arvinder" />

State

State is local data storage specific to a component, used to manage dynamic behavior:

Component Lifecycle (Class Components)

Lifecycle methods allow you to run code at specific times in a component’s life:

  • componentDidMount()

  • componentDidUpdate()

  • componentWillUnmount()

Modern React prefers Hooks for lifecycle logic:

useEffect(() => {
  // similar to componentDidMount
}, []);

Practical Example: Parent and Child Components

App.js

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Arvinder" />
    </div>
  );
}

export default App;

Greeting.js

import React from 'react';

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

Functional vs Class Components (Comparison Table)

FeatureFunctional ComponentsClass Components
SyntaxFunctionsES6 Classes
StateuseState() hookthis.state
LifecycleuseEffect()Lifecycle methods
Simplicity✅ Simple & concise❌ Verbose
PerformanceSlightly betterSlightly heavier
UsageMost recommended (2025)Legacy support

Best Practices for Using React Components

  • Break UI into small components (Single Responsibility Principle)

  • Use meaningful component names

  • Keep components pure and reusable

  • Use prop-types or TypeScript for prop validation

  • Extract logic into custom hooks when needed

FAQs on React Components

❓ What is the difference between a component and a hook?

  • A component is a building block of UI.

  • A hook is a feature used inside functional components to manage logic like state and side effects.

❓ Can I use state in all components?

Only functional components (with Hooks) and class components can use state. You can’t use state in plain JavaScript functions.

❓ Should I still use class components in 2025?

It’s recommended to use functional components with hooks, but class components are still supported for legacy codebases.

Scroll to Top