Master React Folder Structure
If you haven’t struggled with folder structure and naming issue in your coding journey then you are one heck of lucky guy. Maintaining consistency, accessibility, readability becomes increasingly difficult without a clear structure. It can be especially challenging when using a library compared to framework, which often enforces structure.
In libraries such as React JS, overall decision about project structure is up to the developers. Defining the guidelines about folder structure will help to ease the burden of maintenance and enhance collaboration among team members.
Goal of defining the coding guidelines for folder structure are as follows:
- Maintain a clear structure
- Pages Based Organization
- Consistency and Clarity
- Improve onboarding & collaboration
This folder structure guideline can be used in frontend libraries. I’ll showcase their implementation within the context of a React JS application.
Folder Overview
This is an overview of our application folder structure except other configuration such eslint, prettier, tsconfig. All folder naming will be in lowercase.
assets
assets folder will contain the icons, images, fonts used in our application.
components
components folder will contain reusable components related to application. In index.ts file we will only import the components and export them back. We will be using dash casing for naming the files.
Get Sajan Nepali’s stories in your inbox
Join Medium for free to get updates from this writer.
Note: All folder will have index.ts file which will be used for same purpose exporting all the components or functions from the particular folder.
hooks
hooks folder will contain application level hooks. Module specific hooks are stored in respective module folder. File names for hooks typically begin with the “use” keyword and are commonly written in camelCase.
pages
pages folder will contain different page of the application. For example a product directory will contain following structure. While it may initially seem like an abundance of folders and files for handling a straightforward module, as the application scales, this structure proves invaluable for efficient code management.
routes
routes folder will contain the public, private routes and components that will be used for handling the routes access.
ui
ui folder will contain reusable piece of UI components. The are building blocks for the components. ui folder is segregated into multiple sub folders according to the nature of the component.
utils
utils folder will contain utility functions, helper module, reusable code snippets that can be used across different part of the applications. It helps to promote reusability and maintainability of the code.
Conclusion
While each software application is unique establishing and following the consistent coding guidelines can address many of the common challenges that may arise during the development process. By following these guidelines, you can enhance your productivity and streamline your workflow. We can talk hours about how our application structure should be maintained but the important thing is that you get consent from your team members and all follow the same pattern.
We can improve this structure even more by separating our ui and logics into separate repo. But that topic is too large to cover in a single article.
Stackademic 🎓
Thank you for reading until the end. Before you go:
- Please consider clapping and following the writer! 👏
- Follow us X | LinkedIn | YouTube | Discord
- Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
- More content at Stackademic.com
