Unless section we finished up our initial configuration of re-act router inside the component we've
now got different route definitions put together for each of our different major routes.
We're now going to focus on the individual implementation of the header component.
So rather than defining this kind of dummy header inside of here we're going to split it off to its
own separate component.
Once we create it will then cover a few topics around styling and CSSA and design just very quickly
and then after that we'll make sure that we stay true to our real goal right now which is to make sure
that we customize the content in the header depending on whether or not the user is currently signed
in.
So let's get to it.
Let's make the header and do some styling inside there to create the header.
We're going to make a separate file inside of our components directory.
So I going to make a new file called Hetter dot G-S and then unsighted there we're going to create a
class based component.
So I will import react and components from react at the top and then we will define our class based
component called Hetter.
Now just in case you're curious I'm making this a class based component because I expect to have to
place a helper or function to in here which will be responsible for deciding what to render inside the
head or component.
So we don't necessarily need to make use of component level state here.
I just want to have the ability to easily organize code inside this class based component as opposed
to a functional component which sometimes gets a little bit more messy.
So back inside of your we'll define our render method right now.
I will return a div with a text of how it just header will keep it simple and then at the bottom we
will export.
Default header like so.
OK so here is our header component.
All done at least boilerplate.
We're now going to import this back into the after Jesus file and replace the dummy header that we have
in there with this real version instead.
So back inside of update us all find our dummy header component right here and I will replace it with
import header from header like so.
And then going to verify very quickly that the name of the component header matches the name that we
used inside of the actual app component.
And yet it's definitely the same so no other change required.
Now if we change back over to the browser we should automatically see the refresh.
And yeah I've got the header text in there and it's definitely a div.
That's why it's a little bit smaller than the H-2 we had used for the landing component.
OK.
So that part was pretty easy pretty straightforward.
Now I want to focus a little bit on the design of the head component.
Yes.
We're not going to focus too much on the design throughout this stuff.
I'm going to kind of rely on you to take care of some design elements if you really want to polish the
look and feel we are way more concerned with the actual architecture of the application.
Nonetheless I do want to make sure that the app looks better than bad.
Let's let's put it that way.
So an easy way to get some reasonable looking design is to pull in a third party CSSA library and that's
exactly what we're going to do.
So let's look up some documentation for the library that we're going to use in a new tab.
I'll do a google search for materialize see SS that I will find the first link on here which is that
materialize CSSA com.
This is a CSSA framework that is intended for general use Spight any type of web application.
So we could use this with Jay Querrey we could use this with angular we can use it with reacted.
Doesn't matter.
All you really get out of the box is materialized DSS SS is a set of pre-done CSSA files and then a
couple of javascript plugins that you can optionally use along with your application.
Now I mentioned this in particular because materialized CSSA library only has like I would say partial
compatibility with re-act all these different javascript components right here will not work correctly.
Out of the box with react.
And if we want to use any of those we have to put in a little bit of additional code.
Now don't be misled by the section over here labeled as components.
This is not talking about re-act components.
This is talking about specific Preece styled elements using CSSA that you can make use of.
So for example one of the possible components you can use is this car thing car component.
I kind of don't want to say component but you know essentially that's how they refer to it.
And when they say it's a component all they mean to say is hey if you use this HVM L right here you
will get something that looks like this.
So it is not react component.
They're just saying here is a pre-done snippet of H L and C Ss that you can optionally use.
Now the reason I'm going into so much detail on this is that a very common question I get is about some
other common CSSA libraries called Stuff like re-act materialize.
So if we look at this we'll find a library called reacting to realize right here.
Or better yet material UI.
That's really the best one so we can check up until you die.
And this is a similar library that implements Google material design with a set of re-act components.
So a very common question I get is why are we not using this library for handling style.
And I'll be honest with you there's a very simple straightforward reason material UI makes use of what
is called javascript based styling.
So if you use one of these components in here like say this Atbara thing.
OK.
You get this app are but the problem is that to customize the look of this component right here you
have a somewhat challenging time to change any of the included styling inside of here.
And the reason for that is that it uses Javascript excuse me javascript based styling.
In other words it implements all of its styling inside of the JavaScript world rather than with traditional
CSSA files.
The reason that is harder to customize is that it is naturally more challenging to override styling
properties via javascript than it is with CSX.
CSX is really designed right.
Right out of the box to be highly customizable and easily over ridable.
Whereas with this javascript based dialing life really isn't quite so straightforward.
You'll even find a section on here called customization and they say like yes very clearly all the styles
are defined in line and you can read a discussion thread here regarding that decision.
It is just not the easiest thing in the world to work with and so that is in particular why we're not
making use of material you want.
So we're going to use materialized SS which is just vanilla plain old CSSA files easily over ridable
easy to set up and doesn't assume that you're using re-act right on the box.
OK so enough of that big aside a little bit of a diversion there.
Let's focus on getting materialized DSS started up and installed inside of our project.
So in the left hand nav appear we'll find a button that says getting started and inside of here you'll
find some different directions for installing materialized VSS.
So there's two primary ways you can easily hook it up to our project in particular.
You can either add a link tag to our HTL document that will pull in the link tag or the CSSA file dynamically
from a CD.
That's completely valid.
We could certainly go that way if we want to but we're going to do things a little bit more.
Interestingly I would say and we are going to install all of the CSSA into our project by using NPM.
So doing the hook up with NPM is admittedly more challenging.
It is not as straightforward but I specifically want to show you how to do this because this is getting
more and more popular with CSSA libraries that you can install.
So we're going to go through this slightly more challenging way using NPM rather than the very easy
straightforward copy and paste link tag.
But you know we'll figure it out.
OK so we're going to install materialized the s s as an entry module to our client side project.
So back inside of our terminal I'm going to kill the running server.
I will change into the client directory.
Remember we've got two sets of package JS on files.
Right now we want to add a dependency to the client side of our project.
Once inside a client project will run NPM install dash dash save materialise dash C Ss because that
is the name of the library right here and I will let that install run its course.
OK so while that's installing we actually do in this case have to wait for the completed install to
hook this thing up.
So let's pause for a minute and when we come back we will make sure that we can include materialized
DSS into our project.
So I'll see you in just a second.