[00:00:01] Hi and welcome back to the reactor up we're building in the sky. We are going to get started with the styles for our application. So the first thing we want to start with is the header. So there's a few ways we can do this and I want to show you a couple examples of different types of components we can get the suspect in. So if I pull up our application here in the browser we have our header it's pretty pretty simple. I'm just up the route route and if you're if it's not working for you you might not have entered in the base route the route route. So if you're bootstrapped dodgy ass. Just make sure that you have this route in here to lead to the signing component where you can just go to sign in. But you're going to want to have this to make sure it's as exact. OK. I'm pretty sure I went over that at one point but just in case you missed it for any reason. There it is. Put that route in. OK. So if I open up are headed out. Yes. We just haven't seen heter but we don't want it to say we want to see what our design says. Which is welcome to the Ajoy managers. So let's just copy that in let's say welcome to the EU or a manager with an exclamation point. And yeah. So the next line is going to say please log into continue OK so concrete nice. [00:01:33][92.4]
[00:01:34] Now having access to this design I normally wouldn't want to just straight up copy these these generated styles here but for me I think it actually really helped me realize how simple styling can be. Having them just appeal right here and it's not because they're available. It's kind of hard to explain. But as we go on I'll kind of show you why I think you'll realize what I'm talking about. So what I'm saying sounds like really weird. Just trust me I'll explain it to you and you'll know what I'm saying. So basically we are age 1 and then we green it is inside us and then we ever did here. So let's give this a class name and let's just call it Earth. Now let's go ahead and in our styles folder. Let's create a file called heter. Yes yes. So make sure you got that and I'm going to increase my font size just cause with styles here it's going to be. It won't matter if it's a little bigger. There's not as much code to view as a person small styles. So I'm going to increase my code so you can see it better my font size. OK that's better. Now let's go out and get started with the Heterodyne as it's us. We want to say heter. So dot header and then here we can reference our H2 or each one in our p tag that we've been want to give them unique tags like unique names like oh my god I don't know. [00:03:01][87.0]
[00:03:01] Titlist something you can if you really want want to keep it simple and making sure that these these are the only header Qassim heter we can just nest them in here and know that these styles will only apply to this specific age warning and PTI. So it's good to those and let's actually name something like heter. Let's just call it like mained header. Just cuz just in case header is used anywhere else like in tags. We Outlook's say main header and then let's go back here and call it main pattered. Now what are we talking about. Copying these. I'll show you what I mean. So if I had a copy I can go over here and I can just paste it in your and you will have access to this but if you ever have a client or someone else you're working with using vision they have a nice nice program now generates a lot of these styles so there's a few things you want to be careful though with when you're looking at these you'll notice like a heightened wit you don't want to specify those because CSF handles the hype and with with something the font size so we can get rid of those immediately and I have my colors and makes sure type in the color 40 40 40 farm family in code since font size 34 pixels font weight 500 miné 3 30 pics. Now another thing I notice or I think I noticed is that the font weight 500 doesn't work and you have the same bold and that might just be on the end. I made myself only just close file. But yeah. That may just be the way of importing the fonts. As far as I'm importing I didn't notice that. [00:04:52][110.6]
[00:04:53] So basically the point that the point I'm trying to get across is you don't whenever you have a design like this you don't want to just copy these generated styles 100 percent over because they might not always have the same effect that you would have in the application or the design. So I'm going to leave the site with for now and just show you how it differs and it might not do anything at all because it's probably just on point with the font size but will check it out and we don't want it in this. Welcome to Ajoy managed tank. Definitely don't want in that nasty title with put it in the H1 and let's say that it must import our import our file into our main Dicey's us. This isn't good or excellent. I think it's important and not splosh main or my bad. It's not let's save this add another thing we need to do before we get the effect is we need to import the right form. So you'll notice for using encode song sans right here. So what we need to do is include that I believe I have already got that. Let me check. Yes so I'm going to copy that. It's going to be that guy below and we need to copy it into her index HDMI on super simple Ulos. We already have a default phone in here that is set up in our gesturing module but basically we have encoded encode condensed in the same Monserrat font. I believe as I said I almost want to pull up a pronunciation video on YouTube during this guy all top that. So while we're at it we might as we'll change the title let's just call it enjoy. Now we have our fonts. [00:06:38][105.6]
[00:06:39] We're using it in our header. Each one let's go check in the browser. Yeah you can see we have a really nice font here but you'll notice it's on the next lines text here. And I believe that's because of a specified in the wind. So it's getting into the with tonight and you'll see that it's different. Yes. So I think it's really important not to point out to you that if you're using Invision or have a design in envision that someone provided you with never just copy these over you're going to get a different effect. And I don't really need to tell you that you have figured that out on your own if you want to get around to that but I might as well pointed out since so now you get an AP style so let's go ahead and click on this. I will make copy and I'm going to throw it here and then I'm going to get rid of this and this. And this is where I think things get they kind of cleared up for me I'm like OK see I was actually kind of easy. And it's it's ok we don't need this within the high and a lot of these things are really similar. We just had a fun family a font size a fun way and a white night. So threat using an app making vision I have noticed that. OK. Like startling text is actually pretty simple. All you really need is these kind of attributes like just like five of these four or five of these. And it's pretty simple. [00:08:02][82.8]
[00:08:02] So you just you know a line height of font weight to make it to give about whatever form you want light for bulled or something and then a font size and obviously the font and the color. So really simple styles to get into a header like this. Really awesome and simple. So the next thing I want to do is we need to I want to show you another way of getting this heter component because right now we have we have as heterogeneous and then using it in our bootstrap digest is like a rapper see how we're wrapping our entire switch with this hundred if I command quick Nyheter it will bring me into here and then we're just putting our children here so the rest of our components such as are signing. So in the next slide I want to show you another way we can write this component as a functional component and use it that way. But then after that I will just go back to this. This way of doing it because I like this approach better but I want to point out and show you that there's multiple ways of doing things and coding and react and you don't always have to do things like this when you go on and build your own applications. So I really want to point out that there's multiple ways of doing things I'm not going to view all the ways but just know that there is never one set way of doing things but there usually is a best practice like you don't want to do something a dumb way just because you like it you always want to follow best practice when it comes to functional components. There's there's multiple ways of doing it. [00:09:36][94.0]
[00:09:36] There's no specific best practice of doing it that I know of at least. I think both of these ways are going to show you are very common and neither are alike. Not one or the other is not better than the other. Unless you go to work for example for some company after this boot camp and they have a specific way of doing things that's another really important reason I show you how to do these multiple ways is because different companies are going to use different ways. They're going to have different standards they're going to design things differently in their code and you always want to kind of match what they're doing when you work for that company because that makes the code 100 percent more readable all around the codebase saying might be working. So let's go ahead and come in our code and then get into that second wave. So it starts to get come in and say implement are added. Let's see where it starts. Okay I'll catch you the next guy or we will hop into the next component or next way I'm doing this component. [00:09:36][0.0]
[572.4]