v6.0

Follow the following step to install the reactjs in your localhost
You may refer to their official documentation for how to setup the node js & npm.
Setup Guide

<!-- run the following command -->
cd /your-path-url/template_react
npm install --force
npm start

<!-- browse the url -->
http://localhost:3000/

Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

File structure overview for React JS Version

template_react/
├── package.json
├── README.md
├── public/
└── src/
    ├── app.jsx
    ├── index.js
    ├── index.css
    ├── webpack.config.js
    ├── assets/ 
    ├── components/
    ├── composables/
    ├── config/
    ├── pages/
    └── scss/

Below is the code from app.jsx which include the header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.

import React, { useEffect, useState } from 'react';
import Header from './components/header/header.jsx';
import TopNav from './components/top-nav/top-nav.jsx';
import Sidebar from './components/sidebar/sidebar.jsx';
import Content from './components/content/content.jsx';
import Footer from './components/footer/footer.jsx';
import ThemePanel from './components/theme-panel/theme-panel.jsx';
import { AppSettings } from './config/app-settings.js';
import { slideToggle } from './composables/slideToggle.js';

function App() {
  var defaultOptions = {
    appMode: '',
    appTheme: '',
    appCover: '',
    appHeaderNone: false,
    appSidebarNone: false,
    appSidebarMinified: false,
    appSidebarMobile: false,
    appContentNone: false,
    appContentClass: '',
    appContentFullHeight: false,
    appBoxedLayout: false,
    appFooter: false,
    appTopNav: false,
    appVh100: false
  };
  const [appHeaderNone, setAppHeaderNone] = useState(defaultOptions.appHeaderNone);
  const [appSidebarNone, setAppSidebarNone] = useState(defaultOptions.appSidebarNone);
  const [appSidebarMinified, setAppSidebarMinified] = useState(defaultOptions.appSidebarMinified);
  const [appSidebarMobile, setAppSidebarMobile] = useState(defaultOptions.appSidebarMobile);
  const [appContentNone, setAppContentNone] = useState(defaultOptions.appContentNone);
  const [appContentClass, setAppContentClass] = useState(defaultOptions.appContentClass);
  const [appContentFullHeight, setAppContentFullHeight] = useState(defaultOptions.appContentFullHeight);
  const [appBoxedLayout, setAppBoxedLayout] = useState(defaultOptions.appBoxedLayout);
  const [appFooter, setAppFooter] = useState(defaultOptions.appFooter);
  const [appTopNav, setAppTopNav] = useState(defaultOptions.appTopNav);
  const [appVh100, setAppVh100] = useState(defaultOptions.appVh100);
  
  var handleToggleAppSidebarMinified = () => {
    setAppSidebarMinified((prevValue) => !prevValue);
    if (localStorage) {
      localStorage.appSidebarMinified = !appSidebarMinified;
    }
  };
  
  var handleToggleAppSidebarMobile = () => {
    setAppSidebarMobile((prevValue) => !prevValue);
  };
    
  var handleSetAppTheme = (value) => {
    if (value) {
      var newTheme = value;
      for (var x = 0; x < document.body.classList.length; x++) {
        if ((document.body.classList[x]).indexOf('theme-') > -1 && document.body.classList[x] !== newTheme) {
          document.body.classList.remove(document.body.classList[x]);
        }
      }
      
      if (localStorage && value) {
        localStorage.appTheme = value;
      }
      
      document.body.classList.add(newTheme);
      document.dispatchEvent(new Event('theme-reload'));
    }
  }
  
  var handleSetAppMode = (value) => {
    if (value) {
      document.documentElement.setAttribute('data-bs-theme', value);
    }
  }
    
  var handleSetAppSidebarMinified = (value) => {
    if (value) {
      var elm = document.querySelector('.app');
      if (elm) {
        if (!(elm.classList.contains('app-with-top-nav') && elm.classList.contains('app-without-sidebar')) && value === 'true') {
          setAppSidebarMinified(value);
        }
      }
    }
  }
    
  var handleSetAppSidebarMobile = (value) => {
    if (value) {
      var elm = document.querySelector('.app');
      if (elm) {
        if (!(elm.classList.contains('app-with-top-nav') && elm.classList.contains('app-without-sidebar'))) {
          setAppSidebarMobile(value);
        } else {
          slideToggle(document.querySelector('.app-top-nav'));
        }
      }
    }
  }
    
  var handleSetAppBoxedLayout = (value) => {
    if (value) {
      document.body.classList.add('app-with-bg');
    } else {
      document.body.classList.remove('app-with-bg');
    }
    setAppBoxedLayout(value);
  }
  
  const providerValue = {
    setAppHeaderNone, 
    setAppSidebarNone, 
    setAppSidebarMinified, 
    setAppSidebarMobile,
    setAppContentNone, 
    setAppContentClass,
    setAppContentFullHeight,
    setAppBoxedLayout,
    setAppFooter,
    setAppTopNav,
    handleSetAppTheme,
    handleSetAppMode,
    handleSetAppBoxedLayout,
    handleSetAppSidebarMinified,
    handleSetAppSidebarMobile,
    handleToggleAppSidebarMinified,
    handleToggleAppSidebarMobile
  };
  
  useEffect(() => {
    if (defaultOptions.appMode) {
      handleSetAppMode(defaultOptions.appMode);
    }
    if (defaultOptions.appTheme) {
      handleSetAppTheme(defaultOptions.appTheme);
    }
    if (defaultOptions.appSidebarMinified) {
      handleSetAppSidebarMinified(defaultOptions.appSidebarMinified);
    }
    
    if (localStorage) {
      if (typeof localStorage.appMode !== 'undefined') {
        handleSetAppMode(localStorage.appMode);
      }
      if (typeof localStorage.appTheme !== 'undefined') {
        handleSetAppTheme(localStorage.appTheme);
      }
      if (typeof localStorage.appSidebarMinified !== 'undefined') {
        handleSetAppSidebarMinified(localStorage.appSidebarMinified);
      }
    }
    
    // eslint-disable-next-line
  }, []);
  
  return (
    <AppSettings.Provider value={providerValue}>
      <div className={
        'app ' +
        (appBoxedLayout ? 'app-boxed-layout ' : '') + 
        (appContentFullHeight ? 'app-content-full-height ' : '') + 
        (appHeaderNone ? 'app-without-header ' : '') + 
        (appSidebarNone ? 'app-without-sidebar ' : '') + 
        (appSidebarMinified ? 'app-sidebar-minified ' : '') + 
        (appSidebarMobile ? 'app-sidebar-mobile-toggled' : '') +
        (appFooter ? 'app-footer-fixed ' : '') + 
        (appTopNav ? 'app-with-top-nav ' : '')
      }>
        {!appHeaderNone && (<Header />)}
        {appTopNav && (<TopNav />)}
        {!appSidebarNone && (<Sidebar />)}
        {!appContentNone && (<Content className={appContentClass} />)}
        {appFooter && (<Footer />)}
        <ThemePanel />
      </div>
    </AppSettings.Provider>
  )
}

