From 4b9e3f2a514be4704daa738315e8c68550889a14 Mon Sep 17 00:00:00 2001 From: Udaya Veeramreddygari Date: Thu, 10 Jul 2025 18:23:59 -0500 Subject: [PATCH] Added new reactJS instrcutions (#74) * Added new reacjs instructions * Update README.md * rerunning updater --------- Co-authored-by: Aaron Powell --- README.md | 1 + instructions/reactjs.instructions.md | 162 +++++++++++++++++++++++++++ 2 files changed, 163 insertions(+) create mode 100644 instructions/reactjs.instructions.md diff --git a/README.md b/README.md index a96f56b..a7c1882 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for | [PowerShell Cmdlet Development Guidelines](instructions/powershell.instructions.md) | PowerShell cmdlet and scripting best practices based on Microsoft guidelines | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md) | | [Python Coding Conventions](instructions/python.instructions.md) | Python coding conventions and guidelines | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) | | [Quarkus](instructions/quarkus.instructions.md) | Quarkus development standards and instructions | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus.instructions.md) | +| [ReactJS Development Instructions](instructions/reactjs.instructions.md) | ReactJS development standards and best practices | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Freactjs.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Freactjs.instructions.md) | | [Ruby on Rails](instructions/ruby-on-rails.instructions.md) | Ruby on Rails coding conventions and guidelines | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-on-rails.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-on-rails.instructions.md) | | [Secure Coding and OWASP Guidelines](instructions/security-and-owasp.instructions.md) | Comprehensive secure coding instructions for all languages and frameworks, based on OWASP Top 10 and industry best practices. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsecurity-and-owasp.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsecurity-and-owasp.instructions.md) | | [Spring Boot Development](instructions/springboot.instructions.md) | Guidelines for building Spring Boot base applications | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fspringboot.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fspringboot.instructions.md) | diff --git a/instructions/reactjs.instructions.md b/instructions/reactjs.instructions.md new file mode 100644 index 0000000..79bd275 --- /dev/null +++ b/instructions/reactjs.instructions.md @@ -0,0 +1,162 @@ +--- +description: 'ReactJS development standards and best practices' +applyTo: '**/*.jsx, **/*.tsx, **/*.js, **/*.ts, **/*.css, **/*.scss' +--- + +# ReactJS Development Instructions + +Instructions for building high-quality ReactJS 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 (when applicable) +- 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 + +## Development Standards + +### Architecture +- Use functional components with hooks as the primary pattern +- Implement component composition over inheritance +- Organize components by feature or domain for scalability +- Separate presentational and container components clearly +- Use custom hooks for reusable stateful logic +- Implement proper component hierarchies with clear data flow + +### TypeScript Integration +- Use TypeScript interfaces for props, state, and component definitions +- Define proper types for event handlers and refs +- Implement generic components where appropriate +- Use strict mode in `tsconfig.json` for type safety +- Leverage React's built-in types (`React.FC`, `React.ComponentProps`, etc.) +- Create union types for component variants and states + +### Component Design +- Follow the single responsibility principle for components +- Use descriptive and consistent naming conventions +- Implement proper prop validation with TypeScript or PropTypes +- Design components to be testable and reusable +- Keep components small and focused on a single concern +- Use composition patterns (render props, children as functions) + +### State Management +- Use `useState` for local component state +- Implement `useReducer` for complex state logic +- Leverage `useContext` for sharing state across component trees +- Consider external state management (Redux Toolkit, Zustand) for complex applications +- Implement proper state normalization and data structures +- Use React Query or SWR for server state management + +### Hooks and Effects +- Use `useEffect` with proper dependency arrays to avoid infinite loops +- Implement cleanup functions in effects to prevent memory leaks +- Use `useMemo` and `useCallback` for performance optimization when needed +- Create custom hooks for reusable stateful logic +- Follow the rules of hooks (only call at the top level) +- Use `useRef` for accessing DOM elements and storing mutable values + +### Styling +- Use CSS Modules, Styled Components, or modern CSS-in-JS solutions +- Implement responsive design with mobile-first approach +- Follow BEM methodology or similar naming conventions for CSS classes +- Use CSS custom properties (variables) for theming +- Implement consistent spacing, typography, and color systems +- Ensure accessibility with proper ARIA attributes and semantic HTML + +### Performance Optimization +- Use `React.memo` for component memoization when appropriate +- Implement code splitting with `React.lazy` and `Suspense` +- Optimize bundle size with tree shaking and dynamic imports +- Use `useMemo` and `useCallback` judiciously to prevent unnecessary re-renders +- Implement virtual scrolling for large lists +- Profile components with React DevTools to identify performance bottlenecks + +### Data Fetching +- Use modern data fetching libraries (React Query, SWR, Apollo Client) +- Implement proper loading, error, and success states +- Handle race conditions and request cancellation +- Use optimistic updates for better user experience +- Implement proper caching strategies +- Handle offline scenarios and network errors gracefully + +### Error Handling +- Implement Error Boundaries for component-level error handling +- Use proper error states in data fetching +- Implement fallback UI for error scenarios +- Log errors appropriately for debugging +- Handle async errors in effects and event handlers +- Provide meaningful error messages to users + +### Forms and Validation +- Use controlled components for form inputs +- Implement proper form validation with libraries like Formik, React Hook Form +- Handle form submission and error states appropriately +- Implement accessibility features for forms (labels, ARIA attributes) +- Use debounced validation for better user experience +- Handle file uploads and complex form scenarios + +### Routing +- Use React Router for client-side routing +- Implement nested routes and route protection +- Handle route parameters and query strings properly +- Implement lazy loading for route-based code splitting +- Use proper navigation patterns and back button handling +- Implement breadcrumbs and navigation state management + +### Testing +- Write unit tests for components using React Testing Library +- Test component behavior, not implementation details +- Use Jest for test runner and assertion library +- Implement integration tests for complex component interactions +- Mock external dependencies and API calls appropriately +- Test accessibility features and keyboard navigation + +### Security +- Sanitize user inputs to prevent XSS attacks +- Validate and escape data before rendering +- Use HTTPS for all external API calls +- Implement proper authentication and authorization patterns +- Avoid storing sensitive data in localStorage or sessionStorage +- Use Content Security Policy (CSP) headers + +### Accessibility +- Use semantic HTML elements appropriately +- Implement proper ARIA attributes and roles +- Ensure keyboard navigation works for all interactive elements +- Provide alt text for images and descriptive text for icons +- Implement proper color contrast ratios +- Test with screen readers and accessibility tools + +## Implementation Process +1. Plan component architecture and data flow +2. Set up project structure with proper folder organization +3. Define TypeScript interfaces and types +4. Implement core components with proper styling +5. Add state management and data fetching logic +6. Implement routing and navigation +7. Add form handling and validation +8. Implement error handling and loading states +9. Add testing coverage for components and functionality +10. Optimize performance and bundle size +11. Ensure accessibility compliance +12. Add documentation and code comments + +## Additional Guidelines +- Follow React's naming conventions (PascalCase for components, camelCase for functions) +- Use meaningful commit messages and maintain clean git history +- Implement proper code splitting and lazy loading strategies +- Document complex components and custom hooks with JSDoc +- Use ESLint and Prettier for consistent code formatting +- Keep dependencies up to date and audit for security vulnerabilities +- Implement proper environment configuration for different deployment stages +- Use React Developer Tools for debugging and performance analysis + +## Common Patterns +- Higher-Order Components (HOCs) for cross-cutting concerns +- Render props pattern for component composition +- Compound components for related functionality +- Provider pattern for context-based state sharing +- Container/Presentational component separation +- Custom hooks for reusable logic extraction