1
00:00:01,740 --> 00:00:04,680
Instructor: So we finished up with our first step here.

2
00:00:04,680 --> 00:00:07,500
Tuning the terminal to run like a browser.

3
00:00:07,500 --> 00:00:09,570
And we're now gonna move onto our next step.

4
00:00:09,570 --> 00:00:12,870
We're going to build a helper called renderComponent

5
00:00:12,870 --> 00:00:15,240
that should render a given React class.

6
00:00:15,240 --> 00:00:18,390
So this is where things really start to get interesting.

7
00:00:18,390 --> 00:00:21,780
So the renderComponent helper that we're gonna build here,

8
00:00:21,780 --> 00:00:22,680
it's sole job,

9
00:00:22,680 --> 00:00:25,410
it's sole purpose is no matter what,

10
00:00:25,410 --> 00:00:26,910
it's gonna take an instance

11
00:00:26,910 --> 00:00:29,070
or it's gonna take a component class,

12
00:00:29,070 --> 00:00:30,660
a React component class.

13
00:00:30,660 --> 00:00:31,860
It's gonna render it.

14
00:00:31,860 --> 00:00:33,630
It's gonna get it's HTML.

15
00:00:33,630 --> 00:00:35,850
It's gong to wrap that with jQuery element.

16
00:00:35,850 --> 00:00:38,730
And we're talk exactly why that's happening.

17
00:00:38,730 --> 00:00:41,850
And it returns that jQuery wrapped element

18
00:00:41,850 --> 00:00:44,970
So in practice it is pretty concise code

19
00:00:44,970 --> 00:00:45,803
that we're gonna write here.

20
00:00:45,803 --> 00:00:48,330
It's only about a handful of lines.

21
00:00:48,330 --> 00:00:49,380
But let me tell you,

22
00:00:49,380 --> 00:00:51,723
it's absolutely action packed so to speak.

23
00:00:52,920 --> 00:00:54,390
So the first thing we'll do

24
00:00:54,390 --> 00:00:56,937
is we'll declare a function call renderComponent.

25
00:00:56,937 --> 00:00:59,850
And so this much is at least hopefully a given.

26
00:00:59,850 --> 00:01:01,440
You're building a function here.

27
00:01:01,440 --> 00:01:03,330
We're gonna pass some arguments to it

28
00:01:03,330 --> 00:01:06,783
and it's gonna return some very helpful little thing to us.

29
00:01:07,920 --> 00:01:10,293
So let's start with square one.

30
00:01:11,160 --> 00:01:12,510
Best place to start is saying

31
00:01:12,510 --> 00:01:13,620
how in the world

32
00:01:13,620 --> 00:01:17,850
are we going to render our React component at all.

33
00:01:17,850 --> 00:01:19,650
Let's pull in our class here.

34
00:01:19,650 --> 00:01:20,640
So we'll say,

35
00:01:20,640 --> 00:01:22,860
the first argument is gonna be out component class.

36
00:01:22,860 --> 00:01:25,210
So this is what we're gonna pass in by default.

37
00:01:26,190 --> 00:01:29,190
Let's say that we're gonna make a variable const.

38
00:01:29,190 --> 00:01:32,313
And we'll say that it's gonna be the component instance.

39
00:01:33,210 --> 00:01:34,620
And so just to be clear here,

40
00:01:34,620 --> 00:01:37,590
a component class is a reference to the component class

41
00:01:37,590 --> 00:01:38,580
that we build.

42
00:01:38,580 --> 00:01:40,410
That's what happens when we say like,

43
00:01:40,410 --> 00:01:43,980
class, comment box, extends, react.component.

44
00:01:43,980 --> 00:01:45,630
That is a class.

45
00:01:45,630 --> 00:01:48,360
What we're gonna make is an instance of that class.

46
00:01:48,360 --> 00:01:52,500
So we're going to spin off a copy of the class, so to speak.

