1
00:00:00,810 --> 00:00:07,200
Once we have removed all the boilerplate, let's kick things into gear and start our react land adventure

2
00:00:07,800 --> 00:00:11,730
and the first thing I want to do is to create our first component.

3
00:00:12,180 --> 00:00:19,950
Normally, in order to do that, we will need only two things a import from react dependency and a function.

4
00:00:20,440 --> 00:00:28,320
Or keep in mind that since indexed gas is our JavaScript entry point, we'll need to add some additional

5
00:00:28,320 --> 00:00:28,710
code.

6
00:00:29,070 --> 00:00:32,740
But normally it's just react and a function.

7
00:00:33,210 --> 00:00:35,670
So let's start working on that now.

8
00:00:35,670 --> 00:00:40,760
I will toggle my sidebar just so we have a little bit more realistic and I'm doing that.

9
00:00:40,770 --> 00:00:44,490
We a command of command and B, notice here.

10
00:00:44,670 --> 00:00:47,960
Now I'm toggling the sidebar in Visual Studio Code.

11
00:00:48,420 --> 00:00:54,040
And like I said, we would need to import react from our react dependency.

12
00:00:54,390 --> 00:00:59,430
Now, please keep in mind that the code that I'm writing, I'm starting with the import and I'm looking

13
00:00:59,430 --> 00:01:02,250
for react and learn from react.

14
00:01:02,460 --> 00:01:06,600
So this code is not react specific, essentially.

15
00:01:06,940 --> 00:01:14,820
This is something called ESX modules where essentially we can get a piece of functionality into our

16
00:01:14,820 --> 00:01:15,170
file.

17
00:01:15,420 --> 00:01:19,170
And if you have been taking my Joske, of course, of course you are already familiar.

18
00:01:19,340 --> 00:01:22,320
However, if you haven't, don't later.

19
00:01:22,320 --> 00:01:29,100
And of course, we'll spend entire video on taking a look at the syntax and what will be the purpose

20
00:01:29,430 --> 00:01:31,350
of using ESX modules.

21
00:01:31,770 --> 00:01:34,240
Keep in mind, this is just JavaScript.

22
00:01:34,460 --> 00:01:41,160
This is nothing specific to react now, since a react is our main dependency for a project, I don't

23
00:01:41,160 --> 00:01:42,690
need to go with a specific path.

24
00:01:42,690 --> 00:01:48,660
But later you'll see that when we're setting up our own files, you'll have to specifically say, well,

25
00:01:48,660 --> 00:01:50,130
which file are you looking for?

26
00:01:50,250 --> 00:01:51,890
Again, we don't have our files.

27
00:01:51,900 --> 00:01:58,920
So normally if it's just a dependency that is for the whole project, meaning it is in the node modules,

28
00:01:59,160 --> 00:02:02,120
then you simply go with whatever is the name.

29
00:02:02,340 --> 00:02:04,950
So I'm importing react from react.

30
00:02:05,190 --> 00:02:10,690
And now we want to set up my function because I would want to create my component.

31
00:02:10,950 --> 00:02:18,570
Now there is a gotcha meaning I can create whatever function I want, whether it is a function or whatever

32
00:02:18,570 --> 00:02:19,500
that is going to be good.

33
00:02:19,500 --> 00:02:21,280
All function with a function keyword.

34
00:02:21,650 --> 00:02:30,420
However, as far as the name for react to know that this function is special and the dysfunction is

35
00:02:30,420 --> 00:02:33,360
a component, you must capitalized the name.

36
00:02:33,720 --> 00:02:37,010
So again, we can create a function.

37
00:02:37,030 --> 00:02:39,930
However, we would like function, keyword or function.

38
00:02:40,140 --> 00:02:45,900
And throughout the course I will switch just so you can see that of course it will work regardless.

39
00:02:46,200 --> 00:02:53,040
But what we need to do in both cases, regardless which option you choose, is to capitalize the name.

40
00:02:53,070 --> 00:02:59,700
So, for example, if I'm creating a component by the name of greeting, I must start with a capital

41
00:02:59,700 --> 00:03:05,070
G and then I'm going to go with name when we have the parameters, which eventually we'll use.

42
00:03:05,070 --> 00:03:07,440
But for the time being, we'll just leave them empty.

43
00:03:07,440 --> 00:03:10,380
So we go with parentheses and then we have curly braces.

44
00:03:10,590 --> 00:03:16,500
So as you can see, traditional JavaScript syntax, we just create a function, not one.

