Color Admin

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 
npm start

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

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

---

Copy over the required image from global assets folder

<!-- copy the following folder-->
/admin/template/assets/img
 
<!-- paste it into react folder -->
/admin/template/template_react/public/assets/img

File structure overview for React JS Version

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

Below is the code from app.js which include the header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

import React from 'react';
import { PageSettings } from './config/page-settings.js';

import Header from './components/header/header.jsx';
import Sidebar from './components/sidebar/sidebar.jsx';
import SidebarRight from './components/sidebar-right/sidebar-right.jsx';
import TopMenu from './components/top-menu/top-menu.jsx';
import Content from './components/content/content.jsx';
import Footer from './components/footer/footer.jsx';
import FloatSubMenu from './components/float-sub-menu/float-sub-menu.jsx';


class App extends React.Component {
  constructor(props) {
    super(props);
    
    // function & state
  }
  
  // add window scroll listener
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
  }

  // remove window scroll listener
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  }
  
  // trigger window onscroll
  handleScroll = () => {
    if (window.scrollY > 0) {
      this.setState(state => ({
        hasScroll: true
      }));
    } else {
      this.setState(state => ({
        hasScroll: false
      }));
    }
  }
  
  render() {
    return (
      <PageSettings.Provider value={this.state}>
        <div className={
          'fade page-sidebar-fixed show page-container ' + 
          (this.state.pageHeader ? 'page-header-fixed ' : '') + 
          (this.state.pageSidebar ? '' : 'page-without-sidebar ') + 
          (this.state.pageRightSidebar ? 'page-with-right-sidebar ' : '') +
          (this.state.pageSidebarWide ? 'page-with-wide-sidebar ' : '') +
          (this.state.pageSidebarLight ? 'page-with-light-sidebar ' : '') +
          (this.state.pageSidebarMinify ? 'page-sidebar-minified ' : '') + 
          (this.state.pageSidebarToggled ? 'page-sidebar-toggled ' : '') + 
          (this.state.pageTopMenu ? 'page-with-top-menu ' : '') + 
          (this.state.pageContentFullHeight ? 'page-content-full-height ' : '') + 
          (this.state.pageTwoSidebar ? 'page-with-two-sidebar ' : '') + 
          (this.state.pageRightSidebarCollapsed ? 'page-right-sidebar-collapsed ' : '') + 
          (this.state.pageMobileRightSidebarToggled ? 'page-right-sidebar-toggled ' : '') + 
          (this.state.hasScroll ? 'has-scroll ' : '')
        }>
          {this.state.pageHeader && (<Header />)}
          {this.state.pageSidebar && (<Sidebar />)}
          {this.state.pageTwoSidebar && (<SidebarRight />)}
          {this.state.pageTopMenu && (<TopMenu />)}
          {this.state.pageContent && (<Content />)}
          {this.state.pageFooter && (<Footer />)}
          <FloatSubMenu />
        </div>
      </PageSettings.Provider>
    )
  }
}

export default App;

List of components inside the components folder

components/
├── content/
├── float-sub-menu/
├── footer/
├── header/
├── panel/
├── sidebar/
├── sidebar-right/
└── top-menu/

File to configure the default page options & page routes

config/
├── page-route.jsx
└── page-settings.js

Example of how to change page options in single page

import { PageSettings } from './../../config/page-settings.js';

class PageWithoutSidebar extends React.Component {
  static contextType = PageSettings;

  componentDidMount() {
    this.context.handleSetPageSidebar(false);
  }

  componentWillUnmount() {
    this.context.handleSetPageSidebar(true);
  }
}

export default PageWithoutSidebar

List of options:

