itReverie
diff --git a/‎lib/bundle.js‎ b/‎lib/bundle.js‎
diff --git a/‎lib/components/Index.js‎
Lines changed: 31 additions & 0 deletions b/‎lib/components/Index.js‎
Lines changed: 31 additions & 0 deletions
diff --git a/‎package.json‎
Lines changed: 8 additions & 2 deletions b/‎package.json‎
Lines changed: 8 additions & 2 deletions
diff --git a/‎public/bundle.js‎
Lines changed: 451 additions & 0 deletions b/‎public/bundle.js‎
Lines changed: 451 additions & 0 deletions
diff --git a/‎views/index.ejs‎
Lines changed: 7 additions & 1 deletion b/‎views/index.ejs‎
Lines changed: 7 additions & 1 deletion
diff --git a/‎webpack.config.js‎
Lines changed: 16 additions & 0 deletions b/‎webpack.config.js‎
Lines changed: 16 additions & 0 deletions
@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom'; // We need this dependency because we are interfacing with the browser
+
+
+// I have my normal class component
+class App extends React.Component{
+    //Using class properties from babel Stage-2, it need babel-polyfill
+    state={ answer:42};
+
+    // I am declaring a function
+    asyncFunc = () => {
+        return Promise.resolve(37);
+    };
+
+    //It is important to label the host function as async
+    async componentDidMount(){
+        this.setState({answer: await this.asyncFunc()});
+    }
+
+    render(){
+        return (
+            <h2>Hello I am a react Class component. -- {this.state.answer}</h2>
+        );
+    }
+}
+
+export default App;
+
+
+// I am rendering in the DOM my app
+ReactDOM.render(<App/>, document.getElementById('root'));
@@ -27,7 +27,8 @@
   "homepage": "https://github.com/itReverie/itR-react-advance#readme",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "pm2 start lib/server.js --watch --interpreter babel-node"
+    "dev": "pm2 start lib/server.js --watch --interpreter babel-node",
+    "webpack": "webpack -d"
   },
   "babel": {
     "presets": [
@@ -43,11 +44,16 @@
   },
   "dependencies": {
     "babel-cli": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "ejs": "^2.5.7",
     "express": "^4.16.2",
-    "pm2": "^2.7.2"
+    "pm2": "^2.7.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "webpack": "^3.8.1"
   }
 }
@@ -7,6 +7,12 @@
     <title>Advance React</title>
 </head>
 <body>
-<h2>Hello All <%= answer %> </h2>
+
+<div id="root">
+    Loading...
+</div>
+
+<!-- Nowadays it is a good practice to make reference to just one file so we do not have multiple references -->
+<script src="/bundle.js" charset="UTF-8"></script>
 </body>
 </html>
@@ -0,0 +1,16 @@
+const path = require('path');
+
+const config = {
+    entry: [ 'babel-polyfill', './lib/components/Index.js'],
+    output: {
+        path: path.resolve(__dirname, 'public'),
+        filename: 'bundle.js'
+    },
+    module: {
+        rules: [
+            { test: /\.js/, exclude:/node_modules/, use: 'babel-loader' }
+        ]
+    }
+};
+
+module.exports = config;