Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,330 --> 00:00:06,270
Hello, welcome back in the annual lecture in Dallas lecture, we have initialized stylings of application.
2
00:00:06,540 --> 00:00:11,520
In this lecture, we'll take a look at our main template and it will analyze it.
3
00:00:12,720 --> 00:00:17,450
OK, let's start in Abelard view and let's see what we have here.
4
00:00:17,460 --> 00:00:19,830
We have here lots of age HTML parts.
5
00:00:20,340 --> 00:00:22,230
They are separated by the comments.
6
00:00:22,980 --> 00:00:27,120
OK, so you can see here is a header part, which is a basically our navigation bar.
7
00:00:27,330 --> 00:00:28,950
You can see up here.
8
00:00:29,070 --> 00:00:30,330
Is this part here?
9
00:00:30,720 --> 00:00:31,850
OK, I can also draw it.
10
00:00:31,860 --> 00:00:33,120
Here it is.
11
00:00:33,200 --> 00:00:35,260
This is a navigation bar.
12
00:00:35,280 --> 00:00:36,810
I can draw with those three lines.
13
00:00:37,110 --> 00:00:37,590
All right.
14
00:00:38,190 --> 00:00:39,240
Let me use this, though.
15
00:00:39,660 --> 00:00:43,020
And yeah, so that's a navigation bar.
16
00:00:44,610 --> 00:00:44,910
OK.
17
00:00:44,910 --> 00:00:48,540
Well, we have here next to next here navigation bar here as a hero.
18
00:00:48,570 --> 00:00:52,260
Here are components starting here and ending somewhere down here.
19
00:00:52,320 --> 00:00:55,830
Here are a component is the component this the part.
20
00:00:55,830 --> 00:00:59,280
Here is a background image with that also the search bar here.
21
00:00:59,490 --> 00:01:01,140
So that this is this part here.
22
00:01:01,140 --> 00:01:02,570
Here is the hero component.
23
00:01:02,580 --> 00:01:02,930
Oops.
24
00:01:04,210 --> 00:01:10,180
Here is a hero component, this part here is in between here also have this background image.
25
00:01:11,190 --> 00:01:18,690
This is the hero part, then we have a post to list post, this is a list of all of the Post's posts
26
00:01:18,690 --> 00:01:23,340
here, which are basically products that users can exchange between each other.
27
00:01:23,940 --> 00:01:30,030
OK, it can be, for example, cars and can be computers, some utility stuff, and so on.
28
00:01:30,480 --> 00:01:30,790
OK.
29
00:01:31,310 --> 00:01:34,440
Nevertheless, despite a few details, as you can see, we'll be displaying here.
30
00:01:35,280 --> 00:01:37,320
Let me change the tools here.
31
00:01:38,220 --> 00:01:39,840
OK, so what is displayed here?
32
00:01:40,860 --> 00:01:44,860
Will be the title of the post, as you can see up here.
33
00:01:44,880 --> 00:01:50,790
There is a title he will be the author of The Post the Time, but it was supposed that the image of
34
00:01:50,790 --> 00:01:54,090
the post and there should be some image to make it the wish list.
35
00:01:54,210 --> 00:01:56,490
But this will be handled later.
36
00:01:58,060 --> 00:02:03,430
OK, so that's our posts, the list of all of the posts here and the down here is our last pagination,
37
00:02:03,430 --> 00:02:10,510
and I think it should be also noted down here, pagination, pagination here and is the pagination.
38
00:02:11,930 --> 00:02:16,820
As you can see, it's a quite huge templates, lots of html, very hard to read.
39
00:02:16,940 --> 00:02:20,650
Then you go step by step here and you go through the one story line.
40
00:02:20,810 --> 00:02:25,340
It's very difficult to know what part belongs to the what part of the layout.
41
00:02:26,090 --> 00:02:32,240
That's why you know the O.J. as you are separating the small parts of your layout into smaller parts
42
00:02:32,240 --> 00:02:33,110
of the components.
43
00:02:33,110 --> 00:02:38,060
So not to go to another component here, they'll go to the hero component and so on.
44
00:02:38,210 --> 00:02:42,800
And then in the end, you will connect it together and place it in your or the view.
45
00:02:44,350 --> 00:02:45,550
OK, here.
46
00:02:46,960 --> 00:02:51,910
The the view that you mentioned before, there is one morphologies and is it just a normal JavaScript
47
00:02:51,910 --> 00:02:52,300
file?
48
00:02:53,260 --> 00:02:59,200
And you are important in your view component here to this file, and you are calling to create a functional
49
00:02:59,260 --> 00:03:02,080
from the view framework itself.
50
00:03:03,250 --> 00:03:07,000
This create up function, you are providing your up component and you are mounting it.
51
00:03:07,540 --> 00:03:13,630
So basically, what does it mean that you basically just means that you will take all of these a.m.,
52
00:03:14,080 --> 00:03:22,420
you will take all the JavaScript you collected together and you will mount it into this part up, which
53
00:03:22,420 --> 00:03:26,350
is located into the public folder indexed HTML this here.
54
00:03:27,130 --> 00:03:35,260
So all of this, the entire content of your upload view and its components is mounted here into this
55
00:03:35,590 --> 00:03:39,430
idea of the app and you can see here.
56
00:03:39,430 --> 00:03:45,040
Then you will right click or it will press control option at your command option I.
57
00:03:46,050 --> 00:03:49,110
Just to inspect it, and you will see it here when you go here.
58
00:03:49,650 --> 00:03:51,650
You see, that's all of your HMO.
59
00:03:51,900 --> 00:03:56,540
And you will see that it's mounted into this side of the app.
60
00:03:57,290 --> 00:03:58,500
OK, this ID here.
61
00:03:59,490 --> 00:04:00,300
Maybe it's better.
62
00:04:00,300 --> 00:04:02,760
You can go to Abdulah View and you can create here Dief
63
00:04:05,370 --> 00:04:08,910
X Exchange Area Exchange Area to see the better.
64
00:04:09,210 --> 00:04:11,310
And you will see that all of this is mounted there.
65
00:04:11,310 --> 00:04:14,910
You can see the idea of X injury was mounted to this here.
66
00:04:14,910 --> 00:04:16,920
So this entire content glued together.
67
00:04:17,280 --> 00:04:22,980
Each component by each component joined together into the adult view and upload view.
68
00:04:22,980 --> 00:04:26,310
Entire content joined to the display of tidy up.
69
00:04:28,120 --> 00:04:29,090
That's basically it.
70
00:04:29,220 --> 00:04:31,710
And yeah, that's I had to introduce you this.
71
00:04:32,470 --> 00:04:35,550
And now it's time to separate it into its own components.
72
00:04:35,560 --> 00:04:36,760
Have you got to going to do it?
73
00:04:37,840 --> 00:04:43,570
OK, let's go to our SRT folder on the left hand side, and let's create here a new folder.
74
00:04:44,620 --> 00:04:45,970
He'll be calling it components.
75
00:04:45,970 --> 00:04:51,160
Components will be a folder for all these smaller parts, for all the smaller components components.
76
00:04:51,410 --> 00:04:53,890
You'll write in the components folder.
77
00:04:53,890 --> 00:04:57,780
I will create a new component of visual called NAV Bar in the view.
78
00:04:57,790 --> 00:05:06,020
Jazz is conventions to value a component of the uppercase letter, so no enough bar that you need another
79
00:05:06,040 --> 00:05:06,730
of the two of you.
80
00:05:06,730 --> 00:05:11,350
If you want to provide a view to your component, you need to have a template template like this.
81
00:05:13,140 --> 00:05:13,590
OK.
82
00:05:13,720 --> 00:05:18,930
Just simply template, you don't need to even write a script here now just to provide a template, OK,
83
00:05:18,930 --> 00:05:25,460
so let's go to upload, view and let's get here is A. A header here ending here.
84
00:05:25,470 --> 00:05:29,280
Let's get it and copy it, and you can remove it from here.
85
00:05:31,130 --> 00:05:37,390
You can go to the Nevada review and you can paste it, as you can see, is not intended to very nicely.
86
00:05:38,120 --> 00:05:44,350
What I'm doing in such a case is I will just get the indented part of this here enough and the header
87
00:05:44,350 --> 00:05:44,740
tag.
88
00:05:44,980 --> 00:05:47,040
So I'll get this all of this under the header.
89
00:05:47,050 --> 00:05:53,950
So I click select it and I will press shift and the at the same time shift and adapt the movie to the
90
00:05:53,950 --> 00:05:54,490
left side.
91
00:05:54,880 --> 00:05:55,390
Like this?
92
00:05:56,810 --> 00:06:02,630
Now, everything is great, but ahead there itself through the intended in relation of a template.
93
00:06:02,960 --> 00:06:08,960
So I will select the interim head there just like this and I will press the top to end and date to the
94
00:06:08,960 --> 00:06:09,740
right side.
95
00:06:11,380 --> 00:06:17,430
Now it looks good enough, but it's in on component, and also we'll do one more thing here, too.
96
00:06:17,620 --> 00:06:22,950
We are going to export activity only to export when we don't have any scripts here.
97
00:06:23,030 --> 00:06:25,270
We don't have anything just here, template for now.
98
00:06:25,270 --> 00:06:28,210
Like this and go to your Apple TV, you.
99
00:06:29,370 --> 00:06:30,930
And get to hear this component.
100
00:06:31,740 --> 00:06:35,310
So let's go down to this script part in the script party.
101
00:06:35,490 --> 00:06:37,800
You can import your component, you can do it like this.
102
00:06:39,370 --> 00:06:43,060
Import, import, enough bar.
103
00:06:45,730 --> 00:06:46,950
No.
104
00:06:48,090 --> 00:06:50,280
From act like nothing a string, guys, my mistake.
105
00:06:50,550 --> 00:06:52,590
Import number from.
106
00:06:53,850 --> 00:06:57,860
We are going that currently in the up up fold up file.
107
00:06:57,900 --> 00:06:59,250
They'll go that slush.
108
00:07:00,240 --> 00:07:02,940
Components and enough power like this.
109
00:07:03,990 --> 00:07:05,520
So they're going to the components folder.
110
00:07:05,910 --> 00:07:12,000
No file, the important thing here, no, it's complaining here you can see here this red line is that
111
00:07:12,000 --> 00:07:17,380
we need to we need to provide it here, OK, because we are importing, we need to use it to use it.
112
00:07:17,400 --> 00:07:19,480
You need to register it in an exporter default.
113
00:07:19,480 --> 00:07:28,800
You will provide your components, prop components field and you will provide their your number like
114
00:07:28,840 --> 00:07:29,130
this.
115
00:07:30,590 --> 00:07:30,950
OK.
116
00:07:32,290 --> 00:07:35,320
It's like complaining because you need to use it in your template now.
117
00:07:36,100 --> 00:07:42,340
And also, guys, there is such that if you are using such a common name such as nav bar or I don't
118
00:07:42,340 --> 00:07:50,680
know, footer and so on that it can be same as the HTML elements names to prevent the the duplication
119
00:07:50,680 --> 00:07:51,480
of the components.
120
00:07:51,490 --> 00:07:56,770
You should always prefix it with some keyword specific to your application, so all of my components
121
00:07:56,770 --> 00:07:58,780
will have a prefix of exchange.
122
00:07:59,410 --> 00:08:01,790
So I will not import your number, but I will call.
123
00:08:01,800 --> 00:08:04,250
I will call it exchange enough bar.
124
00:08:04,630 --> 00:08:07,120
I mean for importing the familiar components nav bar.
125
00:08:08,470 --> 00:08:10,690
OK, I'll get to exchange number, and I will pass it here.
126
00:08:12,450 --> 00:08:19,770
Now, when you look at the exchange bar and you can use it so you can go up here and there, the before
127
00:08:19,770 --> 00:08:26,490
was your entry into the old enough bar you will provide here now opening stock exchange and closing
128
00:08:26,670 --> 00:08:27,630
exchange enough bar.
129
00:08:29,480 --> 00:08:35,860
Now, you can imagine that everything quality in your exchange view are actually in enough bar code,
130
00:08:35,870 --> 00:08:43,120
feel this enter ahead that I hear from a template is mounted inside of here.
131
00:08:43,130 --> 00:08:48,560
So this is basically removed and it's replaced with all of these enter content here.
132
00:08:50,290 --> 00:08:50,680
OK.
133
00:08:51,340 --> 00:08:55,390
That's what they are doing here, but you can see it's nicely separated into its own component, and
134
00:08:55,390 --> 00:08:59,860
now we don't even need comments because we know that immediately here it's an extension of power here.
135
00:09:02,530 --> 00:09:07,870
There is also a UN convention, how to variety or how to specify our components because you have two
136
00:09:07,870 --> 00:09:08,590
options here.
137
00:09:09,620 --> 00:09:16,100
You can either buy the exchange number like this, but the first uppercase letter and every other the
138
00:09:16,100 --> 00:09:22,160
other word starting with the uppercase leather, or you can start as in HTML with a lowercase letters.
139
00:09:22,760 --> 00:09:24,590
And you can separate the parts with the Duchess.
140
00:09:24,920 --> 00:09:27,230
Like this and that's the convention you are going with.
141
00:09:28,130 --> 00:09:29,930
Every component will be like this exchange.
142
00:09:30,080 --> 00:09:30,890
There's enough butter.
143
00:09:32,210 --> 00:09:33,200
OK, so every.
144
00:09:34,550 --> 00:09:35,360
Every.
145
00:09:36,380 --> 00:09:41,300
Vaught is separated by Desch, and everything is okay, so that's the convention.
146
00:09:43,750 --> 00:09:48,310
OK, now we can say the guys and we can try it out, if it's if it of course works.
147
00:09:49,060 --> 00:09:50,680
Please verify your entire template.
148
00:09:50,860 --> 00:09:51,410
It didn't change.
149
00:09:51,430 --> 00:09:53,830
Anything could just be that it wouldn't.
150
00:09:53,970 --> 00:09:56,800
No, and it and it's all a component.
151
00:09:57,490 --> 00:09:58,030
Save it.
152
00:09:58,300 --> 00:09:59,920
Go to your browser refresh.
153
00:09:59,920 --> 00:10:01,450
And you should see that exactly.
154
00:10:01,450 --> 00:10:02,350
Place looks as before.
155
00:10:02,830 --> 00:10:03,230
Perfect.
156
00:10:03,250 --> 00:10:04,020
That's a very good start.
157
00:10:04,030 --> 00:10:07,990
Guys in the next lecture will continue with the rest of our components.
158
00:10:08,260 --> 00:10:09,460
So I will see you there, guys.
14790
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.