Understanding React App structure for a cleaner project build. Structure or clean architecture is a software design philosophy that separates the elements of a design into the ring levels.
React Project – Clean Structure
An important goal of the clean structure is to provide developers with a way to organize code in such a way that it encapsulates the business logic but keeps it separate from the delivery mechanism.
You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.
Advantages of Proper Architecture
- Testable
- Maintainable
- Changeable
- Easy to Develop
- Easy to Deploy
- Independent
react-example-app ├── src │ ├── App.js │ ├── index.js │ ├── components │ │ ├── BlogPost.js │ │ ├── ReviewItem.js │ │ ├── ... │ ├── layouts │ ├── pages │ │ ├── Blog │ │ ├── Home │ │ ├── About │ │ ├── ... │ ├── queries │ │ ├── useHome.js │ │ ├── useBlog.js │ ├── routes │ │ ├── routes.js │ ├── store │ │ ├── index.js │ │ ├── authSlice.js │ │ ├── ... │ ├── widgets │ │ ├── buttons.js │ │ ├── typography.js │ │ ├── ... │ ├── utils │ │ ├── axios.js ├── public ├── node_modules ├── package.json └── README.md
Components
Components are to building blocks of any react project. This folder consists of a collection of UI components like BlogPost.js, Header.js, Menu.js, Loading.js, etc., that can be used across various files in the project and are dependent on the current project packages.
Layouts
These directory container layouts of the app are like AuthLayout or AppLayout. The layout helps us to inject global components into the pages and protect restricted pages as well.
Pages
As the name says, it contains pages that we use in the projects, and a page usually contains components and widgets.
You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.
Queries
What is SWR? well, the name “SWR” is derived from stale-while-revalidate, an HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from the cache (stale), then send the fetch request (revalidate), and finally, come up with the up-to-date data.
SWR Query is just one single line of code, you can simplify the logic of data fetching in your project
Example below:
const {data, error} = useSwr('/api/posts', query);
Routes
This folder is formed of all routes of the applications. It consists of protected, private, and all types of routes. So, now here we can even call our sub-route.
IF you want then buy a good, reliable, secure web hosting service from here: click here
Store
The global data store will be contained in the store directory, in this case, Redux. Each feature will have a file called reducer, which will contain the Redux Toolkit slice, as well as actions. Go to this article to see how to configure the Redux toolkit
Widgets
Within the widgets folder, I would group by type – forms, tables, buttons, layout, etc. The specifics will vary by your specific app, and are not dependent on the current project packages and styles).
What is the difference between components and widgets directories? Components can’t be used, so if we copy them and use them in a new project, which depends on packages. So, Styles, and widgets can be used in different projects.
Utils
So, in the utils directory we get out any logic or service and we write for our project, for example, a wrapper for Axios could be here.
If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.