Shareable code in React app should be divided under its own domain. This will help you reduce the complexity and create structures that are open for reusable or shared across the application. When developing a page in a React app, consider dividing it into modular pieces. One advantage of React being un-opinionated is it doesn’t care how you divide your modules. That means, depending on the directory names you like to follow, the /services directory can be called /api. The important part here is not to make the directory name a hard and fast rule but to follow a neat organization that anyone in the codebase can understand. Using this convention, the top-level directory structure where your React app’s codebase lives can be viewed as: └── /src ├── /assets ├── /components ├── /context ├── /hooks ├── /pages ├── /services ├── /utils └── App.js ├── index.js That means all the different folders for components, pages, etc., are created inside this directory. A common practice is to use the /src directory as a familiar convention. The starting point of this default React app (index.js file) is situated in this directory. Each of these folders contains various files required to fulfill the directory’s purpose.įor example, a bare minimum React project created using the create-react-app command-line utility to create a new React app comes with a /src directory. This starting point comprises various folders such as assets, components, services, utils (reusable utility functions), pages, etc.

Navigating a Directory StructureĪlways have a starting point in your React application. In this article, let’s look at some of the ways to keep the lifecycle of a React application healthy and well organized and what patterns you can follow.

An organized codebase is how a team of developers gets productive within the given structure in the long run. The architecture of a project is essential. It also makes the codebase easy to navigate, modify and scale to add new features. A well-structured project requires developers to think deeper about their implementation and at the same time keep things organized. A project with no logical structure means that everyone can do whatever they want inside it. The way an application is organized and structured is how a developer or a team of developers interact with it. Its versatile nature does not provide a way to organize and structure a web application. React is an un-opinionated framework in the front-end ecosystem.

React app examples