Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,090 --> 00:00:04,050
So, now, in the last lecture we learned
2
00:00:04,050 --> 00:00:06,960
about JSX and how it looks like under the hood,
3
00:00:06,960 --> 00:00:10,560
and why we therefore could add all these React imports
4
00:00:10,560 --> 00:00:13,373
to all these files, which hold JSX code.
5
00:00:14,450 --> 00:00:17,890
Speaking of the files, let's talk about organizing them.
6
00:00:17,890 --> 00:00:20,030
Here, we only got a couple of components
7
00:00:20,030 --> 00:00:23,030
and therefore we can store them like this,
8
00:00:23,030 --> 00:00:25,710
but as your project grows and as you have more
9
00:00:25,710 --> 00:00:27,980
and more components you might want
10
00:00:27,980 --> 00:00:30,290
to organize them into sub folders
11
00:00:30,290 --> 00:00:33,743
and not just throw them all into one components folder.
12
00:00:34,600 --> 00:00:36,020
And, indeed, that is something
13
00:00:36,020 --> 00:00:38,040
we can already get started with.
14
00:00:38,040 --> 00:00:42,800
Here, we could argue that we have some general UI components
15
00:00:42,800 --> 00:00:44,980
some general user interface elements,
16
00:00:44,980 --> 00:00:48,340
which are not tied to a specific feature of the app.
17
00:00:48,340 --> 00:00:51,590
And then, we got some features specific components,
18
00:00:51,590 --> 00:00:53,580
like these components, which are dealing
19
00:00:53,580 --> 00:00:57,243
with rendering expenses and expense data.
20
00:00:58,240 --> 00:01:00,880
And, therefore, in the components sub folder,
21
00:01:00,880 --> 00:01:05,630
we could create an Expenses sub folder,
22
00:01:05,630 --> 00:01:10,630
and next to that a UI sub folder
23
00:01:11,220 --> 00:01:14,513
for general user interface elements.
24
00:01:15,730 --> 00:01:17,500
And we could move the card files
25
00:01:17,500 --> 00:01:21,664
into the UI folder and the Expenses, ExpenseItem,
26
00:01:21,664 --> 00:01:24,783
and ExpenseDate files into the Expenses folder.
27
00:01:26,100 --> 00:01:27,630
Now, you just want to make sure
28
00:01:27,630 --> 00:01:31,550
that you update all your imports like in Expenses.js,
29
00:01:31,550 --> 00:01:34,410
where we import card, we now, first of all,
30
00:01:34,410 --> 00:01:38,670
need to go up one level with two dots and then a slash
31
00:01:38,670 --> 00:01:40,870
and then dive into the UI folder
32
00:01:40,870 --> 00:01:43,503
and import card, the card file.
33
00:01:44,810 --> 00:01:47,500
We need to go up one level because Expenses is now
34
00:01:47,500 --> 00:01:49,770
in the Expenses folder, and we need to get
35
00:01:49,770 --> 00:01:53,240
out of that folder into the next folder above it
36
00:01:53,240 --> 00:01:57,380
to then dive into the UI folder, which is a sibling folder
37
00:01:57,380 --> 00:02:00,233
to Expenses, to the Expenses folder, I mean.
38
00:02:01,430 --> 00:02:03,580
We don't need to update the other imports
39
00:02:03,580 --> 00:02:05,290
because these files are still in
40
00:02:05,290 --> 00:02:08,062
the same folder as Expenses.js.
41
00:02:08,900 --> 00:02:11,320
For ExpenseItem, we also need to update
42
00:02:11,320 --> 00:02:14,270
the card import though, go up one level,
43
00:02:14,270 --> 00:02:17,423
dive into the UI folder and then import card.
44
00:02:18,510 --> 00:02:22,310
And in App.js, we no longer import Expenses
45
00:02:22,310 --> 00:02:26,420
from components' Expenses, instead we dive into components
46
00:02:26,420 --> 00:02:28,300
then into the Expenses folder
47
00:02:28,300 --> 00:02:30,430
and there it's the Expenses file,
48
00:02:30,430 --> 00:02:32,650
which you want to import from.
49
00:02:32,650 --> 00:02:34,490
So, now, we can adjust these imports.
50
00:02:34,490 --> 00:02:39,323
And if you did that, this again, all works if you load it.
51
00:02:40,420 --> 00:02:43,300
And we're really just doing this to organize our files,
52
00:02:43,300 --> 00:02:45,400
and to keep our components organized,
53
00:02:45,400 --> 00:02:49,460
and to make sure that they're not all in one big folder.
54
00:02:49,460 --> 00:02:52,400
Ultimately, it's up to you how you want to organize them.
55
00:02:52,400 --> 00:02:54,280
And, of course you, should just organize them,
56
00:02:54,280 --> 00:02:57,450
such that you and any team members you might be working
57
00:02:57,450 --> 00:03:00,540
with are comfortable working with these files.
58
00:03:00,540 --> 00:03:03,033
That's the most important thing which matters.
4762
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.