export default App;

List of components inside the components folder

components/
├── card/
├── content/
├── footer/
├── header/
├── nav-scroll-to/
├── sidebar/
├── top-nav/
└── theme-panel/

Example of how to change page options in single page

import React, { useEffect, useContext } from 'react';
import { AppSettings } from './../../config/app-settings.js';

function PageWithoutSidebar() {
  const context = useContext(AppSettings);

  useEffect(() => {
    context.setAppSidebarNone(true);
    
    return function cleanUp() {
      context.setAppSidebarNone(false);
    }
    
    // eslint-disable-next-line
  }, []);
}

export default PageWithoutSidebar

List of default options can be set in app.jsx:

var defaultOptions = {
  appMode: '',
  appTheme: '',
  appCover: '',
  appHeaderNone: false,
  appSidebarNone: false,
  appSidebarMinified: false,
  appContentNone: false,
  appContentClass: '',
  appContentFullHeight: false,
  appBoxedLayout: false,
  appFooter: false,
  appTopNav: false,
  hasScroll: false
};

List of functions can be used in single page:

setAppHeaderNone, 
setAppSidebarNone, 
setAppContentNone, 
setAppContentClass,
setAppContentFullHeight,
setAppFooter,
setAppTopNav,
handleSetAppSidebarMinified,
handleSetAppBoxedLayout

File to configure the app routes

config/
└── app-route.js

Below is the route structures with two level support

import React from 'react';
import App from './../app.jsx';
import { Navigate } from 'react-router-dom';

import EmailInbox from './../pages/email/inbox.js';
import EmailCompose from './../pages/email/compose.js';
import EmailDetail from './../pages/email/detail.js';

const AppRoute = [
  {
    path: '*', 
    element: ,
    children: [
      { path: '', element:  },
      { path: 'email/*', 
        children: [
          { path: 'inbox', element:  },
          { path: 'compose', element:  },
          { path: 'detail', element:  }
        ]
      }
    ]
  }
];


export default AppRoute;

File to configure the page sidebar menu

config/
└── app-menu.js

Below is the sidebar structures with two level support

