Add Webpack, babel loader, React modules

thientrinhcoder · thientrinhcoder · commit 3ddf4baa0ddb · 2017-01-31T17:27:41.000+07:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets" : ["es2015", "react"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "vsicons.presets.angular": false
+}
diff --git a/client/app/Components/AwesomeComponent.jsx b/client/app/Components/AwesomeComponent.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+class AwesomeComponent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {likesCount : 0};
+    this.onLike = this.onLike.bind(this);
+  }
+
+  onLike () {
+    let newLikesCount = this.state.likesCount + 1;
+    this.setState({likesCount: newLikesCount});
+  }
+
+  render() {
+    return (
+      <div>
+        Likes : <span>{this.state.likesCount}</span>
+        <div><button onClick={this.onLike}>Like Me</button></div>
+      </div>
+    );
+  }
+
+}
+
+export default AwesomeComponent;
diff --git a/client/app/index.jsx b/client/app/index.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import {render} from 'react-dom';
+
+// ...
+import AwesomeComponent from './Components/AwesomeComponent.jsx';
+// ...
+class App extends React.Component {
+  render () {
+    return (
+      <div>
+        <p> Hello Thien Trinh Duc!</p>
+        <AwesomeComponent />
+      </div>
+    );
+  }
+}
+
+// ...
+render(<App/>, document.getElementById('app'));
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>React.js using NPM, Babel6 and Webpack</title>
+  </head>
+  <body>
+    <div id="app" />
+    <script src="public/bundle.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/client/public/bundle.js b/client/public/bundle.js
diff --git a/package.json b/package.json
@@ -4,7 +4,9 @@
   "description": "Fetch meteo infor from other services to forecast weather for flying",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack -d --watch",
+    "build" : "webpack -p"
   },
   "repository": {
     "type": "git",
@@ -15,5 +17,15 @@
   "bugs": {
     "url": "https://github.com/thientd87/FlightForecast/issues"
   },
-  "homepage": "https://github.com/thientd87/FlightForecast#readme"
+  "homepage": "https://github.com/thientd87/FlightForecast#readme",
+  "devDependencies": {
+    "webpack": "^2.2.1"
+  },
+  "dependencies": {
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,24 @@
+var webpack = require('webpack');
+var path = require('path');
+
+var BUILD_DIR = path.resolve(__dirname, 'client/public');
+var APP_DIR = path.resolve(__dirname, 'client/app');
+
+var config = {
+  entry: APP_DIR + '/index.jsx',
+  output: {
+    path: BUILD_DIR,
+    filename: 'bundle.js'
+  },
+  module : {
+    loaders : [
+      {
+        test : /\.jsx?/,
+        include : APP_DIR,
+        loader : 'babel-loader'
+      }
+    ]
+  }
+};
+
+module.exports = config;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets" : ["es2015", "react"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "vsicons.presets.angular": false`
	`3`	`+}`