47
00:01:52,500 --> 00:01:53,973
So help us with this,

48
00:01:54,818 --> 00:01:59,220
very luckily we've got access to a very helpful handler

49
00:01:59,220 --> 00:02:01,980
from the React library

50
00:02:01,980 --> 00:02:03,090
that we get access to

51
00:02:03,090 --> 00:02:06,180
through the text utils library from React.

52
00:02:06,180 --> 00:02:09,810
Let's go look up the documentation from this really quick.

53
00:02:09,810 --> 00:02:12,513
So in the browser I'm just gonna search for React.

54
00:02:15,930 --> 00:02:18,780
And we'll go to the official documentation.

55
00:02:18,780 --> 00:02:21,690
We'll click on the docs at the top.

56
00:02:21,690 --> 00:02:25,320
And then on the left-hand side under the Add On section,

57
00:02:25,320 --> 00:02:28,380
we're specially looking for Test Utilities.

58
00:02:28,380 --> 00:02:30,450
Let's click on Test Utilities.

59
00:02:30,450 --> 00:02:31,380
We're gonna come back here.

60
00:02:31,380 --> 00:02:34,080
The first word you see is Simulate which might ring a bell.

61
00:02:34,080 --> 00:02:36,330
So we'll definitely come back here later.

62
00:02:36,330 --> 00:02:38,100
But let's scroll down a little bit

63
00:02:38,100 --> 00:02:39,420
and check out the method

64
00:02:39,420 --> 00:02:42,570
right underneath called renderintoDocument.

65
00:02:42,570 --> 00:02:45,150
So renderintoDocument will render a component

66
00:02:45,150 --> 00:02:47,910
to a detached DOM node in the document.

67
00:02:47,910 --> 00:02:49,140
And right after it,

68
00:02:49,140 --> 00:02:51,247
very prominently displayed,

69
00:02:51,247 --> 00:02:53,490
"This function requires a DOM."

70
00:02:53,490 --> 00:02:58,490
And so this is where everything comes back to jsdom again.

71
00:02:59,280 --> 00:03:01,110
When we run mocha from the command line,

72
00:03:01,110 --> 00:03:02,730
we do not have a DOM.

73
00:03:02,730 --> 00:03:05,340
That's what this note right her is specifically telling us.

74
00:03:05,340 --> 00:03:06,840
So warning us against.

75
00:03:06,840 --> 00:03:08,610
And so this is coming back to the jsdom

76
00:03:08,610 --> 00:03:10,080
and the purpose of setting up

77
00:03:10,080 --> 00:03:12,630
our fake html document right here.

78
00:03:12,630 --> 00:03:13,740
This test helper,

79
00:03:13,740 --> 00:03:17,490
this renderintoDocument would not work at all

80
00:03:17,490 --> 00:03:20,733
if we did not have a DOM available to us.

81
00:03:21,960 --> 00:03:23,580
So let's look at the method signature here

82
00:03:23,580 --> 00:03:24,750
just a little bit.

83
00:03:24,750 --> 00:03:26,820
We call renderintoDocoment

84
00:03:26,820 --> 00:03:29,970
and we pass an instance of our ReactElement.

85
00:03:29,970 --> 00:03:32,700
So let's go ahead and give this a shot.

86
00:03:32,700 --> 00:03:36,780
At the top I've already included our test utils library.

87
00:03:36,780 --> 00:03:40,890
So we can do just import TestUtils from,

88
00:03:40,890 --> 00:03:42,150
and it's not React here

89
00:03:42,150 --> 00:03:46,193
it's gonna be react-addons-test-utils.

90
00:03:48,480 --> 00:03:51,390
Now back down into our componentInstance=,

91
00:03:51,390 --> 00:03:53,273
we'll say TestUtils.renderIntoDocument.

92
00:03:57,990 --> 00:04:01,230
And we're going to pass our component instance.

