Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.6 hours
Building a react website with a pre built template 400x277
  • Overview
  • Transcript

3.2 Cleaning Up Inline Style Issues

Depending on the template you choose, you may or may not encounter inline styles. I generally don't like to use them, but sometimes you can't avoid them. So, in this lesson, I'll show you how to use JSX to imitate a common use for inline styles.

3.2 Cleaning Up Inline Style Issues

So at the end of the last lesson, we kind of ended on this error here, where it was talking about the style property expecting a mapping from style properties to values, and not a string. So technically, or I guess I should say, typically I don't like to use inline styles. And if I can at all convert those inline styles to using a CSS file or something like that, then I highly recommend doing that. But there are obviously exceptions to the rule and there's times when you're gonna need to be able to use inline styles or depending on the template you're using be able to kinda get around that. And you can absolutely do that and I wanna show you how to do that in this lesson. One of the other things that we're gonna have to look at too, is the fact that in this component, we have a lot of these class references and there's a bit of an issue here. Because when it comes to JSX, there's kind of different conventions that get used. So if I want to use a class attribute on an element inside JSX in my component, I need to use className and not class. So I'm gonna have to convert all of these two className before I really go too far. And usually this is the point where I like to clean all that up. So let's do both of those things. So the first thing that I want to do is, I want to address this inline style right here. Now the problem is, and it kind of goes back and relates a little bit to the class versus className attribute in JSX. JSX kind of is its own breed of kind of HTML or a combination of JavaScript and HTML. And there's different conventions that we use in order to kind of get around all of these things. So as you can see here, this is a fairly simplistic inline style. And what this is saying is that for this particular header, I want to use a style where the background image refers to this image that I have in my image directory called home-bg.HTML, which happens to be right over here, this one right here. So this is the one that I want to use as the background for that. So in order to do that, what I'm gonna need to do is, I need to use kind of the JSX version of this inline style. So I'm gonna drop some code in here so that you can see what that's gonna look like. So I'm gonna paste this in here. So what this is saying is that I want to use the background image property. This is the kind of the React JSX version of specifying the background image CSS inline style that we had in there before. And then from that point, I'm just gonna do basically the same thing where I'm going to specify that this is my property, and the value is gonna be a string here. And this is gonna be a URL, that's the URL function and I wanna generate a URL based on this file right here and this is all being enclosed in double curly brackets. So once I do that, if I were to hit Save, I should come back here. Now you're gonna see that it's going to work. So basically the process is simply for inline styles is I'm going to come in here and I'm gonna use my double curly brackets. I'm gonna specify the JSX keyword or the kind of the name of the inline style that I want to use, in this case, its background image. And then I'm gonna give it the value that I want to pass to it. Now we're actually gonna tweak this a little bit in upcoming lessons because we're gonna reuse this header across multiple pages and multiple components. And this isn't gonna work very well because otherwise it's gonna show the same background every single time and I don't necessarily wanna do that. So then the other thing that I said we're gonna need to do is we're gonna need to change all of these classes here to classNames. So what I want to do here is I'm gonna go into my search and replace, and in here, I'm gonna say class= and I want to replace that with className= and I think that should cover all of it. And let's go ahead and as we can see there's a lot of references, there's 191 references to that. So then at this point I'm gonna click my little button here do I want to replace all those? Yes let's replace all those. So now all of the places where it said class= it now says className= and that's just gonna make the JX and React a little bit happier. So once I've done that I can come over here and everything looks to be doing pretty well so far. So we've been able to come in here and basically take our roots template and get it all jammed into our app component. Now this is pretty bad practice because there's a lot of reusable components in here that I want to start pulling out of here and start kind of making this a little bit more modular. And that's what I'm gonna start doing and showing you how I like to structure things in the next lesson.

Back to the top