So you can see that we have this nice, big coding image right here. And then on the other side, we have this login to access your dashboard. I'll give you a little hint, this is going to be a component itself.

So this is gonna be separate, so we'll create another component that will manage this login process, and this is gonna work as the overall structure for the authentication page. So, you have access to this image, I will provide it in a link in the show notes, to right here.

And you can go to the image, right click on it, and then click save image as. Now, the half that you're going to want to place this image at is in here. And so let's open this up, and we'll walk through exactly where you want to put it. I already added it there, so that I can share it with you.

But you're gonna go, and you're gonna go into your static directory, that's at the root of your application. Then you'll go into assets, then you're gonna create a new directory here called images, and then create another directory called auth, and then you can place the login file that you downloaded directly there.

Now, this isn't technically necessary, we could've just put this right in the assets directory, but I do like having kind of a nested structure here that is a little bit easier to understand the purpose for what this image is doing. So this is our login image, on the auth page. So, anytime that you have a hard-coded image that you want to place in your app, this is going to be the place to put it, in the assets directory.

So now that we have that, let's go into the authentication component, and let's start building it out. So, we'll have the state, and those kinds of things later, for right now, let's just worry about our render. So we can get rid of this placeholder component and with return, any time that you have more than one line, remember you need to wrap that in parens, and so I'm going to do that.

Then let's put our div and separate it. Now our div is going to have a className, so let's just add that right now, and we'll add the actual CSS styles later. And so this is going to be auth-page-wrapper, and then inside of here, we're going to have the left-hand side and then the right-hand side. The left-hand side is gonna have that big image, so let's add that now.

So, I'm going to create a div with a className of just left-column, and then let's close this one off. And as you might've guessed since we have one called left-column, we're gonna have one called right-column, and then in this right column one, for right now, I'm just going to say something like an h1 tag and say something like login component goes here... and then in the left column here, this is where we're going to pull in this image.

So, inside of here, what we're going to do, and in fact, what I can do to kind of make this a little more straightforward, is remove this ending closing div, and I can add this and just make this div a self-closing div itself, we did that in the last section.

Any time that you're working with something that's just about a ground image like we're going to be doing, then you don't have to have a closing div here. And now we can use in-line styles, so I'm going to put this on its own line, just to make it easier, and we can put the class name on its own line as well.

And now let's say "style equals" and then make sure you use those double curly brackets, because any time you're working with style remember, style expects JavaScript, and it expects an object. That's why we're using the double curly brackets. And then here, I want a background image, and make sure you're using the capital I instead of the dash because we're using JSX.

And now this is where it gets a little bit tricky if you've never done this before, this is why I wanted to dedicate an entire guide to this. So we need to use a string, but then we also need to bring in that login image. And so React has a little bit of a tricky way of doing that.

We're gonna use these backticks, or string interpolation. We're gonna say URL and then wrap in parens, and then inside of here, inside the parentheses, I'm going to say dollar curly brackets, because this is what's going to allow us to call the login picture, the login image that we're gonna be bringing in.

So, how can we import that? If I come up to the very top, what you can do, is you can actually import an image the same way you'd import another component, or anything like that. So, I can say import login image, and I can call this anything that I want, and then I have to go and grab the path.

Now, I know what the path is, but this is something if you're doing this for the first time, this part looks a little bit ugly because we have to jump back three directories. Because remember we're in the auth component here, and the auth component's inside pages, which is inside of components, which is inside of the src, and we wanna get all the way to static, assets, images, auth, login so that is quite a mouthful.

So, we need to jump back three directories, so we're gonna have to say ../../../ so we're now three directories back, and now I can say static/assets/images/auth/login.jpg. So I know that looks a little bit weird, but you don't have to do imports like that normally, but if you do want to access the static directory, that is the way to do it.

So now we can treat this login image just like a variable. So, I can slide it directly here inside of this URL, and now if I hit save, this is going to give us the full path to that image, and then it should show up. So as long as I don't have any typos or anything like that, then I should be good, let's go check it out.

So, I'll go back here, and let me hit refresh. And it looks like I might have a typo or something, let's go and let's take a look. Whenever I have anything like this, that doesn't happen, the very first thing I do is to inspect it. And let's see if we have any errors in the console, it doesn't look like we do, so let's look at the images.

So, right here you can see that I do have access to this URL and it's giving me background image, static, assets, images, auth, login, jpg. So, I'm not seeing any issues there.

And you know what, I bet you anything the issue is that, let me put this on the right-hand side, just to make it a little bit easier for us to see. The issue is because we're using a background image, but we didn't set any kind of styles for that background image.

So right now, it's a div with nothing inside of it. So, let me go, I'm gonna give it a height of say 200 pixels, there we go, and the width doesn't really matter, we're gonna be adding all those styles later. So, this is working.

So, it was just a little bit tricky because our div was kind of nonexistent, it was a background image for a div that didn't have any height or width, and so that's why it wasn't working. But now we can see that that is pulling in properly, so we're all good to go. In the next guide, we'll place it on the left-hand side, build out our grid, and all of those kinds of things.

So let's just review, because this is something, I remember the very first time that I ever had to do this, it took me a little bit more research than I would've thought. I thought it would be pretty easy to bring in an image, but this is the preferred way in React to work with static images, is to put them in the static assets directory, and then you can create any path you want from there.

And then from there, to simply import the image directly, just like any other kind of import, and then you can treat it like a variable, then you can just call it the same exact way we did right here, where we're pulling it in, this is gonna give us the direct path and then we can use it as a background image or any other way that we want to use it.

So great job if you went through that. In the next guide, we will finish out the auth component.

Resources

• Source Code
• Login Image