1 00:00:01,140 --> 00:00:04,410 ‫Now before we really start building the project 2 00:00:04,410 --> 00:00:07,440 ‫let's first learn about the way in which 3 00:00:07,440 --> 00:00:10,020 ‫we are going to style the application, 4 00:00:10,020 --> 00:00:13,953 ‫which is by using a library called Styled Components. 5 00:00:15,510 --> 00:00:20,430 ‫So Styled Components essentially allow us to write CSS 6 00:00:20,430 --> 00:00:24,360 ‫right inside our JavaScript component files. 7 00:00:24,360 --> 00:00:29,280 ‫And the way it works is that we take a regular HTML element 8 00:00:29,280 --> 00:00:32,250 ‫and then using the styled function 9 00:00:32,250 --> 00:00:35,190 ‫we create a brand new React component 10 00:00:35,190 --> 00:00:38,430 ‫with some CSS styles applied to it. 11 00:00:38,430 --> 00:00:42,720 ‫And we can then use and reuse that new component 12 00:00:42,720 --> 00:00:47,010 ‫instead of using the regular HTML element. 13 00:00:47,010 --> 00:00:50,310 ‫But let's actually do it in practice, of course. 14 00:00:50,310 --> 00:00:52,557 ‫And so for that, we need to install 15 00:00:52,557 --> 00:00:55,110 ‫the styled components library. 16 00:00:55,110 --> 00:01:00,110 ‫So NPM install styled components, 17 00:01:01,140 --> 00:01:02,463 ‫then let's wait for it. 18 00:01:06,270 --> 00:01:10,590 ‫And so now let's start using that styled function 19 00:01:10,590 --> 00:01:12,423 ‫that I just mentioned earlier. 20 00:01:14,370 --> 00:01:17,850 ‫So let's just write "Styled". 21 00:01:17,850 --> 00:01:21,750 ‫And so then we need to, as always, import that function. 22 00:01:21,750 --> 00:01:23,130 ‫And then here, let's say that 23 00:01:23,130 --> 00:01:26,160 ‫we want to style an H1 element. 24 00:01:26,160 --> 00:01:30,060 ‫And so we just write "styled.h1". 25 00:01:30,060 --> 00:01:32,640 ‫And then here we write a template literal 26 00:01:32,640 --> 00:01:34,860 ‫which is basically the string 27 00:01:34,860 --> 00:01:37,830 ‫in which we are going to write our styles. 28 00:01:37,830 --> 00:01:41,340 ‫And this is just a nice trick that leverages 29 00:01:41,340 --> 00:01:45,393 ‫the ES6 feature called Tagged Template Literals. 30 00:01:46,470 --> 00:01:47,850 ‫All right. 31 00:01:47,850 --> 00:01:52,560 ‫And so here, as I was saying, let's now write some CSS. 32 00:01:52,560 --> 00:01:54,900 ‫So let's say that we want this H1 33 00:01:54,900 --> 00:01:59,900 ‫to have a font size of 30 pixels, 34 00:02:00,720 --> 00:02:05,720 ‫and then a font weight of 600, let's say. 35 00:02:07,620 --> 00:02:12,060 ‫And so this will now actually return a new component. 36 00:02:12,060 --> 00:02:16,273 ‫And so let's save that inside a variable called H1. 37 00:02:18,570 --> 00:02:21,780 ‫And since this is indeed a React component 38 00:02:21,780 --> 00:02:24,870 ‫it needs to start with an upper case. 39 00:02:24,870 --> 00:02:26,460 ‫So just like that. 40 00:02:26,460 --> 00:02:30,423 ‫And so now inside our app here, we can use that. 41 00:02:32,850 --> 00:02:37,277 ‫So H1, and then let's say "the wild oasis." 42 00:02:38,190 --> 00:02:40,710 ‫And if we save this now, then indeed 43 00:02:40,710 --> 00:02:44,730 ‫now we got this H1 with our styles applied. 44 00:02:44,730 --> 00:02:47,283 ‫So let's actually inspect this here. 45 00:02:50,610 --> 00:02:54,090 ‫And so, indeed, here we have the H1 46 00:02:54,090 --> 00:02:56,910 ‫and here we have the styles applied to it. 47 00:02:56,910 --> 00:03:00,630 ‫And so behind the scenes what the styled components library 48 00:03:00,630 --> 00:03:04,950 ‫did was to create this randomly named class 49 00:03:04,950 --> 00:03:07,500 ‫and then assigned it to our H1 50 00:03:07,500 --> 00:03:10,560 ‫which is where then our styles appear. 51 00:03:10,560 --> 00:03:13,230 ‫So basically they created this class 52 00:03:13,230 --> 00:03:15,180 ‫where then our styles appear. 53 00:03:15,180 --> 00:03:19,620 ‫So this right here is exactly what we wrote here. 54 00:03:19,620 --> 00:03:22,320 ‫And so what's great about this is that 55 00:03:22,320 --> 00:03:26,850 ‫that this CSS that we just wrote is of course only scoped 56 00:03:26,850 --> 00:03:30,900 ‫to this exact component, which eliminates all the problems 57 00:03:30,900 --> 00:03:34,320 ‫of global CSS that we talked about earlier 58 00:03:34,320 --> 00:03:38,520 ‫such as name collisions between class names, or for example 59 00:03:38,520 --> 00:03:40,980 ‫another developer changing the class 60 00:03:40,980 --> 00:03:44,070 ‫without some other developer knowing about that 61 00:03:44,070 --> 00:03:47,310 ‫which would create all sorts of problems. 62 00:03:47,310 --> 00:03:52,310 ‫And so this fixes that because again, this style right here. 63 00:03:52,560 --> 00:03:57,030 ‫So this CSS will only be available for this exact component 64 00:03:57,030 --> 00:04:00,963 ‫which we can then use all over the place in our application. 65 00:04:01,860 --> 00:04:05,490 ‫Now, in order for this CSS here 66 00:04:05,490 --> 00:04:07,620 ‫to actually have this styling, 67 00:04:07,620 --> 00:04:10,350 ‫so where it looks like actual CSS, 68 00:04:10,350 --> 00:04:13,650 ‫we need a special VS code extension. 69 00:04:13,650 --> 00:04:15,153 ‫So let's install that. 70 00:04:16,200 --> 00:04:20,583 ‫So styled components, it should be called. 71 00:04:22,800 --> 00:04:26,520 ‫So yeah, I think it is exactly this one. 72 00:04:26,520 --> 00:04:28,923 ‫And so let's make sure to install it here. 73 00:04:30,000 --> 00:04:35,000 ‫And so then from there on your CSS will look just like this. 74 00:04:36,210 --> 00:04:39,150 ‫And we then also get this auto completion 75 00:04:39,150 --> 00:04:44,150 ‫as if we were writing CSS in a normal CSS file. 76 00:04:45,570 --> 00:04:49,320 ‫All right, and of course, now we have some more styles here. 77 00:04:49,320 --> 00:04:53,880 ‫And so this is how styled components essentially work. 78 00:04:53,880 --> 00:04:55,470 ‫And so let's keep going. 79 00:04:55,470 --> 00:04:59,193 ‫Let's write ourselves some other reusable components. 80 00:05:00,810 --> 00:05:04,230 ‫So let's say we want a button now. 81 00:05:04,230 --> 00:05:08,790 ‫And so we do "styled.button". 82 00:05:08,790 --> 00:05:11,400 ‫And so again, it is button here 83 00:05:11,400 --> 00:05:14,343 ‫because that's the name of the HTML element. 84 00:05:15,990 --> 00:05:20,990 ‫So let's say we want a font size of 1.4 rem, 85 00:05:22,710 --> 00:05:26,280 ‫a padding of 1.2 rem, top and bottom 86 00:05:26,280 --> 00:05:29,103 ‫and 1.6 on the sides. 87 00:05:31,080 --> 00:05:34,563 ‫A font weight, let's say of 500. 88 00:05:35,880 --> 00:05:40,880 ‫Let's also remove the border and give it some border radius. 89 00:05:42,090 --> 00:05:47,090 ‫Let's say seven pixels, and also a background color. 90 00:05:48,090 --> 00:05:50,283 ‫And let's use purple here. 91 00:05:51,240 --> 00:05:54,873 ‫And then let's change the color itself back to white. 92 00:05:56,100 --> 00:06:01,100 ‫All right, let's give ourselves a bit more space here. 93 00:06:02,190 --> 00:06:07,173 ‫And so just like before, we can now start using this here. 94 00:06:09,030 --> 00:06:11,070 ‫So let's say "check in" 95 00:06:11,070 --> 00:06:15,600 ‫and beautiful, there we have a nice button. 96 00:06:15,600 --> 00:06:19,440 ‫Now what's really cool and really helpful about this is 97 00:06:19,440 --> 00:06:22,440 ‫that these styled components actually are able 98 00:06:22,440 --> 00:06:27,120 ‫to receive all the same props that the regular HTML 99 00:06:27,120 --> 00:06:30,150 ‫or JSX elements can receive. 100 00:06:30,150 --> 00:06:34,950 ‫So for example, we can just as always use the onClick prop 101 00:06:34,950 --> 00:06:38,013 ‫in order to attach some event handler here. 102 00:06:39,150 --> 00:06:41,193 ‫So let's say we wanted to alert. 103 00:06:44,190 --> 00:06:48,510 ‫And so if we click here now, then indeed we get that alert. 104 00:06:48,510 --> 00:06:51,840 ‫So without us having to do any additional work, 105 00:06:51,840 --> 00:06:56,280 ‫where before if we were to create our own button component 106 00:06:56,280 --> 00:06:58,200 ‫then we would have to manually accept 107 00:06:58,200 --> 00:07:00,270 ‫the onClick prop in there 108 00:07:00,270 --> 00:07:04,470 ‫and then pass it to the regular HTML element. 109 00:07:04,470 --> 00:07:06,660 ‫So we did that many times before, 110 00:07:06,660 --> 00:07:10,410 ‫but here, again, we don't need to do that. 111 00:07:10,410 --> 00:07:13,020 ‫And of course, we can also reuse this 112 00:07:13,020 --> 00:07:14,883 ‫as many times as we want. 113 00:07:16,020 --> 00:07:20,370 ‫So let's say we have one for checking out. 114 00:07:20,370 --> 00:07:22,140 ‫And so there it is. 115 00:07:22,140 --> 00:07:27,140 ‫Let's add a bit of padding or actually of margin there. 116 00:07:27,870 --> 00:07:30,090 ‫Let's say 20 pixels. 117 00:07:30,090 --> 00:07:34,383 ‫And let's also give it a cursor of pointer. 118 00:07:35,610 --> 00:07:38,853 ‫So check in and another one check out. 119 00:07:39,720 --> 00:07:41,970 ‫Great, and let's keep going. 120 00:07:41,970 --> 00:07:43,990 ‫So let's do just one more 121 00:07:45,120 --> 00:07:48,090 ‫which is going to be an input element. 122 00:07:48,090 --> 00:07:51,250 ‫And of course we can call them anything that we'd like 123 00:07:52,380 --> 00:07:56,610 ‫but usually what we do is to just give them the same name 124 00:07:56,610 --> 00:08:00,030 ‫as the HTML element here. 125 00:08:00,030 --> 00:08:02,013 ‫But of course with the uppercase. 126 00:08:02,910 --> 00:08:05,280 ‫So let's give them a border 127 00:08:05,280 --> 00:08:10,280 ‫of one pixel solid and let's say "#DDD". 128 00:08:13,890 --> 00:08:18,630 ‫A border radius of five pixels and some padding. 129 00:08:18,630 --> 00:08:23,630 ‫So, 0.8 rem and 1.2 rem on the sides. 130 00:08:27,870 --> 00:08:28,863 ‫All right. 131 00:08:31,200 --> 00:08:34,770 ‫And then again this input element can now accept 132 00:08:34,770 --> 00:08:38,610 ‫all the same props as the normal JSX element. 133 00:08:38,610 --> 00:08:43,473 ‫So we can say, for example, the type should be "number" 134 00:08:45,060 --> 00:08:50,060 ‫and let's add some placeholder "number of guests." 135 00:08:52,380 --> 00:08:53,953 ‫And so there it is. 136 00:08:55,587 --> 00:09:00,210 ‫And so this is the most basic and most fundamental way 137 00:09:00,210 --> 00:09:02,610 ‫in which we can use styled components 138 00:09:02,610 --> 00:09:07,610 ‫in order to basically build these small reusable components 139 00:09:07,920 --> 00:09:09,330 ‫like these ones. 140 00:09:09,330 --> 00:09:12,480 ‫But now the question that you might have is, 141 00:09:12,480 --> 00:09:16,500 ‫how do we actually style this app component itself? 142 00:09:16,500 --> 00:09:20,910 ‫Because app itself is of course already a component. 143 00:09:20,910 --> 00:09:25,200 ‫And so if the styled function here also returns a component 144 00:09:25,200 --> 00:09:27,093 ‫then how can we do this? 145 00:09:28,200 --> 00:09:33,200 ‫So basically what we want to style is this div right here. 146 00:09:33,720 --> 00:09:37,260 ‫Right? And so what we can do is to create 147 00:09:37,260 --> 00:09:40,890 ‫yet another styled component only to 148 00:09:40,890 --> 00:09:43,503 ‫basically replace this div right here. 149 00:09:45,690 --> 00:09:50,690 ‫So let's do that "Styled.div." 150 00:09:51,030 --> 00:09:55,300 ‫And then here a convention is to call this new component 151 00:09:56,572 --> 00:09:58,497 ‫"StyledApp." 152 00:10:00,300 --> 00:10:01,133 ‫Alright? 153 00:10:02,070 --> 00:10:04,950 ‫So let's write our styles here. 154 00:10:04,950 --> 00:10:09,180 ‫Let's say we wanted a background color "orangered" 155 00:10:09,180 --> 00:10:11,910 ‫to make this design even more ugly 156 00:10:11,910 --> 00:10:15,930 ‫and then a padding of 20 pixels. 157 00:10:15,930 --> 00:10:18,330 ‫And so as I was just saying 158 00:10:18,330 --> 00:10:22,410 ‫we can then replace this entire div element right here. 159 00:10:22,410 --> 00:10:24,930 ‫So we already have that div here 160 00:10:24,930 --> 00:10:27,453 ‫and so now we have a styled div. 161 00:10:28,950 --> 00:10:31,830 ‫And so let's use that here. 162 00:10:31,830 --> 00:10:36,153 ‫Of course, closing it down here and nice. 163 00:10:37,260 --> 00:10:39,630 ‫So let's again distinguish between 164 00:10:39,630 --> 00:10:42,540 ‫the two different things that we did here. 165 00:10:42,540 --> 00:10:46,830 ‫So first we created some simple reusable components 166 00:10:46,830 --> 00:10:51,153 ‫which we can then think of primitives of our user interface. 167 00:10:52,230 --> 00:10:56,010 ‫So for example, if we want a reusable input element 168 00:10:56,010 --> 00:11:00,150 ‫we just call that input here and then use that 169 00:11:00,150 --> 00:11:03,780 ‫all over the place so we can, of course again 170 00:11:03,780 --> 00:11:06,930 ‫reuse this as many times as we want. 171 00:11:06,930 --> 00:11:11,910 ‫And then if we want to basically style the component itself, 172 00:11:11,910 --> 00:11:14,940 ‫so a component that is already pre-built, 173 00:11:14,940 --> 00:11:18,150 ‫then we have to do it in a slightly different way. 174 00:11:18,150 --> 00:11:20,940 ‫So if the component is called App, 175 00:11:20,940 --> 00:11:24,240 ‫then the convention is to create a styled component, 176 00:11:24,240 --> 00:11:26,520 ‫which is called StyledApp 177 00:11:26,520 --> 00:11:29,670 ‫and then we apply all the styles to that 178 00:11:29,670 --> 00:11:32,883 ‫and use it instead of the regular HTML element 179 00:11:32,883 --> 00:11:34,800 ‫that we had here before. 180 00:11:34,800 --> 00:11:38,880 ‫So we had this div and then we replaced that here. 181 00:11:38,880 --> 00:11:43,880 ‫And so then of course, this is exactly what we have here. 182 00:11:44,430 --> 00:11:47,310 ‫So that's the div with that background color. 183 00:11:47,310 --> 00:11:49,470 ‫And if we wanted a main, 184 00:11:49,470 --> 00:11:52,020 ‫then all we have to do is change that here. 185 00:11:52,020 --> 00:11:56,193 ‫And then in our HTML we get a main instead of a div. 186 00:11:57,990 --> 00:12:01,110 ‫All right, and so this is basically 187 00:12:01,110 --> 00:12:05,190 ‫a very basic crash course into styled components. 188 00:12:05,190 --> 00:12:08,340 ‫But next up let's build on this foundation 189 00:12:08,340 --> 00:12:11,640 ‫and learn how we can include some global styles 190 00:12:11,640 --> 00:12:13,350 ‫using styled components. 191 00:12:13,350 --> 00:12:16,560 ‫For example, for things like CSS resets 192 00:12:16,560 --> 00:12:19,143 ‫that need to apply to the entire page.