Structuring React applications into files and folders is an opinionated topic, because there is no... Tagged with react, javascript, webdev, programming.

Dev.to is a community platform for developers, offering resources, discussions, and networking opportunities to empower individuals in their coding journey. Developers can learn new programming languages, frameworks, and tools, engage in discussions on best practices, and share their experiences with fellow developers to enhance their skills and grow their professional network.

 Structuring React applications into files and folders is an opinionated topic, because there is no right or wrong way to do it. I decided to share how I have structured my projects lately.Warning: Highly opinionated! Let's get started.Single file. React projects usually start with an src/ folder and one src/App.tsx file with an App component. At some point, your app has more features, more lines, and you will need to make smaller standalone components.

How I structure my React.js projects

The component separation is alright - although I lately prefer atomic design for folder and component structuring.
I did however use the hooks in a separate directory and it has proven to be very difficult to reason about once the amount of code grows. It’s better to structure code based on responsibility than its type.
So instead of one folder with 2 hooks (useAuth, useContent) you could have something like an auth and content folder each with their respective hooks and potentially other relevant code.
It also helps to follow a feature around since you don’t have to switch folders as much.