React Development Patterns

Master React development with AI assistance using proven patterns and workflows for Cursor IDE and Claude Code. These recipes cover everything from component creation to state management, testing, and performance optimization.

Quick Setup for React Projects

Initialize React Project with AI Assistance

Cursor IDE

1. Open Cursor and create a new project
2. Open Agent mode (Cmd/Ctrl + I)
3. Prompt: “Use Context7 to get the latest Vite documentation. Create a new React TypeScript project with Vite, Tailwind CSS, and testing setup using current best practices”
4. Enable YOLO mode to let Cursor run all setup commands automatically
5. Review the generated project structure and configuration files

Claude Code

1. Navigate to your projects directory
2. Run claude to start Claude Code
3. Enable Figma MCP if using designs: claude mcp add figma --transport sse http://127.0.0.1:3845/sse
4. Use: “Use Context7 to get latest Vite and Vitest documentation. Create a new React TypeScript project with Vite, Tailwind CSS, vitest for testing, and proper folder structure following current best practices”
5. Claude will execute all necessary commands and create the project structure
6. Run /init to create a CLAUDE.md file with React-specific guidelines

Configure AI Context for React

Figma Integration Setup

.mcp.json

{
  "mcpServers": {
    "figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Create context files to help AI understand your React patterns:

.cursor/rules/react-patterns.md

# React Development Rules

## Component Standards
- Use functional components with TypeScript
- Prefer named exports for components
- Keep components under 150 lines
- Extract custom hooks for logic reuse

## State Management
- Use React Query/TanStack Query for server state
- Zustand for client-side global state
- Local state with useState for component-specific data

## Testing Requirements
- Write tests for all components using vitest and @testing-library/react
- Minimum 80% coverage for business logic
- Test user interactions, not implementation details

Component Development Patterns

Creating New Components

From Design

Scenario: Convert a Figma design to a React component

Using Figma MCP Server:

# Enable Figma MCP in your Figma desktop app
# Preferences > Enable Dev Mode MCP Server

# Add Figma MCP to Claude Code
claude mcp add figma --transport sse http://127.0.0.1:3845/sse

# Or add to Cursor
# Settings > MCP > Add Server > URL: http://127.0.0.1:3845/sse

Cursor Workflow with Figma MCP:

1. Select the component in Figma (with MCP server running)
2. In Cursor: “Using the Figma MCP server, generate a React component from my current Figma selection. Use TypeScript and Tailwind CSS”
3. The AI will use get_code to fetch the exact design structure
4. Review generated component with proper design tokens

Alternative Manual Workflow:

1. Take a screenshot of the Figma design
2. Drag the image into Cursor chat
3. Prompt: “Create a React component based on this design. Use TypeScript, Tailwind CSS for styling, and make it responsive”
4. Review the generated component
5. Ask: “Add proper TypeScript types and make the component reusable with props”

Claude Code Workflow:

1. Save the design screenshot in your project
2. Reference it: “Look at design.png and create a React component that matches this design. Use TypeScript, Tailwind CSS, and ensure it’s fully responsive”
3. Claude will analyze the image and generate the component
4. Follow up: “Add Storybook stories for this component with different states”

From Requirements

Scenario: Build a data table component with sorting and filtering

Example Prompt:

Create a reusable DataTable component with these features:
- TypeScript with proper generics for row data type
- Column sorting (click header to sort)
- Text filtering for each column
- Pagination with customizable page size
- Loading and empty states
- Use Tailwind CSS for styling
- Make it accessible with proper ARIA labels

Enhancement Workflow:

1. Generate the base component
2. Extract design tokens: “Using Figma MCP, get all design variables (colors, spacing, typography) used in this component”
3. Add features incrementally: “Add row selection with checkbox column”
4. Optimize: “Add virtualization for large datasets using @tanstack/react-virtual”
5. Test: “Write comprehensive tests for sorting and filtering logic”

Refactoring Class Components to Hooks

Cursor Agent Mode Approach:

I have a class component in UserProfile.tsx that needs to be converted to a functional component with hooks.
Please:
1. Convert all lifecycle methods to useEffect
2. Convert state to useState
3. Extract any complex logic into custom hooks
4. Maintain all existing functionality
5. Update the tests to work with the new implementation

Notatka

💡 Pro Tip: Use Cursor’s checkpoint feature before major refactoring. This allows you to safely experiment and rollback if needed.

State Management Recipes

Setting Up Zustand Store

Cursor Prompt Example

# First get the latest Zustand patterns
Use Context7 to fetch Zustand documentation and best practices

# Then create the store following current patterns
Create a Zustand store for managing user authentication with:
- User profile data
- Login/logout actions
- Persist to localStorage
- TypeScript types for all state and actions
- Selectors for commonly accessed data
- DevTools integration

React Query Integration

Claude Code Recipe:

# First, get the latest React Query documentation
Use Context7 to get TanStack Query documentation for v5

# Then implement based on current best practices
Set up React Query in our app with:
1. Configure QueryClient with sensible defaults
2. Create custom hooks for our API endpoints
3. Add optimistic updates for mutations
4. Implement proper error handling
5. Set up query invalidation patterns

Design System Integration

Using Figma Code Connect

# PRD: Integrate Figma design system with React codebase
# Plan: Use Figma Code Connect for component mapping

"Using Figma MCP with Code Connect enabled:
1. Get code connect mappings for design system components
2. Generate React components that use our existing component library
3. Extract and apply design tokens consistently"

# Example workflow
"Select the Button component in Figma and generate React code that:
- Uses our existing Button component from '@/components/ui'
- Applies the correct variant based on Figma properties
- Uses our design token system for colors and spacing"

Extracting Design Tokens

// Use Figma MCP to extract design tokens
"Using Figma MCP get_variable_defs:
1. List all color tokens used in the selected design
2. List spacing and typography tokens
3. Generate a theme configuration file"

// Example output
export const theme = {
  colors: {
    primary: {
      blue: '#1D4ED8', // From Figma: Primary/Blue
      dark: '#1E40AF'  // From Figma: Primary/Dark
    },
    neutral: {
      gray90: '#1A1A1A' // From Figma: Neutral/Gray90
    }
  },
  spacing: {
    sm: '8px',   // From Figma: Spacing/S
    md: '16px',  // From Figma: Spacing/M
    lg: '24px'   // From Figma: Spacing/L
  }
};

Advanced Patterns

Performance Optimization

1. Identify Performance Issues

   • Cursor: “Analyze MyComponent.tsx for potential performance issues and suggest optimizations”
   • Claude Code: “Review the entire components directory and identify components that could benefit from React.memo, useMemo, or useCallback”

2. Implement Optimizations

   Optimize the ProductList component:
   - Add React.memo with proper comparison function
   - Use useMemo for expensive calculations
   - Implement virtualization for the list
   - Add lazy loading for images

3. Verify Improvements

   • Generate performance tests
   • Add React DevTools Profiler markers
   • Create benchmarks for critical paths
   • Use Context7 to get latest React performance optimization patterns

Custom Hooks Library

Building a Custom Hooks Collection:

Cursor Workflow

1. Create a new file: src/hooks/index.ts
2. Agent prompt: “Create a collection of useful custom hooks for our React app including useDebounce, useLocalStorage, useFetch, useIntersectionObserver, and useMediaQuery. Include TypeScript types and JSDoc comments”
3. For each hook, ask: “Add comprehensive tests for useDebounce hook”

Claude Code Workflow

1. Use planning mode: /think Create a well-organized custom hooks library
2. Execute: “Create custom hooks in separate files under src/hooks/ with proper exports, TypeScript types, tests, and documentation”
3. Generate usage examples: “Create a hooks showcase page demonstrating each custom hook”

Testing Patterns

Component Testing Strategy

Testing Recipe

// Cursor/Claude Code Prompt:
Write comprehensive tests for the UserDashboard component:
1. Test loading states
2. Test error states
3. Test successful data rendering
4. Test user interactions (clicks, form submissions)
5. Test accessibility requirements
6. Mock API calls properly
7. Use @testing-library/react best practices

Integration Testing

Multi-Component Interaction Testing:

Create integration tests for the checkout flow:
- Test the entire flow from cart to payment
- Mock API responses for different scenarios
- Test error recovery
- Verify proper state updates across components
- Test loading states between steps

React Native Patterns

Cross-Platform Component Development

Shared Component Library:

# PRD: Need cross-platform button component
# Plan: Use Context7 to research React Native Web patterns
# Todo:
1. Use Context7 to get React Native documentation for cross-platform components
2. Create a Button component that works in both React web and React Native:
   - [ ] Use a shared types file
   - [ ] Create platform-specific implementations
   - [ ] Export from a common index file
   - [ ] Include proper styling for each platform
   - [ ] Add Storybook stories for web
   - [ ] Add examples for React Native

Common Pitfalls and Solutions

Avoiding Over-Rendering

Diagnosis and Fix Pattern:

1. Identify: “Find components in our app that might be re-rendering unnecessarily”
2. Analyze: “Add console.logs or React DevTools Profiler integration to track renders”
3. Fix: “Implement proper memoization and state lifting where needed”
4. Verify: “Create tests to ensure render count stays optimal”

Managing Side Effects

useEffect Best Practices:

Review all useEffect hooks in the components/ directory and:
1. Ensure proper dependency arrays
2. Add cleanup functions where needed
3. Identify effects that should be event handlers instead
4. Split complex effects into smaller, focused ones
5. Add comments explaining why each effect is necessary

Deployment and Build Optimization

Production Build Configuration

Optimization Checklist:

Prepare our React app for production:
1. Configure code splitting with React.lazy
2. Set up proper tree shaking
3. Optimize bundle size with dynamic imports
4. Configure proper caching headers
5. Set up error boundaries
6. Add performance monitoring
7. Create a bundle analysis script

Next Steps

• Explore Vue.js Patterns for alternative framework approaches
• Check out Next.js Patterns for full-stack React applications
• Learn about Testing Patterns for comprehensive quality assurance

Wskazówka

Remember to always review AI-generated React code for:

• Proper dependency management in hooks
• Accessibility compliance
• Performance implications
• Security considerations (XSS prevention)
• Component reusability