Be sure to run npm install
before beginning to work on the checkpoint.
You're going to build a simple contact list manager using React and React Router. An initial set of contacts has been provided in contacts.json
and some CSS has been provided in src/styles/index.css
.
See a demo of the final app at http://quickest-beam.surge.sh/
Add Tweety as a contact:
{
name: "Tweety",
email: "[email protected]",
profile_picture: "https://upload.wikimedia.org/wikipedia/en/0/02/Tweety.svg"
}
Inside index.js
, import React Router and pass it to ReactDOM.render()
as the root component with <App>
as a child component. We've imported the starter contacts for you, pass these in to your <App>
component as a prop, contacts
.
Your <App>
component should accept contacts
as a prop and use them to set the initial state for your component. It should render a div with a class name of 'App'
, your <Header>
component and then either your <ContactList>
or <NewContact>
component, depending on the route.
If the route is "/"
then render the <ContactList>
component; if the route is "/new-contact"
then render the <NewContact>
component;
Your <Header>
component should render a <header>
element with an <h1>
and a <nav>
containing two React Router links, one to the homepage ("/"
) and the other to create a new contact ("/new-contact"
).
Your <ContactList>
component should render as the homepage of your app. It should render a <div>
with a class of contact-list
. It should take contacts
as a prop and render a <Contact>
component for each contact object inside of the contacts
prop.
Your <Contact>
component will render a single contact. It should contain an outer <div>
with a class of contact
and include an <img>
for the profile picture, <h3>
for the name, and <h4>
for the email address.
Your <NewContact>
component should render an <h1>
with a text of New Contact
and a form with inputs for the name
, email
and profile_picture
.
When submitted, you should save the new contact by updating your state inside of <App>
and direct the user back to the homepage/list of contacts.