What I Learned After Deleting Tons of React Files

Greetings, React enthusiasts! In Uplift Code Camp, we were introduced to the world of React. Writing my first react project was an absolute chaos. I had files scattered everywhere, and my codebase was a mess. It took me a few tries until I find something that works for me.

Today, I'm thrilled to share insights into how I revolutionized my React development workflow with a meticulously structured project layout and some clever tricks. Let's dive right in!

Designing Your React Realm

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

      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"

Conclusion: Your React Toolkit

As you embark on your React development journey, remember that organization and consistency are your best friends. Experiment with different structures and tools, find what works best for you, and don't be afraid to think outside the box. With a well-structured workspace and a commitment to learning, you'll be well on your way to React mastery!

Happy coding!