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

<!-- copy the following folder-->
/admin/template/assets/css
/admin/template/assets/img

<!-- paste it into react folder -->
/admin/template/template_react/src/assets/css
/admin/template/template_react/public/assets/img

<!-- 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.

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,
  
  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,

  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
}

You may include the color admin theme scss file from /admin/src/sass/default/ as well.

<!-- copy the following folder -->
/admin/src/scss/default/

<!-- paste & replace the file inside the following folder -->
/admin/template/template_react/src/scss/

change the following code in /template_react/src/index.js

<!-- from LINE 16 -->
import './scss/react.scss';

<!-- to -->
import './scss/styles.scss';

remove the following code from /template_react/src/index.css

@import 'assets/css/default/app.min.css';

add the following code to /template_react/src/scss/styles.scss

@import 'react';

after you done all the steps before this, you may run the following command to start your react project.

npm start

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/bootstra

{
  "name": "color-admin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@rowno/sparkline": "^4.0.0",
    "apexcharts": "^3.8.3",
    "bootstrap": "^4.3.1",
    "bootstrap-social": "^5.1.1",
    "chart.js": "^2.8.0",
    "codemirror": "^5.48.2",
    "flag-icon-css": "^3.3.0",
    "fullcalendar-reactwrapper": "^1.0.7",
    "google-map-react": "^1.1.4",
    "namor": "^1.1.2",
    "node-sass": "^4.12.0",
    "rc-slider": "^8.6.13",
    "react": "^16.8.6",
    "react-apexcharts": "^1.3.3",
    "react-bootstrap-sweetalert": "^4.4.1",
    "react-calendar": "^2.19.0",
    "react-chartjs-2": "^2.7.6",
    "react-codemirror2": "^6.0.0",
    "react-color": "^2.17.3",
    "react-datepicker": "^2.8.0",
    "react-datetime": "^2.16.3",
    "react-dom": "^16.8.6",
    "react-downcount": "^1.0.2",
    "react-input-mask": "^2.0.4",
    "react-notifications-component": "^1.1.1",
    "react-nvd3": "^0.5.7",
    "react-perfect-scrollbar": "^1.5.3",
    "react-quill": "^1.3.3",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-select": "^3.0.4",
    "react-table": "^6.10.0",
    "react-tag-autocomplete": "^5.11.1",
    "reactstrap": "^8.0.1",
    "simple-line-icons": "^2.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts 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.10.0"
  }
}