React+babel is working

4 files changed, 33 insertions, 5 deletions

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..93fbaa3
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}
\ No newline at end of file
diff --git a/index.js b/index.js
index 993e9a9..f82e7c8 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,18 @@
-require("./style.css");
+import './style.css'
 
-document.write("It works.");
\ No newline at end of file
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+class Note extends React.Component {
+  render() {
+    return <div>Hai!</div>
+  }
+}
+
+main();
+
+function main() {
+  const app = document.createElement('div')
+  document.body.appendChild(app)
+  ReactDOM.render(<Note />, app)
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index e9cc590..d0dd9ed 100644
--- a/package.json
+++ b/package.json
@@ -11,5 +11,14 @@
   "devDependencies": {
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
+  },
+  "dependencies": {
+    "babel-core": "^6.3.15",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 2ccc988..945d633 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,12 +1,13 @@
 module.exports = {
-    entry: "./index.js",
+    entry: './index.js',
     output: {
         path: __dirname,
-        filename: "bundle.js"
+        filename: 'bundle.js'
     },
     module: {
         loaders: [
-            { test: /\.css$/, loader: "style!css" }
+            { test: /\.js$/, loader: 'babel' },
+            { test: /\.css$/, loader: 'style!css' }
         ]
     }
 };
\ No newline at end of file