layout router, sagas, reducers, html structure

src/components/About.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Container } from "semantic-ui-react";
+
+const About = () => (
+  <Container>
+    <h2>About</h2>
+    <p>About page static content goes here.</p>
+  </Container>
+);
+
+export default About;

src/components/App.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import { Route, Switch } from "react-router-dom";
+
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import Home from "./Home";
+import About from "./About";
+import Topics from "./Topics";
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+        <Navbar />
+        <div style={{ display: "flex", minHeight: "calc(100vh - 1px)", flexDirection: "column" }}>
+          <div style={{ flex: "1" }}>
+            <Switch>
+              <Route exact path="/" component={Home} />
+              <Route path="/about" component={About} />
+              <Route path="/topics" component={Topics} />
+            </Switch>
+          </div>
+          <Footer />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/App.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});

src/components/Footer.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { List, Segment } from "semantic-ui-react";
+
+const Footer = () => (
+  <Segment textAlign="center" color="red" style={{ margin: "0" }}>
+    <List bulleted horizontal link>
+    <List.Item as={Link} to="/">Caremyway</List.Item>
+    <List.Item as={Link} to="/about">About</List.Item>
+    </List>
+  </Segment>
+);
+
+export default Footer;

src/components/Home.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Container } from "semantic-ui-react";
+
+const Home = () => (
+  <Container>
+    <h2>Home</h2>
+    <p>Home page static content goes here.</p>
+  </Container>
+);
+
+export default Home;

src/components/Navbar.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Menu } from "semantic-ui-react";
+
+class Navbar extends Component {
+  render() {
+    return (
+      <Menu>
+        <Menu.Item as={Link} to="/">
+          Caremyway
+        </Menu.Item>
+        <Menu.Item as={Link} to="/about">
+          About
+        </Menu.Item>
+        <Menu.Item as={Link} to="/topics">
+          Topics
+        </Menu.Item>
+      </Menu>
+    );
+  }
+}
+
+export default Navbar;

src/components/Topics.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Route, Link } from "react-router-dom";
+import { Container } from "semantic-ui-react";
+
+const Topics = ({ match }) => (
+  <Container>
+    <h2>Topics</h2>
+    <ul>
+      <li>
+        <Link to={`${match.url}/rendering`}>
+          Rendering with React
+        </Link>
+      </li>
+      <li>
+        <Link to={`${match.url}/components`}>
+          Components
+        </Link>
+      </li>
+      <li>
+        <Link to={`${match.url}/props-v-state`}>
+          Props v. State
+        </Link>
+      </li>
+    </ul>
+
+    <Route path={`${match.url}/:topicId`} component={Topic} />
+    <Route
+      exact
+      path={match.url}
+      render={() => <h3>Please select a topic.</h3>}
+    />
+  </Container>
+);
+
+const Topic = ({ match }) => (
+  <div>
+    <h3>{match.params.topicId}</h3>
+  </div>
+);
+
+export default Topics;