Folder Structure for ReactJs Applications.
I’ve been developing a lot of projects being in quarantine development was my only chill😁. If you are a react dev the folder structure create-react-app gives us can be overwhelming for a newbie.
Initially, I started with a basic structure throwing files and folders and I never thought what mess I am giving birth to, as the project became older managing the codebase was a PITA.
Having our own file structure in mind (of course one that matches industry standards) is a shine. Apart from that if you work on multiple projects having a predefined file structure is really important and it does a part of your task.
You’ll never get lost in the files when you open the repo a year later or so.
Before I get started, I just wanna mention that this article is just an opinion/method about a folder structure has worked best for me after trial and error, it might not the same work for you and you are most welcome to add some ideas of your own.
So I use react-router-dom for routing that works for me well.
So after hitting $npx create-react-app blahBlah, first of all, I remove app.js and app.css add a router.js file for react-router-dom and add routes to it and use it in index.js.
Next, I create a Component dir. for all the components in sub dirs with there own js file and styling file in it. Like we have navbar.js and navbar.scss inside Navbar dir here.
I like to add all the utilities and assets in a separate dir and I call it utils. If the project requires an API call I put all the files in APICalls dir as you can see.
For the sake of making the codebase manageable, I put all the colours and fonts to be used in theme.scss file and import it whenever required so that I can change the whole theme without hopping into multiple files and figuring out where the hell I used that ugly yellow😉.
So. that was file structure 101 in a nutshell from my side. That was all for now, will meet you in the next one.