45
00:03:16,500 --> 00:03:21,690
Gocha was the fact that we needed to capitalize the first letter.

46
00:03:21,900 --> 00:03:27,270
So that way JavaScript knows or I'm sorry, react knows that this is special.

47
00:03:27,390 --> 00:03:31,830
So this is a component and learn from react component.

48
00:03:32,100 --> 00:03:40,530
We would want to return H.T. and now technically it is not called the amount or you'll see that in a

49
00:03:40,530 --> 00:03:42,480
lot of blog posts and videos and all that.

50
00:03:42,840 --> 00:03:49,910
Technically it is called Jass X and don't worry, we'll cover sex in more detail for now.

51
00:03:49,920 --> 00:03:52,490
We just want to have something on the screen.

52
00:03:52,950 --> 00:03:58,110
So from this function, we must, must, must, must, must return again.

53
00:03:58,140 --> 00:04:03,150
I will call this email and you'll see that as html a bunch of places here.

54
00:04:03,180 --> 00:04:05,160
Keep in mind that it is officially called.

55
00:04:06,450 --> 00:04:12,020
So we go with our return and then we simply come up with a heading for.

56
00:04:12,300 --> 00:04:18,210
So that's the email that will be eventually displayed on the screen.

57
00:04:18,510 --> 00:04:20,820
So I go with my heading for I'm here.

58
00:04:20,820 --> 00:04:21,390
All right.

59
00:04:21,420 --> 00:04:27,440
This is John and this is my first component.

60
00:04:27,930 --> 00:04:28,470
Awesome.

61
00:04:29,010 --> 00:04:34,440
Now, once I've created, as you can see, even though I saved oh, nothing is happening.

62
00:04:34,440 --> 00:04:42,330
But there's no reason to worry because remember I said Index JS is a JavaScript entry point, which

63
00:04:42,330 --> 00:04:50,070
means that, yes, normally this is the only thing you'll need to set up the component import as well

64
00:04:50,070 --> 00:04:53,100
as the function, which essentially is your component.

65
00:04:53,550 --> 00:04:59,790
However, since indexed is an entry point only to add some additional code and.

66
00:04:59,920 --> 00:05:06,400
What we're trying to do, we're trying to add this functionality at the moment or whatever functionality

67
00:05:06,640 --> 00:05:09,310
you have into our index issue.

68
00:05:09,880 --> 00:05:13,210
Remember I said there was a div with an idea of.

69
00:05:13,840 --> 00:05:20,530
So now what I would want is take whatever functionality I have, which in my case is just this one component

70
00:05:20,890 --> 00:05:27,470
and somehow, someway injected into my div with an idea.

71
00:05:28,300 --> 00:05:29,320
Now how do I do that?

72
00:05:29,350 --> 00:05:37,120
Well, I'm going to go with import than react Dom and that is coming from other dependancy.

73
00:05:37,510 --> 00:05:39,630
So there were multiple dependencies.

74
00:05:39,640 --> 00:05:46,110
You can clearly see them in packages and one of the other dependencies was react Dom.

75
00:05:46,480 --> 00:05:50,650
So we import this from react and then react.

76
00:05:50,650 --> 00:05:58,390
Dom has the render method, so we go with React Dom, then Dot and then we type hereunder.

77
00:05:58,750 --> 00:06:01,870
Now Render Method is looking for two things.

78
00:06:02,440 --> 00:06:09,340
It is looking for what we're going to render, which of course in our case is going to be greeting.

79
00:06:09,640 --> 00:06:15,820
And the second thing well where we would want to render it and of course that's why I showed you there.

80
00:06:16,450 --> 00:06:18,750
So now first let's pass the greeting.

81
00:06:19,090 --> 00:06:25,000
So I'm going to go here with a greeting and I'll close it out and I'll talk about why we would need

82
00:06:25,000 --> 00:06:28,420
to close the components as well in a second.

83
00:06:28,660 --> 00:06:36,550
And the second thing, so we add comma and then we go with document and then get element by day.

84
00:06:36,880 --> 00:06:39,000
And now I'm looking for that route.

85
00:06:39,280 --> 00:06:44,330
And the moment I save it, if everything is correct, I should see it.

86
00:06:44,590 --> 00:06:45,520
Now, let me double check.

87
00:06:45,790 --> 00:06:49,870
Of course, what happens right now, my dear server is not running.

