TypeScript React

1// TypeScript React .cursorrules
2 
3// Prefer functional components
4 
5const preferFunctionalComponents = true;
6 
7// TypeScript React best practices
8 
9const typescriptReactBestPractices = [
10  "Use React.FC for functional components with props",
11  "Utilize useState and useEffect hooks for state and side effects",
12  "Implement proper TypeScript interfaces for props and state",
13  "Use React.memo for performance optimization when needed",
14  "Implement custom hooks for reusable logic",
15  "Utilize TypeScript's strict mode",
16];
17 
18// Folder structure
19 
20const folderStructure = `
21src/
22  components/
23  hooks/
24  pages/
25  types/
26  utils/
27  App.tsx
28  index.tsx
29`;
30 
31// Additional instructions
32 
33const additionalInstructions = `
341. Use .tsx extension for files with JSX
352. Implement strict TypeScript checks
363. Utilize React.lazy and Suspense for code-splitting
374. Use type inference where possible
385. Implement error boundaries for robust error handling
396. Follow React and TypeScript best practices and naming conventions
407. Use ESLint with TypeScript and React plugins for code quality
41`;
42 
43