this.state = {
  pageHeader: true,
  pageheaderMegaMenu: false,
  pageHeaderLanguageBar: false,
  
  pageSidebar: true,
  pageSidebarWide: false,
  pageSidebarLight: false,
  pageSidebarMinify: false,
  pageSidebarToggled: false,
  pageSidebarTransparent: false,
  pageSidebarSearch: false,
  
  handleSetPageHeader: this.handleSetPageHeader,
  handleSetPageHeaderLanguageBar: this.handleSetPageHeaderLanguageBar,
  handleSetPageHeaderMegaMenu: this.handleSetPageHeaderMegaMenu,
  
  pageContent: true,
  pageContentClass: '',
  pageContentFullHeight: false,
  pageContentFullWidth: false,
  
  pageFooter: false,
  pageTopMenu: false,
  pageTwoSidebar: false,
  pageRightSidebar: false,
}

List of functions can be used in single page:

this.state = {
  handleSetPageSidebar: this.handleSetPageSidebar,
  handleSetPageSidebarWide: this.handleSetPageSidebarWide,
  handleSetPageSidebarLight: this.handleSetPageSidebarLight,
  handleSetPageSidebarMinified: this.handleSetPageSidebarMinified,
  handleSetPageSidebarTransparent: this.handleSetPageSidebarTransparent,
  handleSetPageSidebarSearch: this.handleSetPageSidebarSearch,

  handleSetPageContent: this.handleSetPageContent,
  handleSetPageContentClass: this.handleSetPageContentClass,
  handleSetPageContentFullHeight: this.handleSetPageContentFullHeight,
  handleSetPageContentFullWidth: this.handleSetPageContentFullWidth,
  
  handleSetPageFooter: this.handleSetPageFooter,
  handleSetPageTopMenu: this.handleSetPageTopMenu,
  handleSetPageTwoSidebar: this.handleSetPageTwoSidebar,
  handleSetPageRightSidebar: this.handleSetPageRightSidebar,
  handleSetBodyWhiteBg: this.handleSetBodyWhiteBg,
  handleSetPageBoxedLayout: this.handleSetPageBoxedLayout
}

Now Vue.js version is fully scss configured. You may switch the Color Admin theme by changing the file /admin/src/scss/react.scss.

@import 'default/styles';
 
<!-- other themes -->
@import 'apple/styles';
@import 'facebook/styles';
@import 'google/styles';
@import 'material/styles';
@import 'transparent/styles';

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/reactstrap

{
  "name": "color-admin",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@fullcalendar/bootstrap": "^5.3.1",
    "@fullcalendar/daygrid": "^5.3.2",
    "@fullcalendar/interaction": "^5.3.1",
    "@fullcalendar/list": "^5.3.1",
    "@fullcalendar/react": "^5.3.1",
    "@fullcalendar/timegrid": "^5.3.1",
    "@rowno/sparkline": "^4.0.0",
    "apexcharts": "^3.22.0",
    "bootstrap": "^4.5.3",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^2.9.4",
    "codemirror": "^5.58.1",
    "flag-icon-css": "^3.5.0",
    "google-map-react": "^2.1.8",
    "jquery": "^3.5.1",
    "moment": "^2.29.1",
    "namor": "^2.0.2",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "rc-slider": "^9.5.4",
    "react": "^17.0.1",
    "react-apexcharts": "^1.3.7",
    "react-bootstrap-daterangepicker": "^7.0.0",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-calendar": "^3.1.0",
    "react-chartjs-2": "^2.10.0",
    "react-codemirror2": "^7.2.1",
    "react-color": "^2.18.1",
    "react-datepicker": "^3.3.0",
    "react-datetime": "^3.0.4",
    "react-dom": "^17.0.1",
    "react-downcount": "^1.0.2",
    "react-input-mask": "^2.0.4",
    "react-notifications-component": "^2.4.1",
    "react-nvd3": "^0.5.7",
    "react-perfect-scrollbar": "^1.5.8",
    "react-quill": "^1.3.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.4",
    "react-select": "^3.1.0",
    "react-table": "^7.6.0",
    "react-tag-autocomplete": "^6.1.0",
    "reactstrap": "^8.6.0",
    "simple-line-icons": "^2.5.5",
    "typescript": "^4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1"
  }
}