ali-hd/wd03d04_react_lab

Starting a Film Project

Fork and clone the react-film repo.

This project was created with create-react-app. Once you have the app cloned, you should run npm install. You can then run it with npm run start.

Your Mission

Today the plan is to identify the app components, create the overall structure, then split that structure into individual components. You'll pass films as props to each component and ultimately use iteration to render one component for each film. At the end of this exercise, you will have this app:

Tasks

Importantly: After each step below, check your application to see how it looks before going to the next one. It's good practice to be sure your app is working correctly before adding new functionality.

Hint

Don't forget any import statements as you add more files.

Step 1: Create baseline layout

First, create the layout. You'll have a Films column and a Details column.

Make the provided App component render the following code:

<div className="film-library">
  <div className="film-list">
    <h1 className="section-title">FILMS</h1>
  </div>

  <div className="film-details">
    <h1 className="section-title">DETAILS</h1>
  </div>
</div>

Step 2: Create new components

Move the film-list and film-details into their own separate components (in separate files), FilmListing and FilmDetails, respectively.

Make sure you now call these components in App.js. Check your app in the browser. If you've done it right, nothing will have changed, and the application will look the same.

Step 3: Pass props to the new components

Pass the films (stored in TMDB.films) to each of your new components as props.

If you check your file, it still shouldn't look differently. We're sending the props to the components, but we are not using the props yet.

Hint

For now, this step is just changing the App.js file to be sure it imports the film file and passes props.

Step 4: Render a film

In the FilmListing component, render the title of just 1 film as an <h1>, below the section-title.

Does "It" appear on the left side of your browser?

Hint

The films prop is an array, and you just want the title from the first one.

Step 5: Create and render an array of film title elements

Use .map() inside of the FilmListing to iterate over the collection of films and create an element for each one. (Here is the map documentation).

Then, render the variable allFilms underneath the Films <h1>.

You should have a list of all the films appear in the left column.

Hint - Need help on map?

This step will look like this in your render method (above the return): let allFilms = this.props.films.map( (film, index) => ( your-jsx-per-film-here )) Then, you'll just need to call {allFilms} in your JSX where you want the titles to appear.

Step 6: Move the film rows to their own component

Create a new component for each film row, called FilmRow.js. Have your map instead create an array of FilmRows. Don't forget to pass the individual film prop to the component when creating them!

Once you have this working, also pass film.id as a key prop to FilmRow, though you won't use it yet.

Step 7: Flesh out each film row

Make each film row in the film list look like the main finished image, using the following markup (replace "TITLE" and "YEAR" with the actual title and year of the film).

<div className="film-row">
  <img src={posterUrl} alt="" />

  <div className="film-summary">
    <h1>TITLE</h1>
    <p>YEAR</p>
  </div>
</div>

• You'll have to create the posterUrl for each film by combining the prefix https://image.tmdb.org/t/p/w780/ with each film's poster_path property.

• You'll also have to extract the year from the release_date property. To do this, you'll need to figure out how to use the getFullYear() JS method.

Hint on getFullYear()

getFullYear() will be a single line of new code, and you'll use the keywords new and Date.

Step 8: Move film posters to their own component

Since the poster requires you to create the URL first, move those elements to their own component. This could be reusable later. Don't forget to pass the film as a prop to the new FilmPoster component.

PART 1 Complete!