React js — Components

A functional component is a plain JavaScript function that accepts props and returns a React element. They are simpler, easier to read, and (because of Hooks) can hold state and side-effects

Get Zeki Ahmed’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

A component in React is like a self-contained building block of a user interface. When we say “Reusable UI block”, we mean a piece of code that:

• Encapsulates UI & Behavior
  It bundles together the structure (HTML/JSX), styling (CSS), and logic (JavaScript), so it can be dropped anywhere in your app without rewriting everything.
• Accepts Inputs via Props
  Props are like parameters that let you customize the component’s appearance or behavior.
  Example: A Button component can accept label, color, and onClick props to render differently based on usage.
• Ensures Consistency & Maintainability
  If you use the same component multiple places, updates need to be made only once — in the component file — to instantly change everywhere .
• Promotes Scalability
  By reusing components, your code stays cleaner and easier to scale as your application grows .

Functional Component (Modern, Hooks-enabled)

import React, { useState, useEffect } from 'react';

function Greeting(props) {
  const [timeOfDay, setTimeOfDay] = useState('morning');

  useEffect(() => {
    const hour = new Date().getHours();
    setTimeOfDay(hour < 12 ? 'morning' : hour < 18 ? 'afternoon' : 'evening');
  }, []);

  return <h1>Hello, {props.name}! Good {timeOfDay}.</h1>;
}

export default Greeting;

• Props: Passed via props.name.
• State: useState hook creates a state variable timeOfDay.
• Side Effects: useEffect updates state on component mount.