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.

Resources

Project Repository Solution Repository

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 UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        setUsers(data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };
    
    fetchUsers();
    
    // Cleanup function
    return () => {
      console.log('Component unmounted');
    };
  }, []); // Empty dependency array means this effect runs once on mount
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.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.

Resources

Project Repository Solution Repository