diff --git a/src/containers/Root.js b/src/containers/Root.js index 0e4798d28..1f201f563 100644 --- a/src/containers/Root.js +++ b/src/containers/Root.js @@ -2,37 +2,40 @@ import React from 'react' import { Provider } from 'react-redux' import { Router } from 'react-router' -export default class Root extends React.Component { - static propTypes = { - history: React.PropTypes.object.isRequired, - routes: React.PropTypes.element.isRequired, - store: React.PropTypes.object.isRequired - } - - render () { - const content = ( - - {this.props.routes} - - ) +const PropTypes = { + history: React.PropTypes.object.isRequired, + routes: React.PropTypes.array.isRequired, + store: React.PropTypes.object.isRequired +} - if (__DEBUG__ && !__DEBUG_NW__) { - const DevTools = require('containers/DevTools').default +const RootContent = ({ history, routes }) => { + return ( + + {routes} + + ) +} - return ( - -
- {content} - -
-
- ) - } else { - return ( - - {content} - - ) - } +const Root = ({ history, routes, store }) => { + if (__DEBUG__ && !__DEBUG_NW__) { + const DevTools = require('./DevTools').default + return ( + +
+ + +
+
+ ) } + + return ( + + + + ) } + +Root.propTypes = PropTypes + +export default Root diff --git a/src/layouts/CoreLayout.js b/src/layouts/CoreLayout.js index 09b90e5a4..5462006e9 100644 --- a/src/layouts/CoreLayout.js +++ b/src/layouts/CoreLayout.js @@ -1,18 +1,20 @@ import React from 'react' import 'styles/core.scss' -export default class CoreLayout extends React.Component { - static propTypes = { - children: React.PropTypes.element - } +const PropTypes = { + children: React.PropTypes.element +} - render () { - return ( -
-
- {this.props.children} -
+const CoreLayout = ({ children }) => { + return ( +
+
+ {children}
- ) - } +
+ ) } + +CoreLayout.propTypes = PropTypes + +export default CoreLayout diff --git a/src/views/HomeView.js b/src/views/HomeView.js index 0e7a0e2a7..e44e1414a 100644 --- a/src/views/HomeView.js +++ b/src/views/HomeView.js @@ -4,6 +4,11 @@ import { Link } from 'react-router' import { actions as counterActions } from '../redux/modules/counter' import styles from './HomeView.scss' +const PropTypes = { + increment: React.PropTypes.func, + counter: React.PropTypes.number +} + // We define mapStateToProps where we'd normally use // the @connect decorator so the data requirements are clear upfront, but then // export the decorated component after the main class definition so @@ -12,29 +17,25 @@ import styles from './HomeView.scss' const mapStateToProps = (state) => ({ counter: state.counter }) -export class HomeView extends React.Component { - static propTypes = { - increment: React.PropTypes.func, - counter: React.PropTypes.number - } - render () { - return ( -
-

Welcome to the React Redux Starter Kit

-

- Sample Counter:  - {this.props.counter} -

- -
- Go To About View -
- ) - } +const HomeView = ({ counter, increment }) => { + return ( +
+

Welcome to the React Redux Starter Kit

+

+ Sample Counter:  + {counter} +

+ +
+ Go To About View +
+ ) } +HomeView.propTypes = PropTypes + export default connect(mapStateToProps, counterActions)(HomeView)