What I Learned After Deleting Tons of React Files

Designing Your React Realm

Here's a peek at how I've structured my src directory:

  src/
      components/    # Reusable UI components
          ui/        # Basic components
      hooks/         # Custom hooks for shared logic
      pages/         # Individual pages grouped by layouts
      services/      # Data management and API interaction
          api/       # API calls and responses
          providers/ # Context providers
          state/     # Global state management
      utils/         # Utility functions and helper modules
          

Here are the key takeaways from this structure:

• components: This is where the magic happens. All reusable UI components reside here, neatly organized into subdirectories. The ui/ folder houses generic UI components, while other folders contain domain-specific components.
• hooks: Custom hooks are the unsung heroes of React development. They live here, ready to be reused across your application.
• pages: Each page of your application gets its own folder here, making navigation a breeze and code separation a cinch.
• services: Managing data and APIs? Look no further than the services/ directory. From state management to API calls, everything has its place.
• utils: Need a utility function? You guessed it – the utils/ folder is where you'll find all your helper functions and utilities.

Leveraging External Libraries

When integrating external libraries like shadcn/ui, I prefer downloading components directly into the repository. This ensures complete control over customization and usage. For example, I utilize the command npx shadcn-ui@latest add <component> to seamlessly add UI components to my project.

Embracing Coding Consistency with Prettier

One tool that's been a game-changer for me is Prettier, configured with settings inspired by the AirBnb style guide. This snippet from my .prettierrc file helps maintain consistent code formatting, allowing me to focus on writing code without worrying about tedious formatting conventions:

    
    {
      "printWidth": 100,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "es5",
      "bracketSpacing": true,
      "jsxBracketSameLine": false,
      "arrowParens": "avoid",
      "endOfLine": "lf"
    }