Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,480 --> 00:00:02,020
Welcome back.
2
00:00:03,170 --> 00:00:08,180
Now, before we get into the next video, where we're going to build some of these components and actually
3
00:00:08,180 --> 00:00:10,730
start making our app, I want to go over something.
4
00:00:11,560 --> 00:00:19,060
You notice here that we're rendering this app, which isn't ASML, but our own custom component, that
5
00:00:19,060 --> 00:00:23,430
is we're importing this app file, which is app dogs.
6
00:00:23,710 --> 00:00:25,090
And don't worry about this code.
7
00:00:25,100 --> 00:00:27,070
This is something that we're going to write later on.
8
00:00:27,640 --> 00:00:32,340
But we see over here that we're returning under the render some estimate.
9
00:00:33,190 --> 00:00:42,310
Now, the way react works is that we can combine these ASML like elements such as DIV or H1, but also
10
00:00:42,310 --> 00:00:46,840
create our own custom ones, like we will like search box or card list.
11
00:00:47,530 --> 00:00:54,250
And just like we saw on our developer tools with React these components, we have capital letters and
12
00:00:54,250 --> 00:00:57,010
I've used some highlighting here so that it doesn't highlight them.
13
00:00:57,010 --> 00:01:03,370
You can see the difference between a component that we built, which starts with a capital letter and
14
00:01:03,370 --> 00:01:10,720
a component that comes pre-built and reacts, which are like a Shimao dev or H1.
15
00:01:11,050 --> 00:01:12,040
These are lowercase.
16
00:01:13,600 --> 00:01:20,530
And as you remember, with the react component architecture, all we're doing is just creating and combining
17
00:01:20,530 --> 00:01:21,760
these Lego blocks together.
18
00:01:22,680 --> 00:01:29,340
And the syntax is either using declasse syntax with a capital letter.
19
00:01:29,730 --> 00:01:32,400
So now we can use the app component.
20
00:01:33,310 --> 00:01:39,550
Or if we go to something like search box or Carlist less to search box again, we won't have this year,
21
00:01:39,820 --> 00:01:42,430
but we will build them over the next couple of videos.
22
00:01:43,760 --> 00:01:47,270
You'll see that here I have a different way of building a component.
23
00:01:48,850 --> 00:01:51,770
And this uses just an arrow function.
24
00:01:52,180 --> 00:01:56,710
So remember when we first did the create react app, how we had function?
25
00:01:57,770 --> 00:02:00,440
Search box, or in our case, we had the app.
26
00:02:02,060 --> 00:02:07,730
That in here we returned some like H1.
27
00:02:10,210 --> 00:02:16,720
Well, this is the same thing, except that we're using the arrow function way, so there's two ways
28
00:02:16,720 --> 00:02:21,010
like this of creating components, the class component and functional component.
29
00:02:21,610 --> 00:02:27,100
Now, that's something that we're going to go get into a lot because it's an important concept and react
30
00:02:27,220 --> 00:02:28,750
and has some implications.
31
00:02:28,960 --> 00:02:30,830
But we're getting ahead of ourselves.
32
00:02:31,600 --> 00:02:39,040
The key here is to realize that we have for now two ways of building components, either just as functions
33
00:02:39,280 --> 00:02:46,510
like this, again, using capital naming system or using classes like this.
34
00:02:47,380 --> 00:02:51,970
And both of these, no matter what, always return some sort of.
35
00:02:52,960 --> 00:02:55,330
For us, some sort of react elements.
36
00:02:56,850 --> 00:03:02,400
Now, another thing I want to mention is the folder structure that we're going to build throughout our
37
00:03:02,400 --> 00:03:08,430
course and a good folder structure is really, really important on any project.
38
00:03:08,610 --> 00:03:14,640
As projects get bigger and bigger, as we get more and more JavaScript files, things are going to get
39
00:03:14,640 --> 00:03:15,300
complicated.
40
00:03:15,330 --> 00:03:16,730
So we need to be organized.
41
00:03:16,950 --> 00:03:23,640
So we're going to be structuring our app like a lot of professional reactive helpers are so that we
42
00:03:23,640 --> 00:03:24,800
stay organized.
43
00:03:25,470 --> 00:03:32,510
And what you'll notice here is that Equa, when creating components, likes being very explicit.
44
00:03:32,940 --> 00:03:36,480
That is if a component in this component folder.
45
00:03:38,570 --> 00:03:46,880
Has sex in it, he actually ends the file with Dot Gere sex, and you see we have that little react
46
00:03:46,880 --> 00:03:47,210
icon.
47
00:03:47,510 --> 00:03:50,930
If I go down to the bottom over here, you see that it's JavaScript react.
48
00:03:51,780 --> 00:03:57,320
So just simply means it's JavaScript, but with this syntax.
49
00:03:57,770 --> 00:04:01,850
Now, if I change this to a simple JavaScript file, it's still going to work.
50
00:04:02,030 --> 00:04:05,900
It's why App Dogs still works the way it does.
51
00:04:07,580 --> 00:04:13,400
And this is actually just personal preference, this is how Equa enjoys organizing his code, because
52
00:04:13,430 --> 00:04:19,040
this right away, I can look at it and say, oh, this is a react JavaScript or sex file.
53
00:04:19,670 --> 00:04:25,520
But at the end of the day, remember, Craig Reactant takes everything through Web pack and Bable will
54
00:04:25,520 --> 00:04:29,700
actually convert this file into a JavaScript file.
55
00:04:29,750 --> 00:04:33,430
So whether you do J sex or Jesus, it doesn't really matter.
56
00:04:33,440 --> 00:04:36,470
Maybe your editor will help you with an icon, but that's about it.
57
00:04:37,500 --> 00:04:43,080
Is just personal preference, it's all about structuring your application in a way that's easy to understand.
58
00:04:43,110 --> 00:04:44,130
That makes sense.
59
00:04:44,580 --> 00:04:50,340
Even the naming convention here is important where again, just by looking at the file, even though
60
00:04:50,340 --> 00:04:51,570
it's in the components folder.
61
00:04:52,670 --> 00:04:53,790
Right away, I know.
62
00:04:53,840 --> 00:04:57,200
Oh, yeah, this is a component and this is the style for the component.
63
00:04:58,110 --> 00:05:03,930
Now, these styles, these access files that we're going to be writing and trust me, we're going to
64
00:05:03,930 --> 00:05:10,110
be writing a lot of them at the end of the day, what happens underneath the hood is that create react
65
00:05:10,110 --> 00:05:12,420
that combines everything all together.
66
00:05:12,960 --> 00:05:21,000
And if you remember, if we go back to our test folder, when we run NPM Run built and we go to the
67
00:05:21,600 --> 00:05:24,300
file, you see over here that we have a chunk.
68
00:05:25,250 --> 00:05:30,980
Of course, with a map, this is a source map, which just helps us debug our code and production,
69
00:05:31,280 --> 00:05:36,890
but we have just one massive file and that's what we racked up does.
70
00:05:39,100 --> 00:05:45,100
Even though we'll have different access files in our work space, in our source folder, at the end
71
00:05:45,100 --> 00:05:50,400
of the day, when we released to production, all of these are going to get combined together.
72
00:05:51,380 --> 00:05:56,030
And although we're still early in the course, although we haven't really built out these components,
73
00:05:56,240 --> 00:06:02,270
I want you to start noticing these things as we build things, we're going to be thinking about how
74
00:06:02,270 --> 00:06:07,910
to stay organized instead of just having all the files in one directory, instead of not having any
75
00:06:07,910 --> 00:06:08,720
organization.
76
00:06:08,750 --> 00:06:12,890
Right from the beginning of the project, we're starting to think about how we want to architect it.
77
00:06:13,130 --> 00:06:17,990
And this is an important principle that we're going to take with us throughout the rest of the course.
78
00:06:19,330 --> 00:06:19,980
Let's keep going.
7992
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.