{"id":35,"date":"2024-12-15T23:02:14","date_gmt":"2024-12-15T23:02:14","guid":{"rendered":"https:\/\/fullstacknotes.netblocs.com\/?p=35"},"modified":"2024-12-18T09:48:36","modified_gmt":"2024-12-18T09:48:36","slug":"exploring-the-app-js-structure-of-a-large-scale-react-application","status":"publish","type":"post","link":"https:\/\/netblocs.com\/fullstacknotes\/exploring-the-app-js-structure-of-a-large-scale-react-application\/","title":{"rendered":"Exploring the App.js of a Large-Scale React Project"},"content":{"rendered":"\n

React Application Structure and Explanations<\/h3>\n\n\n\n

In the following example, you see the App.js file of an advanced, large-scale real e-commerce application.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import <\/span>React<\/span> from <\/span>"react"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>BrowserRouter<\/span> <\/span>}<\/span> from <\/span>"react-router-dom"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>Provider<\/span> <\/span>}<\/span> from <\/span>"react-redux"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>PersistGate<\/span> <\/span>}<\/span> from <\/span>"redux-persist\/integration\/react"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>UIContextProvider<\/span> <\/span>}<\/span> from <\/span>".\/modules\/_context\/UIContext"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>I18nProvider<\/span>,<\/span> <\/span>useLang<\/span> <\/span>}<\/span> from <\/span>"_metronic\/i18n"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>LayoutSplashScreen<\/span> <\/span>}<\/span> from <\/span>"_metronic\/layout"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>Routes<\/span> <\/span>}<\/span> from <\/span>".\/routes\/Routes"<\/span>;<\/span><\/span>\nimport <\/span>moment<\/span> from <\/span>"moment"<\/span>;<\/span><\/span>\nimport <\/span>'moment\/locale\/de'<\/span>;<\/span><\/span>\nimport <\/span>'moment\/locale\/tr'<\/span>;<\/span><\/span>\n<\/span>\nexport default function <\/span>App<\/span>({<\/span> <\/span>store<\/span>,<\/span> <\/span>persistor<\/span>,<\/span> <\/span>basename<\/span> <\/span>})<\/span> <\/span>{<\/span><\/span>\n  <\/span>\/\/<\/span> Change the moment language package<\/span><\/span>\n  const <\/span>locale<\/span> = <\/span>useLang<\/span>()<\/span>;<\/span> <\/span>\/\/<\/span> "de" | "en" | "tr"<\/span><\/span>\n  <\/span>moment<\/span>.<\/span>locale<\/span>(<\/span>locale<\/span> ?? <\/span>"de"<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  return <\/span>(<\/span><\/span>\n    <\/span>\/*<\/span> Provide Redux store <\/span>*\/<\/span><\/span>\n    <\/span><<\/span>Provider<\/span> <\/span>store<\/span>=<\/span>{<\/span>store<\/span>}<\/span>><\/span><\/span>\n      <\/span>{<\/span>\/*<\/span> Asynchronously persist redux stores and show SplashScreen while it's loading. <\/span>*\/<\/span>}<\/span><\/span>\n      <\/span><<\/span>PersistGate<\/span> <\/span>persistor<\/span>=<\/span>{<\/span>persistor<\/span>}<\/span> <\/span>loading<\/span>=<LayoutSplashScreen<\/span> <\/span>\/><\/span>><\/span><\/span>\n        <\/span>{<\/span>\/*<\/span> Override basename (e.g: homepage in package.json) <\/span>*\/<\/span>}<\/span><\/span>\n        <\/span><<\/span>BrowserRouter<\/span> <\/span>basename<\/span>=<\/span>{<\/span>basename<\/span>}<\/span>><\/span><\/span>\n          <\/span>{<\/span>\/*<\/span>This library only returns the location that has been active before the recent location change in the current window lifetime.<\/span>*\/<\/span>}<\/span><\/span>\n          <\/span>{<\/span>\/*<\/span> Provide react-intl context synchronized with Redux state. <\/span>*\/<\/span>}<\/span><\/span>\n          <\/span><<\/span>I18nProvider<\/span>><\/span><\/span>\n            <\/span><<\/span>UIContextProvider<\/span>><\/span><\/span>\n              <\/span>{<\/span>\/*<\/span> Render routes with provided Layout. <\/span>*\/<\/span>}<\/span><\/span>\n              <\/span><<\/span>Routes<\/span> <\/span>\/><\/span><\/span>\n            <\/span><\/<\/span>UIContextProvider<\/span>><\/span><\/span>\n          <\/span><\/<\/span>I18nProvider<\/span>><\/span><\/span>\n        <\/span><\/<\/span>BrowserRouter<\/span>><\/span><\/span>\n      <\/span><\/<\/span>PersistGate<\/span>><\/span><\/span>\n    <\/<\/span>Provider<\/span>><\/span><\/span>\n  <\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
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.<\/p>\n\n\n\n
This React component forms the core structure of an application and integrates many important libraries. Now let’s explain the code step by step:<\/p>\n\n\n\n
1. Imports<\/h4>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import <\/span>React<\/span> from <\/span>"react"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>BrowserRouter<\/span> <\/span>}<\/span> from <\/span>"react-router-dom"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>Provider<\/span> <\/span>}<\/span> from <\/span>"react-redux"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>PersistGate<\/span> <\/span>}<\/span> from <\/span>"redux-persist\/integration\/react"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>UIContextProvider<\/span> <\/span>}<\/span> from <\/span>".\/modules\/_context\/UIContext"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>I18nProvider<\/span>,<\/span> <\/span>useLang<\/span> <\/span>}<\/span> from <\/span>"_metronic\/i18n"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>LayoutSplashScreen<\/span> <\/span>}<\/span> from <\/span>"_metronic\/layout"<\/span>;<\/span><\/span>\nimport <\/span>{<\/span> <\/span>Routes<\/span> <\/span>}<\/span> from <\/span>".\/routes\/Routes"<\/span>;<\/span><\/span>\nimport <\/span>moment<\/span> from <\/span>"moment"<\/span>;<\/span><\/span>\nimport <\/span>'moment\/locale\/de'<\/span>;<\/span><\/span>\nimport <\/span>'moment\/locale\/tr'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    \n
  • React:<\/strong> Necessary to use the React library.<\/li>\n\n\n\n
  • react-router-dom:<\/strong> Used to manage routing operations in the application.<\/li>\n\n\n\n
  • react-redux:<\/strong> Used to provide Redux state management.<\/li>\n\n\n\n
  • redux-persist:<\/strong> Used to save Redux state to persistent storage like local storage.<\/li>\n\n\n\n
  • UIContextProvider:<\/strong> A custom context provider that provides the in-app UI state.<\/li>\n\n\n\n
  • I18nProvider:<\/strong> Used for the application’s internationalization (i18n) support.<\/li>\n\n\n\n
  • LayoutSplashScreen:<\/strong> A loading screen shown while the application is loading.<\/li>\n\n\n\n
  • Routes:<\/strong> Contains the routes defined for the application’s routing.<\/li>\n\n\n\n
  • moment:<\/strong> A library used for date and time operations. German and Turkish language packs have also been imported.<\/li>\n<\/ul>\n\n\n\n
    2. App Component<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    export default function <\/span>App<\/span>({<\/span> <\/span>store<\/span>,<\/span> <\/span>persistor<\/span>,<\/span> <\/span>basename<\/span> <\/span>})<\/span> <\/span>{<\/span><\/span>\n    <\/span>\/\/<\/span> App: This is the main component of the application and receives the Redux store, persistor object, and basename value as props.<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    3. Language Setting<\/h4>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    const<\/span> <\/span>locale<\/span> <\/span>=<\/span> <\/span>useLang<\/span>()<\/span>;<\/span> <\/span>\/\/<\/span> "de" | "en" | "tr"<\/span><\/span>\nmoment<\/span>.<\/span>locale<\/span>(<\/span>locale<\/span> <\/span>??<\/span> <\/span>"de"<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
      \n
    • useLang():<\/strong> A hook that returns the current language of the application. If no language is available, it defaults to German (“de”).<\/li>\n\n\n\n
    • moment.locale():<\/strong> Changes the language setting of the moment library. Thus, date formats are updated according to the language setting.<\/li>\n<\/ul>\n\n\n\n
      4. JSX Structure<\/h4>\n\n\n\n
      <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
      return<\/span> (<\/span><\/span>\n    <\/span><<\/span>Provider<\/span> <\/span>store<\/span>=<\/span>{<\/span>store<\/span>}<\/span>><\/span><\/span>\n        <\/span><<\/span>PersistGate<\/span> <\/span>persistor<\/span>=<\/span>{<\/span>persistor<\/span>}<\/span> <\/span>loading<\/span>=<LayoutSplashScreen<\/span> <\/span>\/><\/span>><\/span><\/span>\n            <\/span><<\/span>BrowserRouter<\/span> <\/span>basename<\/span>=<\/span>{<\/span>basename<\/span>}<\/span>><\/span><\/span>\n                <\/span><<\/span>I18nProvider<\/span>><\/span><\/span>\n                    <\/span><<\/span>UIContextProvider<\/span>><\/span><\/span>\n                        <\/span><<\/span>Routes<\/span> <\/span>\/><\/span><\/span>\n                    <\/span><\/<\/span>UIContextProvider<\/span>><\/span><\/span>\n                <\/span><\/<\/span>I18nProvider<\/span>><\/span><\/span>\n            <\/span><\/<\/span>BrowserRouter<\/span>><\/span><\/span>\n        <\/span><\/<\/span>PersistGate<\/span>><\/span><\/span>\n    <\/span><\/<\/span>Provider<\/span>><\/span><\/span>\n)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
        \n
      • Provider:<\/strong> Provides the Redux store to all components of the application.<\/li>\n\n\n\n
      • PersistGate:<\/strong> Shows a loading state (splash screen) while saving the Redux state to local storage.<\/li>\n\n\n\n
      • BrowserRouter:<\/strong> Manages the application’s routing using React Router. The basename prop adds a base path to the URL structure.<\/li>\n\n\n\n
      • I18nProvider:<\/strong> Provides support for the application’s internationalization.<\/li>\n\n\n\n
      • UIContextProvider:<\/strong> A special context that provides the user interface state.<\/li>\n\n\n\n
      • Routes:<\/strong> Contains the routing structures of the application and renders the routes defined here.<\/li>\n<\/ul>\n\n\n\n
        Summary<\/h3>\n\n\n\n
        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.<\/p>\n","protected":false},"excerpt":{"rendered":"
        React Application Structure and Explanations In the following example, you see the App.js file of an advanced, large-scale real e-commerce application. Understanding the structure of this file can facilitate learning…<\/p>\n","protected":false},"author":1,"featured_media":37,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[24,14],"class_list":["post-35","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-app","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":4,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/posts\/35\/revisions\/98"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media\/37"}],"wp:attachment":[{"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netblocs.com\/fullstacknotes\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}