Ionic. Here are some best practices and coding style guidance for React Ionic development:

• Use a linter (ESLint)
• Use TypeScript for type checking.
• Use functional components - Prefer hooks (useState, useEffect) over class components.
• Naming conventions:
  • Components: Use PascalCase (eg: UserProfile)
  • Variables/Functions: Use camelCase (eg: fetchUserData)
  • Constants: Use SCREAMING_SNAKE_CASE ( eg:API_BASE_URL)
  • Files: Use kebab-case (eg: user-profile.tsx)
• up-to-date: Keep our app dependencies current for best performance and security.
• Keep it light: Choose smaller libraries to make our app load faster.
• For long lists, use virtual scrolling to maintain performance.
• Lazy Loading: Load parts of our app only when needed to improve initial load time

• Import Order: Import statements should appear at the top of the file, and each import should be on a new line.
• Component Structure : Ensure consistent structure across component files:
  • Imports
  • Types (if required)
  • Variables
  • Component (functions, hooks, effects, etc.)
  • Styles (if required)
  • Exports
• Always use functional components and React hooks.
• Use double quotes (" ") for TSX attributes and single quotes (' ') for JavaScript code
• Separate logic into appropriate files: JavaScript, tests, and styles.
• Ensure unit tests are written for every component.
• Break down large components into smaller, more manageable chunks.
• For fixed strings, use constants or enums for better maintainability.
• Avoid using var; prefer let or const for variable declarations.
• Ensure all console.log statements are removed before production.
• Delete all commented-out code to maintain clean codebase.
• Write comments/docstring explaining the code.
• Limit the number of function arguments for better readability.
• Share Data with Props: To pass data into a component with props.

• Small and reusable: Break down complex UI into smaller, self-contained components.
• Stateless by default: Keep state in parent components or use hooks.
• Separate logic from UI: Keep business logic in hooks or contexts.
• Place shared/reusable components in src/components/shared.
• Place page-specific components in src/components/specific.

• Pages go under the pages/ directory.
• Use Ionic IonRouterOutlet and React Router for navigation.

Use Jest and React Testing Library for unit and integration tests. Cypress for E2E testing.

• use a dedicated tests/ directory.