React Cursor Rules: JSX, Hooks, and Component Patterns
Comprehensive React cursor rules covering component architecture, JSX patterns, hooks usage, accessibility, and testing for maintainable, performant applications.
Overview
Professional cursor rules for React that emphasize modern component architecture, hooks, and JSX. These rules help AI assistants generate clean, accessible, and maintainable React code with complete context and effective patterns.
Note:
Optimizes React 18+ patterns, hooks, and JSX with context-aware code generation aligned to modern best practices.
Rules Configuration
.cursor/rules/react.mdc
---
description: Enforces best practices for React development, focusing on context-aware code generation, component architecture, hooks usage, and JSX patterns. Provides comprehensive guidelines for writing clean, efficient, and maintainable React code with proper context.
globs: **/*.{js,jsx,ts,tsx}
---
# React Best Practices
You are an expert in React 18+ development and related web technologies.
You understand modern React practices, architectural patterns, and the importance of providing complete context in code generation.
## React-Specific Rules
Cursor rules in React provide intelligent navigation and manipulation capabilities designed specifically for React development. These rules help you work more efficiently with components, hooks, and JSX.
### Component Navigation
- Navigate between component definitions and usages
- Jump to hook declarations and dependencies
- Move between JSX elements and their props
- Access component boundaries and composition
### Smart Selection
- Select complete JSX blocks and expressions
- Expand selection to include component props
- Smart hook dependency selection
- Select complete component definitions
### Code Manipulation
- Quick component creation and refactoring
- Prop type and interface management
- Hook declaration and cleanup optimization
- JSX structure manipulation
## Best Practices
- Use component-aware navigation
- Leverage hook-specific patterns
- Utilize JSX-aware selection
- Maintain clear component composition
Key Features
Hooks Intelligence
Dependency awareness for effects, state patterns, and cleanup
Type Safety
Interface and prop validation for TS and JS projects
Testing Built-In
Generate tests with React Testing Library and Jest
Accessibility
ARIA roles, keyboard navigation, and semantic HTML
Performance
Memoization, code splitting, and lazy loading patterns
Component Composition
Compound components and context-driven patterns
Installation
Choose Your IDE
Select the appropriate file path based on your development environment.
Create the Rules File
Create the cursor rules file in your project using the tabs above.
Add the Rules Configuration
Copy the configuration markdown into the file.
Start Building
Your AI assistant will follow React best practices automatically.
Use Cases
Component Libraries
Reusable UI components with clear props and stories
React Applications
Feature-rich apps with state management and routing
Next.js Full-Stack
Server-first apps with hybrid rendering strategies
Design Systems
Consistent UI with tokens, themes, and accessibility
Standards Reference
| Standard | Description | Enforcement |
|---|---|---|
| React 18 | Modern component and hook patterns | Required in all code |
| JSX | Declarative UI syntax | Enforced via structure |
| Hooks | State and side-effect management | Dependency awareness |
| Testing | RTL/Jest coverage | Auto-generated with code |
| Accessibility | ARIA and semantic HTML | Built into patterns |
| Architecture | Composition and separation of concerns | Enforced via structure |
Note:
Combine these rules with TypeScript and ESLint for maximum code quality.
Best Practices
Code Organization
- Components expose clear props
- Context providers manage shared state
- Utilities and hooks encapsulate logic
- Pages compose features and layouts
State Management
- Prefer local state for UI concerns
- Use context for cross-cutting state
- Apply reducers for complex state transitions
- Keep effects focused and dependency-safe
Performance
- Memoize components and values where beneficial
- Split code by route and feature boundaries
- Defer non-critical work and lazy load assets
- Avoid unnecessary re-renders
Testing Strategy
- Unit tests for components and hooks
- Integration tests for user flows
- Mock external dependencies appropriately
- Measure coverage for core features
Related Resources
- Frontend framework cursor rules overview
- Next.js cursor rules for server-first apps
- TypeScript cursor rules for strict typing
- JavaScript cursor rules for modern ES features
- General cursor rules best practices and patterns
Note:
These rules work with any React project and pair well with Next.js. Adjust framework-specific sections as needed.
Related Articles
Astro Cursor Rules: Islands Architecture & Static Content
Comprehensive Astro cursor rules covering component islands, static generation, content collections, and hydration directives for fast, SEO-friendly sites.
Python Cursor Rules: AI-Powered Development Best Practices
Cursor rules for Python development enforcing PEP 8 standards, modern Python features, and clean code principles with AI assistance for production-ready code.
Flutter Cursor Rules: Widgets, State Management, Performance
Flutter cursor rules for clean widgets, state management, performance, platform integration, testing, and deployment. Build maintainable, reliable mobile apps.