Now, the next few guides, I'm going to try to break them down into as small of chunks as possible because we are going to learn quite a bit in a short period of time. This login component is going to have quite a few responsibilities, we're going to have a form so we're gonna talk about how we can use forms in React and how we can have a form element update state so that's gonna be one thing we're gonna learn.

Then we're gonna learn how we can pass functions as props. So up until now, we've mainly focused on using props by simply being a tool for sending data the way we did with our portfolio items but we're gonna see how we can actually send functions to prop so that we can get feedback back.

So, the main case study for this is going to be we're going to connect to an API, that API is going to send back a response whether we've logged in successfully or not, and then we're going to pass via props that response back. And so we're actually going to update the app component, our auth component and the login component and we're gonna see how it all ties together.

But don't worry, I know that sounds like a lot and if you've never done this before, this can be a little bit intimidating so that's why I'm gonna try to break it into as small a chunks as possible. So in this first guide, all we're going to do is create a login component, we're going to call that component from the auth component and then we're going to add the form, it's not gonna function, it's not gonna look nice, nothing like that yet. Let's first focus on just building out that structure.

So, let me open up visual studio code and I'm going to create the file. So inside of component, I'm gonna create a new directory here called auth and then inside of auth I'm gonna create a login.js file. I'm gonna close the file and this is going to be a class component so I'm gonna use my user snippet here and I'm just gonna call it Login. And for right now, we can just have it coming back and returning just a few lines of code.

So, I'm gonna put an h1 here and say form should go here and then just another little div and say something like submit button. None of this is gonna be functional, I am just putting a few lines there so that we don't have to go and do the return with the parens and anything like that cuz that is one thing that I'm not a fan of with the way the prettier extension works is how it shrinks everything into one line if you only put one line of code there.

login.js

import React, { Component } from "react";

export default class Login extends Component {
    render() {
        return (
            <div>
                <h1>Form should go here</h1>
                <div>Button</div>
            </div>
        );
    }
}

So, with all that being said, now we can import this login component so instead of saying login component goes here, I can get rid of that and import our login just like that. We're not gonna pass in our props yet and then up top, let's import it.

So, I'm gonna say import and I want this to be login from and now let's see exactly what our path needs to be. So we created a new directory called auth and we have a login and we're starting in pages so that probably tells you we're gonna have to jump back and then we're gonna have to go into that auth component.

So, let's come back and see what that path looks like. It's gonna be ../ and then auth/login I believe. Let's come here, let's test it out. If we go and we don't have any errors, we should be good. Open up Google Chrome, there we go. We have Form should go here and then the button and now let's just add the basic form.

Now, this is not gonna be functional or anything but just for right now, let's add it. And I'm also going to take a look at the finished design. We want it to say login to access your dashboard and then we want an email input and then a password and then a button.

So, let's just kinda add all of that in right now. I'm going to create that h1 login to access your dashboard. I may need to change that later on in that style but that's just gonna be that title and now I'm going to create the form. So, I'm gonna say form here and I'm not gonna add any of the various things we're gonna need there such as the event handlers and that kind of thing.

For right now, let's just get it live. I'm gonna say input one and then input two. The first one's gonna be a type text, next one's going to be a password and let's just see if that works. If I come back and come here, you can see that that does work.

We have two inputs and it automatically picks up the username which is an email and then the password and then we have our title here. So everything there is working properly. And now in the next guide, we're gonna start building out our form so it's no longer just a plain HTML form, but it is actually a react form that can update state.

Resources

• Source Code