This practice will be retired on March 31, 2024.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenge relating to "React Component Rendering" that you'll be working to complete.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey everyone.
0:09
Gil here.
0:10
It's time for practice.
0:10
Practice helps make what
you've learned stick but
0:12
also helps you become a faster and
better developer.
0:14
In this workshop,
0:17
you're going to sharpen your React
skills by practicing JSX, creating and
0:17
rendering components, passing down props,
as well as iterating over data and more.
0:22
This practice exercise is a follow-up
to the Introducing Props stage of
0:27
the React Basics course.
0:31
If you haven't watched that stage yet,
0:33
I suggest that you watch it before
trying this practice challenge.
0:34
I've added the link to the course and
the teacher's notes.
0:37
You've learned that React is a JavaScript
library for building user interfaces.
0:40
It lets you build your application's
UI by breaking it up into smaller,
0:44
usable pieces of code called components.
0:48
So you're going to build and
0:50
generate this awesome planet
cards as components using React.
0:52
To get started launch
the workspace with this video or
0:56
download the project files and
open them in your favorite text editor.
0:59
I've included HTML, CSS, images and
a JavaScript file for this exercise.
1:02
In index.html, I've provided
the links to React, ReactDOM, and
1:08
the Babel transpiler at
the bottom of the file.
1:13
You're going to write your React
code inside the file app.js.
1:16
Now let's walk through
what you'll need to do.
1:20
App.js currently contains an array of
objects assigned to the constant planets.
1:21
Each object has properties that describe
a planet, like name, diameter, moons,
1:29
description.
1:33
And it has a URL property that points to
an image located in the image folder.
1:34
In index.html, I included a comment
1:40
that shows an example of the markup you'll
need to use to create a planet card.
1:43
Just below the planet array in app.js,
you will create two components,
1:49
a Planet component that
renders a planet card, and
1:54
a container component,
that iterates over the planet's array and
1:58
renders a planet component for
each object in the array.
2:03
You will need to pass the planet's
data to the main container,
2:07
then pass that data down to
the planet card using props.
2:11
You should use the commented out markup
in index.html as a reference for
2:15
how to display the data.
2:19
The only text that should not be
dynamic is the h3 with the text,
2:21
Planet Profile, and
the text between the strong tags.
2:26
Everything else needs to
be displayed with props.
2:30
Finally, to display the planet cards,
2:32
you will need to render the main
container component to the DOM.
2:34
This exercise is a great way to practice
what you've learned so far about React.
2:39
So good luck, have fun.
2:44
And in the next video,
I'll walk you through one solution.
2:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up