React Components

Components as Building Blocks

A React component is a JavaScript function (or, historically, a class) that returns JSX describing a piece of UI. You compose small components into larger ones: a Button inside a Form inside a Page.

Good components have a single responsibility, accept props for configuration, and hide implementation details. This makes them easier to test, reuse, and refactor as your application grows.

function Card({ title, children }) {
  return (
    <article className="card">
      <h2>{title}</h2>
      {children}
    </article>
  );
}

function App() {
  return (
    <Card title="Profile | PHPKINGDOM">
      <p>Welcome back!</p>
    </Card>
  );
}

Card is reusable; App composes it with specific content via props and children.

Component Conventions

// PascalCase for component names
function UserAvatar() { ... }

// One component per file (common pattern)
// UserAvatar.jsx

export default function UserAvatar() { ... }

// Named exports for multiple related components
export function UserAvatar() { ... }
export function UserBadge() { ... }

• Component names must start with a capital letter so React distinguishes them from HTML tags.
• Export components as default or named exports depending on team convention.
• Colocate styles, tests, and subcomponents near the component when practical.
• Keep components focused — split when a file grows hard to read.

Component Patterns

Common ways to structure and export React components.

Composition Over Inheritance

React favors composition — nesting components and passing props/children — over class-style inheritance. You rarely extend a base component; instead you wrap, slot, or configure behavior through props.

• Use children for open-ended content slots.
• Pass render props or components as props for customizable behavior.
• Extract shared logic into custom hooks rather than base classes.
• Prefer small, composable pieces over deep component hierarchies.

Choosing Component Granularity

Split a component when it has multiple distinct responsibilities, when parts are reused elsewhere, or when testing becomes difficult. Keep related markup together when splitting would scatter logic unnecessarily.

Common Mistakes

• Naming components in camelCase instead of PascalCase.
• Creating mega-components that handle fetching, state, and all UI in one file.
• Defining components inside other components (causes remounting every render).
• Over-abstracting too early before reuse patterns are clear.

Key Takeaways

• Components are reusable functions that return JSX.
• Compose small components into larger UI trees.
• Use PascalCase names and consistent export patterns.
• Prefer composition and hooks over inheritance.