aml7733 / react-components-as-routes-lab-v-000

React Components as Routes Lab

Overview

In this lab, you will create a simple Client-Side routing application with React Router.

Objectives

• Practice building an application with React Router
• Access routes using a Navbar with matched routes
• Visit different "views" in the application by accessing different routes

React Router App

In this lab we are going to build out an application that has routes for a Home Page, Actors Page, Movies Page and Directors Page. Our goal is to provide routes and links for these 4 pages.

This is what our app should look like when we are done with this lab:

• Home Page
• Movies Page
• Directors Page
• Actors Page

Lets work through this one component at a time

Components

Our src folder contains the following:

src/
├── data.js
├── index.js
├── routes.js
└── components/
    ├── Actors.js
    ├── App.js
    ├── Directors.js
    ├── Home.js
    ├── Movies.js
    └── NavBar.js

All of the file and module imports are done for you, so you just need to focus on the JSX for these components.

Index.js

Our Index.js file is partially completed for us. It loads in the Router and browserHistory from React Router. You will need to move the route, inside the react-dom render method, to the ./routes.js file. Then you need pass the routes as props to the Router (i.e. <Router history={browserHistory} routes={routes}>).

data.js

This file contains seed data for Actors, Movies, and Directors

<App />

This component should render our <NavBar /> and display the content of our individual route components below. When a user visits the root url, he should see the App component.

<NavBar />

This component needs to render an <ul /> with links for /, /movies, /directors, /actors <-- in this order(test checks for this).

<Home />

This component should render the text Home Page.

<Movies />

This component should render the text Movies Page, and make a new <div /> for each movie. The <div /> should contain the movie's title, time and an <ul /> for each genre.

<Directors />

This component should render the text Directors Page, and make a new <div /> for each director. The <div /> should contain the director's name and an <ul /> for each of their movies.

<Actors />

This component should render the text Actors Page, and make a new <div /> for each actor. The <div /> should contain the actor's name and an <ul /> for each of their movies.

Resources

React Router React Router Tutorial