There's probably no "one way" to organize your files when building a react application. I'm going to list the common file structures/architecture that I've come across while learning react.

Please feel free to include your own opinions on some other file structures that you might have come across.

Here are some of them

• The create-react-app architecture
• A unique component directory
• Grouping by unique features of the app
• Conclusion

The create-react-app architecture

your-app
├── build
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── .gitignore
├── package.json
└── README.md

I'm very sure you'd have come across this type of react-app architecture, as it is a very popular one.

The build folder is where all codes that have been compiled/bundled would be located, the folder won't be visible until you run the build command, which is npm build

The public folder is where all static files are stored.

The node_modules folder contains all our packages installed NPM (the Node Package Manager) or Yarn

The src folder contains dynamic files, dynamic in the sense that, these files undergo changes over time, we keep iterating logic, refactoring some UI. etcetera.

A unique component directory

A lot of developers have come to agree that having a unique components folder for storing all components-based files, some can be stateless functional components and the others can be stateful or class-based components.

src
├── components
│    └── App.js
│    └── Profile.js
│    └── Dashboard.js
│    └── Search.js
├── images
│   └── logo.svg
├── styles
│     └── index.css
├── index.js
└── service-worker.js

Some, even still prefer to separate these components into different folders. So there'd be two sub-directories in the components directory, one would be stateful and the other stateless.

src
├── components
│    ├── stateful
│    │  └── App.js 
│    │  └── Dashboard.js
│    │  └── Search.js  
│    └── stateless
│      └── Footer.js
│      └── Header.js
│      └── Cards.js
├── images
│   └── logo.svg
├── styles
│     └── index.css
├── index.js
└── service-worker.js

Some can go on to create unique folders for each component, isolating them from other components. In that folder, all the necessary files that'd make the component function, such as the styles, images etcetera, would be there.

src
├── components
│    ├── app
│    │  └── index.js 
│    │  └── index.css
│    │  └── image-1.png
│    │  └── image-2.png  
│    ├── dashboard
│    │  └── index.js
│    │  └── index.css
│    │  └── image-2.png  
│    ├── profile
│    │  └── index.js 
│    │  └── index.css
│    │  └── avatar.png
├── index.js
└── service-worker.js

But, the disadvantage with this style resides in your editor, VScode for example tells or shows the directory of a particular file beside it, in the taskbar.

Noting the fact that all the files in each component above are index.js so opening all of them at the same time might lead to you, getting confused about which file is which, as you don't know which editor your team members might be using, when you're collaborating.

Grouping by unique features of the app

It depends on what type of application you're building, you decide to make the architecture of your app according to the features that the app entails. This method is quite similar to the "unique components" architecture, but, here you're naming those folders according to the features of your app.

Let's say your app is a blog like hashnode. You'd have a "feeds" / "stories" feature where people can see all the blog posts you've published in the past and a feature that allows you to edit your posts, whenever there are mistakes, you'd have an "edit profile" feature too. You'd go-ahead to create a directory for each feature in the src folder.

src
├── stories
│   └── Stories.js 
│   └── stories.css
│   └── image-1.png
│   └── image-2.png  
├── edit-blogpost  
│   └── Edit.js
│   └── edit.css
│   └── image-2.png  
├── edit-profile
│   └── Edit-profile.js 
│   └── profile.css
│   └── avatar.png
├── index.js
└── service-worker.js

Conclusion

There's no need to fully abide by the aforementioned react's app style/architecture.

You can choose to create a unique one for yourself, and you can also decide not to. i.e a case where having to organise your files reduces your pace.

But you should learn to have a file architecture for your application, as it grows over time.

Thank you for reading this article, like and share if it helped you gain some understanding of a react's app architecture.