e-Business React Application: Technical Overview Document

This article provides the technical aspects of e-Business React application. It includes a walkthrough of the architectural aspect of e-Business React User Interface (UI) application, as well as the development and deployment model for e-Business React Application.

This article is organized into following sub-topics: 

• System Overview
• Setting up Development Environment and Making Customized Changes
• Installing eBusiness React Application
• New Feature in eBusiness React Application

• React MVP Feature List 

System Overview

This section offers insights into e-Business React Architecture, the application of design patterns, code organization, API integration, and details of UI pages.

• • React Overview: React has emerged as one of the most popular JavaScript libraries for building user interfaces in modern web development.  With its component-based architecture and virtual DOM, React offers developers a powerful toolset to create dynamic and interactive web applications.

  • Architecture:  An architectural pattern in front-end development is the blueprint of the User Interface. React architecture is a collection of components responsible for building a software’s User Interface (UI). React architecture provides a framework for creating web experiences that are easy to understand, maintain, and build.

    Design Pattern: Redux is a popular state management library that complements React architecture by providing a centralized and predictable state container. It follows a single source of truth principle, where the entire state of the application is stored in a single store object. In Redux, the state is immutable, meaning it cannot be modified directly. To update the state, developers dispatch actions, which are plain JavaScript objects describing the type of update and associated data. Reducers, pure functions, then process these actions to generate a new state, ensuring a predictable and deterministic update process.

    • For sync actions the reducer takes the action argument, converts it to a request model, invokes the use case and updates the state with the response model.
      
      
    • For async actions the async thunk converts the action to a request model, invokes the use case and when it returns the response model it passes the response model to the reducer to update the state.
      
      

• • Navigating Directory Strcuture:  A well-organized folder structure is crucial for scalable React Architecture. Group related files together and separate concerns to improve code readability and maintainability. Refer to Understanding React Folder Structure document for details on how we have organized our folder structure: 
  • Component Reusability: Create small and focused components that can be easily combined to build complex UIs. Promote component reusability to minimize code duplication and improve maintainability.  Creating Reusable Components in React document provides the instructions on how to create reusable components.
  • State Management with React Hooks: Using React Hooks simplifies the state management process, reduces boilerplate code, and improves the readability of components. It also facilitates the separation of concerns, making it easier to reason about the application’s behavior.  Refer to the Setting Up and Configuring the Redux Store in a React Application document for more information.
  • Data Fetching and API Integration: Fetching data from APIs is a common requirement in modern web applications. To know more about integrating e-Business with React APIs, refer to the document Integrating with React APIs.

Setting up Development Environment and Making Customized Changes

This section provides a walkthrough for developers on setting up the development environment and starting to create customized components or pages, as well as modifying existing components.

• • Setting Up the Code for Development and Deployment
  • Creating Reusable Components in React
  • Using Reusable Components
  • Creating a New Page in React Project
  • Changing the Color of Components and Pages
  • Changing the Theme of Application
  • Configuring Routing to existing or new page
  • Integrating with React APIs
  • Setting Up and Configuring the Redux Store in a React Application
  • Working with Form Builder
  • Configuring ESlint, Husky and Prettier
  • Testing Accessibility in React Application

Installing eBusiness React Application

To integrate React application with e-Business application, you will need to follow a series of installation steps. Installing the e-Business React Application guide includes all the necessary steps to ensure smooth installation.

New Feature in eBusiness React Application

The e-Business React MVP release brings the implementation of the frontend implementation of the "Make Payment without Login" feature in React, and the introduction of the Payment Email Reminder feature. Refer to Making Payment Without Login: Email reminder feature document for more information on this feature.

React MVP Feature List 

Here is the list of features for which we have developed UI in React as part of MVP Release:

Supported Features in React
Basic Features	Login/Logout New User Sign UP Forgot password /Change password options Welcome Logged in <user> option
Profile	My Profile Order History Pay Off Orders Saved Cards
Products	Product Catalog Grid View / List View implementation Product Details for General, Subscription Membership, Group and Kit products Product Image Upload
Shopping Cart Checkout	Ordering General, Subscription Membership Group and Kit products Applying Product pricing Logic Related Product widget Product pre-requisites Checkout Wizard Fast Checkout for Zero priced product View Cart Applying coupon code Sending Order Confirmation Email Applying Shipping, Handling and tax charges Applying SPM Adding/updating Billing and Shipping Address Shipment Type Support
Orders/Payments	Purchase Order Payment Without Login Credit Card Reference Transaction support Gpay ACH payments Tokenizer CardPointe Payment BluePay Support
Common Features	Filtering/Sorting/Searching on all pages Adding Pagination Generic page for Empty List Exception Handling

Conclusion

React architecture patterns and best practices serve as a roadmap to building your high-quality React applications. Following principles like component-based architecture, state management, and performance optimization enables the creation of applications that are more maintainable, scalable, and sustainable. Adhering to React architectural patterns is crucial for ensuring your project is efficient, quick to load, performs well, and maintains high quality.