React — Function Components

Basic Function Component

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

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

// With implicit return
const Welcome = () => <h1>Hello, World!</h1>;

Function Component with Props

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

// Usage
<Welcome name="John" />

Function Component with State

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

Function Component Examples

// User profile component
function UserProfile({ user }) {
    return (
        <div className="profile">
            <img src={user.avatar} alt={user.name} />
            <h3>{user.name}</h3>
            <p>{user.email}</p>
        </div>
    );
}

// Todo item component
function TodoItem({ todo, onToggle, onDelete }) {
    return (
        <li className={todo.completed ? 'completed' : ''}>
            <span onClick={() => onToggle(todo.id)}>
                {todo.text}
            </span>
            <button onClick={() => onDelete(todo.id)}>
                Delete
            </button>
        </li>
    );
}

// Button component
function Button({ children, onClick, variant = 'primary' }) {
    return (
        <button
            className={`btn btn-${variant}`}
            onClick={onClick}
        >
            {children}
        </button>
    );
}

// Usage
function App() {
    return (
        <div>
            <Button onClick={() => alert('Clicked!')}>
                Click Me
            </Button>
        </div>
    );
}

Mini Practice

Write React code that:

1. Creates a function component
2. Uses props in a function component
3. Adds state with useState hook
4. Creates reusable components

Up Next

Next: Learn about Props.