Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice React Component Rendering!
You have completed Practice React Component Rendering!
Preview
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 there everyone, Laura here,
and it's that time again.
0:09
Time to dive into some practice.
0:13
Practice helps make what
you've learned stick,
0:15
it also helps you become a faster and
better developer.
0:19
In this workshop, you're going to sharpen
your React skills by practicing JSX,
0:23
creating and rendering components,
0:29
passing down props,
as well as iterating over data and more.
0:31
This practice exercise is
a follow up to the introducing
0:36
prop stage of the React basics course.
0:40
If you haven't watched that stage yet,
0:43
I suggest that you watch it before
trying this practice challenge.
0:45
For easy access, I've included a link to
the course within the teacher's notes.
0:49
You've learned that React is a JavaScript
library for building user interfaces.
0:55
It lets you build your
application's UI by breaking it
1:01
up into small reusable pieces
of code called components.
1:05
Your challenge today is to build and
1:09
generate these awesome planet
cards as components using React.
1:12
To get started,
download the project files and
1:17
open them in your favorite text editor.
1:20
I utilize Vite to set up
the groundwork for our project files.
1:23
So before you get started,
make sure you've imported all
1:27
the dependencies by typing
npm i in the terminal.
1:31
And remember,
to see our React app in the browser,
1:35
we need to start up the development server
by running npm run dev in the terminal.
1:39
You're going to write your React
code inside the file main.jsx.
1:46
In this file,
1:51
you'll see it contains an array of
objects assigned to the constant planets.
1:52
Each object has properties
that describe a planet,
1:58
like name, diameter,
moons, description, and
2:02
it has a URL property that points to
an image located in the image folder.
2:06
Within index.html,
I've included a commented example
2:12
showcasing the markup you'll need
to use to create a planet card.
2:16
Just below the planets array in main.jsx
are the tasks you'll need to complete for
2:22
this practice.
2:28
You'll create two components, a Planet
component that renders a planet card,
2:29
and a container component that
iterates over the planets array and
2:35
renders a Planet component for
each object in the array.
2:39
You'll need to pass the planets data
to the main container component,
2:43
then pass that data down to
the Planet cards using props.
2:49
You should use the commented out markup
in index.html as a reference for
2:53
how to display the data.
2:59
The only text that should not be
dynamic is the h3 with the text
3:01
Planet Profile and
the text between the strong tags.
3:06
Everything else needs to
be displayed with props.
3:10
Finally, to display the planet cards,
3:14
you'll need to render the main
container component to the DOM.
3:17
This exercise is a great way to practice
what you've learned so far about React.
3:21
Good luck, have fun, and in the next
video, I'll walk you through one solution.
3:26
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