Started using react

app.js

@@ -162,6 +162,9 @@ handlebars = handlebars.create({
         formatDate: function (date, format){
             return moment(date).format(format);
         },
+        stringify: function (data){
+            return JSON.stringify(data);
+        },
         ifCond: function (v1, operator, v2, options){
             switch(operator){
             case'==':

package.json

@@ -35,6 +35,8 @@
     "numeral": "^2.0.6",
     "paypal-rest-sdk": "^1.6.9",
     "rand-token": "^0.4.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "rimraf": "^2.6.2",
     "sitemap": "^1.6.0",
     "strip-bom": "^3.0.0",
@@ -42,6 +44,9 @@
     "uglifycss": "0.0.27"
   },
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-react": "^6.24.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-standard": "^10.2.1",
@@ -53,7 +58,10 @@
     "gulp-clean-css": "^3.9.2",
     "gulp-minify": "^2.1.0",
     "gulp-rename": "^1.2.2",
-    "run-sequence": "^2.2.1"
+    "install": "^0.10.4",
+    "npm": "^5.6.0",
+    "run-sequence": "^2.2.1",
+    "webpack": "^3.11.0"
   },
   "main": "app.js",
   "keywords": [

public/src/app.js

@@ -0,0 +1,16 @@
+import React from'react';
+import ReactDOM from'react-dom';
+import Menu from'./components/Menu.jsx';
+
+function run(){
+    const root = document.getElementById('menu');
+    ReactDOM.render(<Menu {...(JSON.parse(root.dataset.menu))} />, root);
+};
+
+const loadedStates = ['complete', 'loaded', 'interactive'];
+
+if(loadedStates.includes(document.readyState) && document.body){
+    run();
+}else{
+    window.addEventListener('DOMContentLoaded', run, false);
+}

public/src/components/Menu.jsx

@@ -0,0 +1,32 @@
+import React from'react';
+
+export default class Menu extends React.Component{
+    render(){
+        console.log(this.props);
+        return(
+            <nav className="navbar navbar-default navbarMenuWrapper">
+                <div className="container-fluid">
+                    <div className="col-md-8 col-md-offset-2 navbarMenu">
+                        <ul className="nav navbar-nav">
+                            {Object.keys(this.props.menu.items).map((key, value) => {
+                                let className = '';
+                                if(this.props.searchTerm && this.props.searchTerm === this.props.menu.items[key].title){
+                                    className = 'navActive';
+                                }
+                                return<li className="{className}" key={key}><a href="/category/{this.props[key].link}">{this.props.menu.items[key].title}</a></li>
+                            })}
+                            <li className="pull-right col-md-4 searchBarWrapper">
+                                <div className="search-bar-input input-group searchMenuLocation- searchProPerRow-">
+                                    <input type="text" name="frm_search" id="frm_search" className="form-control" placeholder="Search the shop" />
+                                    <span className="input-group-btn">
+                                        <button className="btn btn-primary" id="btn_search" type="submit">Search</button>
+                                    </span>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+        );
+    }
+}

views/layouts/layout.hbs

@@ -38,6 +38,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
         <script src="/javascripts/jquery.bootpag.min.js"></script>
         <script src="/javascripts/cssbeautify.min.js"></script>
+        <script src="/dist/app.js"></script>
 		<script src="/javascripts/expressCart{{config.env}}.js"></script>
         <script src="/javascripts/jquery.dotdotdot.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
@@ -70,6 +71,8 @@
     <body>
     {{/if}}
 		<!-- Static navbar -->
+        <div id="app"></div>
+        <div id="menu" data-menu="{{stringify this}}"></div>
 	    <nav class="navbar navbar-default navbar-static-top">
 			<div class="container-fluid mainNavBar">
 				<div class="navbar-header">

webpack.config.js

@@ -0,0 +1,14 @@
+const path = require('path');
+module.exports = {
+    entry: './public/src/app.js',
+    output: {
+        path: path.resolve('public', 'dist'),
+        filename: 'app.js'
+    },
+    module: {
+        loaders: [
+            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['react']}},
+            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['react']}}
+        ]
+    }
+};