Spike adding in react components

Author: mattjburrows

app/containers/Player.jsx

@@ -0,0 +1,21 @@
+'use strict';
+
+import { React, Component } from 'react';
+import { Provider } from 'react-redux';
+import configureStore from '../store/configurePlayerStore';
+
+const store = configureStore();
+
+export default class Player extends Component {
+  render() {
+    return <Provider store={store}>
+      <div>
+        <video src={this.props.src}></video>
+      </div>
+    </Provider>;
+  }
+}
+
+Player.propTypes = {
+  src: React.PropTypes.string
+};

app/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Player from './containers/Player.jsx';
+
+ReactDOM.render(
+  React.createElement(Player, {
+    src: '/SampleVideo_640x360_10mb.mp4'
+  }),
+  document.getElementById('app')
+);

app/store/configurePlayerStore.js

@@ -1,8 +1,12 @@
 'use strict';
 
-import { createStore } from 'redux';
+import { createStore, combineReducers } from 'redux';
 import { playbackReducer } from '../reducers/playback';
 
 export default function configureStore() {
-  return createStore(playbackReducer);
+  return createStore(
+    combineReducers({
+      playback: playbackReducer
+    })
+  );
 }

package.json

@@ -21,11 +21,11 @@
     "redux": "^3.5.2"
   },
   "devDependencies": {
-    "babel-core": "^6.9.0",
+    "babel-core": "^6.10.4",
     "babel-eslint": "^6.1.0",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-react": "^6.11.1",
     "babel-register": "^6.9.0",
     "chai": "^3.5.0",
     "enzyme": "^2.0.0",

webpack.config.js

@@ -4,14 +4,20 @@ module.exports = {
     path: __dirname,
     filename: 'bundle.js'
   },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
   module: {
-    loaders: [{
-      test: /\.js$/,
-      exclude: /(node_modules)/,
-      loader: 'babel',
-      query: {
-        presets: ['es2015', 'react']
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel',
+        exclude: /node_modules/,
+        query: {
+          cacheDirectory: true,
+          presets: ['react', 'es2015']
+        }
       }
-    }]
+    ]
   }
 };