8 năm trước cách đây · cdc96f9cde
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,33 @@
 
				+module.exports = {
			
 
				+  'rules': {
			
 
				+    'indent': [
			
 
				+      2,
			
 
				+      2
			
 
				+    ],
			
 
				+    'quotes': [
			
 
				+      2,
			
 
				+      'single'
			
 
				+    ],
			
 
				+    'linebreak-style': [
			
 
				+      2,
			
 
				+      'unix'
			
 
				+    ],
			
 
				+    'semi': [
			
 
				+      2,
			
 
				+      'always'
			
 
				+    ]
			
 
				+  },
			
 
				+  'env': {
			
 
				+    'es6': true,
			
 
				+    'browser': true,
			
 
				+    'node': true
			
 
				+  },
			
 
				+  'extends': 'eslint:recommended',
			
 
				+  'ecmaFeatures': {
			
 
				+    'jsx': true,
			
 
				+    'experimentalObjectRestSpread': true
			
 
				+  },
			
 
				+  'plugins': [
			
 
				+    'react'
			
 
				+  ]
			
 
				+};
			
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,5 @@ build/Release
 
				 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
			
 
				 node_modules
			
 
				 
			
 
				+# Webpack build results
			
 
				+bundle.js
			
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
 
				-# react-intro
			
 
				+# react-intro : Learning ReactJS
			
 
				 
			
 
				-Learning ReactJS
			
 
				+## Parts taken from:
			
 
				+
			
 
				+- http://jslog.com/2014/10/02/react-with-webpack-part-1/
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,22 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <title>Basic Property Grid</title>
			
 
				+  <!-- include react -->
			
 
				+  <script src="./node_modules/react/dist/react-with-addons.js"></script>
			
 
				+  </head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="content">
			
 
				+    <!-- this is where the root react component will get rendered -->
			
 
				+    </div>
			
 
				+
			
 
				+  <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
			
 
				+  <!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
			
 
				+  <script src="http://vm:8090/webpack-dev-server.js"></script>
			
 
				+
			
 
				+  <!-- include the bundle that contains all our scripts, produced by webpack -->
			
 
				+  <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
			
 
				+  <script type="text/javascript" src="http://vm:8090/assets/bundle.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/main.js
+++ b/main.js
@@ -0,0 +1,9 @@
 
				+// https://facebook.github.io/react/docs/getting-started.html
			
 
				+
			
 
				+var React = require('react');
			
 
				+var ReactDOM = require('react-dom');
			
 
				+
			
 
				+ReactDOM.render(
			
 
				+    <h1>Hello, XMas world!</h1>,
			
 
				+    document.getElementById('content')
			
 
				+);
			
--- a/package.json
+++ b/package.json
@@ -0,0 +1,27 @@
 
				+{
			
 
				+  "name": "gettingstarted",
			
 
				+  "version": "1.0.0",
			
 
				+  "description": "",
			
 
				+  "main": "main.jsx",
			
 
				+  "dependencies": {
			
 
				+    "babel-preset-react": "^6.3.13",
			
 
				+    "babelify": "^7.2.0",
			
 
				+    "eslint-plugin-react": "^3.13.0",
			
 
				+    "react": "^0.14.3",
			
 
				+    "react-dom": "^0.14.3"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "http-server": "^0.8.5",
			
 
				+    "jsx-loader": "^0.13.2",
			
 
				+    "webpack": "^1.12.9",
			
 
				+    "webpack-dev-server": "^1.14.0"
			
 
				+  },
			
 
				+  "author": "",
			
 
				+  "license": "MIT",
			
 
				+
			
 
				+  "scripts": {
			
 
				+    "start": "npm run serve | npm run dev",
			
 
				+    "serve": "./node_modules/.bin/http-server -p 8080",
			
 
				+    "dev": "webpack-dev-server --progress --colors --port 8090 --host vm"
			
 
				+  }
			
 
				+}
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,24 @@
 
				+module.exports = {
			
 
				+  entry: './main.js',
			
 
				+  output: {
			
 
				+    filename: 'bundle.js', // default, skippable
			
 
				+    publicPath: 'http://localhost/assets'
			
 
				+  },
			
 
				+  module: {
			
 
				+    loaders: [
			
 
				+      {
			
 
				+        // Tell webpack to use jsx-loader for all *.js/*.jsx files
			
 
				+        test: /\.jsx?$/,
			
 
				+        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
			
 
				+      }
			
 
				+    ]
			
 
				+  },
			
 
				+  externals: {
			
 
				+    // Don't bundle the "react" npm package with our bundle.js,
			
 
				+    // but get it from a global React variable.
			
 
				+    react: 'React'
			
 
				+  },
			
 
				+  resolve: {
			
 
				+    extensions: ['', '.js', '.jsx']
			
 
				+  }
			
 
				+};