Now if you go to my link right now it's going to be completed since I will have obviously recorded all of these videos by the time you watch them, but if you go to yours it should look exactly like this.

Let's go ahead and start building out out our sign-in and sign-up components. Alright, if you're here and you go to sign up, it will show you the sign up If you are to sign in or the root route it'll show you sign in.

So I'm going to go back to localhost. I'm going to close my console, and we are going to put the component in here. In Firefox you can see with the grid tools kind of how things are playing out, and it looks really nice and looks really clean, and we have control over this grid.

Let's go ahead and develop the sign in component, and put it in this component. Alright, let's put another grid in. So I'm going to go to the code, and close out everything. Then I'm going to signin.js, and here we are. Let's get rid of that text, and reference our design. Alright, so we have our log-in line. Let's start by developing that.

Alright, so what we're going to want to do is head over to our app and make this component. OK so let's go into components, and this is going to be a component that we use in more than just the authentication kind of folder, more than the sign in and sign up. So we're going to build it in the components directory immediately, and not in the off directory.

So let's go ahead and create a new file and let's just call this formTitle.js. Let's make it a functional component like we did with our header here. So what I'm going to do is I'm going to copy that export function header along with the import of react, and let's throw it in the formTitle.js.

Now obviously the reason I don't put it into header is because formTitle doesn't really belong in the header. That's the whole reason we have different files, is mainly for organization. So let's say: export function FormTitle(), in here we just want a div. Well, let's make it an H1. Let's say className='form-title'.

Here's the thing, we don't want to put this form title on the same exact grid on every page, like we might have a different grid or it might be somewhere else. It's going to be different in different grids, not just the signin grid.

So what we have to do is is have it accept a different parameter of className, and we can do this by saying:

formTitle.js

export function FormTitle(props) {
    const { className } = props;
    return (
        <h1 className={`${props.className} form-title`}></h1>
    )
}

So very similar to how we imported the header and the sub header. We took them out of the header.js file. So the same exact kind of concept then we can just say class name, and this gets really nice when we get into the objects were going to be fetching from the database.

Then we want to give it a default class name so we can apply the styles. So basically we need to look at is form-title for the the way it looks and className when we pass in for where we want it on the grid which we're using it in.

Let's go ahead and provide a title as well, so we want the title here. Lets just say text, and let's put a comma next to className, and say text. So we are getting these as props.

formTitle.js

export function FormTitle(props) {
    const { className, text } = props;
    return (
        <h1 className={`${props.className} form-title`}>{text}</h1>
    )
}

Let's go ahead and apply some styles real quick because they're pretty simple styles. Let's go into style and let's create a file and just call it form.title.scsss. Then let's say:

form-title.scss

.form-title {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2rem;
}

Let's go and import this. I kind of want to separate these a bit, so since this is a smaller thing, and it's not really a big thing: I'll put a return there. Then let's also rename this header file to header.scssinstead of header-wrapper because it's no longer our wrapper and it's not what the component is called.

We also need to underline that I forgot about. So let's go down here and let's say:

form-title.scss

.form-title {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2rem;
    border-bottom: 1px solid $color-gray-E6;
}

Now, lets take this formTitle and put it somewhere, because we if use this it's not going to really be anywhere on our grid. Let's go to signin.js and put it in. Let's say <FormTitle/> and I'm going to use the auto import, so make sure to import that.

You'll notice we have to use these brackets to pull it out of form title. Then we want to put in a className of: 'sign-in__title'. We also want to put in some text that says 'Login'.

Awesome so let's go to our application and look at it you'll see we don't see anything, and that's because we're in sign up. So let's go to our root route or signin, and you'll see we have it cool. Let's go ahead and end the video here. We got that in.

What we want to do is basically start creating our grid, because you can see that this doesn't really look like or design much in the sense that it's too high and stuff like that. Let's also add in that padding right now since it's part of the component. So let's go into form-title.scss, and say:

form-title.scss

.form-title {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2rem;
    border-bottom: 1px solid $color-gray-E6;
    padding-bottom: 1.2rem;
}

So but the problem is that it's a little too high. Now, we could just add in the margin, that would work great, but I want to create a grid for our sign in component. So we'll do that in the next video.

So let's go to our code and commit it. So let's say git status, git add ., and git commit -m "form title component." Now, let's move on.

Resources

• Source Code