React Folder Structure

Overview

We have used yarn start to compile the react app files.

index.js file :
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "./i18n";
import { Provider } from "react-redux";

import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <Provider store={store}>
        <React.Fragment>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </React.Fragment>
    </Provider>
);

serviceWorker.unregister()

Layout setup

You can set the default layout in the src/store/layout/reducer.js file. 

const INIT_STATE = {
    layoutType: layoutTypes.HORIZONTAL,
    layoutModeType: layoutModeTypes.DARK,
    layoutWidth: layoutWidthTypes.FLUID,
    leftSideBarTheme: leftSideBarThemeTypes.DARK,
    leftSideBarThemeImage: leftBarThemeImageTypes.NONE,
    leftSideBarType: leftSidebarTypes.DEFAULT,
    topbarTheme: topBarThemeTypes.DARK,
    isPreloader: false,
    showRightSidebar: false,
    isMobile: false,
    showSidebar: true,
    leftMenu: false,
};
layoutType: layoutTypes.VERTICAL, To set vertical layout width.
layoutType: layoutTypes.HORIZONTAL, To set horizontal layout width.
layoutModeType: layoutModeTypes.LIGHT, To set Light layout mode.
layoutModeType: layoutModeTypes.DARK, To set Dark layout mode.
layoutWidth: layoutWidthTypes.FLUID, To set fluid layout width.
layoutWidth: layoutWidthTypes.BOXED, To set boxed layout width.
layoutWidth: layoutWidthTypes.SCROLLABLE, To set scrollable layout width.
leftSideBarTheme: leftSideBarThemeTypes.LIGHT, To set light sidebar type.
leftSideBarTheme: leftSideBarThemeTypes.COLORED, To set colored sidebar type.
leftSideBarTheme: leftSideBarThemeTypes.DARK, To set dark sidebar type.
leftSideBarTheme: leftSideBarThemeTypes.WINTER, To set winter sidebar type.
leftSideBarTheme: leftSideBarThemeTypes.LADYLIP, To set ladtlip sidebar type.
leftSideBarTheme: leftSideBarThemeTypes.PLUMPLATE, To set plumplate sidebar type.
leftSideBarTheme: leftSideBarThemeTypes.STRONGBLISS, To set strongbliss sidebar type.
leftSideBarTheme: leftSideBarThemeTypes.GREATWHALE, To set greatwhale sidebar type.
leftSideBarThemeImage: leftBarThemeImageTypes.NONE, To set none sidebar image type.
leftSideBarThemeImage: leftBarThemeImageTypes.IMG1, To set image1 sidebar image type.
leftSideBarThemeImage: leftBarThemeImageTypes.IMG2, To set image2 sidebar image type.
leftSideBarThemeImage: leftBarThemeImageTypes.IMG3, To set image3 sidebar image type.
leftSideBarThemeImage: leftBarThemeImageTypes.IMG4, To set image4 sidebar image type.
leftSideBarType: leftSidebarTypes.DEFAULT, To set deafult sidebar type.
leftSideBarType: leftSidebarTypes.COMPACT, To set compact sidebar type.
leftSideBarType: leftSidebarTypes.ICON, To set icon sidebar type.
topbarTheme: topBarThemeTypes.LIGHT, To set the Light color of Topbar.
topbarTheme: topBarThemeTypes.DARK, To set the dark color of Topbar.
topbarTheme: topBarThemeTypes.COLORED, To set the colored color of Topbar.
isPreloader: false, set false the preloader on the Page.
showRightSidebar: false, set false the showRightSidebar on the Page.
isMobile: false, set false the isMobile on the Page.
showSidebar: true, set false the showSidebar on the Page.
leftMenu: false, set false the leftMenu on the Page.
© Skote.