React Cursor Rules

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
• Jump to hook declarations
• Move between JSX elements

Smart Selection

• Select JSX blocks and expressions
• Expand selection to include props
• Smart hook usage selection

Code Manipulation

• Quick component insertion
• Automated prop handling
• Hook declaration management

Best Practices

• Use component-aware navigation
• Leverage hook-specific cursor movements
• Utilize JSX-aware selection

Examples

// 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:

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