Series: How to structurize React Apps (Ep: Beginner Level)
Tags: react, structure, reactproject
Published: 2021-04-19 12:08:46

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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj8eyyrzlfyqv8gu0j7m.PNG)
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.

![App.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f19vqlf57jwe7hf1i8cm.PNG)

![Counter.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp023rjs10dmdkt6849e.PNG)

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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbfuzl08fsr58fov1a6i.PNG)
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqduj3z47mlv0j7s3vrd.PNG)
Here in the above image you can see that in my `CounterUI.js` file under `Containers` folder, I have put only my UI code.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/basi1sb0ryvq4832v4iq.PNG)
Here in the above image you can see that I have put only my logical code in my `Counter.js` file under `Components` folder.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmcbatfbc90ggl6bs845.PNG) 
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.
##Key Notes

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. 

[Complete code link of sandbox](https://codesandbox.io/s/hmadhsan-series-react-structure-7xut1)
{% codesandbox 7xut1 %}