React Folder Structure

Overview

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

index.tsx file :
import React from 'react';

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from "react-redux";
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(
  <Provider store={store}>
    <React.Fragment>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
      <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();

Layout setup

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

export const initialState: LayoutState = {
    layoutTypes: LAYOUT_TYPES.VERTICAL,
    layoutModeTypes: LAYOUT_MODE_TYPES.LIGHT,
    layoutWidthTypes: LAYOUT_WIDTH_TYPES.FLUID,
    topbarThemeTypes: TOPBAR_THEME_TYPES.LIGHT,
    leftSidebarTypes: LEFT_SIDEBAR_TYPES.DEFAULT,
    leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.DARK,
    leftSidebarImageTypes: LEFTBAR_THEME_IMAGES_TYPES.NONE
};
layoutTypes: LAYOUT_TYPES.VERTICAL, To set vertical layout Type.
layoutTypes: LAYOUT_TYPES.HORIZONTAL, To set horizontal layout Type.
layoutModeTypes: LAYOUT_MODE_TYPES.LIGHT, To set Light layout mode.
layoutModeTypes: LAYOUT_MODE_TYPES.DARK, To set Dark layout mode.
layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID, To set fluid layout width.
layoutWidthType: LAYOUT_WIDTH_TYPES.BOXED, To set boxed layout width.
topbarThemeTypes: TOPBAR_THEME_TYPES.LIGHT, To set Light Color of Topbar.
topbarThemeTypes: TOPBAR_THEME_TYPES.DARK, To set Dark Color of Topbar.
leftSidebarTypes: LEFT_SIDEBAR_TYPES.DEFAULT, To set default layout of left sidebar.
leftSidebarTypes: LEFT_SIDEBAR_TYPES.COMPACT, To set compact layout of left sidebar.
leftSidebarTypes: LEFT_SIDEBAR_TYPES.ICON, To set icon layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.LIGHT, To set light color layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.COLORED, To set colored color layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.DARK, To set dark color layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.WINTER, To set winter color layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.LADYLIP, To set ladylip color layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.PLUMPLATE, To set plumplate color layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.STRONGBLISS, To set strongbliss color layout of left sidebar.
leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.GREATWHALE, To set greatwhale color layout of left sidebar.
leftSidebarImageTypes: LEFTBAR_THEME_IMAGES_TYPES.NONE, To set none image of left sidebar.
leftSidebarImageTypes: LEFTBAR_THEME_IMAGES_TYPES.IMG1, To set img1 image of left sidebar.
leftSidebarImageTypes: LEFTBAR_THEME_IMAGES_TYPES.IMG2, To set img2 image of left sidebar.
leftSidebarImageTypes: LEFTBAR_THEME_IMAGES_TYPES.IMG3, To set img3 image of left sidebar.
leftSidebarImageTypes: LEFTBAR_THEME_IMAGES_TYPES.IMG4, To set img4 image of left sidebar.
© Skote.