- Read Tutorial
- Watch Guide Video
So to get an idea of what this component actually is. Let's head over to our wireframe for our mad lib project. You'll notice that we have a few inputs and a button saying generate story. Basically, this form component is going to act as a container for our HTML form that has our inputs and our submit button, our submit button is our generate story button. So the first thing we want to do is head to the link in the guide notes below the react documentation on react.component. And you'll see that we have this class here called greeting and it renders out hello. And then this weird sentence that says this.props.name. And let's just go ahead and copy this method or this class object and you'll notice that it's just a javascript class.
So over in our components directory let's create a new file and call it madlib_form.js in here we want to import React from 'react';. So we have access to react and then just paste in this class and then we're going to have to export it so we can use it in other files. So export default greeting and then back in our app.js we want to import this where we can't use it in our render function so import Greeting from './madlib_form';. You'll notice that our component is named something else other than file so we're not importing madlib_form we are importing greeting because that's what we exported it as and that's what the name of our class is so now that we have imported greeting we can use it in our JSX here much like an HTML tag. So just typing in greeting.
Now you'll notice if you go out your browser and wait for it to reload you'll see that it says hello and in our component, it says Hello, this.props.name and the reason we're not seeing anything is that we haven't assigned anything to name. We haven't passed a prop called name. So the way we can do this is by back in our app.js file. We just go name='max' and then back in our app you'll notice that once it reloads it will say hello Max.
We can also use this component much like we would use a class and object in object-oriented programming. I mean it's pretty straightforward because it already is declared as a class so it's kind of the same idea. It's just that we can use it here and JSX and it's really awesome. So for name, we can put in something like Jordan and then wait for that to reload. We could also add another one called Andrew and then you'll see that it's rendering out each of these unique instances of greeting which is really awesome because that means we can jam-pack a lot of code in here and create some awesome functionality buttons or inputs in the future and we'll be able to use that really easily. So let's go ahead and let's rename this because we don't want a greeting component. We want a mad lib form component so I'll just start by calling this mad lib form copy that. Name that mad lib form and then back in here do the same on class and the export, save both files and reload the application and wait for it to reload and you'll notice it's the same effect. So all we did was rename it to mad lib form.
So now let's just replace this content with Bottega Mad Libs Form Component and save the file notice once it reloads you will see it says Bottega Mad Libs Form Component. So this is the general syntax we'll be using across all of our components. One quick thing we can do to optimize this or to refactor it so it looks better is by importing react and then in curly braces typing in component.
And then we don't have to extend it from react.component. We can just extend it from component because we are setting component equal to react.component.
So you'll notice it still works the same and we have the first component up and running. So that's it for this guide and the next guide we will be introducing react strap which is essentially the same thing as bootstrap and we will be using this to generate our first text input. And if you've ever used bootstrap your HTML projects then you will be pretty familiar with how this is going to work. It's just that it's going to be JSX rather than HTML and CSS tags. So before we end the video I'm just going to commit our code and push to Git Hub. So if you type
git staus git add . git commit -m "created madlib form component" git push origin master
All right and I'll leave a link to this commit in the guide notes below as well as a link to the react documentation so you can look at what we looked at throughout the guide. And again in the next video, we will be going over react strap which has been strap put our first text inputs on screen and you'll see in the next video.