React — Components

What are Components?

Components are independent, reusable pieces of UI. Each component is a function that accepts data (props) and returns JSX describing what should appear on screen.

function Welcome() {
  return <h1>Hello, World!</h1>;
}

Function Components

The modern way to write React components:

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function style
const Welcome = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Class Components (Legacy)

The older way — you'll encounter these in older codebases:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Function components with hooks have replaced class components in modern React.

Using Components

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

Each <Welcome /> is a separate instance with its own props.

Props

Props are how you pass data to components:

// Define a component with props
function UserCard({ name, email, avatar }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

// Use it with props
function App() {
  return (
    <UserCard
      name="Alice Johnson"
      email="alice@example.com"
      avatar="/images/alice.jpg"
    />
  );
}

Props are read-only

A component should never modify its own props:

// Wrong: trying to modify props
function Bad({ name }) {
  name = "Changed!";  // Don't do this
  return <h1>{name}</h1>;
}

// Right: use state if you need to change data
function Good({ name }) {
  const [displayName, setDisplayName] = useState(name);
  return <h1>{displayName}</h1>;
}

Default props

function Button({ label = "Click me", color = "blue" }) {
  return (
    <button style={{ backgroundColor: color }}>
      {label}
    </button>
  );
}

Component Composition

Build complex UIs by combining simple components:

function Header() {
  return (
    <header>
      <h1>My App</h1>
      <nav>
        <a href="/home">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  );
}

function Footer() {
  return (
    <footer>
      <p>© 2026 My App. All rights reserved.</p>
    </footer>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to my app!</p>
      </main>
      <Footer />
    </div>
  );
}

Children Props

Components can wrap other content:

function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

// Usage
function App() {
  return (
    <Card title="User Info">
      <p>Name: Alice</p>
      <p>Email: alice@example.com</p>
      <button>Edit Profile</button>
    </Card>
  );
}

Practical Examples

Todo Item Component

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li className={todo.done ? "completed" : ""}>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={() => onToggle(todo.id)}
      />
      <span>{todo.text}</span>
      <button onClick={() => onDelete(todo.id)}>Delete</button>
    </li>
  );
}

Product Card

function ProductCard({ product }) {
  return (
    <div className="product">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p className="price">${product.price}</p>
      <p className="description">{product.description}</p>
      <button>Add to Cart</button>
    </div>
  );
}

Best Practices

• One component per file — keeps code organized
• Name components with PascalCase — UserCard, not userCard
• Keep components small — if a component does too much, split it
• Extract reusable pieces — if you copy-paste JSX, make a component
• Props should be simple — avoid passing complex objects when possible

Mini Practice

1. Create a Greeting component that takes a name prop
2. Create a UserCard component with name, email, and avatar props
3. Build a Card component that uses children
4. Create a list of TodoItem components from an array of data

Up Next

Next: JSX syntax →