93
00:04:01,230 --> 00:04:02,700
Now we create a component instance

94
00:04:02,700 --> 00:04:07,110
just by wrapping our component class with a JSX tag.

95
00:04:07,110 --> 00:04:11,643
So we can do just ComponentClass like so.

96
00:04:15,410 --> 00:04:17,670
So this creates the instance of the component,

97
00:04:17,670 --> 00:04:19,260
we rendered into the document.

98
00:04:19,260 --> 00:04:20,370
And so you can see,

99
00:04:20,370 --> 00:04:21,202
since I'm saying,

100
00:04:21,202 --> 00:04:22,800
"Oh, this is the component instance."

101
00:04:22,800 --> 00:04:26,010
Our variable name over here is a little bit misleading.

102
00:04:26,010 --> 00:04:27,600
I apologize for that.

103
00:04:27,600 --> 00:04:30,840
Nonetheless, I think it conveys enough meaning.

104
00:04:30,840 --> 00:04:33,060
This variable right here is holding a reference

105
00:04:33,060 --> 00:04:35,790
that is kind of like the rendered version

106
00:04:35,790 --> 00:04:37,350
of our componentInstance.

107
00:04:37,350 --> 00:04:40,110
So I'm mostly telling the truth,

108
00:04:40,110 --> 00:04:42,000
so to speak.
(chuckles)

109
00:04:42,000 --> 00:04:42,870
Okay.

110
00:04:42,870 --> 00:04:45,180
So let's continue going here.

111
00:04:45,180 --> 00:04:47,730
At this point, we have put our componentInstance together

112
00:04:47,730 --> 00:04:49,590
and kind of rendered the component,

113
00:04:49,590 --> 00:04:50,423
so to speak.

114
00:04:50,423 --> 00:04:52,440
According to at least this method name.

115
00:04:52,440 --> 00:04:53,985
The next step is going to be

116
00:04:53,985 --> 00:04:57,240
getting access to the actual DOM node.

117
00:04:57,240 --> 00:05:00,630
So this component instance method or this componentInstance,

118
00:05:00,630 --> 00:05:03,720
is not a reference to the actual DOM element

119
00:05:03,720 --> 00:05:05,910
that is created by our component.

120
00:05:05,910 --> 00:05:10,200
To get access to the actual DOM element or the actual HTML

121
00:05:10,200 --> 00:05:12,570
that our component produces,

122
00:05:12,570 --> 00:05:16,304
we need to make use of the library React DOM.

123
00:05:16,304 --> 00:05:19,020
Remember, React DOM is a library

124
00:05:19,020 --> 00:05:20,310
that is included with React.

125
00:05:20,310 --> 00:05:22,410
Or as side library

126
00:05:22,410 --> 00:05:24,540
that is specifically for working with React

127
00:05:24,540 --> 00:05:26,193
and the DOM at the same time.

128
00:05:27,090 --> 00:05:32,090
So at the top we'll import ReactDOM from react-dom.

129
00:05:34,290 --> 00:05:36,180
And again, this is starting good to go.

130
00:05:36,180 --> 00:05:37,890
I do not expect to you know this stuff

131
00:05:37,890 --> 00:05:38,880
off the top of your head

132
00:05:38,880 --> 00:05:41,640
or be able to regurgitate it or anything like that.

133
00:05:41,640 --> 00:05:42,667
The intent here is to say,

134
00:05:42,667 --> 00:05:45,360
"Hey, here's kind of what's going on behind the scenes.

135
00:05:45,360 --> 00:05:47,820
I just wanna you a taste of what's going on."

136
00:05:47,820 --> 00:05:50,470
So again, I don't expect you to memorize this at all.

137
00:05:51,540 --> 00:05:54,553
I'm gonna call ReactDOM.findDOMNode.

138
00:05:56,550 --> 00:05:59,520
And watch the capitalization on findDOMNode.

