From ae25f84fc358172eb65fc174f9a808cd4380350e Mon Sep 17 00:00:00 2001 From: Pirmin Kalberer Date: Mon, 24 Aug 2015 09:47:55 +0200 Subject: [PATCH] React/Redux boilerplate based on https://github.com/jackielii/simplest-redux-example --- .gitignore | 3 ++ README.md | 10 +++++++ index.html | 9 ++++++ index.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 34 ++++++++++++++++++++++ server.js | 16 +++++++++++ webpack.config.js | 27 ++++++++++++++++++ 7 files changed, 172 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 index.html create mode 100644 index.js create mode 100644 package.json create mode 100644 server.js create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2f23e8a --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +npm-debug.log +bundle.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..714abe2 --- /dev/null +++ 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 new file mode 100644 index 0000000..f9c552d --- /dev/null +++ b/index.html @@ -0,0 +1,9 @@ + + + Basic ol3 + react example + + +
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..c4fd13e --- /dev/null +++ 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 ( +
+ {value} + +
+ ); + } +}); + +// 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 new file mode 100644 index 0000000..26aaedd --- /dev/null +++ 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 new file mode 100644 index 0000000..98104f9 --- /dev/null +++ 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 new file mode 100644 index 0000000..006db07 --- /dev/null +++ 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 + }] + } +};