Other Essential Libraries

// React Router v6 setup
import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/users">Users</Link>
            </nav>
            
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/users" element={<Users />} />
                <Route path="/users/:id" element={<UserDetail />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

function Home() {
    return <h1>Welcome to our app!</h1>;
}

function About() {
    return <h1>About Us</h1>;
}

function Users() {
    const [users, setUsers] = useState([]);
    
    useEffect(() => {
        fetch('/api/users')
            .then(res => res.json())
            .then(setUsers);
    }, []);
    
    return (
        <div>
            <h1>Users</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>
                        <Link to={'/users/' + user.id}>{user.name}</Link>
                    </li>
                ))}
            </ul>
        </div>
    );
}

function UserDetail() {
    const { id } = useParams();
    const navigate = useNavigate();
    const [user, setUser] = useState(null);
    
    useEffect(() => {
        fetch('/api/users/' + id)
            .then(res => res.json())
            .then(setUser);
    }, [id]);
    
    if (!user) return <div>Loading...</div>;
    
    return (
        <div>
            <h1>{user.name}</h1>
            <p>Email: {user.email}</p>
            <button onClick={() => navigate('/users')}>Back to Users</button>
        </div>
    );
}

function NotFound() {
    return <h1>404 - Page Not Found</h1>;
}

// Styled Components
import styled from 'styled-components';

// Basic styled components
const Button = styled.button`
    background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    
    &:hover {
        background-color: ${props => props.primary ? '#0056b3' : '#545b62'};
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
`;

const Card = styled.div`
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 10px;
    transition: transform 0.2s ease;
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
`;

const Title = styled.h1`
    color: #333;
    font-size: 2rem;
    margin-bottom: 1rem;
    
    ${props => props.small && `
        font-size: 1.5rem;
    `}
`;

// Extended components
const PrimaryButton = styled(Button)`
    background-color: #28a745;
    
    &:hover {
        background-color: #218838;
    }
`;

// Responsive design
const Container = styled.div`
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    
    @media (max-width: 768px) {
        padding: 0 10px;
    }
`;

const Grid = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 15px;
    }
`;

// Usage
function StyledExample() {
    return (
        <Container>
            <Title>Styled Components Example</Title>
            <Grid>
                <Card>
                    <h3>Card 1</h3>
                    <p>This is a styled card component.</p>
                    <Button>Regular Button</Button>
                </Card>
                <Card>
                    <h3>Card 2</h3>
                    <p>Another styled card component.</p>
                    <PrimaryButton>Primary Button</PrimaryButton>
                </Card>
            </Grid>
        </Container>
    );
}

// Exercise: Build a Complete React App with Ecosystem Libraries
// Create a comprehensive application using multiple React ecosystem libraries

// App.js - Main application with all libraries integrated
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import styled from 'styled-components';
import { useForm } from 'react-hook-form';

const queryClient = new QueryClient();

// Styled components
const AppContainer = styled.div`
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
`;

const Header = styled.header`
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

const Nav = styled.nav`
    display: flex;
    gap: 20px;
    
    a {
        color: #333;
        text-decoration: none;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.2s;
        
        &:hover {
            background-color: #f0f0f0;
        }
    }
`;