139
00:05:59,520 --> 00:06:01,320
DOM is all capitalized

140
00:06:01,320 --> 00:06:04,113
and then the N in node is capitalized as well.

141
00:06:05,610 --> 00:06:08,510
So we're gonna find the DOM node of our componentInstance.

142
00:06:10,020 --> 00:06:14,490
And so this right here produces HTML.

143
00:06:14,490 --> 00:06:17,310
This is how we get access to HTML

144
00:06:17,310 --> 00:06:18,468
from our componentInstance.

145
00:06:18,468 --> 00:06:20,130
This is the magic.

146
00:06:20,130 --> 00:06:20,963
Right here.

147
00:06:20,963 --> 00:06:21,820
This is the good stuff.

148
00:06:22,860 --> 00:06:25,050
So the last step that we need to do,

149
00:06:25,050 --> 00:06:30,050
is we just are gonna wrap this HTML with a jQuery call.

150
00:06:31,680 --> 00:06:32,583
So now,

151
00:06:33,450 --> 00:06:36,260
whenever we call renderComponent

152
00:06:36,260 --> 00:06:38,460
and we pass it to ComponentClass,

153
00:06:38,460 --> 00:06:42,030
we're gonna render our element into a document.

154
00:06:42,030 --> 00:06:46,020
Into like fragment of a document, so to speak.

155
00:06:46,020 --> 00:06:49,500
We're gonna use ReactDOM to get a reference to the HTML

156
00:06:49,500 --> 00:06:51,270
that our component produced,

157
00:06:51,270 --> 00:06:54,150
and then we're warp that with a jQuery element.

158
00:06:54,150 --> 00:06:56,250
So again, the purpose of the jQuery element here

159
00:06:56,250 --> 00:06:58,380
is just so that we can get access

160
00:06:58,380 --> 00:07:00,990
to all those really, really, really helpful matchers

161
00:07:00,990 --> 00:07:02,730
from jQuery Chai.

162
00:07:02,730 --> 00:07:03,563
Or Chai jQuery.

163
00:07:03,563 --> 00:07:05,760
Whichever order you wanna go with.

164
00:07:05,760 --> 00:07:09,060
I'm gonna reiterate that point in much more detail

165
00:07:09,060 --> 00:07:11,070
when we start talking about the

166
00:07:11,070 --> 00:07:14,610
setting up our Chai jQuery library later on.

167
00:07:14,610 --> 00:07:15,900
Okay, so this looks good.

168
00:07:15,900 --> 00:07:19,830
At least enough to say and see if we get any specs passing.

169
00:07:19,830 --> 00:07:21,690
Let's pull our specs back up.

170
00:07:21,690 --> 00:07:23,103
So I'm gonna save this.

171
00:07:24,660 --> 00:07:27,630
And gee, kind of feels like nothing happened.

172
00:07:27,630 --> 00:07:29,943
Let me put some new lines in here.

173
00:07:31,800 --> 00:07:32,633
Yeah, okay.

174
00:07:32,633 --> 00:07:33,870
So we're still not quite there.

175
00:07:33,870 --> 00:07:34,703
Oh, I know what's happening.

176
00:07:34,703 --> 00:07:36,240
We are still not exporting

177
00:07:36,240 --> 00:07:38,010
the function render component just yet.

178
00:07:38,010 --> 00:07:40,530
So we defined it but we're exporting it.

179
00:07:40,530 --> 00:07:42,480
Let's do that at the bottom.

180
00:07:42,480 --> 00:07:44,280
But let's take care of that in the next section.

181
00:07:44,280 --> 00:07:46,560
'Cause there really is one more step in here

182
00:07:46,560 --> 00:07:47,610
that we need take of

183
00:07:47,610 --> 00:07:49,680
that I'm just trying to be mysterious about.

184
00:07:49,680 --> 00:07:51,880
Anyways, I'll catch you in the next section.