Frontend Patterns Skill

Modern React patterns and best practices for building scalable applications.

Component Patterns

1. Compound Components

// Parent provides context, children consume it
const Tabs = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
};