Last active
August 9, 2016 08:54
-
-
Save rjmacarthy/d5e95ecd4256a6e5363401f37a509458 to your computer and use it in GitHub Desktop.
Redux Thunk Boilerplate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| class App extends Component { | |
| render() { | |
| return ( | |
| <div> | |
| <p>Header here</p> | |
| <div className="container"> | |
| {this.props.children} | |
| </div> | |
| <p>Footer here</p> | |
| </div> | |
| ); | |
| } | |
| } | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Title</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="/src/public/stylesheets/app.css"> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <script src="/bundle.js"></script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import { Provider } from 'react-redux'; | |
| import { createStore, applyMiddleware } from 'redux'; | |
| import { Router, browserHistory } from 'react-router'; | |
| import reduxThunk from 'redux-thunk'; | |
| import routes from './routes'; | |
| import reducers from './reducers'; | |
| // Import stylesheets like this, if you choose: import './public/stylesheets/base.scss'; | |
| const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); | |
| const store = createStoreWithMiddleware(reducers); | |
| ReactDOM.render( | |
| <Provider store={store}> | |
| <Router history={browserHistory} routes={routes} /> | |
| </Provider>, | |
| document.querySelector('#app')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm install --save react react-cookie react-router react-dom react-redux redux [email protected] redux-thunk | |
| npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 css-loader extract-text-webpack-plugin node-sass sass-loader style-loader webpack webpack-dev-server | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { Route, IndexRoute } from 'react-router'; | |
| import App from './components/App'; | |
| import NotFound from './components/pages/NotFound'; | |
| import Home from './components/Home'; | |
| export default ( | |
| <Route path="/" component={App}> | |
| <IndexRoute component={Home} /> | |
| <Route path="*" component={NotFound} /> | |
| </Route> | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const webpack = require('webpack'); | |
| const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
| const config = { | |
| context: __dirname, | |
| entry: './src/index.js', | |
| output: { | |
| path: __dirname, | |
| filename: 'bundle.js' | |
| }, | |
| module: { | |
| loaders: [{ | |
| exclude: /node_modules/, | |
| test: /\.(js|jsx)$/, | |
| loader: 'babel' | |
| }, | |
| { | |
| test: /\.scss$/, | |
| loader: ExtractTextPlugin.extract('css!sass') | |
| }] | |
| }, | |
| devServer: { | |
| historyApiFallback: true, | |
| contentBase: './' | |
| }, | |
| plugins: [ | |
| new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }), | |
| new webpack.optimize.DedupePlugin(), | |
| new webpack.optimize.OccurenceOrderPlugin(), | |
| new webpack.optimize.UglifyJsPlugin({ | |
| compress: { warnings: false }, | |
| output: {comments: false }, | |
| mangle: false, | |
| sourcemap: false, | |
| minimize: true, | |
| mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] } | |
| }), | |
| new ExtractTextPlugin('src/public/stylesheets/app.css', { | |
| allChunks: true | |
| }) | |
| ] | |
| }; | |
| module.exports = config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment