Giter VIP home page Giter VIP logo

react-components-as-routes-lab's Introduction

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:

Let's work through this one component at a time

Components

Our src folder contains the following:

src/
├── data.js
├── index.js
|-- containers/
|   |-- App.js
└── components/
    ├── Actors.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 completed for us. It loads App as the top level component.

data.js

This file contains seed data for Actors, Movies & Directors

Component Info

App

This component already contains a Router wrapper where we'll include our particular routes. Inside this element, we'll need to render our Navbar and 4 React Router Route components with paths to /, /movies, /directors & /actors and rendering the respective components. When a user visits the root URL, they should see the Home component.

Note: Since a Router wrapper can only wrap one child element, use a div to wrap the Navbar and Routes. This allows us to apply a CSS class at the App component level.

Navbar

This component needs to render 4 <NavLink> components. They will be for /, /movies, /directors, /actors <-- in this order(test checks for this).

Home

This component should render the text Home Page in an <h1>.

Movies

This component should render the text Movies Page in an <h1>, and make a new <div> for each movie. The <div> should contain the movie's title, time and a <ul> with a list of its genres.

Directors

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

Actors

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

Note: The tests will count how many <div>s are nested inside your Movies, Directors, and Actors components. So to get tests to pass, you must create exactly one <div> for each movie, director, or actor, and no additional nested <div>s in those components.

Resources

react-components-as-routes-lab's People

Contributors

achasveachas avatar aturkewi avatar crwhitesides avatar dependabot[bot] avatar ihollander avatar jeffkatzy avatar jjseymour avatar lizbur10 avatar lukeghenco avatar maxwellbenton avatar rrcobb avatar thuyanduong-flatiron avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-components-as-routes-lab's Issues

Test pass but get weird error while running learn

@aturkewi @Lukeghenco

So i finished the lab while using npm test everything passed. Nothing really seemed out of the ordinary.

screen shot 2017-01-13 at 8 59 39 am

however oddly enough when i was going to run learn so it updates on the site i get.

screen shot 2017-01-13 at 9 00 32 am

I had ran gem update learn-co and gem update --system but everything is already updated. learn works on all the previous labs up to this one which makes me think it's something different with this lab compared to the other labs. I can't put my finger on it.

github repo: https://github.com/Enoch2k2/react-components-as-routes-lab-learn-experts-testing-batch

NavBar

NavBar component will give you many errors if you do exactly what the images in the provided links show you to do.
Do not create the NavBar as shown in this link that they provide.
Instead leave out the

    and
  • inside the NavBar component and you will be fine.
    I created this just as the image show and I was given many errors.

    Just use this:

    Home Movies Directors Actors

ReadMe Error

"Our index.js file is partially completed for us. It loads in the BrowserRouter as Router from React Router."

BrowserRouter as Router is loaded in App.js.

README index.js text

README says "Index.js - Our index.js file is partially completed for us. It loads in the BrowserRouter as Router from React Router."
Perhaps it used to, but it doesn't now. Appears to have been moved to App.js.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.