React file structure

How to organize your react projects!

Angelo Poole
2 min readSep 27, 2020

The organization of a react app can get pretty hectic. figuring it out at the beginning can help to ease pains down the line

within your src folder, you’ll want to create a few folders named components, img, redux (if you’re using Redux)and utils.

components will contain each component that you want to use/reuse which will make up your react pages.
Img will contain pictures that your react application will use, pictures that will be used in JSX need to be contained in the src folder.
Inside of your Redux folder, you’ll be creating a reducer and actions folder, as well as your store.js file.
Utils will contain any misc helper functions that you want to export easily to be used around the rest of your app.

There you have it! A quick way to organize folders in your react app. Of course, this isn't the only way to organize your react app but its the one that I've found to be the most helpful for my projects. There are tons of other ways to structure your react app and it's all up to you and how you like to organize your apps! The important thing is to start coding and from there you’ll know what type of structure you’d like to have in your application, just make sure to avoid Analysis paralysis.

--

--

Angelo Poole

Software engineer, Graduate of Flatiron school. Currently volunteering! Looking to talk to fellow engineers, please send me a message!