1
00:00:00,180 --> 00:00:03,140
OK, so now we'll create some components.

2
00:00:03,690 --> 00:00:07,950
So first of all, we'll create and everybody and we'll call it a hybrid component.

3
00:00:08,550 --> 00:00:15,780
So let's just go ahead and first of all, create a folder inside the SHC Other Souls source folder.

4
00:00:16,230 --> 00:00:22,830
So we'll create a folder here and we'll call it the components folder for components.

5
00:00:24,090 --> 00:00:32,460
And inside the components will create a file that will be to the chests.

6
00:00:32,790 --> 00:00:34,620
You can also call it GSX.

7
00:00:34,740 --> 00:00:39,240
You can see when I type GSX, the logo changes to the React one.

8
00:00:39,660 --> 00:00:45,750
Actually, the ASX is dedicated to only the act, but the GST is a universal file and there's a script

9
00:00:45,750 --> 00:00:46,050
file.

10
00:00:46,590 --> 00:00:54,510
But when you use GST inside the reactor, so it is understood that you are trying to say GSX only because

11
00:00:55,620 --> 00:01:01,860
like in React, it's just the first thing that is there that you need to like.

12
00:01:01,860 --> 00:01:09,570
You can just create a script and it's HTML and the styling at the same time inside the G6 or D.J.s file

13
00:01:10,030 --> 00:01:14,760
to the DS file is also similar to the six file inside the like react.

14
00:01:14,850 --> 00:01:17,430
I'm talking about the not also react.

15
00:01:19,080 --> 00:01:25,370
When you do that and react to that is similar, so you can just try cheers or GSX totally depends on,

16
00:01:25,370 --> 00:01:26,750
you know, problem with that.

17
00:01:26,930 --> 00:01:30,460
Okay, so I'll be using its side.

18
00:01:30,470 --> 00:01:31,460
They had other ideas.

19
00:01:31,500 --> 00:01:40,100
Now, Bill, let me just minimize this for a second because we don't need to like, watch it every time

20
00:01:40,100 --> 00:01:43,010
because I thought it was done that said, Well, that's what we wondered.

21
00:01:43,640 --> 00:01:44,630
Nothing else extra.

22
00:01:46,360 --> 00:01:47,600
It's not unsightly, either.

23
00:01:47,940 --> 00:01:52,660
Yes, well, what we'll do is we need some boilerplate code, not is boilerplate code.

24
00:01:53,020 --> 00:01:59,050
Boilerplate code is like this starting code Lord, the code, which is similar to all of the computer

25
00:01:59,100 --> 00:01:59,590
and sound.

26
00:01:59,920 --> 00:02:04,060
But still, we need to have a Typekit like many, many times so.

27
00:02:04,300 --> 00:02:07,510
So we need to get that.

28
00:02:08,110 --> 00:02:13,360
So in order to avoid typing the same code, so many times I've installed an extension.

29
00:02:13,360 --> 00:02:16,030
So let me tell you what it is and.

30
00:02:17,350 --> 00:02:24,190
For development like this, the best part about we ask that you get extensions which save you a lot

31
00:02:24,190 --> 00:02:24,640
of time.

32
00:02:25,030 --> 00:02:31,750
So basically, I'm using this one, which is the seven Docs Graph React Native Snippets version one

33
00:02:32,050 --> 00:02:33,800
point 3.1.1 does by this.

34
00:02:33,860 --> 00:02:35,620
I can pronounce this actually.

35
00:02:35,980 --> 00:02:36,380
OK.

36
00:02:36,640 --> 00:02:38,260
So this is by the authorities.

37
00:02:38,260 --> 00:02:42,880
This and you need to destroy install this and that will make your life so much easier.

38
00:02:42,940 --> 00:02:46,060
And I'll show you how that will do that.

39
00:02:47,380 --> 00:02:52,930
OK, so I suppose that you are undecided audio file and it's an empty file right now, but you want

40
00:02:52,930 --> 00:02:58,480
the basic import-export code and the basic written statement and on before that, what you do is you

41
00:02:58,480 --> 00:03:03,070
will just install that extension first, you know, doing install that first, OK?

42
00:03:03,340 --> 00:03:10,450
And after installing, what are you going to do reading to just type out a C and the functional component

43
00:03:10,450 --> 00:03:11,110
export?

44
00:03:11,110 --> 00:03:14,740
This is the full form of this direct functional component export with export.

45
00:03:15,070 --> 00:03:15,430
OK.

