Exploring the App.js Structure of a Large-Scale React Application

Posted by on



React Application Structure and Explanations

In the following example, you see the App.js file of an advanced, large-scale real e-commerce application.

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { UIContextProvider } from "./modules/_context/UIContext";
import { I18nProvider, useLang } from "_metronic/i18n";
import { LayoutSplashScreen } from "_metronic/layout";
import { Routes } from "./routes/Routes";
import moment from "moment";
import 'moment/locale/de';
import 'moment/locale/tr';

export default function App({ store, persistor, basename }) {
  // Change the moment language package
  const locale = useLang(); // "de" | "en" | "tr"
  moment.locale(locale ?? "de");

  return (
    /* Provide Redux store */
    <Provider store={store}>
      {/* Asynchronously persist redux stores and show SplashScreen while it's loading. */}
      <PersistGate persistor={persistor} loading=<LayoutSplashScreen />>
        {/* Override basename (e.g: homepage in package.json) */}
        <BrowserRouter basename={basename}>
          {/*This library only returns the location that has been active before the recent location change in the current window lifetime.*/}
          {/* Provide react-intl context synchronized with Redux state. */}
          <I18nProvider>
            <UIContextProvider>
              {/* Render routes with provided Layout. */}
              <Routes />
            </UIContextProvider>
          </I18nProvider>
        </BrowserRouter>
      </PersistGate>
    </Provider>
  );
}

Understanding the structure of this file can facilitate learning by providing insight into what the overall structure of a large project in React looks like.

This React component forms the core structure of an application and integrates many important libraries. Now let's explain the code step by step:

1. Imports

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { UIContextProvider } from "./modules/_context/UIContext";
import { I18nProvider, useLang } from "_metronic/i18n";
import { LayoutSplashScreen } from "_metronic/layout";
import { Routes } from "./routes/Routes";
import moment from "moment";
import 'moment/locale/de';
import 'moment/locale/tr';
  • React: Necessary to use the React library.
  • react-router-dom: Used to manage routing operations in the application.
  • react-redux: Used to provide Redux state management.
  • redux-persist: Used to save Redux state to persistent storage like local storage.
  • UIContextProvider: A custom context provider that provides the in-app UI state.
  • I18nProvider: Used for the application's internationalization (i18n) support.
  • LayoutSplashScreen: A loading screen shown while the application is loading.
  • Routes: Contains the routes defined for the application's routing.
  • moment: A library used for date and time operations. German and Turkish language packs have also been imported.

2. App Component

export default function App({ store, persistor, basename }) {
    // App: This is the main component of the application and receives the Redux store, persistor object, and basename value as props.
}

3. Language Setting

const locale = useLang(); // "de" | "en" | "tr"
moment.locale(locale ?? "de");
  • useLang(): A hook that returns the current language of the application. If no language is available, it defaults to German ("de").
  • moment.locale(): Changes the language setting of the moment library. Thus, date formats are updated according to the language setting.

4. JSX Structure

return (
    <Provider store={store}>
        <PersistGate persistor={persistor} loading=<LayoutSplashScreen />>
            <BrowserRouter basename={basename}>
                <I18nProvider>
                    <UIContextProvider>
                        <Routes />
                    </UIContextProvider>
                </I18nProvider>
            </BrowserRouter>
        </PersistGate>
    </Provider>
);
  • Provider: Provides the Redux store to all components of the application.
  • PersistGate: Shows a loading state (splash screen) while saving the Redux state to local storage.
  • BrowserRouter: Manages the application's routing using React Router. The basename prop adds a base path to the URL structure.
  • I18nProvider: Provides support for the application's internationalization.
  • UIContextProvider: A special context that provides the user interface state.
  • Routes: Contains the routing structures of the application and renders the routes defined here.

Summary

This component forms the foundation of a React application, providing important functionalities such as state management, routing, internationalization, and user interface management all in one place. By using this structure, you can display content in various languages in your application, manage the user interface, and persist state effectively.

Comments

Post a Comment