Update to React 0.14 and babel-loader.

Author: mixxen

app.js

@@ -1,6 +1,6 @@
 var express = require('express');
 var path = require('path');
-var favicon = require('static-favicon');
+var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
@@ -13,10 +13,10 @@ var app = express();
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'jade');
 
-app.use(favicon());
+app.use(favicon(__dirname + '/public/favicon.ico'));
 app.use(logger('dev'));
 app.use(bodyParser.json());
-app.use(bodyParser.urlencoded());
+app.use(bodyParser.urlencoded({extended: true}));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 

bin/www

@@ -5,5 +5,5 @@ var app = require('../app');
 app.set('port', process.env.PORT || 3000);
 
 var server = app.listen(app.get('port'), function() {
-  debug('Express server listening on port ' + server.address().port);
+  console.log('Express server listening on port ' + server.address().port);
 });

package.json

@@ -1,22 +1,26 @@
 {
   "name": "webpack-react-express",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "flux": "^2.0.1",
-    "react": "^0.13.2"
+    "flux": "^2.1.1",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
   },
   "devDependencies": {
-    "express": "~4.12.3",
-    "static-favicon": "~1.0.0",
-    "morgan": "~1.5.2",
-    "cookie-parser": "~1.3.4",
+    "babel-core": "^6.5.1",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
     "body-parser": "~1.12.3",
+    "cookie-parser": "~1.3.4",
     "debug": "~2.1.3",
+    "express": "~4.12.3",
     "jade": "~1.9.2",
+    "morgan": "~1.5.2",
+    "serve-favicon": "^2.3.0",
     "statics": "~0.1.0",
-    "webpack": "^1.8.9",
-    "jsx-loader": "^0.13.1"
+    "webpack": "^1.12.13"
   },
   "main": "./index.js",
   "scripts": {

public/favicon.ico

@@ -1,5 +1,4 @@
-/** @jsx React.DOM */
-var React           = require('react');
+var React = require('react');
 
 var TestComponent = React.createClass({
   render: function() {

src/components/TestComponent.jsx

@@ -1,8 +1,8 @@
-/** @jsx React.DOM */
-var React         = require('react');
-var TestComponent = require('./components/TestComponent.jsx');
+var React         = require('react'),
+    ReactDOM      = require('react-dom'),
+    TestComponent = require('./components/TestComponent.jsx');
 
-React.render(
+ReactDOM.render(
   <TestComponent/>,
   document.getElementById("react-container")
 );

src/index.jsx

@@ -1,5 +1,6 @@
-/** @jsx React.DOM */
-var React         = require('react');
+var React    = require('react'),
+    ReactDOM = require('react-dom');
+
 
 var AnotherComponent = React.createClass({
   render: function() {
@@ -10,7 +11,7 @@ var AnotherComponent = React.createClass({
 });
 
 
-React.render(
+ReactDOM.render(
   <AnotherComponent/>,
   document.getElementById("react-container")
 );

src/other.jsx

@@ -19,8 +19,8 @@ module.exports = {
   },
   module: {
     loaders: [
-      {test: /\.jsx$/, loader: 'jsx-loader?harmony'},
-      {test: /\.js$/ , loader: 'jsx-loader?harmony'}
+      {test: /\.jsx$/, loader: 'babel', exclude: /(node_modules|bower_components)/, query: { presets: ['react', 'es2015'] }},
+      {test: /\.js$/, loader: 'babel', exclude: /(node_modules|bower_components)/, query: { presets: ['react', 'es2015'] }},
     ]
   },
   plugins: [