Preview
Video Player
00:00
00:00
Introducing the Practice
3:32This video introduces the challenge relating to "React Component Rendering" that you'll be working to complete.
[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