For any web or mobile application project, it is very necessary to structurize your code to possibly the best level, this not only does your code look clean but it also make other developers to understand it better when it will be structurize in a good manner. In this How to structurize React Apps series I will be sharing the best possible practice to create a good structure of your React Application with 3 episodes of Beginner, Intermediate and Advance level with one real world web application.
So let's start our first episode for beginner level react programmers by making a counter app. So, go to anywhere in your machine directory where you want to create your project and run the command
npx create-react-app counter-app. It will create the default boiler plate provided by the react team.
In the above Image you can see that, I have created a very simple counter application in my
App.js file and have put the UI and logic code in the same component. Does this sound good to you? of-course NOT! So first thing here we should do to separate our UI and logic components to make them more readable and maintainable.
In the above two images, you can see that I have separated my UI component of
App.js from my logical component of
Counter.js, which is something good to do as compare to our default boiler plate code but not the BEST PRACTICE.
So, what should we do to complete our article is to create the separate folders for UI which you could call
Presentational components and may name them as
Containers and other folder for logical code which you may simply call
Components. It is also need to note that I've written my UI code in my main
App.js file which is not good and what mainly should be in our
App.js file that would be discuss in my next Intermediate level post.
In the above Image you can see that I have created two separated folders named as
Containers for UI and
Components for logical code which is now making easy to understand the project structure.
Here in the above image you can see that in my
CounterUI.js file under
Containers folder, I have put only my UI code.
Here in the above image you can see that I have put only my logical code in my
Counter.js file under
And then I have just imported my
CounterUI.js file in
App.js file and now it is looking much cleaner and better to understand.
1) Don't use your logical and UI code in the same file.
2) Separate them into their respective folders to better
understand your react app structure.
So, here I will be ending my article which was for beginner level react programmers who don't have any clear idea on how to structurize their small react apps.