v5.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';

function App() {
  var defaultOptions = {
    appMode: 'dark',
    appTheme: 'theme-teal',
    appDirection: '',
    appCover: '',
    appHeaderNone: false,
    appSidebarNone: false,
    appSidebarCollapsed: false,
    appContentNone: false,
    appContentClass: '',
    appContentFullHeight: false,
    appBoxedLayout: false,
    appFooter: false,
    appTopNav: false
  };
  const [appHeaderNone, setAppHeaderNone] = useState(defaultOptions.appHeaderNone);
  const [appSidebarNone, setAppSidebarNone] = useState(defaultOptions.appSidebarNone);
  const [appSidebarCollapsed, setAppSidebarCollapsed] = useState(defaultOptions.appSidebarCollapsed);
  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 providerValue = {
    setAppHeaderNone, 
    setAppSidebarNone, 
    setAppSidebarCollapsed, 
    setAppContentNone, 
    setAppContentClass,
    setAppContentFullHeight,
    setAppBoxedLayout,
    setAppFooter,
    setAppTopNav
  };
    
  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 handleSetAppCover = (value) => {
    if (value) {
      var htmlElm = document.querySelector('html');
      for (var x = 0; x < document.documentElement.classList.length; x++) {
        var targetClass = document.documentElement.classList[x];
        if (targetClass.search('bg-cover-') > -1) {
          htmlElm.classList.remove(targetClass);
        }
      }
      htmlElm.classList.add(value);
    
      if (localStorage && value) {
        localStorage.appCover = value;
      }
    }
  }
  
  var handleSetAppDirection = (value) => {
    const isRtl = value === 'rtl';
    
    document.documentElement.setAttribute('dir', isRtl ? 'rtl' : 'ltr');
    document.body.setAttribute('dir', isRtl ? 'rtl' : 'ltr');
  };
  
  useEffect(() => {
    document.body.classList.add('app-init');
    
    if (localStorage) {
      if (typeof localStorage.appMode !== 'undefined') {
        handleSetAppMode(localStorage.appMode);
      } else {
        if (defaultOptions.appMode) {
          handleSetAppMode(defaultOptions.appMode);
        }
      }
      if (typeof localStorage.appTheme !== 'undefined') {
        handleSetAppTheme(localStorage.appTheme);
      } else {
        if (defaultOptions.appTheme) {
          handleSetAppTheme(defaultOptions.appTheme);
        }
      }
      if (typeof localStorage.appCover !== 'undefined') {
        handleSetAppCover(localStorage.appCover);
      } else {
        if (defaultOptions.appCover) {
          handleSetAppCover(defaultOptions.appCover);
        }
      }
      if (typeof localStorage.appDirection !== 'undefined') {
        handleSetAppDirection(localStorage.appDirection);
      } else {
        if (defaultOptions.appDirection) {
          handleSetAppDirection(defaultOptions.appDirection);
        }
      }
    }
    
    // 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 ' : '') + 
        (appSidebarCollapsed ? 'app-sidebar-collapsed ' : '') + 
        (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: '',
  appDirection: '',
  appCover: '',
  appHeaderNone: false,
  appSidebarNone: false,
  appSidebarCollapsed: 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, 
setAppSidebarCollapsed, 
setAppContentNone, 
setAppContentClass,
setAppContentFullHeight,
setAppBoxedLayout,
setAppFooter,
setAppTopNav

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: 'bi bi-envelope', title: 'Email',
    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 teal color. You may change it from /src/scss/_variables.scss

// LINE 79
$theme:        $teal !default;

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

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

Add the 'cover' class to the <html> tag to change the page cover. You can modify the cover image from either /src/scss/images/. Note that both light and dark mode have separate background cover images. You may add the class to the /public/index.html as well.

Available Cover Options

<html class="bg-cover-2">
<html class="bg-cover-3">
<html class="bg-cover-4">
<html class="bg-cover-5">
<html class="bg-cover-6">
<html class="bg-cover-7">
<html class="bg-cover-8">
<html class="bg-cover-9">

Starting from version 2.0, we have implemented a default dark mode theme that is applied to the /public/index.html. This is achieved through the use of the data-bs-theme="dark" attribute in the <html> tag.

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

Please note that once you remove the data-bs-theme="dark" attribute, the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.

Here's an example:

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

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

With this example, the data-bs-theme="dark" attribute has been removed from html tag. This will enable the light mode to the entire page.

OR

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="light">
  <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/