In this article, we’re going to learn the best way (or at least one of the best) to set up your React file structure. This will allow you to keep organized as you develop your app, which makes maintaining and expanding it a whole bunch easier.
DISCLAIMER: I have adapted the method outlined here from the one explained by Tania Rascia on her blog. For a full explanation of this method, check out her article on the structure of a React app!
React File Structure Overview: Views and components
Many developers agree that the best way to organize an application is by feature. This means that you will create a directory for each feature, which will contain all the necessary files for that feature: components, tests, and styles.
You may think of each feature as a page in your app. In a social media app, for example, the major pages might be Feed, Create Post, and Profile.
The purpose of the views directory is to organize all the major features of your application, along with their component files.
The components directory is slightly different. It will contain the more reusable React components, ones that don’t belong to a particular feature/page. For example, the navigation bar of your app will probably go into the components directory.
The views directory
Sticking to the social media app example, let’s look at a basic file structure for the React application. (Directories are indicated by ending with a /)
src/
|-- index.js
|-- App.js
|-- views/
|-- Feed/
\-- Feed.jsx
|-- Feed.styles.js
|-- PostDisplay/
|-- PostDisplay.jsx
|-- PostDisplay.styles.js
|-- CreatePost/
|-- CreatePost.jsx
|-- CreatePost.styles.js
|-- Profile/
|-- Profile.jsx
|-- Profile.styles.js
|-- ProfileHeader/
|-- ProfileHeader.jsx
|-- ProfileHeader.styles.js
|-- ProfileBody/
|-- ProfileHeader.jsx
|-- ProfileHeader.styles.js
You can see that we group the component files for each feature along with the style files. We do this instead of having a global styles.js file or a separate styles/ directory. This grouping of feature files allows you to divide your application into many independent pieces. If there is a bug, it is probably localized within a specific directory rather than spread out throughout your app.
You may have different files depending on your tech stack. For example, if we assume we are also using the Jest and Storybook libraries in our app, the Feed/ directory will look like this:
Feed/
|-- Feed.jsx
|-- Feed.styles.js
|-- Feed.test.js
|-- Feed.stories.js
|-- PostDisplay/
|-- PostDisplay.jsx
|-- PostDisplay.styles.js
|-- PostDisplay.test.js
|-- PostDisplay.stories.js
The components directory
For more general-purpose components, or just ones that you intend to use for different views, the components directory is used to keep them organized and in one place.
Examples of components you might keep here are navbars, forms, buttons, and maybe different types of container elements.
Below is an example components directory.
components/
|-- layout/
|-- NavBar/
|-- NavBar.js
|-- NavBar.styles.js
buttons/
|-- SubmitButton/
|-- SubmitButton.js
|-- SubmitButton.styles.js
|-- LikeButton/
|-- LikeButton.js
|-- LikeButton.styles.js
|-- DislikeButton/
|-- DislikeButton.js
|-- DislikeButton.styles.js
Conclusion
In the beginning, following a file structure might seem pointless. But as we begin to develop more complex applications, you’ll see the utility of file structures that make it clear, at a glance, what pages and components your app contains.
In the next article, we’ll learn how to add event listeners to React components!
