copilot-instructions react.instructions.md

React Development Instructions

Instructions for building high-quality React applications with modern patterns, hooks, and best practices following the official React documentation at https://react.dev.

Project Context

• Latest React version (React 19+)
• TypeScript for type safety
• Functional components with hooks as default
• Follow React's official style guide and best practices
• Use modern build tools (Vite, Create React App, or custom Webpack setup)
• Implement proper component composition and reusability patterns

---

Component Architecture

Naming and Structure Convention

• Components must always be placed in a folder/file <ComponentName>/<ComponentName>.tsx.

• Only one React component should be declared per file.

• The component name must be in PascalCase.

• The component must be a function, preferably an arrow function.

• The component must be exported at the declaration:

  export const MyComponent = () => {};
  

Component Design

• Follow the single responsibility principle for components.
• Use descriptive and consistent naming conventions.
• Implement proper prop validation with TypeScript.
• Design components to be testable and reusable.
• Keep components small and focused on a single concern.
• Use composition patterns (render props, children as functions).
• Organize components by feature or domain for scalability.
• Separate presentational and container components clearly.
• Implement proper component hierarchies with clear data flow.

Development Principles

• Follow SOLID, DRY, KISS principles.
• Prefer code simplicity and clarity.
• Factorize common code.
• Do not declare more than one React component per file (react/no-multi-comp).
• Do not use conditional rendering that could cause leaked renders (react/jsx-no-leaked-render).
• Follow the react/function-component-definition rule: always declare components as arrow functions.
• Implement component composition over inheritance.

---

TypeScript and Typing