React Cursor Rules

---
description: Enforces best practices for React development, focusing on component architecture, hooks usage, and JSX patterns. Provides comprehensive guidelines for writing clean, efficient, and maintainable React applications.
globs: ["**/*.jsx", "**/*.tsx", "**/*.js", "**/*.ts"]
---

## 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 React components, hooks, and JSX syntax.

### Component Navigation

- Navigate between component definitions and their usages
- Jump to hook declarations and dependencies
- Move between JSX elements and their props
- Quick access to component lifecycle methods

### Smart Selection

- Select complete JSX blocks and expressions
- Expand selection to include component props
- Smart hook usage and dependency selection
- Select complete component definitions

### Code Manipulation

- Quick component creation and refactoring
- Automated prop type management
- Hook declaration and cleanup optimization
- JSX structure manipulation

## Best Practices

- Use component-aware navigation for better code organization
- Leverage hook-specific cursor movements
- Utilize JSX-aware selection patterns
- Follow React component lifecycle patterns

## Examples

```jsx
// Navigate between component definitions
function Header({ title }) {
  return <h1>{title}</h1>;
}

// Smart selection of hooks and JSX
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const theme = useContext(ThemeContext);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  return (
    <div className={theme.profile}>
      {user ? (
        <>
          <Header title={user.name} />
          <p>{user.bio}</p>
        </>
      ) : (
        <Loading />
      )}
    </div>
  );
}
``

## Configuration

Customize React-specific cursor rules in your settings:

```json
{
  "react.cursorRules": {
    "componentNavigation": true,
    "smartSelection": true,
    "jsxHandling": true
  }
}