diff --git a/Gemfile b/Gemfile
index d16c772c5..361712648 100644
--- a/Gemfile
+++ b/Gemfile
@@ -35,4 +35,4 @@ else
gem "turbolinks", "~> 5.0.0.beta"
end
gem "uglifier", ">= 2.7.2"
-gem "web-console", "~> 2.0"
+gem "web-console", "~> 2.0", group: :development
diff --git a/docs/additional_reading/react_router.md b/docs/additional_reading/react_router.md
index fa77ad79f..0a4879421 100644
--- a/docs/additional_reading/react_router.md
+++ b/docs/additional_reading/react_router.md
@@ -30,7 +30,7 @@ const RouterApp = (props, location) => {
// Important that you don't do this if you are redirecting or have an error.
return (
-
+
);
};
diff --git a/spec/dummy/client/app/components/HelloWorldContainer.jsx b/spec/dummy/client/app/components/HelloWorldContainer.jsx
index e0f01cd0d..6c5ec0c05 100644
--- a/spec/dummy/client/app/components/HelloWorldContainer.jsx
+++ b/spec/dummy/client/app/components/HelloWorldContainer.jsx
@@ -6,30 +6,22 @@ import HelloWorldRedux from './HelloWorldRedux';
import * as helloWorldActions from '../actions/HelloWorldActions';
-function select(state) {
- // Which part of the Redux global state does our component want to receive as props?
- return { data: state.helloWorldData };
-}
-
-class HelloWorldContainer extends React.Component {
- static propTypes = {
- dispatch: PropTypes.func.isRequired,
- data: PropTypes.object.isRequired,
- };
+const HelloWorldContainer = ({ actions, data }) => (
+
+);
- constructor(props, context) {
- super(props, context);
- }
+HelloWorldContainer.propTypes = {
+ actions: PropTypes.object.isRequired,
+ data: PropTypes.object.isRequired,
+};
- render() {
- const { dispatch, data } = this.props;
- const actions = bindActionCreators(helloWorldActions, dispatch);
+function mapStateToProps(state) {
+ return { data: state.helloWorldData };
+}
- return (
-
- );
- }
+function mapDispatchToProps(dispatch) {
+ return { actions: bindActionCreators(helloWorldActions, dispatch) };
}
// Don't forget to actually use connect!
-export default connect(select)(HelloWorldContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(HelloWorldContainer);
diff --git a/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx b/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx
index d2ac3aa74..16a4ea367 100644
--- a/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx
+++ b/spec/dummy/client/app/components/HelloWorldWithLogAndThrow.jsx
@@ -1,6 +1,7 @@
import React from 'react';
// Example of logging and throw error handling
+
class HelloWorldWithLogAndThrow extends React.Component {
constructor(props, context) {
super(props, context);
diff --git a/spec/dummy/client/app/components/RouterFirstPage.jsx b/spec/dummy/client/app/components/RouterFirstPage.jsx
index 8e44e0af2..961317ed0 100644
--- a/spec/dummy/client/app/components/RouterFirstPage.jsx
+++ b/spec/dummy/client/app/components/RouterFirstPage.jsx
@@ -1,16 +1,12 @@
import React from 'react';
-export default class RouterFirstPage extends React.Component {
+const RouterFirstPage = () => (
+
+
React Router First Page
+
+ This page brought to you by React Router
+
+
+);
- render() {
- return (
-
-
React Router First Page
-
- This page brought to you by React Router
-
-
- );
- }
-
-}
+export default RouterFirstPage;
diff --git a/spec/dummy/client/app/components/RouterLayout.jsx b/spec/dummy/client/app/components/RouterLayout.jsx
index e82c009ed..98435ecd8 100644
--- a/spec/dummy/client/app/components/RouterLayout.jsx
+++ b/spec/dummy/client/app/components/RouterLayout.jsx
@@ -1,39 +1,36 @@
import React from 'react';
import { Link } from 'react-router';
-export default class RouterLayout extends React.Component {
- static propTypes = {
- children: React.PropTypes.object,
- };
+const RouterLayout = ({ children }) => (
+
+
React Router is working!
+
+ Woohoo, we can use react-router
here!
+
+
+ -
+
+ React Router Layout Only
+
+
+ -
+
+ Router First Page
+
+
+ -
+
+ Router Second Page
+
+
+
+
+ {children}
+
+);
- render() {
- return (
-
-
React Router is working!
-
- Woohoo, we can use react-router
here!
-
-
- -
-
- React Router Layout Only
-
-
- -
-
- Router First Page
-
-
- -
-
- Router Second Page
-
-
-
-
- {this.props.children}
-
- );
- }
+RouterLayout.propTypes = {
+ children: React.PropTypes.object,
+};
-}
+export default RouterLayout;
diff --git a/spec/dummy/client/app/components/RouterSecondPage.jsx b/spec/dummy/client/app/components/RouterSecondPage.jsx
index 2f722aeff..0ee3ab8d8 100644
--- a/spec/dummy/client/app/components/RouterSecondPage.jsx
+++ b/spec/dummy/client/app/components/RouterSecondPage.jsx
@@ -1,16 +1,12 @@
import React from 'react';
-export default class RouterSecondPage extends React.Component {
+const RouterSecondPage = () => (
+
+
React Router Second Page
+
+ This page brought to you by React Router
+
+
+);
- render() {
- return (
-
-
React Router Second Page
-
- This page brought to you by React Router
-
-
- );
- }
-
-}
+export default RouterSecondPage;
diff --git a/spec/dummy/client/app/startup/ClientReduxApp.jsx b/spec/dummy/client/app/startup/ClientReduxApp.jsx
index dada00df5..8a3a939c5 100644
--- a/spec/dummy/client/app/startup/ClientReduxApp.jsx
+++ b/spec/dummy/client/app/startup/ClientReduxApp.jsx
@@ -2,9 +2,7 @@
// Compare this to the ./ServerApp.jsx file which is used for server side rendering.
import React from 'react';
-import { combineReducers } from 'redux';
-import { applyMiddleware } from 'redux';
-import { createStore } from 'redux';
+import { combineReducers, applyMiddleware, createStore } from 'redux';
import { Provider } from 'react-redux';
import middleware from 'redux-thunk';
diff --git a/spec/dummy/client/app/startup/ClientRouterApp.jsx b/spec/dummy/client/app/startup/ClientRouterApp.jsx
index 3bf12a20d..c7df78f4b 100644
--- a/spec/dummy/client/app/startup/ClientRouterApp.jsx
+++ b/spec/dummy/client/app/startup/ClientRouterApp.jsx
@@ -1,12 +1,7 @@
import React from 'react';
-import Router from 'react-router';
-import createHistory from 'history/lib/createBrowserHistory';
+import Router, { browserHistory } from 'react-router';
import routes from '../routes/routes';
-export default (props) => {
- const history = createHistory();
-
- return (
-
- );
-};
+export default (props) => (
+
+);
diff --git a/spec/dummy/client/app/startup/ServerReduxApp.jsx b/spec/dummy/client/app/startup/ServerReduxApp.jsx
index 9576c90bc..8914f38e5 100644
--- a/spec/dummy/client/app/startup/ServerReduxApp.jsx
+++ b/spec/dummy/client/app/startup/ServerReduxApp.jsx
@@ -4,9 +4,7 @@
// render.
import React from 'react';
-import { combineReducers } from 'redux';
-import { applyMiddleware } from 'redux';
-import { createStore } from 'redux';
+import { combineReducers, applyMiddleware, createStore } from 'redux';
import { Provider } from 'react-redux';
import middleware from 'redux-thunk';
diff --git a/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx b/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx
index 8793042dd..7dc2c382b 100644
--- a/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx
+++ b/spec/dummy/client/app/startup/ServerReduxSharedStoreApp.jsx
@@ -12,7 +12,6 @@ import { Provider } from 'react-redux';
* React will see that the state is the same and not do anything.
*/
export default () => {
-
// This is where we get the existing store.
const store = ReactOnRails.getStore('SharedReduxStore');
diff --git a/spec/dummy/client/app/startup/ServerRouterApp.jsx b/spec/dummy/client/app/startup/ServerRouterApp.jsx
index 0056d0086..751420f89 100644
--- a/spec/dummy/client/app/startup/ServerRouterApp.jsx
+++ b/spec/dummy/client/app/startup/ServerRouterApp.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { match, RoutingContext } from 'react-router';
+import { match, RouterContext } from 'react-router';
import routes from '../routes/routes';
@@ -24,6 +24,6 @@ export default (props, location) => {
// Important that you don't do this if you are redirecting or have an error.
return (
-
+
);
};
diff --git a/spec/dummy/client/app/startup/serverRegistration.jsx b/spec/dummy/client/app/startup/serverRegistration.jsx
index 42e8ea366..d8e35ed71 100644
--- a/spec/dummy/client/app/startup/serverRegistration.jsx
+++ b/spec/dummy/client/app/startup/serverRegistration.jsx
@@ -23,7 +23,7 @@ import RouterApp from './ServerRouterApp';
import PureComponent from '../components/PureComponent';
-import SharedReduxStore from '../stores/SharedReduxStore'
+import SharedReduxStore from '../stores/SharedReduxStore';
ReactOnRails.register({
HelloWorld,
@@ -38,6 +38,5 @@ ReactOnRails.register({
});
ReactOnRails.registerStore({
- SharedReduxStore
+ SharedReduxStore,
});
-
diff --git a/spec/dummy/client/app/stores/SharedReduxStore.jsx b/spec/dummy/client/app/stores/SharedReduxStore.jsx
index adbfecd71..3c9681d67 100644
--- a/spec/dummy/client/app/stores/SharedReduxStore.jsx
+++ b/spec/dummy/client/app/stores/SharedReduxStore.jsx
@@ -1,6 +1,4 @@
-import { combineReducers } from 'redux';
-import { applyMiddleware } from 'redux';
-import { createStore } from 'redux';
+import { combineReducers, applyMiddleware, createStore } from 'redux';
import middleware from 'redux-thunk';
import reducers from '../reducers/reducersIndex';