Basic Navbar

src/components/About.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const About () => {
+    return (
+        <div className="container">
+          <h4 className="center">About</h4>
+        </div>
+    )
+}
+
+export default About;

src/components/App.js

@@ -1,13 +1,18 @@
 import React from 'react';
-
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import NavBar from './NavBar';
 import PostList from './PostList';
 
-const App = () => {
+function App() {
   return (
-    <div className="ui container">
-        <PostList />
-    </div>
+    <Router>
+      <NavBar/>
+      <Switch>
+        <Route exact path="/" component={PostList}/>
+        <Route path="/posts" component={PostList}/>
+      </Switch>
+    </Router>
   );
-};
+}
 
 export default App;

src/components/NavBar.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+
+import PostList from './PostList';
+
+class NavBar extends Component {
+  render() {
+    return (
+	 <div className="ui three item menu">
+	   <Link to="/" className="active item">Home</Link>
+	   <Link to="/users/" className="item">Users</Link>
+	   <Link to="/posts/" className="item">Posts</Link>
+	 </div>
+    );
+  }
+}
+
+export default NavBar;

src/components/PostList.js

@@ -7,15 +7,13 @@ class PostList extends React.Component {
     componentDidMount() {
         this.props.fetchPosts();
     }
-
-
     renderList() {
         return this.props.posts.map(post => {
             return (
                 <div className="item" key={post.id}>
                     <div className="content">
                         <div className="description">
-                            <h1>{post.title}</h1>
+                            <h1><b><u>{post.title}</u></b></h1>
                             <ReactMarkdown source={post.content} />
                         </div>
                     </div>