1 00:00:02,000 --> 00:00:05,000 In the first demo application we built, 2 00:00:05,000 --> 00:00:08,000 I gave you one CSS file that contained the styles 3 00:00:08,000 --> 00:00:11,000 for all components. 4 00:00:11,000 --> 00:00:13,000 That works for a small demo 5 00:00:13,000 --> 00:00:17,000 but not necessarily for a bigger project. 6 00:00:17,000 --> 00:00:20,000 There, you typically want to have different CSS files 7 00:00:20,000 --> 00:00:22,000 for your different components 8 00:00:22,000 --> 00:00:25,000 and hence, the CSS file which I provided to you here 9 00:00:25,000 --> 00:00:26,000 is very slim. 10 00:00:27,000 --> 00:00:30,000 Now, when it comes to styling the different components, 11 00:00:30,000 --> 00:00:34,000 it would be even nicer if the styles 12 00:00:34,000 --> 00:00:37,000 set up in a specific CSS file 13 00:00:37,000 --> 00:00:42,000 would then be scoped to the component to which they belong. 14 00:00:42,000 --> 00:00:46,000 So it would be nice if next to MainNavigation, 15 00:00:46,000 --> 00:00:48,000 we could add let's say a MainNavigation.css file 16 00:00:48,000 --> 00:00:51,000 we could add let's say a MainNavigation.css file 17 00:00:51,000 --> 00:00:55,000 and then define the styles in that file 18 00:00:55,000 --> 00:00:58,000 that belong to this MainNavigation.js file. 19 00:00:58,000 --> 00:01:02,000 And they should not affect any other component. 20 00:01:02,000 --> 00:01:04,000 That's something you'll often want, 21 00:01:04,000 --> 00:01:06,000 because in bigger react projects, 22 00:01:06,000 --> 00:01:10,000 you often work with hundreds or thousands of components 23 00:01:10,000 --> 00:01:11,000 and you want to make sure 24 00:01:11,000 --> 00:01:14,000 that your styles don't clash with each other. 25 00:01:16,000 --> 00:01:19,000 Now the good thing is that Create React App, 26 00:01:19,000 --> 00:01:22,000 this tool which we use for creating this project, 27 00:01:22,000 --> 00:01:26,000 gives us a project that has a feature built in 28 00:01:26,000 --> 00:01:30,000 that allows us to scope styles to components. 29 00:01:30,000 --> 00:01:34,000 And that feature is called CSS modules. 30 00:01:34,000 --> 00:01:37,000 It's a behind-the-scenes code transformation, 31 00:01:37,000 --> 00:01:42,000 which will make sure that we can attach CSS files 32 00:01:42,000 --> 00:01:44,000 to specific components. 33 00:01:44,000 --> 00:01:48,000 For this, we first of all need to name our CSS files 34 00:01:48,000 --> 00:01:49,000 in a certain way. 35 00:01:49,000 --> 00:01:54,000 We need to make sure that they end with .module.css 36 00:01:54,000 --> 00:01:55,000 So in this case, 37 00:01:55,000 --> 00:02:00,000 the file is named MainNavigation.module.css 38 00:02:01,000 --> 00:02:03,000 And then in MainNavigation.js, 39 00:02:03,000 --> 00:02:08,000 we can import from this CSS file. 40 00:02:08,000 --> 00:02:10,000 That certainly looks strange, 41 00:02:10,000 --> 00:02:11,000 and it's not something 42 00:02:11,000 --> 00:02:14,000 that would work in standard JavaScript 43 00:02:14,000 --> 00:02:17,000 but since we have this extra built step here, 44 00:02:17,000 --> 00:02:21,000 which parses and transforms our code 45 00:02:21,000 --> 00:02:23,000 before it reaches the browser, 46 00:02:23,000 --> 00:02:26,000 we can actually import from CSS. 47 00:02:26,000 --> 00:02:30,000 And that is what we're already doing in index.js by the way. 48 00:02:30,000 --> 00:02:34,000 We're importing a CSS file and behind the scenes, 49 00:02:34,000 --> 00:02:38,000 that will tell the build process that this CSS code 50 00:02:38,000 --> 00:02:42,000 should be injected into the loaded page as well. 51 00:02:42,000 --> 00:02:45,000 We can do the same here in MainNavigation.js 52 00:02:45,000 --> 00:02:49,000 but now to attach this styling 53 00:02:49,000 --> 00:02:53,000 or this style file and its classes to this component, 54 00:02:53,000 --> 00:02:55,000 we don't import just MainNavigation.module.css like this 55 00:02:55,000 --> 00:02:59,000 we don't import just MainNavigation.module.css like this 56 00:02:59,000 --> 00:03:04,000 but instead we import something, for example, classes, 57 00:03:04,000 --> 00:03:07,000 this name is up to you, from this file. 58 00:03:08,000 --> 00:03:10,000 Now I named it classes 59 00:03:10,000 --> 00:03:13,000 because this something here, which we import, 60 00:03:13,000 --> 00:03:16,000 will actually be a JavaScript object 61 00:03:16,000 --> 00:03:18,000 where all the CSS classes you define in this CSS file 62 00:03:18,000 --> 00:03:22,000 where all the CSS classes you define in this CSS file 63 00:03:22,000 --> 00:03:26,000 will be properties of this object. 64 00:03:26,000 --> 00:03:29,000 And you can then use them in your JSX code 65 00:03:29,000 --> 00:03:33,000 to attach those classes to your elements 66 00:03:33,000 --> 00:03:36,000 and behind the scenes everything will be transformed such 67 00:03:36,000 --> 00:03:37,000 that those class names are made unique per component. 68 00:03:37,000 --> 00:03:42,000 that those class names are made unique per component. 69 00:03:42,000 --> 00:03:43,000 So let me give you an example. 70 00:03:43,000 --> 00:03:47,000 We could go to the header JSX element here 71 00:03:47,000 --> 00:03:49,000 and add the class name prop, 72 00:03:49,000 --> 00:03:53,000 and set this not to a hard-coded string 73 00:03:53,000 --> 00:03:57,000 but instead to a dynamic value with curly braces 74 00:03:57,000 --> 00:04:01,000 and set it equal to classes.header 75 00:04:03,000 --> 00:04:07,000 Now we can add a class named header 76 00:04:07,000 --> 00:04:10,000 because here I am accessing header on classes 77 00:04:10,000 --> 00:04:13,000 to this CSS file. 78 00:04:13,000 --> 00:04:16,000 And any styles we define in here 79 00:04:16,000 --> 00:04:20,000 would then only affect this component here. 80 00:04:20,000 --> 00:04:23,000 So if I save this and I gave this a red color, 81 00:04:23,000 --> 00:04:26,000 you see now that's colored red. 82 00:04:27,000 --> 00:04:31,000 And if I had another header class in another component, 83 00:04:31,000 --> 00:04:35,000 it would not be red because the styles are scoped 84 00:04:35,000 --> 00:04:36,000 as I just explained. 85 00:04:38,000 --> 00:04:40,000 Now the goal is here not to make this red 86 00:04:40,000 --> 00:04:44,000 but instead I prepared some other styles for you, 87 00:04:44,000 --> 00:04:46,000 which you'll find attached. 88 00:04:46,000 --> 00:04:50,000 You'll find a MainNavigation.module.css file attached 89 00:04:50,000 --> 00:04:53,000 and you can simply replace your MainNavigation.module 90 00:04:54,000 --> 00:04:56,000 CSS file with mine. 91 00:04:57,000 --> 00:05:00,000 Now in here, I defined a bunch of styles for you 92 00:05:00,000 --> 00:05:02,000 and therefore, we now just have to wire them up 93 00:05:02,000 --> 00:05:04,000 to the elements. 94 00:05:04,000 --> 00:05:07,000 We already added the header class to the header. 95 00:05:07,000 --> 00:05:10,000 On this div with the logo text, 96 00:05:10,000 --> 00:05:15,000 you should add classes.logo and that's actually it already. 97 00:05:16,000 --> 00:05:19,000 And with that, if you save this, let me zoom out a bit, 98 00:05:19,000 --> 00:05:24,000 now we got this good looking navigation bar at the top here. 99 00:05:25,000 --> 00:05:27,000 By the way, it's not optimized for mobile 100 00:05:27,000 --> 00:05:30,000 since this is not really a CSS course 101 00:05:30,000 --> 00:05:33,000 but I want to focus on react instead. 102 00:05:33,000 --> 00:05:36,000 But now with that, we added this nice navigation bar 103 00:05:36,000 --> 00:05:40,000 and we added it such that we have component specific styles, 104 00:05:40,000 --> 00:05:43,000 which are also scoped to this component.