Added first component Cart Btn

Author: codingphase

gulpfile.js

@@ -19,9 +19,9 @@ gulp.task('default', ['webpack', 'styles', 'browser-sync'], () => {
 		.on('change', reload);
 });
 
-gulp.task('watch-proxy', ['styles', 'browser-sync-proxy'], () => {
+gulp.task('watch-proxy', ['webpack', 'styles', 'browser-sync-proxy'], () => {
 	gulp.watch('./resources/assets/scss/**/*', ['styles']);
-	// gulp.watch('./resources/assets/js/**/*', ['webpack']);
+	gulp.watch('./resources/assets/js/**/*', ['webpack']);
 	gulp
 		.watch([
 			'./public/**/*',

public/css/styles.css

@@ -33,7 +33,7 @@
     }
     var installedModules = {};
     var installedChunks = {
-        FirstComp: 0
+        CartBtn: 0
     };
     var deferredModules = [];
     function __webpack_require__(moduleId) {
@@ -97,11 +97,11 @@
     jsonpArray = jsonpArray.slice();
     for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
     var parentJsonpFunction = oldJsonpFunction;
-    deferredModules.push([ "./resources/assets/js/FirstComp.js", "vendors~FirstComp" ]);
+    deferredModules.push([ "./resources/assets/js/CartBtn.js", "vendors~CartBtn" ]);
     return checkDeferredModules();
 })({
-    "./resources/assets/js/FirstComp.js": function(module, __webpack_exports__, __webpack_require__) {
+    "./resources/assets/js/CartBtn.js": function(module, __webpack_exports__, __webpack_require__) {
         "use strict";
-        eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }\n\n\n\n\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {\n  constructor() {\n    super();\n\n    this.clickedBtn = () => {};\n\n    this.state = {\n      name: \'Joe\'\n    };\n  }\n\n  test() {\n    return _asyncToGenerator(function* () {})();\n  }\n\n  render() {\n    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {\n      className: "home"\n    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {\n      className: "Aligner"\n    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {\n      className: "Aligner-item"\n    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", {\n      src: "/img/logo.png"\n    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", null, "Freshgear"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {\n      className: "menu"\n    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {\n      href: "http://starterkit.codingphase.com",\n      target: "new"\n    }, "Documentation")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {\n      href: "http://www.codingphase.com",\n      target: "new"\n    }, "CodingPhase.Com")))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {\n      className: "version-num"\n    }, "version 2.0.0"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("br", null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {\n      className: "github-button",\n      href: "https://github.com/codingphasedotcom/Starter-Kit-2019",\n      "data-icon": "octicon-star",\n      "data-style": "mega",\n      "data-count-href": "/codingphasedotcom/rocky/stargazers",\n      "data-count-api": "/repos/codingphasedotcom/rocky#stargazers_count",\n      "data-count-aria-label": "# stargazers on GitHub",\n      "aria-label": "Star codingphasedotcom/rocky on GitHub"\n    }, "Star"))));\n  }\n\n}\n\nconst app = document.getElementById(\'app\');\nreact_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Layout, null), app); // if (typeof document !== "undefined"){}\n\n//# sourceURL=webpack:///./resources/assets/js/FirstComp.js?');
+        eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }\n\n\n\n\nclass Layout extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {\n  constructor() {\n    super();\n\n    this.clickedBtn = () => {};\n\n    this.state = {\n      name: \'Joe\'\n    };\n  }\n\n  test() {\n    return _asyncToGenerator(function* () {})();\n  }\n\n  render() {\n    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {\n      href: "#",\n      className: "cart-link"\n    }, "Cart", react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, "4"));\n  }\n\n}\n\nconst cartBtn = document.getElementById(\'cartBtn\');\nreact_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Layout, null), cartBtn);\n\n//# sourceURL=webpack:///./resources/assets/js/CartBtn.js?');
     }
 });

public/js/dist/FirstComp.js renamed to public/js/dist/CartBtn.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+class Layout extends Component {
+	constructor() {
+		super();
+		this.state = {
+			name: 'Joe'
+		};
+	}
+	clickedBtn = () => {};
+	async test() {}
+	render() {
+		return (
+			<a href="#" className="cart-link">
+				Cart<div>4</div>
+			</a>
+		);
+	}
+}
+
+const cartBtn = document.getElementById('cartBtn');
+
+ReactDOM.render(<Layout />, cartBtn);

public/js/dist/app.js

@@ -45,6 +45,9 @@ header{
     font-size: 1rem;
     text-transform: uppercase;
     padding: 20px 0;
+    #cartBtn{
+      display: inline-block;
+    }
     a{
       color: #484c4f;
       padding-right: 15px;

public/js/dist/vendors~FirstComp.js renamed to public/js/dist/vendors~CartBtn.js

@@ -17,7 +17,7 @@
       <a href="/about">About</a>
       <a href="/products/new-arrivals">New Arrival</a>
       <a href="/products">All Products</a>
-      <a href="#" class="cart-link">Cart<div>4</div></a>
+      <div href="#" id="cartBtn">Cart<div>4</div></div>
     </div>
   </header>
 
@@ -114,9 +114,10 @@
 
 
 
-  <script src="js/dist/vendors~FirstComp.js"></script>
-  <script src="js/dist/FirstComp.js"></script>
+  
 
   @!section('javascript')
+  <script src="/js/dist/vendors~CartBtn.js"></script>
+  <script src="/js/dist/CartBtn.js"></script>
 </body>
 </html>

resources/assets/js/CartBtn.js

@@ -16,7 +16,7 @@ compress.unused = true;
 module.exports = env => {
 	return {
 		entry: {
-			FirstComp: './resources/assets/js/FirstComp.js'
+			CartBtn: './resources/assets/js/CartBtn.js'
 		},
 		output: {
 			path: path.resolve(__dirname, 'public/js/dist'),