2. Components & Props

Building modular UI components and passing read-only data via props.

By DevBytes Team • Updated 2026-08-09

Code Implementation & Snippet

React.js Example

// Child Component
function UserBadge({ name, role = "Member" }) {
  return (
    <div className="px-3 py-1 bg-zinc-100 rounded-full text-xs">
      <span className="font-bold">{name}</span> ({role})
    </div>
  );
}

// Parent Component
export default function TeamList() {
  return (
    <div className="flex gap-2">
      <UserBadge name="Alice" role="Lead Dev" />
      <UserBadge name="Bob" />
    </div>
  );
}

Core Concepts Explained

1Components are independent, reusable pieces of UI that act like JavaScript functions.

2Props (short for properties) are read-only inputs passed from parent components to child components.

3Always treat props as immutable. If data needs to change over time, use State instead.

Interview & Revision Takeaways

•Master React.js Complete Course: Zero to Mastery concepts.
•Practice challenge: Add a default prop for `avatar` inside `UserBadge`.

Explore Next TopicReact Hooks: useMemo vs useCallback