Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

### A) Installation - top

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.

### B) File Structure - top

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/

### C) Page Structure - top

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;

### D) Components - top

List of components inside the components folder

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

### E) Config - top

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
    }

### G) Using SCSS - top

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

### H) NPM Package - top

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"
      }
    }