DEV Community

Discussion on: ReactJS File Structure

georgecoldham profile image

File structure is crucial to get right, and by right I mean logical and consistent. A bad file structure will make ongoing development miserable, slow and likely buggy.

My preferred method, is to have containers and components.
Components are things like buttons, lists, input boxes etc, often just wrapped and styled html elements.
Containers are pages and groupings of components, think nav bars and forms.
In a react sense these are still components, but from a dev perspective they separate them as they would likely be tested differently.
I also like keeping the structure of my src directory for my test directory. Although I am liking having the tests sit local to what they are testing more and more.

Im sure people will have opinions on how i like to structure things, it is a very opinionated thing. I know I can make improvements, and next project I will. The important thing is to learn what works and what doesn't. Changing a file structure after creation is a difficult thing to do successfully.

winniebosy profile image
Winnie Magoma Author

Thanks George..This structure seems logical and easy to understand..I mean in the event of a bug..It is easy to locate it..In the event of any question, I won't hesitate contacting you..Cheers..