1
00:00:00,315 --> 00:00:01,678
Hi, how'd it go?

2
00:00:01,678 --> 00:00:05,205
Were you able to create and
render the planet card using React?

3
00:00:05,205 --> 00:00:06,609
If not, that's all right.

4
00:00:06,609 --> 00:00:09,555
You can watch my solution,
compare it to what you wrote and

5
00:00:09,555 --> 00:00:11,310
then try to recreate it yourself.

6
00:00:11,310 --> 00:00:16,127
The goal was to use the data in the
planets array to display each of the eight

7
00:00:16,127 --> 00:00:17,148
planet cards.

8
00:00:17,148 --> 00:00:19,052
Now I'll show you my solution.

9
00:00:19,052 --> 00:00:23,703
You can also reference my code when you
download the product files in app.js.

10
00:00:23,703 --> 00:00:28,671
I'll start by creating
a stateless functional component

11
00:00:28,671 --> 00:00:33,243
named planet with const
Planet = an arrow function.

12
00:00:33,243 --> 00:00:34,740
Inside the function,

13
00:00:34,740 --> 00:00:39,478
add the return keyword followed by
a set of parenthesis to wrap the jsx.

14
00:00:39,478 --> 00:00:43,722
The function returns the markup for
a planet card, so

15
00:00:43,722 --> 00:00:48,721
I'll copy the div with a class
card from the example template in

16
00:00:48,721 --> 00:00:52,989
index.html, and
paste it inside the parentheses.

17
00:00:52,989 --> 00:00:58,616
Remember, in React you use the attribute
className instead of class.

18
00:00:58,616 --> 00:01:02,666
So I'll change the div's
class attribute to className.

19
00:01:02,666 --> 00:01:04,443
Next, right below,

20
00:01:04,443 --> 00:01:10,380
I'll create the container component
as a function named PlanetList.

21
00:01:13,169 --> 00:01:16,190
I'll add the return statement, and

22
00:01:16,190 --> 00:01:21,071
inside the parenthesis add
a div with the class container.

23
00:01:23,513 --> 00:01:27,631
This component is going to return
a list of planet components.

24
00:01:27,631 --> 00:01:34,100
So I'll display the planet component
inside the container using a planet tag.

25
00:01:34,100 --> 00:01:41,237
Then to render the planet list to the dom,
I'll use the ReactDOM.render method.

26
00:01:44,848 --> 00:01:49,987
I'll pass it PlanetList as
the component to render.

27
00:01:49,987 --> 00:01:55,679
Then use document.getElementById
to specify the div with the id

28
00:01:55,679 --> 00:02:01,898
root as the element to which I want
to render, or mount the PlanetList.

29
00:02:01,898 --> 00:02:05,735
So now to get the planet's
data into our components,

30
00:02:05,735 --> 00:02:10,263
I'll need to pass the planet's
array as props to PlanetList.

31
00:02:10,263 --> 00:02:16,801
So in ReactDOM.render I'll add a prop
named planets to the PlanetList tag,

32
00:02:16,801 --> 00:02:24,055
then pass it the planets array by writing
the variable planets between curly braces.

33
00:02:24,055 --> 00:02:30,004
All right, this data is now available
to the PlanetList component as props.

34
00:02:30,004 --> 00:02:33,953
Next, to use this prop inside
the PlanetList function,

35
00:02:33,953 --> 00:02:36,924
we need to pass it the parameter for
props.

36
00:02:36,924 --> 00:02:39,193
Then to display each planet card,

37
00:02:39,193 --> 00:02:44,438
I'll use the map array iteration method
to iterate over the planet's array and

38
00:02:44,438 --> 00:02:48,129
render a planet component for
each object in the array.

39
00:02:48,129 --> 00:02:53,390
JavaScript expressions written inside JSX
need to be placed inside curly braces,

40
00:02:53,390 --> 00:02:56,785
so inside the container div
add a set of curly braces.

41
00:02:56,785 --> 00:03:01,701
And inside the curly braces
map over the planet data

42
00:03:01,701 --> 00:03:06,509
coming in from props
with props.planets.map.

43
00:03:06,509 --> 00:03:11,469
I'll write the map callback as an error
function that takes the parameter

44
00:03:11,469 --> 00:03:16,037
planet to represent the current
item being processed in the array.

45
00:03:16,037 --> 00:03:21,242
Then I'll move the planet
tag inside the callback.

46
00:03:21,242 --> 00:03:26,139
Now I'll need to pass the necessary
props down to the Planet component

47
00:03:26,139 --> 00:03:30,955
using the properties from each
planet item we're getting from map.

