Flux - 6 - Refactor to Separate Rendering and Routing

Author: StephenGrider

imgur-client/src/app.jsx

@@ -1,42 +1,4 @@
 var React = require('react');
-var ReactRouter = require('react-router');
-var HashHistory = require('react-router/lib/hashhistory');
-var Router = ReactRouter.Router;
-var Route = ReactRouter.Route;
+var Routes = require('./routes');
 
-var Hello = React.createClass({
-  render: function() {
-    return <h1 className="red">
-      {this.props.children}
-    </h1>
-  }
-});
-
-var Child1 = React.createClass({
-  render: function() {
-    return <h1>
-      I'm child1
-      {this.props.children}
-    </h1>
-  }
-});
-
-var Child2 = React.createClass({
-  render: function() {
-    return <h1>I'm the other child, Child2.</h1>
-  }
-})
-
-var routes = (
-  <Router history={new HashHistory}>
-    <Route path="/" component={Hello}>
-      <Route path="1" component={Child1}>
-        <Route path="2" component={Child2} />
-      </Route>
-      <Route path="2" component={Child2} />
-    </Route>
-  </Router>
-)
-
-// var element = React.createElement(Hello, {});
-React.render(routes, document.querySelector('.container'));
+React.render(Routes, document.querySelector('.container'));

imgur-client/src/components/main.jsx

@@ -0,0 +1,10 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  render: function() {
+    return <div>
+      I'm a header.
+      {this.props.children}
+    </div>
+  }
+});

imgur-client/src/routes.jsx

@@ -0,0 +1,15 @@
+var React = require('react');
+var ReactRouter = require('react-router');
+var HashHistory = require('react-router/lib/hashhistory');
+var Router = ReactRouter.Router;
+var Route = ReactRouter.Route;
+
+var Main = require('./components/main');
+
+module.exports = (
+  <Router history={new HashHistory}>
+    <Route path="/" component={Main}>
+
+    </Route>
+  </Router>
+)