const Menu = [
  { is_header: true, title: 'Navigation' },
  { path: '/email', icon: 'fa fa-envelope', title: 'Email', badge: '4',
    children: [
      { path: '/email/inbox', title: 'Inbox' }, 
      { path: '/email/compose', title: 'Compose' }, 
      { path: '/email/detail', title: 'Detail' }
    ]
  }, 
  { is_divider: true }, 
  { is_header: true, title: 'Users' },
];

export default Menu;

The default theme color is set to the blue color. You may change it from /src/scss/_variables.scss

// LINE 84
$theme:        $blue !default;

Besides that, you can also set the theme color by adding the value theme-{ color-name } to /src/app.jsx

// LINE 14
appTheme: 'theme-blue',

If you wish to enable the dark mode instead, you can easily do so by adding the data-bs-theme="dark" attribute to the HTML tag. This will disable the default light mode and enable the dark mode theme.

Here's an example:

<!DOCTYPE html>
<html lang="en">
</html>

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
</html>

If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.

<div class="card" data-bs-theme="dark">
  <div class="card-body">
    <!-- your component content here -->
  </div>
</div>

Add the dir="rtl" attribute to <html> for /public/index.html in order to enable Right-To-Left (RTL) layout direction.

<html dir="rtl">

This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.

Global Variables

The /src/scss/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /src/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.

<!-- global variable -->
/src/scss/_variables.scss

Dark Mode Variables

The /src/scss/_variables-dark.scss file contains the variables that control the styles for dark mode. These variables are used in conjunction with the variables in the /src/scss/_variables.scss file to provide different values for light and dark modes.

<!-- dark mode variable -->
/src/scss/_variables-dark.scss

We have created the common re-usable card bootstrap component for this template. You may found the card component via /src/components/bootstrap/

//usage 
import { 
  Card, 
  CardHeader, 
  CardBody, 
  CardImgOverlay, 
  CardFooter, 
  CardGroup, 
  CardExpandToggler 
} from './../../components/card/card.jsx';

<CardGroup>
  <Card>
    <CardHeader>
      ... 
      <CardExpandToggler />
    </CardHeader>
    <CardBody>...</CardBody>
    <CardFooter>...</CardFooter>
    <CardImgOverlay>...</CardImgOverlay>
  </Card>
</CardGroup>

You may use the default bootstrap data attribute like data-bs-toggle="dropdown" OR import the required modules from bootstrap.

// usage example
import { ScrollSpy } from 'bootstrap';

new ScrollSpy(document.body, {
  target: '#sidebar-bootstrap',
  offset: 200
})

I've used the following images, icons or other files as listed.

Plugins

1. ApexCharts: https://apexcharts.com/
2. Bootstrap: http://getbootstrap.com/
3. Bootstrap Icons: https://icons.getbootstrap.com/
4. Chart.js: https://chartjs.org
5. Datatables: https://datatables.net/
6. FontAwesome: https://fontawesome.com/
7. Fullcalendar: https://fullcalendar.io/
8. Google Map React: https://github.com/google-map-react/google-map-react
9. Highlight.js: https://highlightjs.org/
10. Iconify: https://icon-sets.iconify.design/
11. jQuery: https://jquery.com/
12. jsvectormap: https://github.com/themustafaomar/jsvectormap
13. lity: https://sorgalla.com/lity/
14. masonry: https://masonry.desandro.com/
15. moment: http://momentjs.com/
16. PdfMake: http://pdfmake.org/#/
17. Perfect Scrollbar: https://github.com/mercs600/vue3-perfect-scrollbar
18. PhotoSwipe: https://photoswipe.com/
19. Popper.js: https://popper.js.org/
20. React: https://reactjs.org/
21. React Apexcharts: https://www.npmjs.com/package/react-apexcharts
22. React Bootstrap Daterangepicker: https://github.com/skratchdot/react-bootstrap-daterangepicker
23. React Color: http://casesandberg.github.io/react-color/
24. React Countdown: https://github.com/ndresx/react-countdown
25. React Datepicker: https://github.com/Hacker0x01/react-datepicker
26. React Datetime: https://github.com/arqex/react-datetime
27. React Highlight: https://github.com/akiran/react-highlight
28. React Input Mask: https://github.com/sanniassin/react-input-mask
29. React Perfect Scrollbar: https://github.com/goldenyz/react-perfect-scrollbar
30. React Quill: https://github.com/zenoamaro/react-quill
31. React Router DOM: https://github.com/remix-run/react-router
32. React Select: https://github.com/JedWatson/react-select/tree/master#readme
33. React Tag Input Component: https://github.com/hc-oss/react-tag-input-component#readme

Photos

1. Unsplash: https://unsplash.com/
2. Freepik: https://www.freepik.com/