Customizing your home page

When the React Store application homepage is launched, the React Router considers the relative path and loads the respective page component configured for that path.

Table 1. Home page and its components
Location Description
src\constants\routes.ts Store path - paths used in the store.
ROUTE_CONFIG in src\configs\routes.ts Path-to-component mappings.

ROUTE_CONFIG must be mapped separately for the B2C and B2B stores.

Home.tsx in src\components\pages\home Page component for the home page.

The Home.tsx component contains the entire home page and its sub-components.

src\components\layouts\standard-page Home page layout component

The homepage uses the StandardPageLayout to display the page sub-components. The StandardPageLayout component consists of a banner and two sections, vertically aligned.

src\App.tsx Header and footer
Consider the following points for the home page and its components:
  • For the Reference Store applications, the home page for both the B2C and B2B Reference Store applications maps to the same page component.
  • It is not mandatory to use a layout component. The sub-components can be included directly in the Home component. However, by creating a layout component you can reuse the same layout structure on other pages.
  • The header and footer are statically included in the React app and are not part of the routing. As such they are present on every page. The header and footer components are src/components/header and src/components/footer respectively.