46
00:03:15,700 --> 00:03:22,480
So for me, it's for some reason it doesn't work as like directly because of offsite, because of may

47
00:03:22,480 --> 00:03:24,310
be open to a WCL.

48
00:03:24,970 --> 00:03:26,380
So for you, it may work.

49
00:03:26,380 --> 00:03:32,860
And if it doesn't do it to just press control, shift B and then you click this snippet search and then

50
00:03:32,860 --> 00:03:34,180
you need to type part of.

51
00:03:34,960 --> 00:03:37,450
Same thing here so you can see what it's written.

52
00:03:37,450 --> 00:03:45,010
The Creator, the creator, the functional component with AA7 module system, which means that will

53
00:03:45,010 --> 00:03:46,120
be an export also.

54
00:03:47,270 --> 00:03:53,840
But what they need to do is just and touch on this and boom, you will see the boilerplate code, the

55
00:03:53,840 --> 00:03:58,190
import export and the basic function with that return will be shown here.

56
00:03:58,310 --> 00:04:06,590
Let me just buy something here so that we can test that it's got a thing like that.

57
00:04:09,490 --> 00:04:11,890
Component salary component.

58
00:04:13,150 --> 00:04:15,250
Come for no.

59
00:04:15,730 --> 00:04:16,660
I'm going to save it.

60
00:04:17,230 --> 00:04:26,710
And now if you go to the browser, see you will see nothing, actually, because as I told you already,

61
00:04:26,710 --> 00:04:34,450
whatever component you create that needs to be leaching to this reporting to this particular file or

62
00:04:34,450 --> 00:04:40,870
the component, which is the app component of the Apple or GSI, like wherever inside your project,

63
00:04:40,870 --> 00:04:48,460
whatever component you are creating some way or the other that that component should be rendered inside

64
00:04:48,460 --> 00:04:54,580
the separatists, maybe indirectly that is OK, like inside on the computer, inside and then the component

65
00:04:54,580 --> 00:04:58,180
inside another or that root component is being rendered in a gorgeous file.

66
00:04:58,180 --> 00:04:58,750
That's OK.

67
00:04:59,170 --> 00:05:02,310
But some way or the other that should report to the outdoors?

68
00:05:02,320 --> 00:05:02,560
Yes.

69
00:05:02,570 --> 00:05:04,270
Well, that is what I'm trying to say.

70
00:05:04,750 --> 00:05:06,400
So that is why it's not being rendered.

71
00:05:06,400 --> 00:05:08,740
So let us go to our gorgeous.

72
00:05:10,040 --> 00:05:13,550
And the very first thing is that it does import that import.

73
00:05:15,750 --> 00:05:17,400
And from.

74
00:05:20,320 --> 00:05:26,530
Inside the components we have, they had a good two years, but we can write our details right and you

75
00:05:26,530 --> 00:05:27,870
can just leave it also.

76
00:05:28,180 --> 00:05:29,470
There's no problem with that.

77
00:05:30,270 --> 00:05:35,440
It will not get confused because there is only like, yes, files are only there with the name and there's

78
00:05:35,440 --> 00:05:37,660
a function inside, so there's no problem with that.

79
00:05:38,110 --> 00:05:44,980
OK, now what we need to do is maybe to this the world and after that we need to just.

80
00:05:46,070 --> 00:05:48,620
Right, that component is our dollar.

81
00:05:50,160 --> 00:05:53,130
Will self close it all when I see it?

82
00:05:53,430 --> 00:05:59,290
So this is what it is done, we imported the herder and we have used it, and so does too.

83
00:05:59,670 --> 00:06:01,620
And now when I go to the browser.

84
00:06:03,410 --> 00:06:09,260
And see, you can see that is the handle component, but this is the world like this is how the structure

85
00:06:09,260 --> 00:06:10,280
works and react.

86
00:06:10,730 --> 00:06:15,470
OK, so this is actually not what we wanted to print on the screen.

87
00:06:15,470 --> 00:06:17,150
We want to print something meaningful.

88
00:06:18,180 --> 00:06:26,060
So for that, let's to the I.D. code editor and here are to her support.

89
00:06:28,260 --> 00:06:29,370
No, just.

90
00:06:31,600 --> 00:06:31,950
Need.

91
00:06:38,800 --> 00:06:43,510
So we'll create a logo on like the logo for dark.

92
00:06:43,540 --> 00:06:46,480
We will keep it up and we'll write some text also.

