Module 2: Build Sprint 1

Understanding Your First Ticket

Learn how to approach your first ticket in the Labs project and understand the development workflow.

Your First Ticket

Resources

Approaching Your First Feature

Learn best practices for implementing features in a React application and working with the project's codebase.

Feature Implementation Checklist

  • Understand requirements fully before coding
  • Break down the task into smaller subtasks
  • Create a new branch for your feature
  • Follow project coding standards
  • Write clean, maintainable code
  • Test your changes thoroughly
  • Document your code and changes
  • Create a pull request with a clear description

Resources

Working with APIs

Understand how to interact with APIs, handle data fetching, and manage state in your React application. 

// Example of fetching data from an API using axios
import axios from 'axios';
import { useState, useEffect } from 'react';

function DataFetching() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

Resources

Component Design

Learn how to create well-designed, reusable components for your React application.

// Example of a reusable button component
import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({ 
  variant = 'primary',
  size = 'medium',
  disabled = false,
  children,
  onClick,
  ...props 
}) => {
  const classNames = `btn btn-${variant} btn-${size} ${disabled ? 'btn-disabled' : ''}`;
  
  return (
    <button 
      className={classNames}
      disabled={disabled}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
};

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary', 'danger', 'success']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  disabled: PropTypes.bool,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func
};

export default Button;

Resources