Pure component notes

src/layouts/CoreLayout.js

@@ -1,18 +1,27 @@
 import React from 'react'
 import 'styles/core.scss'
 
-export default class CoreLayout extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.element
-  }
-
-  render () {
-    return (
-      <div className='page-container'>
-        <div className='view-container'>
-          {this.props.children}
-        </div>
+// Note: Stateless/function components *will not* hot reload!
+// react-transform *only* works on component classes.
+//
+// Since layouts rarely change, they are a good place to
+// leverage React's new Statelesss Functions:
+// https://facebook.github.io/react/docs/reusable-components.html#stateless-functions
+//
+// CoreLayout is a pure function of it's props, so we can
+// define it with a plain javascript function...
+function CoreLayout ({ children }) {
+  return (
+    <div className='page-container'>
+      <div className='view-container'>
+        {children}
       </div>
-    )
-  }
+    </div>
+  )
+}
+
+CoreLayout.propTypes = {
+  children: React.PropTypes.element
 }
+
+export default CoreLayout

src/views/AboutView.js

@@ -1,12 +1,16 @@
 import React from 'react'
 import { Link } from 'react-router'
 
-const AboutView = () => (
-  <div className='container text-center'>
-    <h1>This is the about view!</h1>
-    <hr />
-    <Link to='/'>Back To Home View</Link>
-  </div>
-)
+export class AboutView extends React.Component {
+  render () {
+    return (
+      <div className='container text-center'>
+        <h1>This is the about view!</h1>
+        <hr />
+        <Link to='/'>Back To Home View</Link>
+      </div>
+    )
+  }
+}
 
 export default AboutView

tests/layouts/CoreLayout.spec.js

@@ -34,11 +34,4 @@ describe('(Layout) Core', function () {
     expect(_component.type).to.equal('div')
   })
 
-  it('Should render a child component.', function () {
-    const child = TestUtils.findRenderedDOMComponentWithClass(
-      _rendered, 'child'
-    )
-
-    expect(child).to.exist
-  })
 })