1
00:00:00,360 --> 00:00:00,810
Beautiful.

2
00:00:01,050 --> 00:00:03,060
So we have our basic return.

3
00:00:03,570 --> 00:00:04,830
Everything looks great.

4
00:00:05,160 --> 00:00:12,240
Now we just need to apply some styles and technically you can say, OK, so we can go to mix yes or

5
00:00:12,240 --> 00:00:16,140
whatever the easiest file and then just add all the styles.

6
00:00:16,470 --> 00:00:21,360
But as our project grows bigger, it's going to be very hard to sustain that.

7
00:00:21,690 --> 00:00:27,330
It will have to come up with unique class names and we'll have to manage a thousand lines of code of

8
00:00:27,330 --> 00:00:28,530
success in one file.

9
00:00:29,010 --> 00:00:31,620
And essentially, it just becomes a pain.

10
00:00:31,830 --> 00:00:39,060
So not solved that I use Schlesinger's more specifically styled components.

11
00:00:39,480 --> 00:00:45,090
And the reason why I like styled components for one, I can have the logic and story the same component.

12
00:00:45,600 --> 00:00:51,600
Now, we're not going to do that in this project simply because I wanted to transfer the styles from

13
00:00:51,600 --> 00:00:54,690
my final project to the one that we're working on.

14
00:00:55,500 --> 00:01:00,990
But normally that is my setup, where everything is effectively in one file using style components.

15
00:01:01,020 --> 00:01:05,010
Also allows me to have no name collisions, and I'll show you, how's that possible?

16
00:01:05,370 --> 00:01:09,210
And if I want, I can apply some JavaScript logic as well.

17
00:01:09,690 --> 00:01:15,600
Now this is just basic setup of style components that we're going to use in this project.

18
00:01:16,140 --> 00:01:21,780
So if you want to find out more info, you can always navigate to styled components docs.

19
00:01:22,230 --> 00:01:29,030
And I also have a three hour course where I cover way more interesting things about style components.

20
00:01:29,040 --> 00:01:32,670
So if you're interested in style commands, you can definitely check it out.

21
00:01:33,150 --> 00:01:38,670
Now, in order to get up and running with styled components, first of all we need to do is install

22
00:01:38,670 --> 00:01:38,820
them.

23
00:01:39,270 --> 00:01:40,500
This is going to be to come out.

24
00:01:40,860 --> 00:01:42,690
So let me open up my terminal.

25
00:01:43,110 --> 00:01:44,070
I'll stop it here.

26
00:01:44,550 --> 00:01:45,510
I'll break the command.

27
00:01:46,230 --> 00:01:52,650
And now we're installing stealth components and the way we set up styled components or import style,

28
00:01:52,650 --> 00:01:54,310
which is a default import.

29
00:01:54,330 --> 00:02:00,380
So technically, you can name it differently, but a common convention is calling the styled.

30
00:02:01,080 --> 00:02:07,290
And then we come up with a name that the style component is going to have and would set it equal to

31
00:02:07,290 --> 00:02:10,830
styled and whatever h html element.

32
00:02:11,460 --> 00:02:14,880
And I'll show you that in a moment in the abstract.

33
00:02:15,270 --> 00:02:17,880
Now I want to spin up back my application.

34
00:02:18,030 --> 00:02:20,190
So we're going to go with npm start.

35
00:02:20,460 --> 00:02:21,570
I'll close the terminal.

36
00:02:22,840 --> 00:02:26,080
And effectively, let's go back to Bob here.

37
00:02:26,740 --> 00:02:29,260
Let's go for import styled.

38
00:02:30,300 --> 00:02:37,710
From styled components, so online, let's set up a button, for example, so come up with the name

39
00:02:37,710 --> 00:02:39,310
of the component you're going to create.

40
00:02:39,330 --> 00:02:41,970
So notice how we don't need to use react.

41
00:02:41,970 --> 00:02:46,560
In this case, we will right away just use standard components and under the hood, it's going to set

42
00:02:46,560 --> 00:02:47,940
it up as a react component.

43
00:02:48,420 --> 00:02:55,080
When we need to go with the style, that's the import dot and then whatever HDMI element you want to

44
00:02:55,080 --> 00:02:55,320
use.

45
00:02:55,680 --> 00:02:57,930
So if I want to use Div, I go with this.

46
00:02:58,020 --> 00:03:03,960
If I want to go with section, I go with S. But since I named it already button, it kind of makes sense.

47
00:03:04,390 --> 00:03:07,470
I'm going to go with HDMI element by the name of one.

