React Router & APIs

For today's lab, you'll be building out a small website for the National Parts. The lab will be broken down into two parts:

1. Build a React app that uses react-router
2. Communicate with 3rd-party APIs

Prerequisites

• React
• Components and life cycle methods
• Props and state
• React Router

Requirements

You will be building out a website listing all of the National Parks.

The layout of the page with be the following:

Part I: React Router

Read more on part-i.md details

Start by building out the app using React, React Router, and the static data provided in parks.json. Get the site working with this static data, then integrate with the National Parks API and make it look like the mock. For now, just pass the data around and create an MVP version with minimal styling so you know it's working.

Your root level component (App) should hold all the data for the application and pass it down to the different pages, as necessary.

Part II: Adding APIs

Read more on part-ii.md details

Once you have it working with the static data, get it working with the National Parks API.

You should only need to add an Fetch request that sets the API response data to state.

Part III Make it look like the mock

Now that all your data and pages are in place, make your site look like the provided mock.

Resources

• React Router Lesson Plan
• <Route render={ ... } /> vs <Route component={ ... } />

Plagiarism

Take a moment to refamiliarize yourself with the Plagiarism policy. Plagiarized work will not be accepted.

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].