We'll build a simple website that shows title and runtime information about the original Lord of the Rings Trilogy.
Specifically, at the end of this activity, your solution will look like this:
Fork and then clone this repo down to your local machine. Once cloned, cd into the directory for the project and run npm install
.
Inside of ./src
folder create a components
directory. You will create your new components in this directory.
Start by creating a Movie
component and rendering it as a child of the App
component. You will want to render it three times, once for each movie in the list.
From the App
component pass props to the Movie
component using this data.
title | hours | minutes |
---|---|---|
The Fellowship of the Ring | 2 | 58 |
The Two Towers | 2 | 59 |
The Return of the King | 3 | 21 |
Update your Movie
component to display these props.
Components are great because they allow us to compartmentalize code and easily reuse parts we create. We simply set the value of props and the component defines how everything should be displayed.
In this instance, we factored out some redundancy of the movie titles.
- All these movies start with
"Lord of the Rings:"
, so only the unique part is the prop. - Similarly, we don't have to rewrite the format of the runtime information.
Building and reusing components becomes especially powerful the more complex components become.
- Imagine building a component for video search results inside YouTube.
- The props list might include:
- time information
- preview images
- options to add the result to a playlist
- etc...
- The props list might include:
Building one component to rule all them all would save you a lot of time!
In case you want to nerd out, here are handy links to the IMDB page for each movie:
- Lord of the Rings: The Fellowship of the Ring
- Lord of the Rings: The Two Towers
- Lord of the Rings: The Return of the King
edited from global code-along