A simple Front End Architecture for React applications.

Go Back to blogs page

Date
Author
Abhishekh Maharjan Photo
Abhishekh Maharjan
Full Stack Software Developer
abhishekmhrzn.14@gmail.com

Read Time : 1 mins

Main picture of the blog

Single-Page-App | React.js | ReactQuery | Global-State-Management |

Hello Everyone, In this blog post I am going to explain about a simple way to Architecture your React App to create a robust and scalable Single Page Web App.

Client-Server Architecture

The above figure depicts a Client-Server architecture. Client or the Front End is a Single Page React Application and Server is a REST API. Client sends a request to the server and the server responds with a response. Client (browser) uses Fetch API (a more powerful and flexible replacement for XMLHttpRequest) to interact with server.

Single Page Application Block Diagram

Figure 2: A simple front End architecture for Single Page Application

As you can see the above figure, the client side application can be divided into three basic Layers

1. UI Layer (HTML/ CSS / JS) 

  • The UI layer renders the UI on the screen. It basically describes how a UI should look like. It also handles the user events.

  • The UI is built using JSX and css. It can also be built using component libraries like MaterialUI, SemanticUI, ChakraUI and many more.

  • The UI layer also contains local states which determines the state of the component.

  • If the client side state is complex and need a lot of props drilling then we can manage such state using Global state management tools like Zustand, Redux, MobX etc

  • The UI Layer also depends on the data fetched from the server.

  • Examples of react components: todos.tsx (link to my git repo)

2. Business / Application Logic Layer

  • The application logic layer is the layer responsible for querying the REST API. It is basically responsible for handling the server state. The state of the server when trying to fetch the data can be in one of the three states.

    • Error state

    • Loading state

    • Success (Status 200)

  • Application logics are usually custom hooks that communicates with the backend services through data access layer.

  • This layer can be implement by using ReactQuery.

  • examples are: useTodos.ts (link to my GitHub)

3. Data Access Layer

  • It manages the communication with the backend API. It is made up of API object exposing functions to communicate with the backend services. The data from the backend server is received as a JSON.