48
00:03:07,890 --> 00:03:12,920
And then we go with that template literals which are not unique to your style components.

49
00:03:12,930 --> 00:03:17,160
If you ever use Gatsby., for example, you know that they use that to set up the queries.

50
00:03:17,160 --> 00:03:21,630
So this is a Josko feature and the way styled components implement that.

51
00:03:21,990 --> 00:03:26,430
Whatever style we replace here will be applied to this button.

52
00:03:26,640 --> 00:03:31,860
So for example, if I'm going to go here with background and we're going to go with background read

53
00:03:32,080 --> 00:03:33,870
pretty typical example color.

54
00:03:34,380 --> 00:03:41,400
Let's just set it up as a white font size and then want R.M. if I'll go here, and in my case, I'm

55
00:03:41,400 --> 00:03:42,990
going to place it above the heading one.

56
00:03:43,380 --> 00:03:51,570
And if I were under my button component and let's just say here, click me what you'll notice that there

57
00:03:51,570 --> 00:03:57,660
is a button more specifically with a red background and color of white.

58
00:03:57,960 --> 00:04:04,770
Now, before we continue, let me just mention that I'm also using the extension for styled components,

59
00:04:04,770 --> 00:04:12,840
which allows me to see the excess in different colors basically values out a different color than the

60
00:04:12,840 --> 00:04:13,620
actual property.

61
00:04:13,920 --> 00:04:20,160
And also, if there's some kind of bug and actually right away yells at me now the extension you're

62
00:04:20,160 --> 00:04:21,149
looking for is this one.

63
00:04:21,630 --> 00:04:26,880
So let's go over here and you're looking for this VSCO styled component.

64
00:04:26,970 --> 00:04:32,690
That's the one that adds the syntax highlighting as well as yells at you when you're out bugs.

65
00:04:32,940 --> 00:04:39,810
So if you do decide to use styled components meaning in your own project and all that, I highly suggest

66
00:04:39,810 --> 00:04:42,090
installing the app extension as well.

67
00:04:42,610 --> 00:04:46,350
And let me just take a look at my read me what I wanted to cover.

68
00:04:46,350 --> 00:04:50,910
So there's no name collisions since you need class and let me showcase that.

69
00:04:51,210 --> 00:04:55,680
So I'm going to navigate to a bigger screen and we're going to look for localhost three thousand.

70
00:04:56,590 --> 00:05:01,510
And if I do, the inspect, which you'll notice here is the class.

71
00:05:01,780 --> 00:05:03,700
But notice this unique class name.

72
00:05:04,300 --> 00:05:12,010
Now what this allows us is to pretty much use the style components all throughout our project, and

73
00:05:12,010 --> 00:05:15,160
we don't need to worry about the classes that we have.

74
00:05:16,120 --> 00:05:22,360
What's really cool is that it also applies to styled components when we apply to entire component.

75
00:05:22,750 --> 00:05:29,920
So at the moment, we're looking at one flavor where basically we're creating right away a style component

76
00:05:29,920 --> 00:05:32,470
and we're just out of styles, but also what we can do.

77
00:05:32,830 --> 00:05:39,010
We can wrap our react component in the style component, which I'm going to show you in a second.

78
00:05:39,370 --> 00:05:43,570
And by doing so, we can actually use classes inside of the style component.

79
00:05:44,320 --> 00:05:50,650
And then we still don't have these name collisions because the parent one, the parent style component,

80
00:05:51,010 --> 00:05:52,510
will have that unique class.

81
00:05:52,570 --> 00:05:57,820
So if I'm going to create another style component here, so let me copy and paste and I'll say here,

82
00:05:57,820 --> 00:06:02,200
button second man, maybe this one will be blue.

83
00:06:03,830 --> 00:06:06,930
And let me copy and paste, I just say button.

84
00:06:07,170 --> 00:06:12,660
Second, what you'll notice once you navigate to the big screen that the classes are not the same,

85
00:06:13,170 --> 00:06:21,390
which again just allows us to not be that original with our classes inside of the components, the stored

86
00:06:21,390 --> 00:06:21,780
components.

87
00:06:21,810 --> 00:06:28,050
Again, this is pretty much a basic or you styled components in the next video, I'll show you how we

88
00:06:28,050 --> 00:06:31,350
can wrap the entire React component.

89
00:06:31,650 --> 00:06:34,710
And if you want to find out more info about styled components.

90
00:06:35,580 --> 00:06:41,420
Basically, if you want to use them for your own project, provide a good starting point is components

91
00:06:42,090 --> 00:06:44,700
as well as the course that I mentioned previously.