1
00:00:00,000 --> 00:00:09,660
[MUSIC]

2
00:00:09,660 --> 00:00:13,271
Hey there everyone, Laura here,
and it's that time again.

3
00:00:13,271 --> 00:00:15,623
Time to dive into some practice.

4
00:00:15,623 --> 00:00:19,201
Practice helps make what
you've learned stick,

5
00:00:19,201 --> 00:00:23,212
it also helps you become a faster and
better developer.

6
00:00:23,212 --> 00:00:29,019
In this workshop, you're going to sharpen
your React skills by practicing JSX,

7
00:00:29,019 --> 00:00:31,713
creating and rendering components,

8
00:00:31,713 --> 00:00:36,104
passing down props,
as well as iterating over data and more.

9
00:00:36,104 --> 00:00:40,154
This practice exercise is
a follow up to the introducing

10
00:00:40,154 --> 00:00:43,004
prop stage of the React basics course.

11
00:00:43,004 --> 00:00:45,572
If you haven't watched that stage yet,

12
00:00:45,572 --> 00:00:49,887
I suggest that you watch it before
trying this practice challenge.

13
00:00:49,887 --> 00:00:55,643
For easy access, I've included a link to
the course within the teacher's notes.

14
00:00:55,643 --> 00:01:01,340
You've learned that React is a JavaScript
library for building user interfaces.

15
00:01:01,340 --> 00:01:05,390
It lets you build your
application's UI by breaking it

16
00:01:05,390 --> 00:01:09,712
up into small reusable pieces
of code called components.

17
00:01:09,712 --> 00:01:12,312
Your challenge today is to build and

18
00:01:12,312 --> 00:01:17,089
generate these awesome planet
cards as components using React.

19
00:01:17,089 --> 00:01:20,319
To get started,
download the project files and

20
00:01:20,319 --> 00:01:23,073
open them in your favorite text editor.

21
00:01:23,073 --> 00:01:27,094
I utilize Vite to set up
the groundwork for our project files.

22
00:01:27,094 --> 00:01:31,773
So before you get started,
make sure you've imported all

23
00:01:31,773 --> 00:01:35,793
the dependencies by typing
npm i in the terminal.

24
00:01:35,793 --> 00:01:39,780
And remember,
to see our React app in the browser,

25
00:01:39,780 --> 00:01:46,109
we need to start up the development server
by running npm run dev in the terminal.

26
00:01:46,109 --> 00:01:51,437
You're going to write your React
code inside the file main.jsx.

27
00:01:51,437 --> 00:01:52,463
In this file,

28
00:01:52,463 --> 00:01:58,112
you'll see it contains an array of
objects assigned to the constant planets.

29
00:01:58,112 --> 00:02:02,348
Each object has properties
that describe a planet,

30
00:02:02,348 --> 00:02:06,486
like name, diameter,
moons, description, and

31
00:02:06,486 --> 00:02:12,374
it has a URL property that points to
an image located in the image folder.

32
00:02:12,374 --> 00:02:16,955
Within index.html,
I've included a commented example

33
00:02:16,955 --> 00:02:22,198
showcasing the markup you'll need
to use to create a planet card.

34
00:02:22,198 --> 00:02:28,178
Just below the planets array in main.jsx
are the tasks you'll need to complete for

35
00:02:28,178 --> 00:02:29,381
this practice.

36
00:02:29,381 --> 00:02:35,060
You'll create two components, a Planet
component that renders a planet card,

37
00:02:35,060 --> 00:02:39,737
and a container component that
iterates over the planets array and

38
00:02:39,737 --> 00:02:43,767
renders a Planet component for
each object in the array.

39
00:02:43,767 --> 00:02:49,254
You'll need to pass the planets data
to the main container component,

40
00:02:49,254 --> 00:02:53,650
then pass that data down to
the Planet cards using props.

41
00:02:53,650 --> 00:02:59,243
You should use the commented out markup
in index.html as a reference for

42
00:02:59,243 --> 00:03:01,179
how to display the data.

43
00:03:01,179 --> 00:03:06,365
The only text that should not be
dynamic is the h3 with the text

44
00:03:06,365 --> 00:03:10,869
Planet Profile and
the text between the strong tags.

45
00:03:10,869 --> 00:03:14,601
Everything else needs to
be displayed with props.

46
00:03:14,601 --> 00:03:17,313
Finally, to display the planet cards,

47
00:03:17,313 --> 00:03:21,637
you'll need to render the main
container component to the DOM.

48
00:03:21,637 --> 00:03:26,476
This exercise is a great way to practice
what you've learned so far about React.

49
00:03:26,476 --> 00:03:31,350
Good luck, have fun, and in the next
video, I'll walk you through one solution.