Hey guys, this is another iteration of my food journaling app. I want to delve into my choices for Client file structure and organization.
Here is my Component Architecture. With this being my first React application, I eagerly started building based on this layout. As I went through the curriculum over at The Flatiron School, we used a common approach to file structure with something that looks like the following:
This is fine, it makes sense that we have folders based on Components, Containers, Reducers, and Actions. However, as I quickly realized, organization should come at the forefront of your application.
Two things that you absolutely want to avoid are:
- Folders too deeply nested aka over-organization
- Unruly organization, where it’s difficult to know what you’re looking for
To handle both of these, I decided to actually organize my project based on my component architecture. In that sense, it didn’t really matter what is considered a Container and what’s a Component. They live in a top level folder called ‘component-composition’, and then they are based on the routes in my app, Login, Dashboard, and Overview.
This is beneficial because I don’t have to hop between folders when working with data flow. Since my app is relatively simple I can leave them all in a single folder under the parent without having to deeply nest folders inside of that.
Here is what my structure looks like now:
When starting a React project, this should be your number one, because it needs to scale! A huge lesson learned when building this is that your project will quickly become messy and disorganized if you’re not cognizant of your direction from the start. Also, it’s a total pain to switch directions after you’ve already began. The imports quickly break the app and you need to check and double check paths just to get back up and running again.
So the moral of the story is that the organization is of the utmost importance! Good luck!
Leave a Reply