React Structure

Overview

Index.tsx file Structure.

Component Version

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from "react-redux";
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from './slices';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
const store = configureStore({ reducer: rootReducer, devTools: true });
root.render(
    <React.Fragment>
        <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
      </Provider>
    </React.Fragment>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tsx file Structure.

import React from 'react';

//import Scss
import "./../assets/scss/themes.scss";

//imoprt Route
import Route from './Routes/Index';

const App = () => {
return (
    <React.Fragment>
        <Route />
    </React.Fragment>
);
}

export default App;

FrontEnd Version

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { configureStore } from "@reduxjs/toolkit";
import App from './App';
import rootreducer from 'slices';

const store = configureStore({ reducer: rootReducer, devTools: true });

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tsx file Structure.

import React from 'react';

//import Scss
import "./../assets/scss/themes.scss";

//imoprt Route
import Route from './Routes/Index';

const App = () => {
return (
    <React.Fragment>
        <Route />
    </React.Fragment>
);
}

export default App;

BackEnd Version

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from "react-redux";
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from './slices';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
const store = configureStore({ reducer: rootReducer, devTools: true });
root.render(
    <React.Fragment>
        <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
      </Provider>
    </React.Fragment>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tsx file Structure.

import React from 'react';

//import Scss
import "./../assets/scss/themes.scss";

//imoprt Route
import Route from './Routes/Index';

import fakeBackend from "./helpers/AuthType/fakeBackend";

// Activating fake backend
fakeBackend();

// Import Firebase Configuration file
// import { initFirebaseBackend } from "./helpers/firebase_helper";

// const firebaseConfig = {
//   apiKey: process.env.REACT_APP_API_KEY,
//   authDomain: process.env.REACT_APP_AUTHDOMAIN,
//   databaseURL: process.env.REACT_APP_DATABASEURL,
//   projectId: process.env.REACT_APP_PROJECTID,
//   storageBucket: process.env.REACT_APP_STORAGEBUCKET,
//   messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
//   appId: process.env.REACT_APP_APPID,
//   measurementId: process.env.REACT_APP_MEASUREMENTID,
// };

// init firebase backend
// initFirebaseBackend(firebaseConfig);
const App = () => {
return (
     <React.Fragment>
         <Route />
     </React.Fragment>
);
}

export default App;

Layout setup

Not applicable in FrontEnd Version

You can set the default layout in the src/slices/layouts/reducer.ts file.

export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.LIGHT,
    layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
    leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE,
    bodyImageType: BODY_IMAGE_TYPES.NONE
};

layoutType: LAYOUT_TYPES.VERTICAL	To set default layout as Vertical
layoutType: LAYOUT_TYPES.HORIZONTAL	To set default layout as Horizontal
layoutType: LAYOUT_TYPES.TWOCOLUMN	To set default layout as Two column
layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE	To set Light layout mode.
layoutModeType: LAYOUT_MODE_TYPES.DARKMODE	To set Dark layout mode.
layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID	To set layout width Fluid and left sidebar large.
layoutWidthType: LAYOUT_WIDTH_TYPES.BOXED	To set layout width Boxed and left sidebar on hover show menu.
layoutPositionType: LAYOUT_POSITION_TYPES.FIXED	To set layout position Fixed.
layoutPositionType: LAYOUT_POSITION_TYPES.SCROLLABLE	To set layout position Scrollable.
topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT	To set the Light color of Topbar.
topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.DARK	To set the Dark color of Topbar.
topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.BRAND	To set the Brand color of Topbar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT	To set the Large left sidebar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.COMPACT	To set the Compact left sidebar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.SMALLICON	To set the Icon view left sidebar.
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.SMALLHOVER	To set the Icon hover left sidebar.
leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT	To set the Default layout.
leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DETACHED	To set the Detached layout.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.LIGHT	To set the Light color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK	To set the Dark color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT	To set the Gradient color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT_2	To set the Gradient-2 color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT_3	To set the Gradient-3 color of left Sidebar.
leftSidebarType: LAYOUT_SIDEBAR_TYPES.GRADIENT_4	To set the Gradient-4 color of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE	To Disable image on left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG1	To set the img-1 Image of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG2	To set the img-2 Image of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG3	To set the img-3 Image of left Sidebar.
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.IMG4	To set the img-4 Image of left Sidebar.
preloader: PERLOADER_TYPES.ENABLE	To enable the preloader on the Page.
preloader: PERLOADER_TYPES.DISABLE	To disable the preloader on the Page.