So basically it's not going to include all of these; although, we will generate some components within this component. So a render component, and a button component. What's neat about these components we're building is that if you'd ever like to you could use them in other projects. All you have to do is import them.

So let's go ahead and go to our application, and let's create a new file in our components directory, and let's call it card.js. Next thing you want to do is:

card.js

import React, { Component } from 'react';

class Card extends Component {
    render() {
        return (
            <div className="card">

            </div>
        )
    }
}

export default Card;

So let's go ahead and write something in here and say: this is where our inputs belong. Then I want to go to home and use this. The same thing with header, we just have to import it. Let's say:

home.js

import React, { Component } from 'react';

import Header from './header';
import Card from './card';

class Home extends Component {
    render() {
        return (
            <div className="home">
                { Header() }
            </div>
        );
    }
}

export default Home;

The way we use this is exactly like we used Home in the bootstrap.js, so go to bootstrap.js. You see that we are calling home right here, and that's because it's a functional component so we can use it like that.

So I'm going to go into home.js, and that's the one we were just using that I was talking about right here. I'm going to command + click and go back into home. I'm going to use card, so I'm going to kind of nest it. I'm going to say:

home.js

import React, { Component } from 'react';

import Header from './header';
import Card from './card';

class Home extends Component {
    render() {
        return (
            <div className="home">
                { Header() }
                <Card />
            </div>
        );
    }
}

export default Home;

Now if we go to our application in the browser. We go to the app here. You'll see it says this is where inputs belong. So it's working. So what we want to do is we need to render some inputs in here. So why don't you get rid of that, and we want to build another functional component like our header.

Let's go ahead and create a component in our components directory and let's call it input.js. In here we need to do the same exact thing we did in header. So what we can actually do is just go to header, and hit command + a to get all of the material here. Copy it using command + c, head back to input, and hit command + v.

Now what we need to do is simply rename all these instances of header to input. We can do this pretty fast by selecting all of header, and then if you're in visual studio code, you can hit command + d and it'll select the next one. You'll notice if we type here it will change both of them.

Now, if I want to select all of them, all you have to do is again select it and hit command + d as many times as it's in here. I just hit it twice. Now all you have to do is say header.

One thing I want to change though, on the second one in the class name is make from it lowercase h. Okay, so I didn't mean to change that to header, I meant to change it to input. So select those and say input. Now I want to change a class theme in here to input with a cap or lowercase i.

Next thing I'd like to do is get rid of this paragraph, so let's just say:

input.js

import React from 'react';

class Input extends Component {
    render() {
        return (
            <div className="input">
                <input> 
            </div>
        )
    }
}

export default Input;

So you'll notice that we can render it exactly like we rendered card in our home.js. So that's the idea behind JSX is to make it look like HTML components. Anyway let's move on. Let's save this file it's going to card and save it and we're going to import this into our card.js. So let's hit return a couple times in card.js, and say:

card.js

import React, { Component } from 'react';

import Input from './input';

class Card extends Component {
    render() {
        return (
            <div className="card">
                { Input() }
            </div>
        )
    }
}

export default Card;

Now let's go to our page and see our inputs. We have an input here. Now what you'll notice in our application here in design is that we have a label here. We actually have a number here too so what we need to do is render these in our input component. What we're going to start with is just the label. We'll get back to refactoring this after we talk about CSS grid and have some of the styles in.

So right now we just want to put another label in. So let's go to our input.js and below our input, let's put a label. In this label let's just say:

input.js

import React from 'react';

class Input extends Component {
    render() {
        return (
            <div className="input">
                <input> 
                <label>Color</label>
            </div>
        )
    }
}

export default Input;

Now let's go back to our application and in that in the browser you'll see that we have these two now. That works. Don't worry about the how it's on the right and not the bottom. We'll get around to that when we get into the styling.

What I want to do first is get the entire functionality of the application in place. So of all the inputs in here kind of just stacked on each other. And then we'll hop into the styling. So in four or five guides, we'll be doing that.

So the next thing I'd like to do is show you how we can pass any custom title. Now when we built the header.js component I showed you how we can pass parameters in here to get a custom title and a custom paragraph tag.

So I'd like you to posit video right now and try and figure out how to do that in the input class or functional component, the input component. So go ahead and pause it now and try and figure out how we can get custom labels in here so we can get this effect. Having multiple titles here go ahead and pause it.

So if you weren't able to figure it out or you'd like to see if you didn't do it right: just follow along. In input.js we need to pass in a parameter and we need to say title. Then in our card.js we can pass in title and our input. So let's say Color and then let's copy this. Then for this one let's say Plural Noun.

Let's head over to our application in the browser, and see what we have. Notice that it still says color. Let's go and figure out why. You'll see in our input that we're passing it in, but we're not using it anywhere. So let's get rid of color and let's delete that and let's put in some curly braces title.

Let's head back to the application, and you'll see now that it's rendering color and plural noun. So that's really awesome. That's an introduction to class components and using another functional component within a class component that we've rendered in another component.

So as you can see the underlying theme of react is components. There's a whole bunch of different components and a couple different ways of writing components, and you can do a lot with these. You can write multiple inputs for example with different titles and have a bunch of different attributes in this input without writing in a bunch of times.

So let's go to the terminal here and let's say you git status, git add ., and let's say git commit -m "built our first class component for the inputs container, and built an input functional component to render custom inputs".

I'm going to push this so let's say git push origin master. Let's wait for that to finish. Now I will end the guide, and I'll see you in the next guide where we will talk a little bit more about this input component and how we can set up the rest of our components. See you then.

Resources

• Source Code