Danny Gleason

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.12.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.0.17"

src/components/App/App.js

@@ -1,11 +1,29 @@
 import React, { Component } from 'react';
+import Header from "../Header/Header"
+import NewContact from "../NewContact/NewContact"
+import ContactList from "../ContactList/ContactList"
+import { Route } from "react-router-dom";
 
 class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      contacts: props.contacts
+    }
+  }
   render() {
-    return <div className="App">
-        <p>app</p>
-      </div>;
+    return (
+      <div className="App">
+        <Header/>
+         <nav>
+            <Route path="/"  render={() => <NewContact/>}/>
+            <Route path="/new-contact" render={() => <ContactList contacts={this.state.contacts}/>}/>  
+          </nav>
+      </div>
+
+      )
   }
 }
 
-export default App;
+export default App;

src/components/Contact/Contact.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+function Contact(props){
+    return(
+        <div className="contact">
+            <img src={props.image}/>
+            <h3>{props.name}</h3>
+            <h4>{props.email}</h4>
+        </div>
+
+
+    )
+}
+
+export default Contact;

src/components/ContactList/ContactList.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Contact from "../Contact/Contact";
+
+function ContactList(props){
+    return(
+        <div className="contact-list">
+        {props.contacts.map(item => <div><Contact name={item.name} email={item.email} image={item.profile_picture}/></div>)}
+        </div>
+
+    )
+}
+
+export default ContactList;

src/components/Header/Header.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function Header(){
+    return(
+        <header>
+            <h1>
+             <nav>
+                <Link to="/" className="link">Home</Link>
+                <Link to="/new-contact" className="link">Contacts</Link>
+             </nav>
+            </h1>
+        </header>
+
+
+    )
+}
+
+export default Header;

src/components/NewContact/NewContact.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function NewContact(){
+    return(
+       <div>
+        <h1>New Contact</h1>
+     <form>
+        <label>Name:<input type="text" name="name" /></label>
+        <label>Email:<input type="text" name="email" /></label>
+        <label>Profile Picture:<input type="text" name="profile" /></label>
+        <input type="submit" value="Submit" />
+    </form>
+    </div>
+    )
+}
+
+export default NewContact;

src/index.js

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