Recently, while working with React I came across this scalable ‘Component’ folder structure and since then my app is well organised and looks un-cluttered. Let’s consider we have different components in our app as follows:
| – src/
| – App.js
| – SearchLoader.js
| – SearchInput.js
| – SearchError.js
| – Button.js
| – index.js
| – TextField.js
The major problem I faced in the above directory structure is that as and when I kept adding components in my app, my src folder kept filling up. This created an issue when I had to find files related to a particular component. This gave me a hard time to find what I was looking for and cluttered my root folder. So I found the following approach which made it easy to organise my components.