const MainContent = styled.main`
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

// User management with React Query
function UserManagement() {
    const { data: users, isLoading, error } = useQuery({
        queryKey: ['users'],
        queryFn: async () => {
            const response = await fetch('/api/users');
            return response.json();
        },
    });

    if (isLoading) return <div>Loading users...</div>;
    if (error) return <div>Error loading users</div>;

    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
        >
            <h2>User Management</h2>
            <UserList users={users} />
            <AddUserForm />
        </motion.div>
    );
}

// User list with animations
function UserList({ users }) {
    return (
        <motion.div layout>
            {users.map((user, index) => (
                <motion.div
                    key={user.id}
                    layout
                    initial={{ opacity: 0, x: -50 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: 50 }}
                    transition={{ duration: 0.3, delay: index * 0.1 }}
                    whileHover={{ scale: 1.02 }}
                    style={{
                        padding: '15px',
                        margin: '10px 0',
                        border: '1px solid #ddd',
                        borderRadius: '8px',
                        backgroundColor: '#f9f9f9',
                    }}
                >
                    <h3>{user.name}</h3>
                    <p>{user.email}</p>
                </motion.div>
            ))}
        </motion.div>
    );
}

// Add user form with React Hook Form
function AddUserForm() {
    const queryClient = useQueryClient();
    const {
        register,
        handleSubmit,
        formState: { errors, isSubmitting },
        reset,
    } = useForm();

    const addUserMutation = useMutation({
        mutationFn: async (userData) => {
            const response = await fetch('/api/users', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(userData),
            });
            return response.json();
        },
        onSuccess: () => {
            queryClient.invalidateQueries(['users']);
            reset();
        },
    });

    const onSubmit = (data) => {
        addUserMutation.mutate(data);
    };

    return (
        <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
        >
            <h3>Add New User</h3>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div>
                    <input
                        placeholder="Name"
                        {...register('name', { required: 'Name is required' })}
                    />
                    {errors.name && <span className="error">{errors.name.message}</span>}
                </div>
                <div>
                    <input
                        placeholder="Email"
                        type="email"
                        {...register('email', { required: 'Email is required' })}
                    />
                    {errors.email && <span className="error">{errors.email.message}</span>}
                </div>
                <motion.button
                    type="submit"
                    disabled={isSubmitting}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                >
                    {isSubmitting ? 'Adding...' : 'Add User'}
                </motion.button>
            </form>
        </motion.div>
    );
}

// Dashboard with animations
function Dashboard() {
    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8 }}
        >
            <motion.h1
                initial={{ y: -50 }}
                animate={{ y: 0 }}
                transition={{ duration: 0.6 }}
            >
                Dashboard
            </motion.h1>
            
            <motion.div
                initial={{ scale: 0.8 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                    gap: '20px',
                    marginTop: '30px',
                }}
            >
                <motion.div
                    whileHover={{ y: -5 }}
                    style={{
                        padding: '20px',
                        backgroundColor: '#e3f2fd',
                        borderRadius: '8px',
                        textAlign: 'center',
                    }}
                >
                    <h3>Total Users</h3>
                    <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>1,234</p>
                </motion.div>
                
                <motion.div
                    whileHover={{ y: -5 }}
                    style={{
                        padding: '20px',
                        backgroundColor: '#f3e5f5',
                        borderRadius: '8px',
                        textAlign: 'center',
                    }}
                >
                    <h3>Active Sessions</h3>
                    <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>567</p>
                </motion.div>
                
                <motion.div
                    whileHover={{ y: -5 }}
                    style={{
                        padding: '20px',
                        backgroundColor: '#e8f5e8',
                        borderRadius: '8px',
                        textAlign: 'center',
                    }}
                >
                    <h3>Revenue</h3>
                    <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>$12,345</p>
                </motion.div>
            </motion.div>
        </motion.div>
    );
}

// Main App component
function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <BrowserRouter>
                <AppContainer>
                    <Header>
                        <h1>React Ecosystem Demo</h1>
                        <Nav>
                            <Link to="/">Dashboard</Link>
                            <Link to="/users">Users</Link>
                            <Link to="/about">About</Link>
                        </Nav>
                    </Header>
                    
                    <MainContent>
                        <AnimatePresence mode="wait">
                            <Routes>
                                <Route path="/" element={<Dashboard />} />
                                <Route path="/users" element={<UserManagement />} />
                                <Route path="/about" element={<About />} />
                            </Routes>
                        </AnimatePresence>
                    </MainContent>
                </AppContainer>
            </BrowserRouter>
        </QueryClientProvider>
    );
}

// Challenge: Add authentication with React Query
// Challenge: Add real-time updates with WebSocket
// Challenge: Add advanced animations and transitions