1
00:00:00,760 --> 00:00:05,200
In this video we're going to put together our user create component the field component and the button

2
00:00:05,200 --> 00:00:06,270
component as well.

3
00:00:06,370 --> 00:00:09,670
So three components in total this should be pretty quick to put together.

4
00:00:09,670 --> 00:00:11,110
Let's get to it.

5
00:00:11,140 --> 00:00:15,130
I'm going to flip back over to my code editor and inside my company's directory I'm going to make a

6
00:00:15,130 --> 00:00:19,740
new file inside the component folder of user create Duchess.

7
00:00:20,410 --> 00:00:28,150
I will make a new file of field dot us and finally button dot J.S. as well.

8
00:00:28,150 --> 00:00:34,000
So three files in total and then going to make sure I have user create open and inside the thing we'll

9
00:00:34,000 --> 00:00:36,350
put together some quick Riak component.

10
00:00:36,370 --> 00:00:42,670
We're going to make this a functional component so I will import re-act from react at the top I will

11
00:00:42,670 --> 00:00:51,010
import field from the field file and I will import button from the button file.

12
00:00:51,050 --> 00:00:56,550
I'll then make a functional component called user create an inside of this thing.

13
00:00:56,550 --> 00:01:07,800
I'm going to return a div that shows field and button like zone and then finally at the bottom of the

14
00:01:07,800 --> 00:01:12,680
file I will export default user creates OK.

15
00:01:12,730 --> 00:01:14,190
That's file number one.

16
00:01:14,190 --> 00:01:19,170
So I'm going to save this and close it out and then I'll open up my field component next.

17
00:01:19,260 --> 00:01:23,720
So the field component is going to be pretty straightforward but it's going to be a class based component

18
00:01:24,300 --> 00:01:27,440
at the top I will import re-act from react.

19
00:01:27,990 --> 00:01:36,380
I will then make my class field that's going to extend re-act component well-defined my render method.

20
00:01:36,530 --> 00:01:45,010
And right now I'm going to have it return a div with the class name of UI field inside there I'll have

21
00:01:45,040 --> 00:01:48,980
a label and for it now will give it the text.

22
00:01:48,980 --> 00:01:54,470
How about name will just hard code that in right now and then I'll have a text input.

23
00:01:54,700 --> 00:01:59,810
And then finally at the bottom I will export default fields OK.

24
00:01:59,820 --> 00:02:01,210
That's it for the field component.

25
00:02:01,230 --> 00:02:04,370
And now onto the last one are button component.

26
00:02:04,410 --> 00:02:09,600
So here's the button dodgiest file at the top I will import re-act from react.

27
00:02:09,600 --> 00:02:15,690
I will define class Button that extends re-act component.

28
00:02:16,110 --> 00:02:19,360
Here's my render method and I'll have it return a div

29
00:02:22,030 --> 00:02:28,720
excuse me not not a div in this case you want a simple button here with the class name of UI primary

30
00:02:30,080 --> 00:02:33,850
and I go into hard code in Samit right now as well.

31
00:02:33,890 --> 00:02:38,110
Then finally at the bottom we will do our export default button.

32
00:02:38,150 --> 00:02:38,480
All right.

33
00:02:38,480 --> 00:02:43,880
I think the last thing to do is make sure that we import our user create component into our app and

34
00:02:43,880 --> 00:02:45,110
show it on the screen.

35
00:02:45,110 --> 00:02:54,190
So inside of outtalk Yes I'm going to import user create from user create and then I will show that

36
00:02:54,220 --> 00:02:59,600
inside my render method in place of the state language print out at the bottom.

37
00:02:59,890 --> 00:03:05,840
So there's my user create the.

38
00:03:05,880 --> 00:03:06,440
All right.

39
00:03:06,510 --> 00:03:07,980
Let's save all these different files.

40
00:03:07,980 --> 00:03:12,960
We've now created and changed all flip back over to my application and I should see my form appear like

41
00:03:12,960 --> 00:03:16,100
so now the styling doesn't look too great here.

42
00:03:16,140 --> 00:03:21,690
I think that we probably missed one little class name inside of user creates genius.

43
00:03:21,810 --> 00:03:28,590
I have a div right here on that div I'm going to add on a class name of your life form like so.

44
00:03:28,860 --> 00:03:31,640
And now if I flip back over Yeah that looks a little bit better.

45
00:03:31,650 --> 00:03:33,680
Last thing is the button itself.

46
00:03:33,750 --> 00:03:35,050
Let's make sure we open up the button.

47
00:03:35,070 --> 00:03:36,340
JSM file.

48
00:03:36,360 --> 00:03:38,660
We got a class name of primary on there.

49
00:03:38,760 --> 00:03:40,460
My apologies for that I was going by memory.

50
00:03:40,470 --> 00:03:44,910
It should be a UI button primary inside of the button component.

51
00:03:44,940 --> 00:03:46,510
Now if I saved that as well.

52
00:03:46,630 --> 00:03:48,280
We got much better.

53
00:03:48,310 --> 00:03:48,580
OK.

54
00:03:48,600 --> 00:03:52,860
So we've now got our entire kind of markup side of the application put together.

55
00:03:52,890 --> 00:03:57,600
But of course we don't have any actual functionality around the language selector at the top.

56
00:03:57,600 --> 00:03:59,010
So let's take a quick pause right here.

57
00:03:59,040 --> 00:04:03,810
When we come back in the next section we'll talk about how we're going to wire up all this context stuff.