// 18 tips tagged "react"
Every language evolves — callbacks become async/await, class components become hooks, jQuery becomes vanilla JS, and var becomes const. Tell Claude to read your legacy code and upgrade it to modern patterns, one module at a time, while keeping the behavior identical and the tests passing.
Point Claude at your templates and components and it adds what's missing for accessibility — ARIA labels, alt text, keyboard navigation, focus management, semantic HTML, and screen reader support — making your UI usable by everyone without a full accessibility audit.
Point Claude at your class-based React components and it converts them to modern function components — replacing lifecycle methods with useEffect, this.state with useState, and class methods with hooks, while preserving all the behavior and updating the tests.
Let Claude scaffold a Tauri 2 desktop app with typed Rust commands and a matching TypeScript frontend — bridging both languages so you don't have to.
Get shadcn/ui fully configured with the right Tailwind and tsconfig setup in one prompt — then ask Claude to customise the components you own.
Optimistic updates make your UI feel instant — the component updates before the server confirms, then rolls back on error. Getting this right without a library is tricky. Claude handles it cleanly.
Give Claude your OpenAPI spec and ask for a handcrafted typed API client — clean method names, custom error handling, and TanStack Query hooks, without the ugly auto-gen output.
Ask Claude to generate Storybook stories from your existing React components — it reads your prop types and produces complete CSF3 story files with meaningful variants in seconds.
Ask Claude to audit your UI components for WCAG accessibility issues — it catches semantic problems, missing ARIA attributes, and keyboard navigation gaps that automated tools miss.
Give Claude a clear product brief and let it scaffold a working full-stack MVP — backend, frontend, and dev tooling — in a single session.
Migrate React class components to functional components with hooks — Claude handles lifecycle methods, state, refs, and HoC replacements automatically.
CSS animations are expressive but syntax-heavy. Describe the motion you want — fade, slide, bounce, shimmer — and Claude handles the keyframes, timing functions, and accessibility considerations.