Blog Details

In past years, our development team has built a myriad of react applications that have been small to large in project size and simple to complex in nature. Much of our learnings in those years have come from facing challenges during the architecture implementation, dealing with inefficiencies, and researching best practices. This article discusses the implementation of a scalable React architecture pattern along with the best practices contributed by some community experts.

We’ve had a few clients who’ve wanted to migrate their legacy application to a new frontend like Reactjs. Upon interacting with them, we figured out that a few of them didn’t know what an application architecture is. And even if they knew about it, they didn’t care about asking their agency or developer about it. 

Here’s the thing: like most things in life, taking time to plan ahead and invest in a scalable architecture can help in the longer run, especially when your web application is going to serve a large number of users. This is when understanding some of the architectural considerations and tradeoffs behind building big websites can result in smarter business decisions. If you’re determined to invest in a scalable react architecture for your website, Simform’s custom web app development offering is for you.

Here’s a graph that illustrates the difference in growth when you invest in architecture vs when you don’t invest in architecture at all:

What exactly is React architecture, and how it helps in web development?

Unlike other UI libraries and frameworks, Reactjs doesn’t enforce an architecture pattern. It is just a view that caters to the user interface.

Just beneath the user interface lies a tree of several React components. In general terms, a react component is nothing but the central structural unit — something minimal, like a button, label, or text input label or perhaps something more complex, like a registration form, user-profile, etc. 

Now here comes the exciting part: all higher-order components in React may hold a state; however, it’s not mandatory. By state, we mean the data needed to track for making the application work. Also, your application state keeps on changing from time to time, depending on the action taken by your user. It’s only the state of data that determines what displays on the UI of an application.

React architecture best practices

#1. Navigate a directory structure

Folder helps you to craft a hierarchy within the project management software so that developers can find whatever they’re looking for. The most important advantage of this folder structure is developers cab can grasp all the files that belong to a feature at once. Plus, it’s easier to maintain the code and reuse it as per their needs.

Here’s an example:

A typical React project has a source (src) folder where all the files and folders get listed, as shown below. The focus should also be on component-centric file structure:

└── /src

├── /assets

├── /components

├── /views

├── /services

├── /utils

├── /hooks

├── /store

└── App.js

├── index.js

├── index.css

• The asset folder comprises the project’s static files, such as your logo, fonts, images, favicons, etc.
• The component folder comprises UI codes such as buttons, forms, avatars, etc.
• The views folder contains all the web pages.
• The services folder comprises code that helps you to communicate with external APIs.
• The utils folder contains reusable function snippets.
• The hooks folder comprises reusable code and new component logic.
• The store folder contains state management files such as Redux.
• App.js comprises the main or regular component of your application.
• Index.js is the entry point for any React application.
• Index.css is the global sheet for styled components in an application.

#2. Focus on common modules

React is a non-opinionated framework, which means it doesn’t enforce a particular way of structuring your code. Therefore, you can divide your modules however you want while building a React application. React framework will assist you in reducing the development complexity and creating open, reusable, and shared structures.

For that purpose, you should focus on common modules such as reusable custom components, custom react hooks, business logic, constants, utility functions, etc. You can use these modules right through the software in various components, views, and projects.

#3. Add custom components in folders

Components are independent pieces of functionality that you can reuse in your application, and are the building blocks of all React applications. Adding custom components in folders helps keep projects organized and easier to navigate. It separates standard components from custom components, making them reusable, accessible, and maintainable, and enhancing scalability.

Let’s take an example of a React custom input component. In the component directory, create a new folder named “Input.” Within this nested folder, all the files as shown below:

└── /src

├── /components

| ├── /Input

| | ├── Input.js

| | ├── Input.css

| | ├── Input.test.js

• Input.js comprises all the logic of the custom component.
• Input.css contains the styled-comonents part.
• Input.test.js comprises all the test cases.

Now, create an index file named Index.js inside the pure components directory as shown below:

// /src/components/index.js
import { Button } from './Button/Button';
import { Input } from './Input/Input';
import { Card } from './Card/Card';
export { Button, Card, Input };

After setting up this file, you can use this custom component throughout the entire project architecture.

#4. Create custom hooks

A custom hook is a function that starts with “use” and may invoke other Hooks. It helps you to reduce code complexity. Suppose you have two different web pages called Login and Registration. Both of these pages will have input fields where visitors will enter the required information, and click the submit button at the end.

Now, if you want the password toggling feature for both these pages, you must write the same code twice. That’s where the role of the custom hook comes into the picture. You can create a custom hook for password toggling, as shown below:

└── /src
├── /hooks
├──usePasswordToggler.js

In the usePasswordToggler.js file, you can define the logic for password toggling and save it in the single folder. After that, you can use this custom hook in your React app source code whenever possible. You don’t need to write duplicate code for the Login and Registration pages. Custom hooks help to reduce code complexity and enforce reusability.

#5. Use absolute imports

By default, React application comprises plenty of nested structures, which may lead to confusion when importing any element.

// some file
import { Button } from '../../components';

You can avoid such confusion by adding support for importing modules using absolute paths. For this purpose, you can add a rule to the jsconfig.json file at the root of your project. A jsconfig.json file helps your editor’s Language Server Protocol to comprehend JavaScript or JSX (A JavaScript Extension).

Here’s an example of how jsconfig.json can help:

{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

With a rule added to the jsconfig.json file, you can import components located at  /src/components with the following coding snippet:

import { Button } from 'components';

#6. Avoid a single context for everything

One of the most common problems in a React application is figuring out how to share the current state across multiple components. The complexity can multi-fold when several components exist between a parent and child component, requiring the passing of render props between them.

React Context is essential for transmitting data via component tree without restoring to default prop drilling. It means a parent component can pass on the props to all the child components beneath. Using multiple contexts in your React application can help you avoid a single point of failure and accomplish various tasks effectively.

#7. Separate business logic from UI

To enhance the quality of your source code and make software maintenance a breeze, you should separate business logic from UI. The main component i.e., UI should get stored in the /pages or /views directory. Building custom hooks can help you to solve this problem. You can also use the React Query library, a custom hook that helps you to fetch, catch and update the content.

#8. Use the utils directory

The utils directory comprises some helper functions that you can use right through your React application. It’s not compulsory to utilize the utils directory. However, it’s recommended as it assists in maintaining a clean code and enhancing software quality.

So far, we have gone through the nitty-gritty of best practices and folder/structure changes that can help you to create a scalable web application. However, the question still remains-how to create one/what are the steps involved? Let us find out in our next section.

Start a project with us