React Architecture Patterns For Projects
React framework is not opinionated in the frontend ecosystem. It has a versatile nature and there is no provision for organizing and structuring a web application. The method used for organizing and structuring depends on the developer of the team of developers that are interacting with the application. A project that does not have a logical structure tells that anyone can do anything inside it. A project that is structured will also require developers to think deeply about how it will be implemented and also keep things organized at the same time. Such a project will also make navigation of the codebase easier, and make modifications easy and well-scaled for the addition of new features.
The architecture of a project is important. A codebase that is organized will allow the team of developers working on it to be productive within the structure in the long run. Let us discuss some ways of keeping the lifecycle of a project based on React well organized and healthy and what are the patterns that you may follow.
Navigation Of A Directory Structure
In your React application, always have a point of start. These points will comprise various folders like services, utilities, assets, pages etc. Each of the folders will have the required files for fulfilling the purpose of the directory.
A small React project can be created with the use of the create-react-app command line. This utility helps in the creation of a new React app that has a source directory. The point of start of such a React application by default will be placed in the source directory. It is a common practice by developers to make use of the course directory for a familiar convention. This means that the different folders including pages, components, assets etc, will be created inside the source directory.
It is not important to have a hard and fast rule for naming your directory, rather it is more important to have an organized structure so that anyone looking at it can gain an understanding of the codebase. This means that the developer will also have to depend on the name of the directory but not completely.
Common Modules
React is un-opinionated, which means it does not care how the developer is dividing their modules. When working on the development of a page using React, you can divide your module into pieces. This helps in reducing the complexity of the page and creates a structure that is open as well as reusable. It can also be shared across the code of the whole application.
The code that you want to make shareable under React should be kept divided under its own domain. The common module will become a reusable custom component. It can be a custom hook, constant, custom logic or utility function. The pieces that are reusable can be shared across the application and can also be used on more than one component of the page. If you have these in a folder in the directory of the application, it will serve as a good starting point.
Adding Custom Components In Their Own Folders
A reusable component can be a button, content container or input field. These components will be living in the components directory and each of these will be inside its own sub-directory.
Create Custom Hooks
A React Hok that is reusable works like a reusable working part. Similar to creating custom components, a custom hook can be used to reduce the complexity of the code. A react app that has 2 pages, one for representing login and the other for signup will contain an input field for text for a user to enter details into in both. Both the pages will also have a button to submit the form. There will also be a field where users can enter their passwords. A password field is generally designed such that it can toggle between the visibility of the field. If the same code is written for implementing this behaviour for both the login as well as the signup form, that will lead to duplication of code. This can be solved by creating a custom hook that toggles the icon as well as the visibility of the field on the basis of the icon.
A custom hook begins with the naming convention of the user. React is not strict regarding the naming convention, but it is imperative to follow them. A hook can handle its method and state, and allow reuse of password fields inside both the login and the signup page, considering the example discussed above.
Use Absolute Imports
React is designed to use a structured directory by default, and this can lead to developers importing paths. A developer can change the configuration of their React application by the addition of import modules and with the help of absolute paths. If it is a plain React app, the scenario can be achieved by creating a configuration of the jsconfig.json file at the root of the project. This will make it easier to import various components inside the project itself. It will also allow the developer to move files without having to change their import statements.
Open Source Session Replay
It is time-consuming and extremely challenging to work on the debugging while the production of the web application. You can use an open-source tool for monitoring and replaying the users’ actions to see how the app behaves in different scenarios.
Separating Business Logic From UI
The pages directory in general contains the User Interface for the major part of the application along with the structure of each page. It is contained in the form of React components. The components are paired with the business logic that they are representing. This behaviour is common and can be found in the majority of React applications. But if a developer wants to avoid unnecessary complications of the logic in the UI component, they can keep the business logic separate. One method that can be used in separating the User Interface and the logic is by creating a custom hook.
The Utils Directory
It is an option to use a utils directory. If the application a developer is working on has some utility functions that are global, it is a good idea to keep the User Interface components separate. The utils directory can contain constants of the entire app as well as helper methods. If more than one User Interface component in the application requires logic for validation, keeping the business logic of this validation separate in its own file but in the utils directory will help in the creation of flows that are separate too.
Avoid Creating A Single Context For Everything
When props are passed on from the parent component to the child component, it can be made a single pass from one component to another. But complexity will arise when many components are present in between the two. This means that the method of passing the props becomes inconvenient.
React Context contains a method for passing data through the various components in a tree without prop drilling. It serves as an alternative approach that allows that parent component to provide props to the entire component tree that exists below it. This makes the sharing of data easy while also avoiding the passage of unnecessary props. In a React application, a developer can make use of Context for various purposes.
A React application can make use of themes for its User Interface components, however, some of the components may require the use of internationalization or i18n. i18n Context will not care about the theme exposing a dark or light mode value. If a developer makes use of Context in any of the components, they will not have to wrap the root of the application with the provider of the Context. If a section of the developer’s application requires specific data, they do not have to share it.
Conclusion
The practices of patterns described here are on the basis of experience. They may vary for applications with a large scale or all the applications out there. You can consider working with the parts that you think will be helpful with your work, with your React project. It is important to have a structure that is easily understandable by you, and if it is a group project, the structure should make sense for everyone on the team.