1
00:00:00,150 --> 00:00:01,150
Not bad, not bad.

2
00:00:01,170 --> 00:00:08,820
We covered Geria sex roles, so now let's talk about whether we can and components and the short answer

3
00:00:08,820 --> 00:00:09,230
is yes.

4
00:00:09,660 --> 00:00:15,600
Also, let's take a look at the reactors, because remember, when we installed them, I said probably

5
00:00:15,600 --> 00:00:17,700
won't make much sense, but now it will.

6
00:00:18,040 --> 00:00:23,480
Since now we have already a general understanding how the components work.

7
00:00:23,910 --> 00:00:29,370
And first, let's start by creating the nested component structure.

8
00:00:29,710 --> 00:00:35,400
Like I said before, if you want, you can place your hole up in one component.

9
00:00:35,430 --> 00:00:41,790
However, it's somewhat defeats the purpose of why you would want to use a reactor in the first place,

10
00:00:42,300 --> 00:00:50,530
because the idea is that you can split up your application in nice, separate chunks of functionality.

11
00:00:51,060 --> 00:00:58,740
Now, in our case, of course, we're just setting up simple demo, so it's not going to look as useful.

12
00:00:59,070 --> 00:01:04,200
But in general, it's going to give us a good idea how and why we want to do that.

13
00:01:04,410 --> 00:01:13,530
For example, I have to do and I'm going to have a thing to do with a text of John Doe, John Doe,

14
00:01:13,890 --> 00:01:21,930
and then I'm going to have a paragraph with the text of this is my message and I'll think about it.

15
00:01:22,410 --> 00:01:25,380
So I have the green component.

16
00:01:26,300 --> 00:01:33,500
I have the heading two and a half the paragraph, why don't I set up two separate components, one that

17
00:01:33,500 --> 00:01:38,530
just deals with heading to and the other one that just deals with a program.

18
00:01:38,930 --> 00:01:42,380
And just to spice things up, I'm going to use aero functions.

19
00:01:42,380 --> 00:01:45,650
And in one case, I'm going to use an implicit return.

20
00:01:45,860 --> 00:01:52,230
And the other case, it's going to be explicit return just so you can see that it is going to work regardless.

21
00:01:52,610 --> 00:01:54,470
So in this case, I'm going to go now.

22
00:01:54,470 --> 00:01:55,910
We do need to come up with a name.

23
00:01:56,240 --> 00:02:01,050
So I'm going to go with a person and this is going to be my implicit return.

24
00:02:01,340 --> 00:02:06,190
So for those of you who are familiar with our functions, of course, I can add here collaborationist.

25
00:02:06,440 --> 00:02:11,810
So, of course, then I would need to set up explicit return, which will do in next component.

26
00:02:12,140 --> 00:02:15,530
Or I can simply say that whatever I'll type.

27
00:02:15,800 --> 00:02:19,160
Well, that is what I'm going to be returning to in this case.

28
00:02:19,160 --> 00:02:20,480
What I would like to return.

29
00:02:20,990 --> 00:02:22,900
Well, I would want to return John Doe.

30
00:02:23,030 --> 00:02:23,390
Right.

31
00:02:23,660 --> 00:02:27,950
So either you can write it from scratch or in this case, I'll just copy and paste.

32
00:02:28,310 --> 00:02:34,610
And now, of course, once I render well, I only have this is my message because now this value is

33
00:02:34,610 --> 00:02:35,170
in the person.

34
00:02:35,660 --> 00:02:40,620
So how can I render whatever I'm returning from this component?

35
00:02:41,030 --> 00:02:42,860
Well, simple in the greeting.

36
00:02:43,780 --> 00:02:49,020
And set up my moment, moment, I'm going to go with my component.

37
00:02:49,350 --> 00:02:52,940
What is the name of the component that is person again?

38
00:02:52,950 --> 00:02:55,080
Remember, we do need to close it.

39
00:02:55,470 --> 00:02:58,230
And the moment we save it, I have John again.

40
00:02:58,710 --> 00:03:03,700
So, of course, now we can put two and two together that I can do the same thing with the program.

41
00:03:03,780 --> 00:03:10,050
Again, the only difference is going to be that I would want to set up explosives return just so we

42
00:03:10,050 --> 00:03:10,930
can see the difference.

43
00:03:11,280 --> 00:03:13,290
So let's call this message.

44
00:03:13,340 --> 00:03:16,140
And again, we have our function.

45
00:03:16,530 --> 00:03:18,750
And in here I'll just write return.

46
00:03:19,140 --> 00:03:22,580
And then what I would like to return, of course, of the paragraph.

47
00:03:22,920 --> 00:03:24,540
So grab the paragraph.

48
00:03:24,540 --> 00:03:28,560
And this is what we are returning from our message function.

49
00:03:28,770 --> 00:03:33,600
Now, of course, let's just set up a message right after the person.

50
00:03:33,980 --> 00:03:43,320
So once I say I have both of them, but notice how we're nicely splitting up our application into separate

51
00:03:43,560 --> 00:03:51,240
chunks and that is really, really cool because we can use them later Lego blocks to build our application.

52
00:03:51,600 --> 00:03:59,160
And as a side note, this is a somewhat traditional word of how to set up a react application where,

53
00:03:59,160 --> 00:04:03,930
of course, we'll use the exports and imports and everything of that nature.

54
00:04:03,940 --> 00:04:07,470
However, we will set up this one component.

55
00:04:07,590 --> 00:04:11,700
In most cases, the general convention is calling this app.

56
00:04:12,020 --> 00:04:19,260
Then in that app, we are going to be either one, two, three, four or fifty five thousand components

57
00:04:19,440 --> 00:04:20,520
that will meet.

58
00:04:20,890 --> 00:04:26,230
Please keep in mind that you can have more components in those specific components.

59
00:04:26,370 --> 00:04:30,530
So, for example, in the person, I could render even more components.

60
00:04:31,020 --> 00:04:38,340
However, there's going to be this app where your components will meet and then you will import into

61
00:04:39,240 --> 00:04:45,480
that particular component again, shake and bake app or whatever you have decided to name it, and then

62
00:04:45,480 --> 00:04:46,650
you will render it.

63
00:04:46,950 --> 00:04:49,790
So this is going to be a pretty typical setup.

64
00:04:50,070 --> 00:04:56,160
So that's how we can nest components inside other react components.

65
00:04:56,400 --> 00:04:59,460
And it's also take a look at the react developer tools.

66
00:04:59,790 --> 00:05:09,390
So I'm going to make my right screen bigger and then I'll open up my developer tools and we're looking

67
00:05:09,390 --> 00:05:10,730
for the components.

68
00:05:11,160 --> 00:05:16,560
So of course we installed already react developer tools that is out of the way.

69
00:05:16,710 --> 00:05:19,140
And then we're looking for the components.

70
00:05:19,500 --> 00:05:25,110
And now you'll notice something interesting where this is going to be our world component.

71
00:05:25,440 --> 00:05:33,000
So at the moment, we call this greeting and then, of course, inside the greeting, I have a person

72
00:05:33,180 --> 00:05:34,110
and a message.

73
00:05:34,290 --> 00:05:38,700
Again, we haven't covered problems, so none of that makes sense.

74
00:05:38,910 --> 00:05:45,090
Or we can clearly see that this is going to be our component structure.

75
00:05:45,540 --> 00:05:51,570
And as our apps and examples are going to get more complicated, of course, we will still be able to

76
00:05:51,570 --> 00:05:55,080
see what in the world we're actually rendering.