Frontend Mastery Playbook #5

Code Example

// React component for media gallery
function ProductCard({ title, price }) {
  return (
    <article className="product-card">
      <h3>{title}</h3>
      <p className="price">${price}</p>
    </article>
  );
}

// Objective: strengthen accessibility
// Run: element.addEventListener('click', handler)

Commands & References

• element.addEventListener('click', handler)
• npm create vite@latest my-app
• npm run build

Lab Steps

1. Set up with: element.addEventListener('click', handler)
2. Build or refactor the component for the scenario.
3. Validate accessibility and performance.
4. Propose one improvement for production.

Exercises

• Add one accessibility enhancement.
• Implement one performance optimization.
• Write one unit test for this component.