Skip to content

Latest commit

 

History

History
35 lines (24 loc) · 3.83 KB

FOLDER-STRUCTURE.md

File metadata and controls

35 lines (24 loc) · 3.83 KB
Raw

REACT FOLDER STRUCTURE.

Intro

The React documentation does not have specific rules or opinions on how to structure your React files and folders. Most of the times you might be confused on how to structure your files and folders that build up your React project. There are few recommendations on how to structure your project (for solo projects, mid-scale projects or even large-scale projects). This article will guide you on how to structure you projects for large-scale applications, a best practice that will allow cross-functional teams to work on your project too making it easy for them to understand.

Initial Folder Structure

After creating a new React App with the commend npx create-react-app, you should have a similar folder structure as the one presented above. Gist of the initial folders.
  • node_modules folder - Contains the applications dependacies(modules/libraries) that are installed in your React app.
  • public folder - The main file in the public folder is the index.html file. This is where we will be feeding our javaScript code via the div with the id of root. src folder - This is the main folder of our react project, all features and components will be written inside the src folder. package.json file - The package.json file includes the name of the dependancies that your react application utilizes and also scripts that can be run from the terminal inside your application.

Folder structure with features and components

Before diving into the folder structure above, take note of some important points that might come in handy when you create your own folder structure.

  • Separation of concerns is the process of dividing your files and folders, such that each section addresses a separate concern. A concern is a set of information that affects your application. Separation of concerns is used to improve modularity of a program by reducing its interdependence on other elements. This is a good practice to follow when structuring your folders and files.
  • Avoid deep nesting of folders and files- deep nesting makes importing the components made relatively hard for importing them.
  • Don't over think it - when starting a project it is advisable to use any form of folder structure you're comfortable with untill the components start adding up is when you can refractor and categories your files.

The folder structure above basically shows you a sample of a complete folder structure with some of the utilities and features you'll mainly be using in your react application.

The folder structure above shows you the contents of the src folder. This is a best practice where by grouping of related components and feature in your react application is key.

  • The components folder contains mainly all reusable code in your react application eg: button, footer. Each of the component is nested within a folder and the name of the component given index.js which is the file which represents the public interface of the folder where everything gets exported that's relevant to the outside world. Inside the button folder we have all the files related to buttons eg: button.module.scss and button.test.js.
  • The utils folder contains all the helper functions that are used in your application.
  • The features folder contains all the features of your application Which are mainly components that are not reused. Reusable components in the components folder can be fed into the features' components. Lets say the user and profile components both need a button, the button component will be imported to the features folder and used in the user and profile components.