88
00:06:50,140 --> 00:06:51,820
So of course, that's why I cannot see anything.

89
00:06:52,060 --> 00:06:56,830
So go with NPM start spend up my dev server.

90
00:06:57,970 --> 00:07:03,910
And now on the screen, I should see my heading four and the text will be.

91
00:07:04,090 --> 00:07:07,290
This is John and this is my first component.

92
00:07:07,540 --> 00:07:09,370
And of course, there it is now.

93
00:07:09,370 --> 00:07:10,300
It's kind of small.

94
00:07:10,310 --> 00:07:17,620
So let me zoom in and I can clearly see that this is John and this is my first component.

95
00:07:18,070 --> 00:07:28,780
Now, the gotcher about the closing tax and react is simple, where even though your HDMI element might

96
00:07:28,780 --> 00:07:35,220
not have a closing tag as example, that could be, for example, image, because you know that for

97
00:07:35,230 --> 00:07:40,390
the image you don't have closing tax, you still need to self-closing.

98
00:07:40,630 --> 00:07:47,280
So what I'm trying to say in this greeting, I cannot pass it like this, so I'm going to get error.

99
00:07:47,620 --> 00:07:52,230
So in order to avoid atter, either I would need to set up to to act like.

100
00:07:52,240 --> 00:07:57,940
So I have the greeting and then I'm closing out the greeting component as well.

101
00:07:58,180 --> 00:08:06,100
And once I served notice how everything works or if you don't want this empty closing time or for example,

102
00:08:06,280 --> 00:08:12,550
in the image that you already don't have that closing tag, then you would still need to add this closing

103
00:08:12,550 --> 00:08:16,410
tag inside of the opening brackets.

104
00:08:16,810 --> 00:08:21,970
So that's something you need to keep in mind, because with all five, of course, we can do that willynilly

105
00:08:22,590 --> 00:08:26,680
for the image we can included, we can augment and it's up to us.

106
00:08:26,680 --> 00:08:34,630
But in react you must, must, must, must, must have the self-closing that if there is no closing

107
00:08:34,630 --> 00:08:34,930
time.

108
00:08:35,230 --> 00:08:41,920
And let's go over the set up one more time where if we would want to create a component, we need to

109
00:08:41,920 --> 00:08:44,410
import, react from react.

110
00:08:44,740 --> 00:08:46,600
We need to set up a function.

111
00:08:47,110 --> 00:08:49,080
That function will be component.

112
00:08:49,270 --> 00:08:51,570
So this is our component.

113
00:08:51,820 --> 00:08:58,960
However, in order for you to know that it is going to be a component, you need to set this up as a

114
00:08:58,960 --> 00:09:00,340
capital case letter.

115
00:09:00,610 --> 00:09:01,930
So that's how Riak knows.

116
00:09:01,930 --> 00:09:02,210
All right.

117
00:09:02,440 --> 00:09:04,390
So this is not just the regular function.

118
00:09:04,600 --> 00:09:06,280
This is going to be my component.

119
00:09:06,490 --> 00:09:13,660
And then from the component, we are returning HTML, which officially is called USX, because, of

120
00:09:13,660 --> 00:09:16,760
course, there are some nice goodies that we can do.

121
00:09:16,780 --> 00:09:19,150
It's not just going to be a simple demo.

122
00:09:19,420 --> 00:09:25,950
And since this is a entry point, so only in this case, and essentially I can tell right away that

123
00:09:26,140 --> 00:09:29,140
in most cases is just going to be in one place in your application.

124
00:09:29,260 --> 00:09:30,910
So you only have to do it once.

125
00:09:30,910 --> 00:09:35,260
And by the way, if you're using create react app, you won't even have to do that.

126
00:09:35,500 --> 00:09:43,360
But normally you would do that in one place where you inject your JavaScript into the index and we do

127
00:09:43,360 --> 00:09:48,670
that by importing react down and then we have a render function.

128
00:09:49,000 --> 00:09:51,430
And then in that function we pass in two things.

129
00:09:51,700 --> 00:09:56,620
We pass in whatever we're going to render and then where we're going to render.

130
00:09:56,770 --> 00:10:02,910
And then since, of course, in the index, we already have the div with an idea what.

131
00:10:03,250 --> 00:10:05,280
That's why we're targeting that there.

132
00:10:05,530 --> 00:10:12,160
And now, of course, we have our first component successfully displayed on a screen.

133
00:10:12,360 --> 00:10:12,820
Awesome.