From 2262e7b41bead69a4e3dd6dae4a39ec895802d17 Mon Sep 17 00:00:00 2001 From: Justin Greenberg Date: Sun, 13 Dec 2015 19:48:20 -0500 Subject: [PATCH 1/2] refactor(AboutView): switch to component class --- src/views/AboutView.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/views/AboutView.js b/src/views/AboutView.js index a791ae863..0f5887ca2 100644 --- a/src/views/AboutView.js +++ b/src/views/AboutView.js @@ -1,12 +1,16 @@ import React from 'react' import { Link } from 'react-router' -const AboutView = () => ( -
-

This is the about view!

-
- Back To Home View -
-) +export class AboutView extends React.Component { + render () { + return ( +
+

This is the about view!

+
+ Back To Home View +
+ ) + } +} export default AboutView From 597de8f89e0167db43dc883963343e9ef355ecac Mon Sep 17 00:00:00 2001 From: Justin Greenberg Date: Sun, 13 Dec 2015 19:49:19 -0500 Subject: [PATCH 2/2] refactor(CoreLayout): simple function w/ explanation --- src/layouts/CoreLayout.js | 35 ++++++++++++++++++++------------ tests/layouts/CoreLayout.spec.js | 7 ------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/layouts/CoreLayout.js b/src/layouts/CoreLayout.js index 09b90e5a4..fcecc0f69 100644 --- a/src/layouts/CoreLayout.js +++ b/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 ( -
-
- {this.props.children} -
+// 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 ( +
+
+ {children}
- ) - } +
+ ) +} + +CoreLayout.propTypes = { + children: React.PropTypes.element } + +export default CoreLayout diff --git a/tests/layouts/CoreLayout.spec.js b/tests/layouts/CoreLayout.spec.js index 2b6491081..4b892ad99 100644 --- a/tests/layouts/CoreLayout.spec.js +++ b/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 - }) })