1
00:00:00,780 --> 00:00:05,040
At the end of the last video I said I was going to let you give a shot had this exercise without me

2
00:00:05,040 --> 00:00:09,060
doing any introduction but I figured you know what this one was actually a little bit more challenging

3
00:00:09,060 --> 00:00:13,110
so I just want to very quickly tell you what to do inside this next exercise.

4
00:00:13,310 --> 00:00:13,600
OK.

5
00:00:13,620 --> 00:00:18,060
So in this exercise you'll notice that we have another component right here and it's showing a lot more

6
00:00:18,060 --> 00:00:20,430
GSX that we've worked with previously.

7
00:00:20,580 --> 00:00:24,550
The result of all that GSX are these two panels you see over here.

8
00:00:24,690 --> 00:00:28,230
Now we used to refer to these panel looking things as segment's.

9
00:00:28,260 --> 00:00:32,250
So we've got one segment right here and a second segment right here.

10
00:00:32,400 --> 00:00:38,590
The overall outline like this kind of border the rounded edges the gray stuff as the background are

11
00:00:38,610 --> 00:00:44,190
identical between the two segments but the child where essentially the content of either segment is

12
00:00:44,190 --> 00:00:46,040
significantly different.

13
00:00:46,080 --> 00:00:53,220
So what you want to do is take a look at this GSX and figure out some way that we could kind of extract

14
00:00:53,460 --> 00:00:59,160
just the segment portion or just the thing that's giving us that styling into a separate component.

15
00:00:59,160 --> 00:01:04,800
Now as a big hint to you the only thing that we really want to extract here is the GSX that is duplicated

16
00:01:04,980 --> 00:01:11,370
in both of these little portions right here and a duplicated GSX is just this div with the class name

17
00:01:11,400 --> 00:01:13,910
of UI placeholder segment.

18
00:01:13,980 --> 00:01:18,340
So essentially just take this div right here and the closing tag right there.

19
00:01:18,390 --> 00:01:24,350
Extract those into a separate new component and make use of that new component inside of the app.

20
00:01:24,360 --> 00:01:29,130
These should result in something that looks identical but now has an additional component that can be

21
00:01:29,190 --> 00:01:35,010
reused very easily in the future without necessarily having to memorize these class names.

22
00:01:35,070 --> 00:01:36,800
So try not to overthink it.

23
00:01:36,810 --> 00:01:41,280
You really only have to change a couple of lines of code into here after creating that new component.

24
00:01:41,340 --> 00:01:45,190
And don't forget to render some children inside of a new component.

25
00:01:45,260 --> 00:01:46,750
We reference props.

26
00:01:46,770 --> 00:01:50,900
Children know like I said this is a more challenging exercise.

27
00:01:50,900 --> 00:01:56,460
So if you have any trouble with that whatsoever feel free to just pause and go over to the next video

28
00:01:56,520 --> 00:01:58,420
and take a look at the solutions.

29
00:01:58,440 --> 00:01:58,630
OK.

30
00:01:58,650 --> 00:02:00,850
So give it a shot and I'll see you in just a minute.