React Native Coding Guidelines - mhmunem/Grocery-Comparison-App GitHub Wiki

 React Native Coding Guidelines

Table of Content
Naming Conventions
  • Component names should be written in PascalCase.
  • Non-component names should be written in camelCase
  • Unit test files should have the same name as their corresponding component
  • Global stylesheet file should be written using camelCase
  • All fonts, colors, and font sizes should be centralized in a configuration file
  • Attribute names should be written in camelCase.
  • Variable names should be written in camelCase.
Component Extensions
  • Use .jsx extensions for React components
File and Folder Structure

  • src/: This is the main folder containing all the application code.

  • components/: Stores reusable components used throughout the app (e.g., generic buttons, input fields).

  • screens/: Contains all the main screens or features of the app (e.g., Home screen, Product screen).

  • navigations/: Contains files for setting up navigation, like stack, tab, or drawer navigators.

  • services/: Stores common services or API calls used throughout the app (e.g., authentication service, data fetching).

  • utils/: Holds utility functions that are used in different parts of the app (e.g., date formatting, calculations).

  • types/: Stores TypeScript enums, interfaces, and types used across the app for type safety.

  • redux/: Contains files related to state management with Redux (e.g., actions, reducers, and the store configuration).

  • App.js: The main component that starts the entire app and includes the root component and navigation.

  • index.js: The entry point of the application, usually where App.js is registered to run the app.

  • assets/: Stores images, fonts, icons, and other media used in the app.

    Example:

    image.png{width="694" height="766"}

Code Guidelines
  • 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 JSX 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.
  • Don’t use inline-styling. Always use StyleSheet to create a styles object.
  • Interface is a way to define the shape or structure of an object
⚠️ **GitHub.com Fallback** ⚠️