Refactor views to ES6 and update routes

remarkablemark · remarkablemark · commit 843291caddb1 · 2017-04-16T23:08:37.000-04:00
- Refactor &lt;About&gt; and &lt;Index&gt; to stateless components
- Refactor &lt;Layout&gt; to class component and update click handler
  to alert title
- Refactor `routes/routes.jsx` to ES6
diff --git a/routes/routes.jsx b/routes/routes.jsx
@@ -1,15 +1,20 @@
-var React = require('react');
-var ReactRouter = require('react-router');
-var Router = ReactRouter.Router;
-var Route = ReactRouter.Route;
-var IndexRoute = ReactRouter.IndexRoute;
-var browserHistory = ReactRouter.browserHistory;
+import React from 'react';
+import {
+    Router,
+    Route,
+    IndexRoute,
+    browserHistory
+} from 'react-router';
+
+import Layout from '../views/Layout.jsx';
+import Index from '../views/Index.jsx';
+import About from '../views/About.jsx';
 
 module.exports = (
     <Router history={browserHistory}>
-        <Route path='/' component={require('../views/Layout.jsx')}>
-            <IndexRoute component={require('../views/Index.jsx')} />
-            <Route path='about' component={require('../views/About.jsx')} />
+        <Route path='/' component={Layout}>
+            <IndexRoute component={Index} />
+            <Route path='about' component={About} />
         </Route>
     </Router>
 );
diff --git a/views/About.jsx b/views/About.jsx
@@ -1,12 +1,9 @@
-var React = require('react');
+import React from 'react';
 
-module.exports = React.createClass({
-    displayName: 'About',
-    render: function() {
-        return (
-            <p>
-                Current: <strong>About</strong>
-            </p>
-        );
-    }
-});
+export default function About() {
+    return (
+        <p>
+            Current: <strong>About</strong>
+        </p>
+    );
+}
diff --git a/views/Index.jsx b/views/Index.jsx
@@ -1,12 +1,9 @@
-var React = require('react');
+import React from 'react';
 
-module.exports = React.createClass({
-    displayName: 'Index',
-    render: function() {
-        return (
-            <p>
-                Current: <strong>Index</strong>
-            </p>
-        );
-    }
-});
+export default function Index() {
+    return (
+        <p>
+            Current: <strong>Index</strong>
+        </p>
+    );
+}
diff --git a/views/Layout.jsx b/views/Layout.jsx
@@ -1,13 +1,17 @@
-var React = require('react');
-var Link = require('react-router').Link;
-var connect = require('react-redux').connect;
+import React from 'react';
+import { Link } from 'react-router';
+import { connect } from 'react-redux';
 
-var Layout = React.createClass({
-    _handleClick: function() {
-        alert();
-    },
-    render: function() {
-        var custom = this.props.custom;
+class Layout extends React.Component {
+    constructor() {
+        super();
+        this._handleClick = this._handleClick.bind(this);
+    }
+    _handleClick() {
+        alert(this.props.custom.title);
+    }
+    render() {
+        const { custom } = this.props;
         return (
             <html>
                 <head>
@@ -35,12 +39,12 @@ var Layout = React.createClass({
             </html>
         );
     }
-});
+}
 
-var wrapper = connect(
-    function(state) {
+const wrapper = connect(
+    (state) => {
         return { custom: state };
     }
 );
 
-module.exports = wrapper(Layout);
+export default wrapper(Layout);
