Started using react

react_convert
Mark Moffat 2018-02-11 12:56:23 +01:00
parent 7037e18017
commit b76f93f729
8 changed files with 25471 additions and 20 deletions

3
app.js
View File

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

6977
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

18436
public/dist/app.js vendored Normal file

File diff suppressed because it is too large Load Diff

16
public/src/app.js Normal file
View File

@ -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);
}

View File

@ -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>
);
}
}

View File

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

14
webpack.config.js Normal file
View File

@ -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']}}
]
}
};