Organize code in a small-medium react project
In this post I share my common setup for a small react project with creat-react-app
Orgarnize things in a small-medium react project for starters
The content in this post is based on projects created from create-react-app with typescript. When you start a new project with create-react-app things are pretty simple and you need to manage only a few files but when you work with the project for a few hours then the size of the project is getting large. It is always better to put things in an organized way so you can find things easier later and avoid some trivial bugs later. Here are my tips
These two files are the beginning of the App. In App component I usually start init logics that need to run only once like loading configs, loading auth state.
I usually prefer separate routes to a separate component so I can easily navigate to it when I need to check or add a new screen.
This is the first level components folder where contains screens that users interact directly with. For example: Login, HomePage,..
This is the second level components. I usually put shared components directly under components folder. The shared components can be Layout, Header, ... things that can be shared between pages. Components that are used only in a screen will be placed under a folder with name from the screen so a LoginPage screen can have components A in components/LoginPage/A.tsx
This is to contain contexts used in screens.
This is shared hooks that can be used across the app.
My favorite setup is that hoc with init context and wrap the pages components.
types for TypeScript. For global types I prefer to extract them here
constants to share across the app
This contains repositories that communicate with server for data
multiple small utils to be shared will be here. For example idUtils for id handling like creating a new id.
this contains integrations with other large libraries like firebase or auth.
So that is it how I usually organize code in a small react project, hope that you will find something that are helpful.