A Simple Analogy

React components are like LEGO bricks. Each brick (component) is independent, reusable, and snaps together to build complex structures. Change one brick without affecting others.

---

What Is React?

React is a JavaScript library for building user interfaces with reusable components. It uses virtual DOM to efficiently update pages when data changes.

---

Why Use React?

• Reusability: Build with components
• Reactivity: Auto-update when data changes
• Developer experience: Clear, maintainable code
• Performance: Virtual DOM optimizations
• Ecosystem: Huge library of tools and packages

---

Components and Props

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

// Usage
<Welcome name="Alice" />
// Output: <h1>Hello, Alice!</h1>

// Component with props and logic
function UserCard({ user }) {
    return (
        <div>
            <h2>{user.name}</h2>
            <p>Email: {user.email}</p>
            <button>Follow</button>
        </div>
    );
}

---

State and Hooks

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>
    );
}

---

Effects (Side Effects)

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    
    // Fetch user when component loads or userId changes
    useEffect(() => {
        const fetchUser = async () => {
            const response = await fetch(`/api/users/${userId}`);
            const data = await response.json();
            setUser(data);
        };
        
        fetchUser();
    }, [userId]);  // Dependencies
    
    if (!user) return <p>Loading...</p>;
    return <h1>{user.name}</h1>;
}

---

Practical Example

function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState("");
    
    const addTodo = () => {
        setTodos([...todos, { id: Date.now(), text: input }]);
        setInput("");
    };
    
    const removeTodo = (id) => {
        setTodos(todos.filter(t => t.id !== id));
    };
    
    return (
        <div>
            <h1>Todo List</h1>
            <input
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Add todo..."
            />
            <button onClick={addTodo}>Add</button>
            
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={() => removeTodo(todo.id)}>
                            Delete
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

---

Conditional Rendering

function Dashboard({ isAdmin, user }) {
    if (!user) return <p>Please log in</p>;
    
    return (
        <div>
            <h1>Welcome, {user.name}</h1>
            {isAdmin && <button>Admin Panel</button>}
            {isAdmin ? <AdminView /> : <UserView />}
        </div>
    );
}

---

Best Practices

1. Lift state up: Share state at parent component
2. Use keys in lists: Helps React identify elements
3. Avoid unnecessary renders: Use React.memo
4. Custom hooks: Extract reusable logic
5. Props drilling: Consider context for global state

---

Related Concepts to Explore

• Context API (global state)
• Redux or Zustand (state management)
• React Router (navigation)
• Component composition patterns
• Performance optimization

---

Summary

React makes building interactive UIs easier with components and hooks. Master functional components, state management, and effects to build modern, responsive applications.