Convert classes to stateless components

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 = (
-      <Router history={this.props.history}>
-        {this.props.routes}
-      </Router>
-    )
+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 (
+    <Router history={history}>
+      {routes}
+    </Router>
+  )
+}
 
-      return (
-        <Provider store={this.props.store}>
-          <div>
-            {content}
-            <DevTools />
-          </div>
-        </Provider>
-      )
-    } else {
-      return (
-        <Provider store={this.props.store}>
-          {content}
-        </Provider>
-      )
-    }
+const Root = ({ history, routes, store }) => {
+  if (__DEBUG__ && !__DEBUG_NW__) {
+    const DevTools = require('./DevTools').default
+    return (
+      <Provider store={store}>
+        <div>
+          <RootContent history={history} routes={routes} />
+          <DevTools />
+        </div>
+      </Provider>
+    )
   }
+
+  return (
+    <Provider store={store}>
+      <RootContent history={history} routes={routes} />
+    </Provider>
+  )
 }
+
+Root.propTypes = PropTypes
+
+export default Root

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 (
-      <div className='page-container'>
-        <div className='view-container'>
-          {this.props.children}
-        </div>
+const CoreLayout = ({ children }) => {
+  return (
+    <div className='page-container'>
+      <div className='view-container'>
+        {children}
       </div>
-    )
-  }
+    </div>
+  )
 }
+
+CoreLayout.propTypes = PropTypes
+
+export default CoreLayout

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 (
-      <div className='container text-center'>
-        <h1>Welcome to the React Redux Starter Kit</h1>
-        <h2>
-          Sample Counter:&nbsp;
-          <span className={styles['counter--green']}>{this.props.counter}</span>
-        </h2>
-        <button className='btn btn-default'
-                onClick={this.props.increment}>
-          Increment
-        </button>
-        <hr />
-        <Link to='/about'>Go To About View</Link>
-      </div>
-    )
-  }
+const HomeView = ({ counter, increment }) => {
+  return (
+    <div className='container text-center'>
+      <h1>Welcome to the React Redux Starter Kit</h1>
+      <h2>
+        Sample Counter:&nbsp;
+        <span className={styles['counter--green']}>{counter}</span>
+      </h2>
+      <button className='btn btn-default'
+              onClick={increment}>
+        Increment
+      </button>
+      <hr />
+      <Link to='/about'>Go To About View</Link>
+    </div>
+  )
 }
 
+HomeView.propTypes = PropTypes
+
 export default connect(mapStateToProps, counterActions)(HomeView)