Let's build something small to reinforce what you've learned so far. We're going to practice creating components and passing information into them through props. We'll be building a simple website that displays titles, movie posters, and runtime for the original Lord of the Rings Trilogy.
- Pass data through React props into child components
- Create a reusable component to display data from props
You'll be building a website in this lab with a header and 3 movies. Here is an example site:
Fork
andclone
this repository andcd
into the new directory.- You've been given starter code. Run
npm install
to install dependencies. - You'll be working in the
src
directory of this app.
A components
directory is typically where you'll add components in a React project to organize your files. Go ahead and make one now inside the src
directory...
Inside of the components
folder, create a new React Component file called Movie.js
.
We'll write our Movie
component as a functional component:
const Movie = () => {
return (
<div>
</div>
)
}
export default Movie
Add some JSX inside the return so this component will be visible in our application.
Let's keep the JSX simple for now, and we'll make it more complex once we're sure it works. Remember, our goal is to display the movie poster, title, and runtime information.
- Let's add one
<h1>
for the movie title, one<img>
for the poster, and a<p>
for the runtime. - In the
<h1>
and<p>
tags add this text to start:
<h1>Lord of the Rings: </h1>
<p>Runtime: </p>
Open src/App.js
and add the <Movie />
inside of <main>
.
Now open the app in your browser with npm start
if you haven't already to see if it is rendering.
Uh oh. There's an error.
Failed to compile
./src/App.js
Line 11: 'Movie' is not defined react/jsx-no-undef
'Movie'
is not defined? Ah.
One does not simply refer to components in React. In our src/App.js
, we're saying "Display what's returned from the Movie
component." However - we haven't told src/Apps.js
where to find the Movie
component!
- Add an import statement at the top of the
src/App.js
file. - You can use VS Code's IntelliSense to see if your path is correct as you type your import statement string.
import Movie from './components/Movie'
Now you should see the page without the error message, and it should have the JSX from the Movie component.
We need to make the Movie component accept information so we can use it to display different titles and runtimes.
- In the
src/App.js
file, addtitle
,hours
,minutes
, andposter
props to the<Movie />
tag. - Remember, when adding props to a component, we need to first give the prop a name, then pass data into it. Example:
<Component propName={propData} />
Here is some starter data for you to add in for your <Movie />
props.
title | hours | minutes | poster |
---|---|---|---|
The Fellowship of the Ring | 2 | 58 | https://image.tmdb.org/t/p/original/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg |
We'll store this data in App.js
and pass it down the component hierarchy to Movie.js
.
We'll be able to read the value of these props from inside the component. You can name props pretty much anything you want - but it's good practice to be descriptive!
- Update the JSX in
src/components/Movie.js
to access and display the value of each prop we created. Remember we'll need to use the{ }
syntax!
Refresh the page and make sure everything works correctly and that your props are displaying. When you're done, you should see the movie title, runtime, and the poster!
One component to rule them all
Once you've got props working for one component, then write two more!
In src/App.js
, call the <Movie />
component again with different values for the title
, hours
, minutes
, and poster
.
properties. Display information for the complete trilogy! (If you don't know everything about Lord of the Rings off the top of your head, here it is).
title | hours | minutes | poster |
---|---|---|---|
The Fellowship of the Ring | 2 | 58 | https://image.tmdb.org/t/p/original/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg |
The Two Towers | 2 | 59 | https://image.tmdb.org/t/p/original/rrGlNlzFTrXFNGXsD7NNlxq4BPb.jpg |
The Return of the King | 3 | 21 | https://image.tmdb.org/t/p/original/rCzpDGLbOoPwLjy3OAm5NUPOTrC.jpg |
Maybe we could restructure our data for each movie as objects in App.js
like this:
const fellowship = {
title: "The Fellowship of the Ring",
hours: 2,
minutes: 58,
poster: "https://image.tmdb.org/t/p/original/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg"
}
If we do this, then we could just pass the movie details in the object to our Movie
components and access the objects keys like this:
<Movie title={fellowship.title} hours={fellowship.hours} minutes={fellowship.minutes} poster={fellowship.poster} />
Much cleaner!
In case you want to nerd out and add even more details, 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
When you're finished, add some style to create a Lord of the Rings themed page.
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 the components become.
- Imagine building a component for video search results inside YouTube.
- The props list is huge:
- tons of links
- time information
- preview images
- options to add the result to a playlist
- and all sorts of other things.
- The props list is huge:
Building one component to rule them all would save you a lot of time and headaches!