/react-container-components-lab-v-000

Primary LanguageJavaScriptOtherNOASSERTION

React Container Components

Overview

In this lab, we will practice building container components. By the end of the lab you will have:

  1. Practiced Building Container Components.
  2. Gained concrete experience combining presentational and container components to separate the data and presentation layers.

Oh, To Be a Critic!

Thumbs Down

Movie critics can be harsh, but it's a blast to read what they write. For this lab, imagine that you've been hired to work on a web application devoted to movie reviews. The app will draw its review content from the New York Times, which has provided a public, queryable API for their content.

For your part, you've been asked to produce two container components that will wrap a single presentation component, <MovieReviews>, which lists a series of movie reviews on the page.

The two container components you've been asked to create will use this single presentational component in different ways. The first, <LatestMovieReviewsContainer>, will fetch a list of the most recent reviews and display them. The second, <SearchableMovieReviewsContainer>, will provide a searchable interface allowing the user to enter a search term and then receive a list of reviews that match the search term(s).

You can tackle these components in whatever order you wish, but it might make sense to start with the more static (and thus simpler) <LatestMovieReviewsContainer>. As with other labs, you can use the tests as a specification for the components, but here are the main points that you should follow as you work:

Note: Your tests will not run properly until you have at least built out the basics of each component and export/import them properly.

<MovieReviews>

  • Your MovieReviews component should be stateless and functional.

  • You are free to lay out each review as you like using the data that the API returns, but make sure that the component outputs a top-level element with the class review-list and that each review is wrapped by an element with class review.

<LatestMovieReviewsContainer> and <SearchableMovieReviewsContainer>

  • Both container components should be class components that maintain state.

  • The LatestMovieReviewsContainer should have a top-level wrapping element with class latest-movie-reviews.

  • Optional: The SearchableMovieReviewsContainer should have a top-level wrapping element with class searchable-movie-reviews.

The New York Times API

In order to fetch data from the New York Times API, you'll need to make calls to the following URLs:

  • For the latest movie reviews: https://api.nytimes.com/svc/movies/v2/reviews/all.json
  • To query the search API: https://api.nytimes.com/svc/movies/v2/reviews/search.json?query=<search-term>

If the api key in the starter code does not work in getting you the data you need, you can request an API key from here. Once you have the key, you can "sign" your requests by attaching the key to the URL like so:

https://api.nytimes.com/svc/movies/v2/reviews/all.json?api-key=<your-api-key>

https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=<your-api-key>&query=<search-term>

For further information about the New York Times Movie Reviews API — including a sandbox where you can view the data that the API returns — please consult their documentation.

Resources

View Container Components Lab on Learn.co and start learning to code for free.