93
00:06:46,980 --> 00:06:51,280
We will create a constant pen that will be importing the logo.

94
00:06:53,370 --> 00:06:53,820
Forms.

95
00:06:55,600 --> 00:07:00,880
Well, all you can do it correctly, there is no assurance that global.

96
00:07:03,800 --> 00:07:05,960
And we'll will have.

97
00:07:07,100 --> 00:07:08,100
Image bank.

98
00:07:12,810 --> 00:07:13,090
Giving.

99
00:07:16,000 --> 00:07:16,270
Yeah.

100
00:07:18,060 --> 00:07:19,830
David, because both.

101
00:07:20,770 --> 00:07:25,330
And inside here, what we'll do is we'll provide the source of the image.

102
00:07:25,630 --> 00:07:32,380
Now, if it's a local image and it's installed on you like it's present inside your order, your project

103
00:07:32,380 --> 00:07:37,600
folder so you can just directly imported portraiture and you can provide that that name, for example,

104
00:07:37,610 --> 00:07:42,280
our input to output, if that thing is like import image from.

105
00:07:42,520 --> 00:07:47,580
And then your destination so you can write that image, you name it inside this inside the car library.

106
00:07:47,740 --> 00:07:48,850
So then it will show up.

107
00:07:49,300 --> 00:07:51,460
But odd image we are taking from where you are.

108
00:07:51,610 --> 00:07:53,290
So let me grab that, you are told.

109
00:07:55,730 --> 00:08:02,720
From there, it will be rendered or we are not restoring that particular image on our system file,

110
00:08:03,200 --> 00:08:09,470
so we can just feel that you are still here and this is the world we should be using to guard the image

111
00:08:10,490 --> 00:08:15,800
and actually putting the DAB old and will be the.

112
00:08:16,810 --> 00:08:17,800
Local, basically.

113
00:08:19,140 --> 00:08:21,540
Next, inside they return, what will do.

114
00:08:21,560 --> 00:08:24,720
OK, so we have close it and we have to.

115
00:08:25,880 --> 00:08:26,720
So my question here.

116
00:08:27,530 --> 00:08:29,450
So next, we'll do in the.

117
00:08:31,590 --> 00:08:39,420
And, Dave, what we'll do is we'll import this particular image, you know, no logo before importing

118
00:08:39,420 --> 00:08:42,060
that, we have to provide calibrations.

119
00:08:42,060 --> 00:08:43,740
And so this we have the right logo.

120
00:08:44,890 --> 00:08:46,120
And let us see.

121
00:08:47,290 --> 00:08:47,660
Books.

122
00:08:49,720 --> 00:08:56,260
You can see that image has been successfully rendered, and that is the very first thing you have done

123
00:08:56,650 --> 00:08:57,100
so far.

124
00:08:57,700 --> 00:09:06,400
OK, now we would provide some extra inside detail after the logo will provide each one flag.

125
00:09:07,830 --> 00:09:08,640
And we invite.

126
00:09:10,560 --> 00:09:10,830
He.

127
00:09:14,220 --> 00:09:15,540
It can't be.

128
00:09:17,270 --> 00:09:23,120
Yeah, keep this that and this, but this is not how exactly we want, we want it in line.

129
00:09:23,900 --> 00:09:30,770
So that's it for this structure missing basic structure, but now we need to provide some styling as

130
00:09:30,770 --> 00:09:32,750
well to the component.

131
00:09:33,140 --> 00:09:40,280
Before that, we need to create a file and so that we have to write access and then we have been portrayed

132
00:09:40,790 --> 00:09:41,330
by giving.

133
00:09:41,330 --> 00:09:43,850
Some asked me who are components.

134
00:09:44,660 --> 00:09:49,820
Before that I will create a file or these sorts.

135
00:09:50,150 --> 00:09:55,630
You basically just say, OK, it's already there to do that.

136
00:09:55,700 --> 00:09:56,810
So I don't need to create it.

137
00:09:57,290 --> 00:10:03,020
You can just go at the source and click on this and you can create a style or see as a sign that basically

138
00:10:03,020 --> 00:10:09,170
the ceasefire in which all the styling part will be done, then you need to import it accordingly and

139
00:10:09,590 --> 00:10:10,330
components.

140
00:10:10,730 --> 00:10:13,490
So now what we'll do is we'll give some styling to the.

141
00:10:15,390 --> 00:10:21,990
And then we'll provide some success to it, who will do in the next review.