React Components

Introduction to Components

Components are the building blocks of React applications. They let you split UI into independent, reusable pieces.

Function vs Class Components

Function components are plain JS functions that return JSX. Class components extend React.Component:

// Function component
function Welcome({ name }) {
  return <h2>Welcome, {name}!</h2>
}

// Class component
import React from 'react';
class WelcomeClass extends React.Component {
  render() {
    return <h2>Welcome, {this.props.name}!</h2>
  }
}
 

Props & Children

Props are inputs to components. The special children prop contains nested elements:

function Box({ title, children }) {
  return (
    <div className="box">
      <h3>{title}</h3>
      {children}
    </div>
  )
}

// Usage
<Box title="Note">
  <p>This is a child paragraph.</p>
</Box>
 

Lifecycle & Effects

Class components have lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount). Function components use useEffect instead:

import { useEffect } from 'react';
function Timer() {
  useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000);
    return () => clearInterval(id);
  }, []); // empty deps = mount/unmount
  return <p>Timer running in console</p>;
}
 

Composition & Patterns

Compose components instead of inheritance. Common patterns:

• Render Prop
• Higher-Order Component (HOC)
• Compound Components

// Render prop example
function DataLoader({ render }) {
  const data = fetchData();
  return render(data);
}

<DataLoader render={data => <div>{data}</div>} />