Rule

typescript react

via PatrickJS/awesome-cursorrules

TypeScript React development with functional components and strict typing.

What is typescript react?

Configures Cursor for TypeScript React projects using functional components, hooks, and strict type checking. Use this rule when building React applications with TypeScript to enforce best practices around component structure, prop typing, and code organization.

Enforces functional components with React.FC and proper prop interfaces
Guides hook usage (useState, useEffect) and custom hook creation
Recommends folder structure separating components, hooks, pages, types, and utils
Enables code-splitting via React.lazy and Suspense for performance
Suggests error boundaries and ESLint configuration for code quality
Promotes TypeScript strict mode and type inference patterns

Applies to

File patterns this rule matches.

**/*

Rule definition (reference)

Source of truth, from the repository.

// TypeScript React .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// TypeScript React best practices

const typescriptReactBestPractices = [ "Use React.FC for functional components with props", "Utilize useState and useEffect hooks for state and side effects", "Implement proper TypeScript interfaces for props and state", "Use React.memo for performance optimization when needed", "Implement custom hooks for reusable logic", "Utilize TypeScript's strict mode", ];

// Folder structure

const folderStructure = src/ components/ hooks/ pages/ types/ utils/ App.tsx index.tsx;

// Additional instructions

const additionalInstructions = `

Use .tsx extension for files with JSX
Implement strict TypeScript checks
Utilize React.lazy and Suspense for code-splitting
Use type inference where possible
Implement error boundaries for robust error handling
Follow React and TypeScript best practices and naming conventions
Use ESLint with TypeScript and React plugins for code quality `;

Related rules