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.
Global app setup and configuration used by the entire app are defined in app folder as below, which includes axiosClient, rootReducer, saga and store.
Reusable helpers, shared components, hooks, etc are defined in common folder.
Components private, public routes are defined in routes folders. Route restriction based on authentication is handled here.
Static assets like Images, files, icons are placed in the assets directory.
Unit test cases and their mock goes to the tests directory.
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.
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.