Code-Alongs - Web Unit 2 Sprint 6

Code-Along 1: Building a React Component Library with useState and Props

Follow along as we build a reusable component library using React and styled-components, focusing on useState for state management and props for component communication.

What You'll Learn

• Setting up a component library: Structure your project for scalability and reusability
• Creating functional components: Build UI components using React's functional component pattern
• Managing state with useState: Implement state management within components
• Passing data with props: Create dynamic, reusable components that accept different inputs
• Component composition: Combine smaller components to build more complex interfaces
• Event handling: Add interactivity to components using event handlers

What You'll Build

In this code-along, you'll build a component library that includes:

• Button components with various states (primary, secondary, disabled)
• Form input components with validation
• A counter component demonstrating useState
• A toggle component for boolean states
• Card components for displaying content
• A demo page showcasing all components

// Example of what you'll create:
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="counter">
      <h2>Counter: {count}</h2>
      <Button onClick={() => setCount(count - 1)}>Decrease</Button>
      <Button primary onClick={() => setCount(count + 1)}>Increase</Button>
      <Button secondary onClick={() => setCount(0)}>Reset</Button>
    </div>
  );
}

Note: Please visit the platform to access the current code-along materials and videos.

Code-Along 2: Advanced State Management with useEffect and APIs

Learn advanced state management techniques using the useEffect hook in React, including data fetching, handling side effects, and working with external APIs.

What You'll Learn

• Understanding side effects in React: Learn when and why to use useEffect
• API integration: Fetch and display data from external APIs
• Dependency arrays: Control when your effects run
• Loading states: Implement loading indicators for better UX
• Cleaning up effects: Properly handle component unmounting
• Error handling: Gracefully manage API errors
• Conditional rendering: Display different UI based on state

What You'll Build

In this code-along, you'll build a data-driven application that includes:

• A dashboard that displays data from an external API
• Search functionality that updates results as you type
• Filters that automatically refresh content
• Pagination with useEffect for loading more data
• A data visualization component with cleanup
• Error boundaries and fallback UI

// Example of what you'll create:
import React, { useState, useEffect } from 'react';

function UserDirectory() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [search, setSearch] = useState('');
  
  useEffect(() => {
    async function fetchUsers() {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/users');
        if (!response.ok) throw new Error('Failed to fetch');
        const data = await response.json();
        setUsers(data);
        setError(null);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    fetchUsers();
  }, []); // Empty dependency array means this runs once on mount
  
  // Filter users based on search term
  const filteredUsers = users.filter(user => 
    user.name.toLowerCase().includes(search.toLowerCase())
  );
  
  return (
    <div>
      <h1>User Directory</h1>
      <input 
        type="text" 
        placeholder="Search users..." 
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      
      {loading && <p>Loading users...</p>}
      {error && <p>Error: {error}</p>}
      
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

Note: Please visit the platform to access the current code-along materials and videos.