1
00:00:00,290 --> 00:00:00,740
All right.

2
00:00:00,740 --> 00:00:06,080
And once we're done with our page now let's switch gears and let's talk about styled components.

3
00:00:06,260 --> 00:00:09,770
Effectively, it's my preferred way of styling.

4
00:00:09,770 --> 00:00:18,620
My applications and styled components go under the umbrella of CSS in JS and a few reasons why I like

5
00:00:18,620 --> 00:00:20,250
styled components so much.

6
00:00:20,270 --> 00:00:26,630
For one, I can have the styles and logic in the same file.

7
00:00:26,780 --> 00:00:30,770
In my opinion, it just saves me from bouncing around my project.

8
00:00:30,800 --> 00:00:36,920
I clearly know that everything is going to be in that one file, whether that is the actual component

9
00:00:36,920 --> 00:00:39,110
logic or the component style.

10
00:00:39,110 --> 00:00:43,110
So if I ever want to change something, I just need to look for that one file.

11
00:00:43,130 --> 00:00:46,370
Again, that's just my personal preference.

12
00:00:46,370 --> 00:00:47,630
And second.

13
00:00:48,190 --> 00:00:55,270
What I really enjoy is that styled components create an extra unique class.

14
00:00:55,970 --> 00:00:59,790
And therefore I don't have to be original with my class names.

15
00:00:59,810 --> 00:01:07,340
So let's say instead of the component, if I use a class of hero, unless it's some kind of global class.

16
00:01:08,520 --> 00:01:15,210
If it's only used in that one styled component I can use in any of the other components.

17
00:01:15,760 --> 00:01:22,330
And there's going to be no name collision, so I don't have to come up with a specific class of, I

18
00:01:22,330 --> 00:01:25,900
don't know, a hero container.

19
00:01:26,140 --> 00:01:32,320
I can simply say container and use the same class in all of my components and you'll see what I'm talking

20
00:01:32,320 --> 00:01:33,910
about a little bit later.

21
00:01:33,940 --> 00:01:39,040
Now we can also apply JavaScript logic in the styled components, but.

22
00:01:39,760 --> 00:01:40,690
In this project.

23
00:01:40,690 --> 00:01:41,710
We won't do that.

24
00:01:41,830 --> 00:01:50,080
And if you want to find out more info, here's the URL to their docs and I also have the course if you're

25
00:01:50,080 --> 00:01:50,710
interested.

26
00:01:50,740 --> 00:01:56,410
A three hour course on styled components where we just cover a little bit more complex setups.

27
00:01:56,440 --> 00:02:03,970
Now if you want to install styled components, just type NPM install and then the command and this is

28
00:02:03,970 --> 00:02:08,949
going to be the version we're going to use in this project and effectively this is going to be the setup

29
00:02:08,979 --> 00:02:14,800
you want to import styled from styled components and essentially create the element.

30
00:02:15,450 --> 00:02:18,870
And in order to create the element you'll go with styled.

31
00:02:18,870 --> 00:02:25,020
So the import from styled components dot and then the element, whether that is a button, whether that

32
00:02:25,020 --> 00:02:28,560
is a div, whether that is a section, it doesn't really matter.

33
00:02:28,560 --> 00:02:35,310
And then we have this interesting syntax of tag template literals, which as a side note, are not really

34
00:02:35,310 --> 00:02:37,230
unique to styled components.

35
00:02:37,230 --> 00:02:44,670
It's a JavaScript thing and essentially in here you just type all the styles like you normally would

36
00:02:45,030 --> 00:02:47,790
if you're typing in the CSS file.

37
00:02:47,790 --> 00:02:53,220
So let's try it out and I'm going to do that in landing one because that is going to be the first page

38
00:02:53,220 --> 00:02:54,990
we effectively complete.

39
00:02:54,990 --> 00:02:57,960
So let's start here by importing style.

40
00:02:57,990 --> 00:03:05,040
Keep in mind that of course it's a default export from the library, so technically you can name this

41
00:03:05,040 --> 00:03:05,470
banana.

42
00:03:05,470 --> 00:03:10,170
It doesn't really matter and I'm not going to be particularly original.

43
00:03:10,290 --> 00:03:13,320
I'm going to create a button because why not?

44
00:03:13,350 --> 00:03:17,220
Pretty much in every tutorial there is a button.

45
00:03:17,220 --> 00:03:20,490
So why don't we create here one as well.

46
00:03:20,580 --> 00:03:27,270
And essentially we want to go with style, like I said, and then whichever element we want to set up.

47
00:03:27,270 --> 00:03:34,350
So if you want to set up a button, just type here styled dot button, then tag template literals.

48
00:03:34,350 --> 00:03:40,440
And I don't know, let's go with a massive font size 1.5 rems.

49
00:03:41,430 --> 00:03:43,500
And let's go with background.

50
00:03:43,530 --> 00:03:45,660
Let's set it equal to red.

51
00:03:45,750 --> 00:03:48,030
And color is going to be white.

52
00:03:48,060 --> 00:03:54,090
Now, before we render the style button, I just want to mention that if you're working with styled

53
00:03:54,090 --> 00:03:58,170
components, a very useful extension is this one.

54
00:03:58,200 --> 00:04:00,330
Let me open up my extensions.

55
00:04:01,340 --> 00:04:03,050
You are looking for this one.

56
00:04:03,080 --> 00:04:05,510
The VS code styled components.

57
00:04:05,510 --> 00:04:12,340
Probably as you're typing, everything is orange just like in the Readme over here.

58
00:04:12,350 --> 00:04:16,990
So if you want the syntax highlighting, just install this extension.

59
00:04:17,000 --> 00:04:19,850
Now let's navigate back to the landing one again.

60
00:04:19,850 --> 00:04:24,050
We'll do the same thing where we're going to wrap it in a div.

61
00:04:24,740 --> 00:04:29,570
And then right underneath the lining one, let's display our button.

62
00:04:30,020 --> 00:04:35,790
Let's go over here and let's say styled BTN, just like regular button.

63
00:04:35,810 --> 00:04:40,770
We need to provide some kind of text and I'm just going to say styled BTN.

64
00:04:40,790 --> 00:04:42,380
Let's save that and check it out.

65
00:04:42,410 --> 00:04:44,040
Now of course we have our button.

66
00:04:44,060 --> 00:04:46,490
Now I do want to showcase the unique class.

67
00:04:47,140 --> 00:04:48,670
So let me navigate.

68
00:04:49,720 --> 00:04:55,660
So the localhost 517 three inches the big browser window and essentially notice this element.

69
00:04:56,020 --> 00:04:56,830
Check it out.

70
00:04:56,830 --> 00:05:00,160
So this is my button and this is the unique class.

71
00:05:00,160 --> 00:05:06,250
And with the help of this unique class, we don't have to be original with the class names we use inside

72
00:05:06,250 --> 00:05:10,930
of the styled component, something you'll see in the following video.