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
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.
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
public folder is where all static files are stored.
node_modules folder contains all our packages installed NPM (the Node Package Manager) or Yarn
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
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 ├── 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
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.