In this video we're going to put together our user create component the field component and the button
component as well.
So three components in total this should be pretty quick to put together.
Let's get to it.
I'm going to flip back over to my code editor and inside my company's directory I'm going to make a
new file inside the component folder of user create Duchess.
I will make a new file of field dot us and finally button dot J.S. as well.
So three files in total and then going to make sure I have user create open and inside the thing we'll
put together some quick Riak component.
We're going to make this a functional component so I will import re-act from react at the top I will
import field from the field file and I will import button from the button file.
I'll then make a functional component called user create an inside of this thing.
I'm going to return a div that shows field and button like zone and then finally at the bottom of the
file I will export default user creates OK.
That's file number one.
So I'm going to save this and close it out and then I'll open up my field component next.
So the field component is going to be pretty straightforward but it's going to be a class based component
at the top I will import re-act from react.
I will then make my class field that's going to extend re-act component well-defined my render method.
And right now I'm going to have it return a div with the class name of UI field inside there I'll have
a label and for it now will give it the text.
How about name will just hard code that in right now and then I'll have a text input.
And then finally at the bottom I will export default fields OK.
That's it for the field component.
And now onto the last one are button component.
So here's the button dodgiest file at the top I will import re-act from react.
I will define class Button that extends re-act component.
Here's my render method and I'll have it return a div
excuse me not not a div in this case you want a simple button here with the class name of UI primary
and I go into hard code in Samit right now as well.
Then finally at the bottom we will do our export default button.
All right.
I think the last thing to do is make sure that we import our user create component into our app and
show it on the screen.
So inside of outtalk Yes I'm going to import user create from user create and then I will show that
inside my render method in place of the state language print out at the bottom.
So there's my user create the.
All right.
Let's save all these different files.
We've now created and changed all flip back over to my application and I should see my form appear like
so now the styling doesn't look too great here.
I think that we probably missed one little class name inside of user creates genius.
I have a div right here on that div I'm going to add on a class name of your life form like so.
And now if I flip back over Yeah that looks a little bit better.
Last thing is the button itself.
Let's make sure we open up the button.
JSM file.
We got a class name of primary on there.
My apologies for that I was going by memory.
It should be a UI button primary inside of the button component.
Now if I saved that as well.
We got much better.
OK.
So we've now got our entire kind of markup side of the application put together.
But of course we don't have any actual functionality around the language selector at the top.
So let's take a quick pause right here.
When we come back in the next section we'll talk about how we're going to wire up all this context stuff.