React Project Layout
React is so flexible , composable and declarative to write a code. There are no standart to structure React.
I will show you basic organisation and structures that can be used across different projects. They will be in order from the simplest to the most complex.
Basic Structure
When you create a react project using create-react-app you will find src folder contains assets and it is the right place to create components and hooks for you !
Components
Components are the main player of your application. They will keep the structures of the UI and easy to create new component when you need future. If you have 10–20 components this folder it can be seriously retainable. For small projects, though, this added complexity is not needed and a single folder is just fine.
Hooks
The hooks folder keep all the custom hook that you use in your project. This is a useful folder to have in project because all the projects are have several custom hooks. So when you have one place to keep them all , It is really practical to find them.
__Tests__
The final folder in this structure is for all your test code. Generally on smaller projects like this I find that people tend to store all their tests in one folder (that is if they write any tests at all). Overall, I think this is fine for smaller projects, but again this is something I would change as your project grows in size.
Intermediate Folder Structure
This way of creating new structure includes a millons of more folders which cover pretty much any file type you can think of in a React.
What is the difference ?
The difference between this folder structure and the simple folder structure is that we separate our projects to different pages and components contains all the logic for specific pages into one single location. this way is very handy to find relative project on their folder in order to search and use them.
Pages
This folder has one folder for each page in this project. Inside the spesific page under this folder it should be single root file from your page. Inside of those page specific folders should be a single root file that is your page. If you have Login folder inside yout page folder it should be contain another index.js belongs to Login folder.
Components
Another difference is component folder has different subfolders to use . These subfolders can be very useful when you prop elements from each other. If we have ui folder which contains all our UI components like buttons, modals, cards, etc.
Hooks
This hooks folder will only store the global hooks that are used across multiple pages. This is because all page specific hooks are stored in the pages folder.
The biggest pros is this structure this new application is that all your files have their own folder.
Conclusion
You should know what size is your project will be and which structure to use. After this decision everything will be easier since you tidied up you folders!
