Render main react component

Remchi · Jun 16, 2016 · 64e99bb · 64e99bb
1 parent 9e208c5
commit 64e99bb
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 4 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": [ "es2015" ]
+  "presets": [ "es2015", "react" ]
 }
diff --git a/client/components/App.js b/client/components/App.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <h1>Hello from react</h1>
+  );
+}
diff --git a/client/index.js b/client/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './components/App';
+
+render(<App />, document.getElementById('app'));
diff --git a/package.json b/package.json
@@ -12,10 +12,16 @@
   "license": "ISC",
   "devDependencies": {
     "babel-cli": "^6.10.1",
+    "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
-    "nodemon": "^1.9.2"
+    "babel-preset-react": "^6.5.0",
+    "nodemon": "^1.9.2",
+    "webpack": "^1.13.1",
+    "webpack-dev-middleware": "^1.6.1"
   },
   "dependencies": {
-    "express": "^4.14.0"
+    "express": "^4.14.0",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0"
   }
 }
diff --git a/server/index.html b/server/index.html
@@ -8,7 +8,9 @@
 </head>
 
 <body>
-  <h1>!Hello World!</h1>
+  <div id="app"></div>
+
+  <script src="bundle.js"></script>
 </body>
 
 </html>
diff --git a/server/index.js b/server/index.js
@@ -1,8 +1,14 @@
 import express from 'express';
 import path from 'path';
 
+import webpack from 'webpack';
+import webpackMiddleware from 'webpack-dev-middleware';
+import webpackConfig from '../webpack.config.dev';
+
 let app = express();
 
+app.use(webpackMiddleware(webpack(webpackConfig)));
+
 app.get('/*', (req, res) => {
   res.sendFile(path.join(__dirname, './index.html'));
 });

diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -0,0 +1,21 @@
+import path from 'path'
+
+export default {
+  devtools: 'eval-source-map',
+  entry: path.join(__dirname, '/client/index.js'),
+  output: {
+    path: '/'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        include: path.join(__dirname, 'client'),
+        loaders: [ 'babel' ]
+      }
+    ]
+  },
+  resolve: {
+    extentions: [ '', '.js' ]
+  }
+}