react js-tutorial

React Architecture

The React library is built on a rock-solid foundation. It can be easily modified and expanded upon. As was previously discussed, React is a library for developing web applications’ user interfaces. The fundamental goal of React is to let developers build user interfaces using nothing but JavaScript. Every UI library requires us to learn a new template language in order to build the UI and gives us the choice of implementing logic directly within the template or as a separate file.

Workflow of a React application

Let us understand the workflow of a React application in this chapter by creating and analyzing a simple React application.

We need to group files based on the feature. That is, All files of a feature are in the same folder. Please check the below image for folder structure.

In the above image we can see the folders of the react app, let’s break down each folder purpose.

app

Global app setup and configuration used by the entire app are defined in app folder as below, which includes axiosClient, rootReducer, saga and store.

common

Reusable helpers, shared components, hooks, etc are defined in common folder.

features

Feature specific components, Slice (Redux reducer logic and associated actions - Redux Toolkit), APIs and styles are placed in the features folder.

routes

Components private, public routes are defined in routes folders. Route restriction based on authentication is handled here.

assets

Static assets like Images, files, icons are placed in the assets directory.

tests

Unit test cases and their mock goes to the tests directory.

style

Global styles, theme configuration is placed in the style folder.

Using the above feature folder structure, We can easily remove or add a feature related code without issues. The feature folder structure is recommended by the redux style guide. By using Redux Toolkit, We have avoided boilerplate code like actions and reducers.

Architecture of the React Application

React library is just UI library and it does not enforce any particular pattern to write a complex application. Developers are free to choose the design pattern of their choice. React community advocates certain design pattern. One of the patterns is Flux pattern. React library also provides lot of concepts like Higher Order component, Context, Render props, Refs etc., to write better code. React Hooks is evolving concept to do state management in big projects. Let us try to understand the high level architecture of a React application.

  • React app starts with a single root component.
  • Root component is build using one or more component.
  • Each component can be nested with other component to any level.
  • Composition is one of the core concepts of React library. So, each component is build by composing smaller components instead of inheriting one component from another component.
  • Most of the components are user interface components.
  • React app can include third party component for specific purpose such as routing, animation, state management, etc.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.