1 00:00:00,700 --> 00:00:06,480 Unless section we finished up our initial configuration of re-act router inside the component we've 2 00:00:06,480 --> 00:00:10,970 now got different route definitions put together for each of our different major routes. 3 00:00:11,190 --> 00:00:15,900 We're now going to focus on the individual implementation of the header component. 4 00:00:15,890 --> 00:00:20,370 So rather than defining this kind of dummy header inside of here we're going to split it off to its 5 00:00:20,430 --> 00:00:22,380 own separate component. 6 00:00:22,380 --> 00:00:27,960 Once we create it will then cover a few topics around styling and CSSA and design just very quickly 7 00:00:28,380 --> 00:00:33,000 and then after that we'll make sure that we stay true to our real goal right now which is to make sure 8 00:00:33,000 --> 00:00:37,980 that we customize the content in the header depending on whether or not the user is currently signed 9 00:00:37,980 --> 00:00:38,580 in. 10 00:00:38,580 --> 00:00:39,540 So let's get to it. 11 00:00:39,540 --> 00:00:44,170 Let's make the header and do some styling inside there to create the header. 12 00:00:44,190 --> 00:00:47,330 We're going to make a separate file inside of our components directory. 13 00:00:47,460 --> 00:00:53,100 So I going to make a new file called Hetter dot G-S and then unsighted there we're going to create a 14 00:00:53,100 --> 00:00:54,960 class based component. 15 00:00:55,170 --> 00:01:03,750 So I will import react and components from react at the top and then we will define our class based 16 00:01:03,750 --> 00:01:06,040 component called Hetter. 17 00:01:06,060 --> 00:01:10,860 Now just in case you're curious I'm making this a class based component because I expect to have to 18 00:01:10,860 --> 00:01:17,310 place a helper or function to in here which will be responsible for deciding what to render inside the 19 00:01:17,660 --> 00:01:18,930 head or component. 20 00:01:18,930 --> 00:01:22,560 So we don't necessarily need to make use of component level state here. 21 00:01:22,710 --> 00:01:27,990 I just want to have the ability to easily organize code inside this class based component as opposed 22 00:01:27,990 --> 00:01:32,570 to a functional component which sometimes gets a little bit more messy. 23 00:01:32,640 --> 00:01:36,950 So back inside of your we'll define our render method right now. 24 00:01:36,960 --> 00:01:45,000 I will return a div with a text of how it just header will keep it simple and then at the bottom we 25 00:01:45,000 --> 00:01:45,900 will export. 26 00:01:45,960 --> 00:01:48,610 Default header like so. 27 00:01:49,140 --> 00:01:50,640 OK so here is our header component. 28 00:01:50,640 --> 00:01:52,450 All done at least boilerplate. 29 00:01:52,650 --> 00:01:58,290 We're now going to import this back into the after Jesus file and replace the dummy header that we have 30 00:01:58,290 --> 00:02:00,760 in there with this real version instead. 31 00:02:00,850 --> 00:02:07,440 So back inside of update us all find our dummy header component right here and I will replace it with 32 00:02:07,530 --> 00:02:11,590 import header from header like so. 33 00:02:12,580 --> 00:02:18,110 And then going to verify very quickly that the name of the component header matches the name that we 34 00:02:18,110 --> 00:02:19,930 used inside of the actual app component. 35 00:02:19,970 --> 00:02:23,800 And yet it's definitely the same so no other change required. 36 00:02:23,810 --> 00:02:27,930 Now if we change back over to the browser we should automatically see the refresh. 37 00:02:27,950 --> 00:02:31,410 And yeah I've got the header text in there and it's definitely a div. 38 00:02:31,430 --> 00:02:36,120 That's why it's a little bit smaller than the H-2 we had used for the landing component. 39 00:02:36,450 --> 00:02:36,730 OK. 40 00:02:36,740 --> 00:02:39,190 So that part was pretty easy pretty straightforward. 41 00:02:39,470 --> 00:02:43,040 Now I want to focus a little bit on the design of the head component. 42 00:02:43,310 --> 00:02:43,630 Yes. 43 00:02:43,640 --> 00:02:46,250 We're not going to focus too much on the design throughout this stuff. 44 00:02:46,250 --> 00:02:51,260 I'm going to kind of rely on you to take care of some design elements if you really want to polish the 45 00:02:51,260 --> 00:02:55,720 look and feel we are way more concerned with the actual architecture of the application. 46 00:02:55,940 --> 00:02:59,590 Nonetheless I do want to make sure that the app looks better than bad. 47 00:02:59,620 --> 00:03:00,920 Let's let's put it that way. 48 00:03:01,160 --> 00:03:07,760 So an easy way to get some reasonable looking design is to pull in a third party CSSA library and that's 49 00:03:07,760 --> 00:03:09,460 exactly what we're going to do. 50 00:03:09,470 --> 00:03:14,470 So let's look up some documentation for the library that we're going to use in a new tab. 51 00:03:14,480 --> 00:03:21,740 I'll do a google search for materialize see SS that I will find the first link on here which is that 52 00:03:21,740 --> 00:03:24,810 materialize CSSA com. 53 00:03:25,190 --> 00:03:32,390 This is a CSSA framework that is intended for general use Spight any type of web application. 54 00:03:32,390 --> 00:03:36,350 So we could use this with Jay Querrey we could use this with angular we can use it with reacted. 55 00:03:36,350 --> 00:03:37,370 Doesn't matter. 56 00:03:37,370 --> 00:03:43,580 All you really get out of the box is materialized DSS SS is a set of pre-done CSSA files and then a 57 00:03:43,580 --> 00:03:49,070 couple of javascript plugins that you can optionally use along with your application. 58 00:03:49,070 --> 00:03:55,400 Now I mentioned this in particular because materialized CSSA library only has like I would say partial 59 00:03:55,580 --> 00:04:01,440 compatibility with re-act all these different javascript components right here will not work correctly. 60 00:04:01,460 --> 00:04:02,830 Out of the box with react. 61 00:04:02,840 --> 00:04:06,950 And if we want to use any of those we have to put in a little bit of additional code. 62 00:04:06,950 --> 00:04:11,110 Now don't be misled by the section over here labeled as components. 63 00:04:11,150 --> 00:04:13,480 This is not talking about re-act components. 64 00:04:13,520 --> 00:04:19,640 This is talking about specific Preece styled elements using CSSA that you can make use of. 65 00:04:19,640 --> 00:04:25,310 So for example one of the possible components you can use is this car thing car component. 66 00:04:25,310 --> 00:04:29,530 I kind of don't want to say component but you know essentially that's how they refer to it. 67 00:04:29,530 --> 00:04:35,120 And when they say it's a component all they mean to say is hey if you use this HVM L right here you 68 00:04:35,120 --> 00:04:36,940 will get something that looks like this. 69 00:04:36,950 --> 00:04:39,230 So it is not react component. 70 00:04:39,230 --> 00:04:45,920 They're just saying here is a pre-done snippet of H L and C Ss that you can optionally use. 71 00:04:45,940 --> 00:04:50,990 Now the reason I'm going into so much detail on this is that a very common question I get is about some 72 00:04:51,050 --> 00:04:57,560 other common CSSA libraries called Stuff like re-act materialize. 73 00:04:57,860 --> 00:05:01,560 So if we look at this we'll find a library called reacting to realize right here. 74 00:05:01,580 --> 00:05:03,120 Or better yet material UI. 75 00:05:03,140 --> 00:05:06,560 That's really the best one so we can check up until you die. 76 00:05:06,620 --> 00:05:14,390 And this is a similar library that implements Google material design with a set of re-act components. 77 00:05:14,390 --> 00:05:19,380 So a very common question I get is why are we not using this library for handling style. 78 00:05:19,670 --> 00:05:25,880 And I'll be honest with you there's a very simple straightforward reason material UI makes use of what 79 00:05:25,880 --> 00:05:28,620 is called javascript based styling. 80 00:05:28,880 --> 00:05:33,750 So if you use one of these components in here like say this Atbara thing. 81 00:05:34,220 --> 00:05:34,640 OK. 82 00:05:34,670 --> 00:05:41,000 You get this app are but the problem is that to customize the look of this component right here you 83 00:05:41,000 --> 00:05:47,270 have a somewhat challenging time to change any of the included styling inside of here. 84 00:05:47,330 --> 00:05:52,250 And the reason for that is that it uses Javascript excuse me javascript based styling. 85 00:05:52,250 --> 00:05:58,130 In other words it implements all of its styling inside of the JavaScript world rather than with traditional 86 00:05:58,130 --> 00:05:59,690 CSSA files. 87 00:05:59,690 --> 00:06:05,570 The reason that is harder to customize is that it is naturally more challenging to override styling 88 00:06:05,570 --> 00:06:09,410 properties via javascript than it is with CSX. 89 00:06:09,410 --> 00:06:11,310 CSX is really designed right. 90 00:06:11,360 --> 00:06:15,630 Right out of the box to be highly customizable and easily over ridable. 91 00:06:15,770 --> 00:06:20,660 Whereas with this javascript based dialing life really isn't quite so straightforward. 92 00:06:20,660 --> 00:06:26,180 You'll even find a section on here called customization and they say like yes very clearly all the styles 93 00:06:26,180 --> 00:06:31,660 are defined in line and you can read a discussion thread here regarding that decision. 94 00:06:31,760 --> 00:06:37,730 It is just not the easiest thing in the world to work with and so that is in particular why we're not 95 00:06:37,730 --> 00:06:39,460 making use of material you want. 96 00:06:39,830 --> 00:06:46,310 So we're going to use materialized SS which is just vanilla plain old CSSA files easily over ridable 97 00:06:46,370 --> 00:06:50,540 easy to set up and doesn't assume that you're using re-act right on the box. 98 00:06:50,960 --> 00:06:54,900 OK so enough of that big aside a little bit of a diversion there. 99 00:06:54,950 --> 00:07:00,130 Let's focus on getting materialized DSS started up and installed inside of our project. 100 00:07:00,410 --> 00:07:05,660 So in the left hand nav appear we'll find a button that says getting started and inside of here you'll 101 00:07:05,660 --> 00:07:09,480 find some different directions for installing materialized VSS. 102 00:07:09,590 --> 00:07:14,480 So there's two primary ways you can easily hook it up to our project in particular. 103 00:07:14,480 --> 00:07:22,430 You can either add a link tag to our HTL document that will pull in the link tag or the CSSA file dynamically 104 00:07:22,760 --> 00:07:24,430 from a CD. 105 00:07:24,980 --> 00:07:26,090 That's completely valid. 106 00:07:26,090 --> 00:07:29,820 We could certainly go that way if we want to but we're going to do things a little bit more. 107 00:07:29,840 --> 00:07:35,970 Interestingly I would say and we are going to install all of the CSSA into our project by using NPM. 108 00:07:36,260 --> 00:07:39,790 So doing the hook up with NPM is admittedly more challenging. 109 00:07:39,800 --> 00:07:44,510 It is not as straightforward but I specifically want to show you how to do this because this is getting 110 00:07:44,510 --> 00:07:48,320 more and more popular with CSSA libraries that you can install. 111 00:07:48,320 --> 00:07:53,510 So we're going to go through this slightly more challenging way using NPM rather than the very easy 112 00:07:53,510 --> 00:07:55,330 straightforward copy and paste link tag. 113 00:07:55,400 --> 00:07:57,190 But you know we'll figure it out. 114 00:07:57,580 --> 00:08:04,370 OK so we're going to install materialized the s s as an entry module to our client side project. 115 00:08:04,370 --> 00:08:08,780 So back inside of our terminal I'm going to kill the running server. 116 00:08:08,780 --> 00:08:11,280 I will change into the client directory. 117 00:08:11,540 --> 00:08:15,080 Remember we've got two sets of package JS on files. 118 00:08:15,080 --> 00:08:19,550 Right now we want to add a dependency to the client side of our project. 119 00:08:19,570 --> 00:08:28,690 Once inside a client project will run NPM install dash dash save materialise dash C Ss because that 120 00:08:28,690 --> 00:08:33,580 is the name of the library right here and I will let that install run its course. 121 00:08:33,950 --> 00:08:38,440 OK so while that's installing we actually do in this case have to wait for the completed install to 122 00:08:38,440 --> 00:08:39,460 hook this thing up. 123 00:08:39,460 --> 00:08:43,630 So let's pause for a minute and when we come back we will make sure that we can include materialized 124 00:08:43,630 --> 00:08:45,230 DSS into our project. 125 00:08:45,430 --> 00:08:47,380 So I'll see you in just a second.