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 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