Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,250 --> 00:00:03,870
Building web apps with React
2
00:00:03,870 --> 00:00:07,170
is not just about composing components together
3
00:00:07,170 --> 00:00:10,020
and making sure that the logic works correctly.
4
00:00:10,020 --> 00:00:13,030
That arguably is the most important part,
5
00:00:13,030 --> 00:00:16,610
where at least it's the biggest reason for using React.
6
00:00:16,610 --> 00:00:20,960
But building React apps is also about styling those apps.
7
00:00:20,960 --> 00:00:24,530
You wanna make sure that your applications look good
8
00:00:24,530 --> 00:00:27,090
and styling is also an important part
9
00:00:27,090 --> 00:00:28,540
of building components.
10
00:00:28,540 --> 00:00:30,890
And there are different techniques
11
00:00:30,890 --> 00:00:33,170
for setting styles dynamically
12
00:00:33,170 --> 00:00:37,220
and for styling components such that other components
13
00:00:37,220 --> 00:00:41,330
are not affected by a specific component's styles.
14
00:00:41,330 --> 00:00:42,950
Therefore in this module,
15
00:00:42,950 --> 00:00:45,430
we will dive into how you can set up styles
16
00:00:45,430 --> 00:00:48,400
in a conditional or dynamic way.
17
00:00:48,400 --> 00:00:51,410
So how you, for example, can switch certain styles
18
00:00:51,410 --> 00:00:52,960
based on some conditions.
19
00:00:52,960 --> 00:00:55,960
For example, if a user enters an invalid input
20
00:00:55,960 --> 00:00:58,780
and you want to color the input field red,
21
00:00:58,780 --> 00:01:00,100
something like that.
22
00:01:00,100 --> 00:01:04,110
And then we'll dive into two popular approaches
23
00:01:04,110 --> 00:01:07,370
for scoping styles to components,
24
00:01:07,370 --> 00:01:09,000
so for setting up styles
25
00:01:09,000 --> 00:01:11,720
such that they only affect the component
26
00:01:11,720 --> 00:01:15,200
and are not added as global styles.
27
00:01:15,200 --> 00:01:17,850
We'll have a look at styled components,
28
00:01:17,850 --> 00:01:21,060
which is a third-party library, a very popular one,
29
00:01:21,060 --> 00:01:24,750
which allows us to set up pre-styled components
30
00:01:24,750 --> 00:01:27,240
with their own scoped styles.
31
00:01:27,240 --> 00:01:31,320
And we'll have a look at a concept called CSS modules.
32
00:01:31,320 --> 00:01:33,910
And you will learn what these different approaches
33
00:01:33,910 --> 00:01:36,760
are all about, how you do work with them,
34
00:01:36,760 --> 00:01:40,240
and how you could add them to your next project.
35
00:01:40,240 --> 00:01:44,240
Now, to dive into styling, we need a demo project,
36
00:01:44,240 --> 00:01:48,150
and to mix things up I got a brand new project here.
37
00:01:48,150 --> 00:01:50,790
Now I already prepared this one for you.
38
00:01:50,790 --> 00:01:53,130
It's a very simple project as you can tell.
39
00:01:53,130 --> 00:01:55,260
You can basically add course goals,
40
00:01:55,260 --> 00:01:59,180
like learn React, and that will be added to this list.
41
00:01:59,180 --> 00:02:02,280
You can also delete items from there by clicking on them.
42
00:02:02,280 --> 00:02:03,970
And that's basically it.
43
00:02:03,970 --> 00:02:07,140
This project uses only things which I covered
44
00:02:07,140 --> 00:02:09,690
over the last course sections.
45
00:02:09,690 --> 00:02:12,810
And of course, you'll find that project attached.
46
00:02:12,810 --> 00:02:14,260
You can simply download it.
47
00:02:14,260 --> 00:02:17,010
You'll find the entire project folder there.
48
00:02:17,010 --> 00:02:19,380
And then, once you downloaded it,
49
00:02:19,380 --> 00:02:21,280
simply opened a terminal,
50
00:02:21,280 --> 00:02:23,990
navigate into this project folder,
51
00:02:23,990 --> 00:02:26,960
and to run NPM install.
52
00:02:26,960 --> 00:02:30,270
This will install all the third-party packages
53
00:02:30,270 --> 00:02:33,200
which are required since the attached folder
54
00:02:33,200 --> 00:02:36,390
does not come with a node modules folder
55
00:02:36,390 --> 00:02:40,720
because that would unnecessarily bloat the attachment.
56
00:02:40,720 --> 00:02:43,620
NPM install simply installs all packages
57
00:02:43,620 --> 00:02:46,580
and recreates the node modules folder.
58
00:02:46,580 --> 00:02:49,230
And thereafter you have this project here,
59
00:02:49,230 --> 00:02:51,550
which you can start with NPM start
60
00:02:51,550 --> 00:02:53,300
to start the development server
61
00:02:53,300 --> 00:02:55,810
and play around with the project.
62
00:02:55,810 --> 00:02:59,380
Of course also feel free to dive into the source files
63
00:02:59,380 --> 00:03:02,360
to see how this project is structured.
64
00:03:02,360 --> 00:03:06,260
As I already said, this project only uses features
65
00:03:06,260 --> 00:03:09,670
which you already know, like useState
66
00:03:09,670 --> 00:03:13,140
and the functions which are bound to events.
67
00:03:13,140 --> 00:03:14,710
And we're then, for example,
68
00:03:14,710 --> 00:03:19,580
also outputting lists of data dynamically by calling map.
69
00:03:19,580 --> 00:03:22,410
So that's all something you already saw
70
00:03:22,410 --> 00:03:24,830
and there is nothing new there.
71
00:03:24,830 --> 00:03:28,990
This however will be our starting project for this section
72
00:03:28,990 --> 00:03:32,300
where we are now going to dive into styling.
73
00:03:32,300 --> 00:03:35,080
So definitely explored the source code files.
74
00:03:35,080 --> 00:03:37,150
So did you understand this project
75
00:03:37,150 --> 00:03:38,900
and thereafter we're going to have a look
76
00:03:38,900 --> 00:03:41,943
at the different styling options React gives us.
6045
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.