reactlisted

# React Framework - Quick Reference **Version**: 1.0.0 **Framework**: React 18+ **Use Case**: Fast lookups during active development --- ## When to Use This skill is loaded by `frontend-developer` when: - `package.json` contains `"react"` dependency (≥18.0.0) - Project has `.jsx` or `.tsx` files in `src/` - User explicitly mentions "React" in task description - Next.js, Vite, or Create React App detected **Minimum Detection Confidence**: 0.8 (80%) --- ## Quick Start ### Basic Component ```tsx import { FC } from 'react'; interface Props { title: string; onAction?: () => void; } export const MyComponent: FC<Props> = ({ title, onAction }) => { return ( <div> <h1>{title}</h1> <button onClick={onAction}>Action</button> </div> ); }; ``` --- ## Core Patterns ### 1. Component Design #### Functional Component Structure ```tsx // 1. Imports (grouped and sorted) import { useState, useEffect } from 'react'; import type { FC, ReactNode } from 'react'; // 2. Types/Interfaces interface Props { children: ReactNode; className?: string; } // 3. Component export const Component: FC<Props> = ({ children, className }) => { // 4. Hooks (state, effects, context) const [state, setState] = useState<string>(''); useEffect(() => { // Side effects }, []); // 5. Event handlers const handleClick = () => { setState('clicked'); }; // 6. Early returns (error states, loading) if (!children) return null; // 7. Main render retur