48
00:03:30,955 --> 00:03:38,296
First add a name prop and
set it equal to planet.name.

49
00:03:38,296 --> 00:03:42,389
Next add a prop named diameter and

50
00:03:42,389 --> 00:03:46,048
set it to planet.diameter.

51
00:03:46,048 --> 00:03:50,980
Below that add a prop named moons and

52
00:03:50,980 --> 00:03:54,440
pass it planet.moons.

53
00:03:54,440 --> 00:04:01,998
And the prop name desc for
description, and set to planet.desc.

54
00:04:01,998 --> 00:04:07,511
And finally a prop name url and
passed planet.url.

55
00:04:07,511 --> 00:04:12,205
And let's not forget to specify
a key prop on each Planet component.

56
00:04:12,205 --> 00:04:14,362
That way React can keep track of it and

57
00:04:14,362 --> 00:04:17,296
differentiate each
component from its sibling.

58
00:04:17,296 --> 00:04:21,723
I can provide a unique key to each
planet component using the ID

59
00:04:21,723 --> 00:04:23,605
property of each object.

60
00:04:23,605 --> 00:04:27,239
So I'll pass planet, a key prop, and

61
00:04:27,239 --> 00:04:31,336
as the value pass it an ID with planet.id.

62
00:04:31,336 --> 00:04:35,529
Finally, I'll replace the static
content in the Planet

63
00:04:35,529 --> 00:04:38,860
component with the dynamic
data from props.

64
00:04:38,860 --> 00:04:43,042
First, I'll pass the Planet function,
the props parameter,

65
00:04:43,042 --> 00:04:47,688
to enabled the use of props,
then replace the attribute values and most

66
00:04:47,688 --> 00:04:52,661
of the text content with JSX expressions
that call their respective props.

67
00:04:52,661 --> 00:04:57,579
First, the image elements
source attribute should

68
00:04:57,579 --> 00:05:01,720
be an expression that returns props.url.

69
00:05:01,720 --> 00:05:09,786
I'll set the alt text to
the planet name with props.name.

70
00:05:09,786 --> 00:05:16,010
Then replace the text in
the h2 with curly braces and

71
00:05:16,010 --> 00:05:20,821
props.name, and the description text

72
00:05:20,821 --> 00:05:25,786
with have curly braces and props.desc.

73
00:05:29,375 --> 00:05:35,306
In the unordered list replace
the diameter number with props.diameter.

74
00:05:38,253 --> 00:05:42,324
And finally, display the number
of moons with props.moons.

75
00:05:46,450 --> 00:05:49,238
All right,
let's have a look in the browser.

76
00:05:49,238 --> 00:05:55,731
Refresh the page, and there you have it,
our eight planet cards.

77
00:05:55,731 --> 00:05:58,991
Now, you could have done things
a little differently and that's okay.

78
00:05:58,991 --> 00:06:03,905
For instance, you might have created
the main app component as a class then

79
00:06:03,905 --> 00:06:09,443
iterated over this.props.planets, for
example, to display each planet card.

80
00:06:09,443 --> 00:06:13,413
Or maybe you also created the Planet
component as a class, too.

81
00:06:13,413 --> 00:06:18,033
One shortcut you could have used to
pass each prop down to the Planet

82
00:06:18,033 --> 00:06:22,422
component all at once is passing
a spread attribute to Planet.

83
00:06:22,422 --> 00:06:27,270
For example, add a set of curly
braces to the Planet tag, and

84
00:06:27,270 --> 00:06:34,033
inside the curly braces pass the spread
operator with ..., followed by planet.

85
00:06:34,033 --> 00:06:39,987
Now I can delete all but
the key prop from the Planet tag.

86
00:06:39,987 --> 00:06:43,724
This way you don't have to
explicitly list each prop name and

87
00:06:43,724 --> 00:06:45,858
value using the spread operator.

88
00:06:45,858 --> 00:06:51,481
You're still able to access each prop
by its name in the Planet component,

89
00:06:51,481 --> 00:06:54,886
with props.url, props.name, and so on.

90
00:06:54,886 --> 00:06:55,473
All right,

91
00:06:55,473 --> 00:06:59,485
I hope that you were able to complete
this React practice session successfully.

92
00:06:59,485 --> 00:07:01,020
If not, why not start over and

93
00:07:01,020 --> 00:07:03,729
try to write it again without
looking at my version?

94
00:07:03,729 --> 00:07:07,325
You're also going to learn a whole lot
more about working with React as you

95
00:07:07,325 --> 00:07:09,368
progress through our React curriculum.

96
00:07:09,368 --> 00:07:11,337
Thanks, everyone, and happy learning.