Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,090 --> 00:00:06,780
OK, so I know those last few sections were really theoretical, but I'm glad you stuck in there because
2
00:00:06,780 --> 00:00:08,550
now comes the exciting part.
3
00:00:08,730 --> 00:00:10,700
We're going to build our e-commerce platform.
4
00:00:11,370 --> 00:00:14,070
So first, let's use, create, react at.
5
00:00:15,210 --> 00:00:17,850
To build out our project for us.
6
00:00:18,840 --> 00:00:21,240
So I'm going to call it Crown Clothing, actually.
7
00:00:23,200 --> 00:00:27,910
Now, this is going to take a little time, so we just have to wait for cracked up to finish setting
8
00:00:27,910 --> 00:00:29,410
up our project.
9
00:00:32,100 --> 00:00:32,549
Awesome.
10
00:00:33,090 --> 00:00:39,390
So what we're going to do is we're going to seed into our new project and let's open it up.
11
00:00:41,640 --> 00:00:46,680
Now, just like last time, it's given us a couple of files that we don't actually need.
12
00:00:47,640 --> 00:00:54,090
So we don't need any of this service worker code inside of index as.
13
00:00:55,190 --> 00:00:56,290
So let's just get rid of it.
14
00:00:57,450 --> 00:01:06,960
We also don't need any of this stuff inside of our Abduh as file, including this class name.
15
00:01:08,380 --> 00:01:11,650
And instead, I'm just going to write Hello, World.
16
00:01:12,790 --> 00:01:14,830
And we also don't need this logo.
17
00:01:16,790 --> 00:01:20,620
Now, in access, we don't need any of this CSI, so let's get rid of it.
18
00:01:21,630 --> 00:01:23,080
And there we go.
19
00:01:23,160 --> 00:01:27,930
OK, now our project is pretty much set up for us to start working with.
20
00:01:29,210 --> 00:01:34,260
So what we're going to do is we're going to evaluate what it is that we need to build.
21
00:01:35,210 --> 00:01:42,470
So when we look at this, this is the home page and on the home page, there is a header component,
22
00:01:42,770 --> 00:01:44,510
which we can build after.
23
00:01:45,590 --> 00:01:53,510
But looking at just the content of the page, there are these five menu item components, right?
24
00:01:53,990 --> 00:01:57,070
And these three look similar and these two look similar.
25
00:01:57,230 --> 00:02:03,040
But if we look closely watched, you realize that all five of them are the same component.
26
00:02:03,050 --> 00:02:06,640
The only difference is that these ones are bigger than these ones.
27
00:02:07,800 --> 00:02:11,039
So we definitely have to build this menu item component.
28
00:02:12,520 --> 00:02:21,250
And there's also a component that's holding these five elements together, so there is like a directory
29
00:02:21,280 --> 00:02:23,040
menu component we've got to build as well.
30
00:02:24,280 --> 00:02:33,670
But when we look at this component, we'll see that there is outside container of some kind and an inside
31
00:02:33,670 --> 00:02:37,090
container that holds a title and a subtitle, right.
32
00:02:37,090 --> 00:02:39,190
So it's a div with a div.
33
00:02:39,550 --> 00:02:44,260
And then there are two text HTML elements inside.
34
00:02:44,770 --> 00:02:46,030
So let's build that first.
35
00:02:46,970 --> 00:02:47,360
Now.
36
00:02:48,620 --> 00:02:56,240
What I'm going to do is I am going to make a new file called Home Page Component Dot Jassi.
37
00:02:57,590 --> 00:03:00,050
We're going to import react from react.
38
00:03:01,540 --> 00:03:08,380
And we're going to make it a contest homepage, which is going to be a functional component because
39
00:03:08,380 --> 00:03:14,730
we don't really need any life-cycle methods at this point, nor do we need to store any state.
40
00:03:15,550 --> 00:03:23,890
So let's add in our first outside container, which will be our homepage.
41
00:03:24,950 --> 00:03:31,880
And then inside will be those two components that we're talking about, the container for the menu and
42
00:03:31,880 --> 00:03:33,170
then the actual menu items.
43
00:03:34,720 --> 00:03:41,020
So we will move them into their own files after, but let's just put it down so we can see it first
44
00:03:41,560 --> 00:03:44,710
and this I'm going to call directory menu.
45
00:03:46,640 --> 00:03:49,670
And then the inside d'Hiv, I'm going to call.
46
00:03:51,600 --> 00:03:52,620
My menu item.
47
00:03:54,870 --> 00:03:56,190
Inside of our menu item.
48
00:03:57,710 --> 00:04:02,000
We know that there's this content container, right, so let's just make another div.
49
00:04:03,330 --> 00:04:05,190
And give it the last name.
50
00:04:06,870 --> 00:04:13,290
Content and then inside of our content, we want an H1.
51
00:04:14,310 --> 00:04:15,660
That is our title.
52
00:04:18,980 --> 00:04:21,800
And here we just want to put the text hats.
53
00:04:23,630 --> 00:04:25,850
And then we also want.
54
00:04:27,090 --> 00:04:30,480
A span right after that will be our subtitle.
55
00:04:31,600 --> 00:04:34,690
With the text shop now.
56
00:04:38,480 --> 00:04:45,470
Now, let us copy this five times just for now, will end up making the components later.
57
00:04:46,420 --> 00:04:50,680
And we are going to put jackets.
58
00:04:54,520 --> 00:04:57,790
And then this will be women's and this will be men's.
59
00:04:59,410 --> 00:05:00,550
Now, if we save this.
60
00:05:02,770 --> 00:05:07,620
We have to also remember to export our new function outside, right?
61
00:05:07,650 --> 00:05:09,580
So let's just export as the default.
62
00:05:11,100 --> 00:05:15,360
Because we're probably not going to export anything else from our home page component file.
63
00:05:16,360 --> 00:05:19,030
Let's import in homepage.
64
00:05:24,090 --> 00:05:24,510
Homepage.
65
00:05:25,900 --> 00:05:32,650
I think it's Capital One, yes, it is OK now, instead of hello, world, let us render.
66
00:05:33,900 --> 00:05:35,520
Our home page component.
67
00:05:36,620 --> 00:05:39,140
OK, so we have to remember to run our project.
68
00:05:40,730 --> 00:05:41,360
And.
69
00:05:43,730 --> 00:05:44,960
Let's see now.
70
00:05:46,390 --> 00:05:47,530
OK, there we go.
71
00:05:47,950 --> 00:05:53,410
So this is just our directory without any of the styling.
72
00:05:54,500 --> 00:06:02,480
So for the styling of this project, we're actually going to use something called SAS, and SAS is just
73
00:06:02,750 --> 00:06:05,800
a upgraded version of success.
74
00:06:05,810 --> 00:06:12,650
So it's a it is a different language and it has a different file type called SAS, but it reads very
75
00:06:12,650 --> 00:06:16,220
similar to success, but it has a lot of quality of life improvements.
76
00:06:16,220 --> 00:06:17,700
And I'm going to show you what it looks like.
77
00:06:18,440 --> 00:06:23,030
So in order for us to include it, we first have to add.
78
00:06:24,650 --> 00:06:32,420
Noad sace to our project now the great thing about Create React is that it actually comes with the configuration
79
00:06:32,420 --> 00:06:34,520
for SACE right out the gate.
80
00:06:34,530 --> 00:06:41,360
As long as we include this package, create react app will actually configure web hack and be able to
81
00:06:41,370 --> 00:06:46,570
convert our SAS files into X Files because the browser can only read X Files.
82
00:06:46,580 --> 00:06:46,820
Right.
83
00:06:47,210 --> 00:06:53,030
So this is actually really convenient and now that that's included, we have to remember to restart
84
00:06:53,030 --> 00:06:54,440
our server again.
85
00:06:57,030 --> 00:07:03,810
OK, now this might happen, you might see this bug, all this is saying is that our version of babble
86
00:07:03,810 --> 00:07:12,180
just that got installed when, which is probably a dependency of our notes noses is now different from
87
00:07:12,180 --> 00:07:14,860
what our Jaan file is expecting.
88
00:07:14,880 --> 00:07:18,200
So what our initial package was expecting is different now.
89
00:07:18,660 --> 00:07:20,670
So we just got to follow these instructions.
90
00:07:20,970 --> 00:07:21,190
Right.
91
00:07:21,240 --> 00:07:23,840
And we'll just follow the yarn instructions because we're using yarn.
92
00:07:24,630 --> 00:07:27,600
So let's first delete the yarn lock.
93
00:07:29,660 --> 00:07:31,730
So let's delete, you're in lock.
94
00:07:32,820 --> 00:07:33,900
Dhanda Lokke.
95
00:07:35,090 --> 00:07:39,620
And then let's delete the node modules folder.
96
00:07:42,750 --> 00:07:47,790
Now, here it says the removeable just from our package, Jason, but we actually won't have that seen
97
00:07:47,790 --> 00:07:54,330
because it's something that create racked up hides from us because those are all dependencies that it's
98
00:07:54,330 --> 00:07:54,800
managing.
99
00:07:55,380 --> 00:07:56,930
So we won't do step three.
100
00:07:57,150 --> 00:08:06,630
And instead we are going to run yarn to install all of our new packages all over again.
101
00:08:07,020 --> 00:08:11,160
And hopefully this time all of the versions will match appropriately.
102
00:08:12,170 --> 00:08:15,760
So there is a lot of waiting, there's definitely always so much waiting.
103
00:08:16,760 --> 00:08:18,500
Come on, you're almost there.
104
00:08:18,530 --> 00:08:19,050
Awesome.
105
00:08:19,070 --> 00:08:21,660
OK, so now if we run, you can't start again.
106
00:08:22,450 --> 00:08:28,600
OK, so now that our project is loaded, let's just include in that sass file.
107
00:08:28,610 --> 00:08:29,810
So I will show you.
108
00:08:30,730 --> 00:08:38,549
What are Sasko is going to look like, so we're going to make another file called Home Page Dot Styles
109
00:08:38,559 --> 00:08:39,520
Dos ASP.NET.
110
00:08:41,260 --> 00:08:42,700
And we're going to paste our Sassan.
111
00:08:43,789 --> 00:08:50,480
Now, it actually looks very similar to see if you've noticed, right, this is pretty much just a classic
112
00:08:50,480 --> 00:08:55,070
selecter that has some styles in it and then another class selecter with some styles in it.
113
00:08:55,640 --> 00:09:03,980
But inside of this one will see that there are other things inside other than just our typical classes.
114
00:09:04,130 --> 00:09:06,380
Right, are our typical style.
115
00:09:07,310 --> 00:09:13,760
So here, whenever you see this Ambersons symbol, this ampersand pretty much means this class that
116
00:09:13,760 --> 00:09:19,480
is above it, and then it wants to append this additional selector, right, this first child.
117
00:09:19,910 --> 00:09:24,130
So it's saying menu item, first child gets this style.
118
00:09:24,410 --> 00:09:29,660
So anywhere where a menu item is, the first child is going to get this style.
119
00:09:29,780 --> 00:09:30,750
Same with this one.
120
00:09:30,830 --> 00:09:36,860
It's the equivalent of writing a menu item and then first child.
121
00:09:38,390 --> 00:09:45,140
In our regular season, right, but Sash just lets us test it so that it's easier to read, and then
122
00:09:45,140 --> 00:09:48,430
you'll see this content class name with its own styling as well.
123
00:09:48,470 --> 00:09:48,820
Right.
124
00:09:49,370 --> 00:09:56,840
If you hover over this, you'll see that what it's saying is that any class of content that sits between
125
00:09:56,840 --> 00:10:00,910
any element with the class of menu item will get these styles in it.
126
00:10:01,520 --> 00:10:08,330
So rather than writing, normally what we would do would be menu item and then content like this.
127
00:10:08,360 --> 00:10:08,720
Right.
128
00:10:10,580 --> 00:10:18,260
Instead, what we're going to do is we are going to just write it nested inside and Titan is going to
129
00:10:18,260 --> 00:10:18,950
be the exact same.
130
00:10:18,980 --> 00:10:25,430
So any element with the class title inside, any element with the class content inside, any element
131
00:10:25,430 --> 00:10:26,780
with the class menu item.
132
00:10:27,200 --> 00:10:27,560
Right.
133
00:10:27,830 --> 00:10:29,960
Is going to get these styles.
134
00:10:31,030 --> 00:10:37,750
And that's what's great about SACE is that it just lets us not have to write a bunch of CSFs selectors
135
00:10:37,750 --> 00:10:39,550
that look unconnected to each other.
136
00:10:39,580 --> 00:10:39,890
Right.
137
00:10:40,360 --> 00:10:46,570
We can just nest them all inside of the block of their relevant parent child relationship.
138
00:10:48,130 --> 00:10:52,390
And you'll notice that we did the same thing in our HTML for our home page, right?
139
00:10:52,630 --> 00:10:57,580
We have this menu item that has a content right child.
140
00:10:57,580 --> 00:10:59,890
And then inside of that content is the title and subtitle.
141
00:11:00,280 --> 00:11:01,720
Just like our sassier.
142
00:11:01,750 --> 00:11:06,390
Our menu item has a content child, which has a title and a subtitle inside of it.
143
00:11:07,590 --> 00:11:13,560
Now we just have to make sure to import our new source file into this file.
144
00:11:14,930 --> 00:11:15,710
And.
145
00:11:18,130 --> 00:11:19,090
If we save.
146
00:11:20,390 --> 00:11:23,810
If we go now to our project.
147
00:11:24,870 --> 00:11:30,310
We'll see that it looks very much closer without the images right to this now.
148
00:11:31,200 --> 00:11:38,400
Now, in the next lesson, we are going to start moving these components into their own folders, as
149
00:11:38,400 --> 00:11:42,120
well as exploring what our final folder structure is going to look like.
150
00:11:43,230 --> 00:11:47,550
Now, our project is actually not on GitHub yet, so let's do that.
151
00:11:48,500 --> 00:11:49,770
Let's go back to our browser.
152
00:11:50,480 --> 00:11:55,040
Let's go to GitHub and let's create a new repository.
153
00:11:56,210 --> 00:12:00,020
I'm going to name my repository Crown Clothing after our project.
154
00:12:01,210 --> 00:12:06,430
And then we're going to create it and copy this key that they give us.
155
00:12:07,370 --> 00:12:11,810
Then we got to go back to our terminal, into our project and right.
156
00:12:12,260 --> 00:12:16,810
Get remote, add origin and then paste in that code.
157
00:12:17,480 --> 00:12:22,490
And now we've linked our project to that remote that we just created on GitHub.
158
00:12:23,480 --> 00:12:27,340
And now if we check the status with git status, we'll see.
159
00:12:27,350 --> 00:12:32,080
These are the modified files and these are the new files that we added.
160
00:12:32,630 --> 00:12:38,970
So we want to add them all with get add a two hour kimmett and then we're going to write get Kimmet
161
00:12:38,970 --> 00:12:45,410
Dash M for message and we're going to say in our commit message something that is explicit about what
162
00:12:45,410 --> 00:12:46,520
this Kimmet contains.
163
00:12:46,880 --> 00:12:55,970
So I'm going to say created project with Create React app and added files for Home Page.
164
00:12:58,040 --> 00:13:04,070
Now I'm going to get push all our coming to origin master.
165
00:13:06,410 --> 00:13:08,240
And now if we check.
166
00:13:09,160 --> 00:13:10,720
And we refresh.
167
00:13:13,320 --> 00:13:18,200
We'll see all our code up awesome now that we have a repository set up.
168
00:13:18,570 --> 00:13:19,320
Let's move on.
15254
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.