React/Redux boilerplate based on https://github.com/jackielii/simples…

…t-redux-example
pka · Aug 24, 2015 · ae25f84 · ae25f84
commit ae25f84
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+npm-debug.log
+bundle.js
diff --git a/README.md b/README.md
@@ -0,0 +1,10 @@
+Basic example for using [OpenLayers 3](http://openlayers.org/) with [React](http://facebook.github.io/react/) and [Redux](http://rackt.github.io/redux/)
+
+To run this example:
+
+1. `npm install`
+2. `npm start`
+3. open http://localhost:3000/ in the browser
+
+GeoJSON data is from 
+http://www.geoforall.org/locations/OSGEoLabs.json
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<html>
+	<head>
+		<title>Basic ol3 + react example</title>
+	</head>
+	<body>
+		<div id="root" />
+		<script type="text/javascript" src="bundle.js"></script>
+	</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,73 @@
+var React = require('react');
+var Redux = require('redux');
+var ReactRedux = require('react-redux');
+var createStore = Redux.createStore;
+var Provider = ReactRedux.Provider;
+var connect = ReactRedux.connect;
+
+// React component
+var Counter = React.createClass( {
+  render: function() {
+    var value = this.props.value;
+    var onIncreaseClick = this.props.onIncreaseClick;
+    return (
+      <div>
+        <span>{value}</span>
+        <button onClick={onIncreaseClick}>Increase</button>
+      </div>
+    );
+  }
+});
+
+// Action:
+var increaseAction = {type: 'increase'};
+
+// Reducer:
+function counter(state, action) {
+  if (typeof state === 'undefined') {
+    state = {count: 0};
+  }
+  var count = state.count;
+  switch(action.type){
+    case 'increase':
+      return {count: count+1};
+    default:
+      return state;
+  }
+}
+
+// Store:
+var store = createStore(counter);
+
+// Map Redux state to component props
+function mapStateToProps(state)  {
+  return {
+    value: state.count
+  };
+}
+
+// Map Redux actions to component props
+function mapDispatchToProps(dispatch) {
+  return {
+    onIncreaseClick: function() {
+      dispatch(increaseAction)
+    }
+  };
+}
+
+// Connected Component:
+var App = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Counter);
+
+React.render(
+  React.createElement(Provider, {store: store}, 
+    function(){
+      return React.createElement(App, null)
+    }
+  ),
+  document.getElementById('root')
+);
+
+module.exports = Counter;
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "ol3-react-example",
+  "version": "0.0.0",
+  "description": "Basic ol3 + react example",
+  "main": "index.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pka/ol3-react-example.git"
+  },
+  "keywords": [
+    "redux",
+    "react"
+  ],
+  "author": "Pirmin Kalberer",
+  "license": "ISC",
+  "bugs": {
+        "url": "https://github.com/pka/ol3-react-example/issues"
+  },
+  "homepage": "https://github.com/pka/ol3-react-example#readme",
+  "dependencies": {
+    "react": "^0.13.3",
+    "react-redux": "^0.5.0",
+    "redux": "^1.0.0-rc"
+  },
+  "devDependencies": {
+    "react-hot-loader": "^1.2.7",
+    "jsx-loader": "^0.13.2",
+    "webpack": "^1.9.11",
+    "webpack-dev-server": "^1.9.0"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,16 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  hot: true,
+  stats: {
+    colors: true
+  }
+}).listen(3000, 'localhost', function (err) {
+  if (err) {
+    console.log(err);
+  }
+
+  console.log('Listening at localhost:3000');
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,27 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  devtool: 'eval',
+    entry: [
+    'webpack-dev-server/client?http://localhost:3000',
+    'webpack/hot/only-dev-server',
+    './index'
+  ],
+  output: {
+    path: __dirname,
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loaders: ['react-hot', 'jsx-loader'],
+      exclude: /node_modules/,
+      include: __dirname
+    }]
+  }
+};