checkpoint

src/components/App/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Route, Link, Switch } from 'react-router-dom'
 
 class App extends Component {
   render() {
@@ -8,4 +9,31 @@ class App extends Component {
   }
 }
 
+render() {
+  return (
+    <div className="App">
+      <header>
+        <nav>
+        <Link to="/">
+          <h1>Home</h1>
+        </Link>
+        <Link to="/new-contact">
+          <h1>New Contact</h1>
+        </Link>
+      </nav>
+      </header>
+
+      <main>
+      <Route exact path="/"
+          render={(routerProps) => 
+          <Home ContactList={this.state.name} {...routerProps} /> }
+            />
+      <Route path="/new-contact"
+            render={(routerProps) => 
+            <New Contact Name={this.state.name} Email={this.state.email} Profile_Picture={this.state.profile_picture} {...routerProps} /> }
+            />
+      </main>
+        </div>
+          )
+        }
 export default App;

src/components/Contact/Contact.js

@@ -0,0 +1,20 @@
+import React,  { Component } from "react";
+import "./Contact";
+
+let contact = {
+    name: 
+}
+
+class Contact extends Component {
+    render() {
+        return (
+            <div className="contact">
+                <Link to="/contact">
+                    <img src="https://upload.wikimedia.org/wikipedia/en/0/02/Tweety.svg" alt="">
+                    <h3>Name</h3>
+                    <h4>Email</h4>
+                </Link>
+            </div>
+        )
+    }
+}

src/components/ContactList/ContactList.js

@@ -0,0 +1,12 @@
+import React,  { Component } from "react";
+import "./ContactList.test";
+
+class ContactList extends Component {
+    render() {
+        return (
+            <div className="contact-list">
+
+            </div>
+        )
+    }
+}

src/components/NewContact/NewContact.js

@@ -0,0 +1,14 @@
+import React,  { Component } from "react";
+import "./NewContact";
+
+class Contact extends Component {
+    render() {
+        return (
+            <div className="newcontact">
+                <Link to="/newcontact">
+                    <h1>New Contact</h1>
+                </Link>
+            </div>
+        )
+    }
+}

src/contacts.json

@@ -3,6 +3,10 @@
     "name": "Bugs Bunny",
     "email": "bugs@gmail.com",
     "profile_picture": "https://upload.wikimedia.org/wikipedia/en/1/17/Bugs_Bunny.svg"
+  }, {
+    "name": "Tweety",
+    "email": "tweety@gmail.com",
+    "profile_picture": "https://upload.wikimedia.org/wikipedia/en/0/02/Tweety.svg"
   }, {
     "name": "Daffy Duck",
     "email": "daffy@gmail.com",

src/index.js

@@ -1,8 +1,13 @@
 import React from 'react';
+import { BrowserRouter as Router } from "react-router-dom";
 import ReactDOM from 'react-dom';
 import './styles/index.css';
 import App from './components/App/App';
 
 import contacts from "./contacts.json";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+<Router>
+<App />
+</Router>,
+document.getElementById('root'));