1
0
Fork 0

Basic Navbar

This commit is contained in:
Amarpreet Minhas 2019-06-22 16:53:59 -04:00
parent 48191f8bce
commit fbbec03557
4 changed files with 43 additions and 11 deletions

11
src/components/About.js Normal file
View file

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

View file

@ -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 = () => {
return (
<div className="ui container">
<PostList />
</div>
);
};
function App() {
return (
<Router>
<NavBar/>
<Switch>
<Route exact path="/" component={PostList}/>
<Route path="/posts" component={PostList}/>
</Switch>
</Router>
);
}
export default App;

18
src/components/NavBar.js Normal file
View file

@ -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;

View file

@ -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>