1
00:00:01,010 --> 00:00:04,009
well in this video we are going to start to see

2
00:00:07,250 --> 00:00:15,050
the creation of the register form, it is valid from the client from the front, you already know that we are with the

3
00:00:15,050 --> 00:00:23,429
front once we have finished seeing the framework of the tailwind because that is how we start to create

4
00:00:23,429 --> 00:00:32,329
the front with its interfaces, then well here you see the first thing you can see is that there is

5
00:00:32,329 --> 00:00:41,670
a route that has been created exactly not the same with another library but the logic of the

6
00:00:41,670 --> 00:00:48,810
operation is exactly the same as when we were doing the backend and we used the

7
00:00:48,810 --> 00:00:56,789
router of the express is worth here first I am going to create several routes because they can be to register

8
00:00:56,789 --> 00:01:06,750
the login this is the one to register we also did the tasks update a task see a

9
00:01:06,750 --> 00:01:12,030
profile well because all these things are worth we are getting them with the routes is worth once

10
00:01:12,030 --> 00:01:18,689
we have to throw the routes what we do is create different pages for each of

11
00:01:18,689 --> 00:01:28,510
these routes in this case I have created the register page of the register ok and then you

12
00:01:28,510 --> 00:01:36,829
see that it is first a container that is the body in which I have used flex and I have centered and I have

13
00:01:36,829 --> 00:01:44,750
put a margin then another container that is another dip that I use as the back of the

14
00:01:44,750 --> 00:01:51,629
form is worth to draw it then the fields one of text one of email another of

15
00:01:51,629 --> 00:01:56,530
type password and the button this is a form that will give us the

16
00:01:56,530 --> 00:02:02,769
own read is worth both the routes as

17
00:02:04,810 --> 00:02:10,870
the form we are going to use it with read libraries then the routes

18
00:02:10,870 --> 00:02:17,169
we are going to use them with react router ok then we have here the page of react router we have

19
00:02:17,169 --> 00:02:27,430
here in the tutorial it tells you how to install it tells us that we have to install the npm install react

20
00:02:27,430 --> 00:02:34,870
router down well then we install it ok and then we have to do the form and do

21
00:02:34,870 --> 00:02:46,509
validations de datos vale pues por ejemplo esto no me deja enviarlo si yo me cojo y me voy más

22
00:02:46,509 --> 00:02:52,870
herramientas herramientas de desarrollo esto lo vamos a borrar vale si le doy a registrar

23
00:02:52,870 --> 00:02:58,030
aquí me deberían salir los datos que estoy metiendo no los mete porque he metido una

24
00:02:58,030 --> 00:03:05,650
validation from read good form that serves me to validate the data in this case the only thing

25
00:03:05,650 --> 00:03:11,889
I have said is that all these fields are necessary because you have to remember that this is what

26
00:03:11,889 --> 00:03:18,870
we said in the back in these fields will be necessary to be able to register, you always have to

27
00:03:18,870 --> 00:03:24,830
obviously do the front in relation to what we have put to the schemes and to the models that we use

28
00:03:24,830 --> 00:03:32,629
in the backend ok then here we needed an email then at the time of entering the email

29
00:03:34,909 --> 00:03:40,210
and when I give it to send it without sending me those data because it already fulfills all the conditions

30
00:03:40,210 --> 00:03:47,990
ok then here we would have that json that key value which is the one that we are going to send to the backend in

31
00:03:47,990 --> 00:03:53,629
this case the only thing I have said is that I visualize it ok then that has already started

32
00:03:53,629 --> 00:04:00,289
to play with the classes of tailwind I have put a shade of green color because I have not put the

33
00:04:00,289 --> 00:04:09,710
source I have put the margins the padding I have rounded the corners and little else is worth when you say that

34
00:04:09,710 --> 00:04:15,949
the width that you want to occupy but come on I have not used any animation as I said in the

35
00:04:15,949 --> 00:04:22,610
video of yesterday or anything like that and what I get is to do the form that would be

36
00:04:22,610 --> 00:04:29,509
only this and this would have to put a header a bar like the one we did yesterday or something

37
00:04:29,509 --> 00:04:34,790
like that is worth to be able to move between the different pages not having to be writing here the

38
00:04:34,790 --> 00:04:43,110
routes is worth but we are already doing it according to later well then the code to do this

39
00:04:43,110 --> 00:04:48,069
this I am going to close the code is this

40
00:04:51,639 --> 00:05:03,519
is all this then I am inside app jsx and well then the code would be this ok

41
00:05:05,240 --> 00:05:12,220
we are going to delete it and we are going to do it little by little then we are going to this

42
00:05:12,220 --> 00:05:23,980
and I'm going to eliminate it, I'm going to leave the div that is the one that gives us by default so that it does not give me

43
00:05:23,980 --> 00:05:30,339
any kind of problem, you see that the browser stays in gray, it is worth erasing everything, then

44
00:05:30,339 --> 00:05:35,439
here I have created these good pages that I am going to erase this whole, this is worth it

45
00:05:35,439 --> 00:05:51,620
Well, I delete it and we do it, it is worth it and in the app jsx what I have created are the routes,

46
00:05:51,620 --> 00:06:01,420
okay, then we are also going to do this again, I delete this and this you would have it like this with

47
00:06:01,420 --> 00:06:08,209
your code is worth

48
00:06:13,209 --> 00:06:21,769
also that I do not need to have them all the same

49
00:06:21,769 --> 00:06:30,050
and I think I have not done anything else, okay, well then the first

50
00:06:30,050 --> 00:06:42,889
is control c yes ok the first thing is to install that library that we are going to use to create the routes

51
00:06:42,889 --> 00:06:53,410
ok then we have stayed in that that library is the real router 2 because we are going to put and

52
00:06:53,410 --> 00:06:59,329
remember that these installations this npm and everything that I am installing now I do it within

53
00:06:59,329 --> 00:07:05,370
client, you do it within the client because if you are not going to put it in the backend you have to be very

54
00:07:05,370 --> 00:07:10,430
careful with that, it is worth that it is not the same the json package of the client that the json package of the

55
00:07:12,230 --> 00:07:21,970
backend is worth if I do it outside the client of the client folder then it will make me

56
00:07:21,970 --> 00:07:28,449
know it will make me the installation and that dependence on the package point json of the backend is worth and

57
00:07:28,449 --> 00:07:34,569
that is not what we want you have to be very careful with that ok then the first thing I put the npm

58
00:07:36,670 --> 00:07:48,889
and real router where it is worth and we install it I already have it installed well because it is already installed

59
00:07:48,889 --> 00:08:04,759
Once I have it installed, the first thing I'm going to do is in the apjsx file I'm going to use it

60
00:08:04,759 --> 00:08:10,620
so far I have been using it to create the different pages that from if you remember

61
00:08:10,620 --> 00:08:26,060
from index html we call the main js x javascript and xml sorry and ajax not if xml is valid and

62
00:08:27,920 --> 00:08:34,340
the main I open it and then it puts me that what I want is or that what I visualize is what

63
00:08:34,340 --> 00:08:43,820
in app that app is app.js x is worth that is why I am working all the time on the app js x

64
00:08:43,820 --> 00:08:52,519
because in the end the one I am calling the one I am viewing is the code is worth retune the labels

65
00:08:52,519 --> 00:08:57,139
that I am putting between these two tips it is worth remembering that which is what we have been doing

66
00:08:57,139 --> 00:09:04,580
doing so far ok and then here what I want is to start instead of creating directly

67
00:09:04,580 --> 00:09:13,759
the web pages ok what I am going to do is create the different routes and from here we are going to

68
00:09:13,759 --> 00:09:18,840
call the different web pages that we are going to create within a folder that is going to be

69
00:09:18,840 --> 00:09:26,080
within that rc that is going to be called page ok pages or as you want ok then I am going to

70
00:09:26,080 --> 00:09:28,740
create this

71
00:09:28,899 --> 00:09:37,019
this page is worth I already have it ok then I come back here and we are going to

72
00:09:37,019 --> 00:09:45,730
continue we have installed the real router dom we are going to start

73
00:09:45,730 --> 00:09:53,480
our server is worth to go seeing what it is what it is doing

74
00:09:53,480 --> 00:10:00,000
ok then the first thing as always import and what are we going to import from this

75
00:10:00,000 --> 00:10:09,460
library that we have just loaded, we are going to import three functions, one is the browser

76
00:10:11,679 --> 00:10:24,970
in browser ok router browser router another is going to be routers and another is

77
00:10:24,970 --> 00:10:48,039
and here we are going to put the real router where it is worth then I am going to use these three functions

78
00:10:48,039 --> 00:10:54,460
is worth one is the browser router other routers and other road the browser router is the first container

79
00:10:54,460 --> 00:11:02,639
ok then well if you get into the documentation of the real router you see that they always use

80
00:11:02,639 --> 00:11:11,139
these three browser router is the container of all routes contains all routes ok it is

81
00:11:11,139 --> 00:11:18,360
like the container of the routes and road is for route to route it is worth defining route to route

82
00:11:18,360 --> 00:11:23,639
then the first thing I'm going to do is change this one, this one, instead of being

83
00:11:25,360 --> 00:11:46,080
that, it will be a browser and here we are going to close but it is worth it and then this is one of the

84
00:11:46,080 --> 00:11:50,860
first changes instead of starting with deep and ending with deep it will start with the container

85
00:11:50,860 --> 00:12:00,460
that reat routerdom asks us for, okay, what is the second one that I have told you is that container that

86
00:12:00,460 --> 00:12:14,539
will contain the routes, okay, so I'm going to put routes here, ready, okay, okay, and then what

87
00:12:14,539 --> 00:12:20,299
am I going to do inside the container where all the routes are going to be using root and

88
00:12:20,299 --> 00:12:31,240
go routing each of the links of the links of the directions of my from

89
00:12:31,240 --> 00:12:38,399
ok then because what is the first because the home is worth then here we are going to

90
00:12:38,399 --> 00:12:46,179
put the road we are going to say the peace

91
00:12:46,179 --> 00:12:53,639
is worth the peace which is the initial this is worth and we are going to tell the element

92
00:12:56,279 --> 00:13:05,179
what we want to be worth if you remember with the back-end we had that address is the link and then

93
00:13:05,179 --> 00:13:13,220
what function we wanted to be executed in this case we are going to do the same in element we are going to

94
00:13:13,220 --> 00:13:25,120
say what we want it to execute in this case we are going to put a single one we are going to put a text h1

95
00:13:27,340 --> 00:13:41,899
h1 is not going to tell us anything we are going to put the text we are going to put 7 xl so that it looks good

96
00:13:41,899 --> 00:13:54,480
ok and we are going to put home for example ok and what I do then is to close the

97
00:13:54,480 --> 00:14:11,820
rock ok and so I am going to create my first route we can do this I think six times more

98
00:14:11,820 --> 00:14:21,600
1 2 3 4 5 and 6 we are going to do it now if we need one more because we are going to put it

99
00:14:21,600 --> 00:14:29,159
ok what was another one that we need so the register is the one that I am going to focus on

100
00:14:29,159 --> 00:14:41,320
ok then here I am going to put the register there was another one that is the login ok these I already tell you

101
00:14:41,320 --> 00:14:47,100
siempre que es lo básico que se hace siempre vale

102
00:14:47,100 --> 00:14:52,080
habrá por ahí miles de ejemplos exactamente iguales

103
00:14:52,080 --> 00:14:57,580
en este caso es de un libro y es tal cual vale entonces login

104
00:14:57,580 --> 00:15:09,879
qué más teníamos en el back en las tareas que nos mostrar las tareas

105
00:15:09,879 --> 00:15:26,039
what else did we have we had the tasks we had to add a task from task to add

106
00:15:30,039 --> 00:15:31,179
we had

107
00:15:33,200 --> 00:15:45,299
the two points and that this was to update the perception we put because we remember that we did

108
00:15:45,299 --> 00:15:51,740
the raw operations in the backend, it is worth updating

109
00:15:52,139 --> 00:16:01,720
we had another one with the profile and to see well I don't know if I

110
00:16:01,720 --> 00:16:07,399
I'm missing one but if we're missing it, we'll be putting it in such a way that

111
00:16:07,399 --> 00:16:15,460
we already have our container for the routes the container for good everything

112
00:16:15,460 --> 00:16:22,720
what the real router is, then the container for the routes and the different routes in the

113
00:16:22,720 --> 00:16:27,940
different routes, the only thing we put is the pack and the elements in the pack we put the links in the

114
00:16:27,940 --> 00:16:38,899
element what we want to be displayed on our page when we enter one of these links in

115
00:16:38,899 --> 00:16:44,200
this case the only thing we do is a text, it is worth that I have played with the classes of tailwinds

116
00:16:44,200 --> 00:16:51,100
I have put the text 7 xl so that it looks a bit that it looks big ok then we see that

117
00:16:52,559 --> 00:17:02,500
let's go here we see that as it is in register it shows me register ok if it is in login

118
00:17:02,500 --> 00:17:13,960
what it is going to show us is login if we enter profile ok profile well that's it ok it's

119
00:17:13,960 --> 00:17:24,000
everything working well, well, we have everything perfect, okay, what do we do now? Well, a

120
00:17:24,000 --> 00:17:30,200
web page, then we have created the page, okay, then within the page we are going to create

121
00:17:32,279 --> 00:17:41,880
a file, okay, it will always be of the type jsx, okay, and in this case we are going to call it

122
00:17:41,880 --> 00:17:47,480
register page, for example, or as you want, it is always a little

123
00:17:49,240 --> 00:17:55,259
page, it is always a little to your choice because I put these names or I put them in English or

124
00:17:55,259 --> 00:18:01,079
because in the end if you start to see technical documentation you start to look at things out there you see

125
00:18:01,079 --> 00:18:08,220
that everything because they have more or less these names then well I think it is the correct way

126
00:18:08,220 --> 00:18:18,119
to put it is always this ok ok and we are going to create our rfc structure ok look this is

127
00:18:18,119 --> 00:18:27,579
real functional is sport component ok then it is a functional component ok to export a

128
00:18:27,579 --> 00:18:34,319
real function ok then it puts you it makes the skeleton by default if I put rfc I give it

129
00:18:34,319 --> 00:18:42,660
to intro because I already believe it and I believe it with the same name as the name of the file is worth this

130
00:18:42,660 --> 00:18:48,700
is very comfortable and it is very fast I do not know if it will work for you or not for it to work for you

131
00:18:48,700 --> 00:18:58,700
you have to have this library installed it is worth that 7 real redux graf ql real native the snippet

132
00:18:58,700 --> 00:19:05,720
vale el sniper vale tenéis que tener instalada está en el momento en el que lo tenéis esta

133
00:19:05,720 --> 00:19:12,980
extensión cargada ya podéis usarlo y la verdad es que merece mucho la pena porque ganáis mucho

134
00:19:12,980 --> 00:19:27,960
tiempo vale una vez dicho todo esto pues nada vamos a quitar esto que no me hace falta este

135
00:19:27,960 --> 00:19:33,980
import we will already be putting the ones we need

136
00:19:33,980 --> 00:19:39,440
ok here I have the div ok right now I'm not going to put anything on it and what I'm going to

137
00:19:39,440 --> 00:19:44,519
do is ok I already have my folder

138
00:19:44,519 --> 00:19:49,920
page within page I have the register page and inside I have this page that is

139
00:19:49,920 --> 00:19:54,079
now where we are going to put these and it is worth the same thing we did before in the

140
00:19:54,079 --> 00:20:00,140
the jsx app now I am going to do it here ok and I am going to export it then as I am going to export it

141
00:20:00,140 --> 00:20:07,519
in the jsx app here in the register ok because it is where I want that form to be shown

142
00:20:07,519 --> 00:20:15,380
instead of saying hey show me this text this h1 label with that text I am going to tell it

143
00:20:15,380 --> 00:20:23,920
to take me to the register page website ok then what do I do first import

144
00:20:23,920 --> 00:20:30,759
then import remember that as it comes with default I do not need to put the keys

145
00:20:30,759 --> 00:20:41,859
ok then I'm going to say ok well import me register page from says the page register page

146
00:20:41,859 --> 00:20:53,700
dot jsx remember that when they are our files we always put that extension

147
00:20:53,700 --> 00:20:59,579
is worth that jsx when they are libraries that we have installed with the npm or that are from the

148
00:20:59,579 --> 00:21:09,700
real itself or byte or sorry bit or express then it is not worth it but now it is worth it and then what do we

149
00:21:09,700 --> 00:21:18,599
tell it when we enter the register path because it shows us that page is worth that we put it

150
00:21:18,599 --> 00:21:43,319
register page ok and we close ok and then now when we go to our page ok when we put

151
00:21:43,319 --> 00:21:53,470
here it exists ok it shows it to me without anything because there is nothing in the register page because there is

152
00:21:53,470 --> 00:21:59,230
and nothing is worth and then it is already worth I have already done everything necessary to start making that

153
00:21:59,230 --> 00:22:05,150
form is worth then we are going to start making that form and to make the forms

154
00:22:07,349 --> 00:22:17,150
a little this does not leave me we are going to pause it as it is already good because we are going to start then

155
00:22:17,150 --> 00:22:25,789
to make our page we have said that we are going to use the react hud font so I stop the from

156
00:22:28,720 --> 00:22:31,500
we do the npm is looking good

157
00:22:42,180 --> 00:22:42,980
now yes

158
00:22:42,980 --> 00:22:52,740
for then that the client we put the npm install

159
00:22:54,740 --> 00:22:55,640
read

160
00:23:01,569 --> 00:23:10,049
ok this provides me with a fairly decent library that is very good, in fact

161
00:23:10,049 --> 00:23:21,329
in what I taught you before if we go back to the browser here it is worth when you go into its

162
00:23:21,329 --> 00:23:26,970
website you have a video in which it begins to show you how to do the different options here with

163
00:23:26,970 --> 00:23:34,269
a simulator it is worth against that because look at a device that is supposed to be a mobile it is

164
00:23:34,269 --> 00:23:45,490
is worth how it puts the g because that is the summit how it is putting different or how it calls the fields

165
00:23:45,490 --> 00:23:55,329
instead of the idea of ​​how it puts that it has been required or not, well, this is very cool, this

166
00:23:55,329 --> 00:24:01,150
documentation is interesting that you see it at the time of doing good because this type of things

167
00:24:01,150 --> 00:24:07,150
aunque también las vamos a hacer en nuestra en nuestro formulario vale vale bueno seguimos

168
00:24:07,150 --> 00:24:14,839
entonces a ver que se está viendo bien sí vale pues entonces

169
00:24:18,279 --> 00:24:25,859
quedamos en que instalamos el react form se nos instala yo ya lo tenía ya lo tengo creado si me

170
00:24:25,859 --> 00:24:33,299
I go to the client's json package, always remember, very important, I see that in the dependencies

171
00:24:33,299 --> 00:24:40,480
I already have the hook form, the router DOM, okay, remember about the development dependencies, which was

172
00:24:40,480 --> 00:24:46,980
when we passed the minus D capital, okay, important, but these are for development, okay,

173
00:24:46,980 --> 00:24:58,579
then this I remove it we begin to make that that form is worth then the first thing is as

174
00:24:58,579 --> 00:25:09,309
always import what we have just installed is worth then the import in the import from

175
00:25:09,309 --> 00:25:29,640
read hook for ok and what is it going to import for ok what are we going to import

176
00:25:33,119 --> 00:25:43,099
because on the one hand the register and on the other hand well for now I am going to import only this

177
00:25:43,099 --> 00:25:54,259
no I'm wrong here we are going to import the user for that is worth the user for this function

178
00:25:54,259 --> 00:26:01,940
of which is the one that will allow us to play with that form it is worth this is worth

179
00:26:03,640 --> 00:26:12,099
I am like come then I have the register page function and it is now when I say

180
00:26:14,539 --> 00:26:22,420
the variables of that user form that I am going to use in one of them is the register this is the one that

181
00:26:22,420 --> 00:26:32,799
will allow me to give the name is worth the name to that field that we are going to collect to

182
00:26:32,799 --> 00:26:39,819
then be able to work with it put some schemes some data models remember what

183
00:26:39,819 --> 00:26:46,640
is what we did in the backend, well, to tell it this field is required, it is not required to

184
00:26:48,220 --> 00:26:56,819
remove the spaces in white from the front from behind, it is good because it complies with that rule, it is

185
00:26:56,819 --> 00:27:03,099
valid, we do everything through the register, then we are going to put the register and this is the same as

186
00:27:03,099 --> 00:27:35,579
I like it, it's okay, okay, and then once I've done that, well, nothing, well, let's

187
00:27:35,579 --> 00:27:40,019
start then we're going to put it in here as we've always been doing, label

188
00:27:40,019 --> 00:27:49,799
ready that is going to be the label we are going to see it what we are going to do on the page

189
00:27:49,799 --> 00:28:02,579
is worth down here is worth form is worth what we are going to put an input of type tex

190
00:28:02,579 --> 00:28:40,799
input type text and that's it, we're going to put an input type of type email and we're going to put an input of

191
00:28:40,799 --> 00:28:43,380
type

192
00:28:44,039 --> 00:28:49,900
password these three are the fields that were

193
00:28:49,900 --> 00:28:55,180
mandatory in the back end ok then if we see the page

194
00:28:55,180 --> 00:29:00,680
first we launch our customer npm where

195
00:29:00,680 --> 00:29:06,119
ok and here

196
00:29:06,119 --> 00:29:11,430
something has happened

197
00:29:26,539 --> 00:29:37,529
let's see I'm going to stop it while I look at it because it's giving me a problem but I don't know

198
00:29:37,529 --> 00:29:43,049
well where it comes from because I have put here instead of use form I have put the user form

199
00:29:43,049 --> 00:29:51,650
ok and it has been just for that you see that at the time of removing the r because everything is already

200
00:29:51,650 --> 00:29:58,670
working well you already have here ok the three text fields that we have put now this

201
00:29:58,670 --> 00:30:05,930
you have to give it a little shape, then we are going to give it shape, we are going to put it for example

202
00:30:09,740 --> 00:30:19,940
in this in the container we are going to put a class because with everything we have seen it is worth the

203
00:30:19,940 --> 00:30:26,400
timing because there you are doing it a little as you want or as you are asked in this case

204
00:30:26,400 --> 00:30:42,140
because we are going to put a color that is darker than this one, we are going to put the maximum width

205
00:30:42,140 --> 00:30:52,519
and then we are going to say that it is md md and it will put it to that resolution size of the md

206
00:30:52,519 --> 00:30:59,240
ok always remember that label and those those names of the mb lg 2 x l x l ok

207
00:30:59,240 --> 00:31:05,400
always remember the breaking points ok we are going to put a padding a

208
00:31:05,400 --> 00:31:14,680
general padding of 10 for example so that it gives it shape we are going to put it

209
00:31:14,680 --> 00:31:19,579
so that the corners are rounded 2 where

210
00:31:19,579 --> 00:31:29,710
we are going to put it with the md for example what else can we put on it so

211
00:31:29,710 --> 00:31:40,109
we are going to put it for example here

212
00:31:44,210 --> 00:31:47,809
some classes that are

213
00:31:47,809 --> 00:31:54,410
because we are going to put the same as the paris we are going to say that the width is

214
00:31:54,410 --> 00:32:00,029
complete we are going to say for example

215
00:32:03,029 --> 00:32:11,029
the background is of color 5 but it is not as dark as we have put before

216
00:32:11,029 --> 00:32:17,130
that it is 700 ok so it is a bit like I have done before

217
00:32:17,130 --> 00:32:22,869
that when we write the text is in white that

218
00:32:22,869 --> 00:32:32,869
we are going to put a margin in x to the right of the left of 4 a margin and up and down for example of 2

219
00:32:32,869 --> 00:32:44,250
is worth and rounder we are going to do the same as we have done with the parent container is worth and so it is

220
00:32:44,250 --> 00:32:52,250
putting it good because it is taking a certain one that way is worth then this I am going to copy and paste

221
00:32:52,250 --> 00:33:16,170
control c, in all, control v, control v, okay, so this, we are going to, in the form,

222
00:33:20,119 --> 00:33:31,460
we are also going to put one of these fields, a margin, margin in i,

223
00:33:31,460 --> 00:34:03,829
we are going to put a margin of 4 and we are going to put a margin of 4 here, I would already have the different fields here,

224
00:34:03,829 --> 00:34:24,130
ok username we are going to make this bigger and so we see it well here ok username the email and the

225
00:34:24,130 --> 00:34:30,269
password ok that allows us to play because always with all these little things

226
00:34:30,269 --> 00:34:41,429
good that we would lack the button of the summit is worth the typical button of the summit because here we are going

227
00:34:41,429 --> 00:34:46,150
we are going to put a button

228
00:34:47,269 --> 00:34:49,789
this is

229
00:34:49,789 --> 00:34:59,449
sunet and we are going to put it to be

230
00:34:59,449 --> 00:35:01,929
register

231
00:35:01,929 --> 00:35:06,210
ok this we can put

232
00:35:06,210 --> 00:35:11,690
a class with a bg color

233
00:35:11,690 --> 00:35:54,099
We can put a pd2, we can put rmdm, we can play with a hover and then tell it that here when we go over we have that the bg

234
00:35:54,099 --> 00:35:59,079
the background color because it changes to the best to 500

235
00:35:59,079 --> 00:36:03,659
ok well then with everything we have been seeing you can go

236
00:36:03,659 --> 00:36:11,920
playing you as you like as you want ok here we can put a shadow

237
00:36:15,000 --> 00:36:17,880
xl

238
00:36:17,880 --> 00:36:22,840
this is how I had it I am putting it because before well when I

239
00:36:22,840 --> 00:36:25,920
taught at the beginning

240
00:36:26,219 --> 00:36:34,280
because this is a shadow color

241
00:36:34,280 --> 00:36:42,670
white

242
00:36:43,570 --> 00:36:50,139
white ok so it seems that it is more like

243
00:36:50,139 --> 00:36:53,219
illuminated ok because here it is already starting

244
00:36:53,219 --> 00:36:56,860
to play I can put another tip

245
00:36:56,860 --> 00:37:00,679
here that I am going to use it as the

246
00:37:00,679 --> 00:37:14,989
container to play with the flex class is good then here I am going to put

247
00:37:18,650 --> 00:37:21,650
the flex

248
00:37:25,340 --> 00:37:35,860
for example we can tell him that the justify is in the center and so we have it here in the center well

249
00:37:35,860 --> 00:37:39,739
podría ir poniéndole aquí un título en vez de que ponga aquí registro o algo

250
00:37:39,739 --> 00:37:47,019
así vale ir haciéndolo más bonito vale que al final esto pues bueno aquí le

251
00:37:47,019 --> 00:37:51,099
podemos meter un margen

252
00:37:54,329 --> 00:38:06,150
de 15

253
00:38:06,150 --> 00:38:26,099
for example so I already have it here all good because centered and such but this would have to

254
00:38:26,099 --> 00:38:31,400
control it well with the breakpoints ok and you could go doing it because all the

255
00:38:31,400 --> 00:38:37,000
nice you want ok I already leave it like that because in the end what interests me here now is to use

256
00:38:37,000 --> 00:38:44,340
the react form and so far well I have used the button so far I have not used anything

257
00:38:45,619 --> 00:38:51,500
that is from the library itself, here we have the register so that I am going to use that register

258
00:38:51,500 --> 00:39:00,960
to say the name of this field and to put those conditions those good ones and those conditions

259
00:39:00,960 --> 00:39:08,139
that must fulfill that field to be validated or not, then we are going to put, for example, here

260
00:39:09,239 --> 00:39:18,420
a key point point point register and here you tell him the first thing is the name of the field, it is worth

261
00:39:18,420 --> 00:39:28,380
then in parentheses commended here I am going to say the user name we are going to tell him after the comma

262
00:39:28,380 --> 00:39:36,280
after a comma, it is worth between keys that what are those criteria that that field must

263
00:39:36,280 --> 00:39:48,039
comply with, for example, because it is required, it is worth that it is going to be true, it is ready, it is valid and

264
00:39:48,039 --> 00:39:56,340
so in this way I am using the read good form to give it a name to that field and to

265
00:39:56,340 --> 00:40:04,980
and tell him that it is a field that has to be required, okay, so what else can I put here

266
00:40:06,719 --> 00:40:08,659
we are going to separate this to go

267
00:40:10,440 --> 00:40:20,179
seeing everything I am going to put here the register I am going to put the classes here I am going to put them here and

268
00:40:20,179 --> 00:40:33,820
before closing it I am going to put the placeholder here, so here we are going to put it and I am

269
00:40:36,219 --> 00:40:52,829
ok and this is ok then this would stay like this ok and I am going to do the same with the rest

270
00:40:52,829 --> 00:41:04,829
then I'm going to take less time copying and closing so I'm going to delete this I'm going to select

271
00:41:04,829 --> 00:41:20,659
this input and I'm going to copy it three times this is going to be email type this is going to be the

272
00:41:20,659 --> 00:41:27,730
the placeholder we are going to tell it that it is going to be

273
00:41:30,489 --> 00:41:35,250
email here it is going to be the password of the type of password

274
00:41:38,880 --> 00:41:42,719
password all fields are required because we needed in the backend

275
00:41:44,460 --> 00:41:57,420
password and password and password is good because we would already have it ok then we would already start here

276
00:41:57,420 --> 00:42:07,059
we would already write our fields and everything will work for us. Now, what do I want to happen

277
00:42:07,059 --> 00:42:14,139
when I click on the register button? Well, in this case I'm not going to send the

278
00:42:14,139 --> 00:42:21,900
data to the backend yet, I'm just going to make it show them to me in the development tools in the

279
00:42:21,900 --> 00:42:31,260
console of the browser, it is worth the client then there I am going to import the second function that

280
00:42:31,260 --> 00:42:44,579
provides me the react hood form, which is the one of the hand is to the summit ok then you already

281
00:42:44,579 --> 00:42:50,340
know you have used in first forms and you know that when you click when you put

282
00:42:50,340 --> 00:42:56,920
a button of the summit type this is going to do an action that we have put inside the

283
00:42:56,920 --> 00:43:04,639
form label in this case and using this library of the react good form what we are going to do is

284
00:43:04,639 --> 00:43:17,309
that we are going to capture that event where we are here with its myth, okay and we are going to execute an

285
00:43:17,309 --> 00:43:26,210
an action in this case because it is going to be an arrow function and we are going to pass the summit we are going to

286
00:43:26,210 --> 00:43:39,860
tell him we are going to pass the values values ​​it is worth those values ​​are the ones that are inside

287
00:43:39,860 --> 00:43:49,860
what we have been writing within each of those fields is worth and that they are the ones that we have

288
00:43:49,860 --> 00:43:57,599
been putting inside the register is worth and what are we going to do with those values because to visualize them

289
00:43:57,599 --> 00:44:05,579
by console is worth then we do our arrow function as we have done until now all the

290
00:44:05,579 --> 00:44:16,460
time something is going to happen to me here this video where it has come out I do not know

291
00:44:17,599 --> 00:44:38,820
we have our arrow function we are going to put this here

292
00:44:38,820 --> 00:44:52,320
and this is giving me some kind of error, I don't know why, now we see it, console.log,

293
00:44:52,320 --> 00:45:02,880
that it displays the values, values, okay, so we have this, we have the onSummit,

294
00:45:02,880 --> 00:45:28,940
and that's it, that's it, that's it, okay, then the arrow function, I'm telling you, okay, when I press

295
00:45:28,940 --> 00:45:35,599
the submit button, you're going to come, okay, you're going to do what I'm telling you here through the

296
00:45:35,599 --> 00:45:41,420
let him submit, which is to take those values ​​that we have been writing and you are going to return them by

297
00:45:41,420 --> 00:45:50,900
console, nothing else, so here I put various saints, here we put this one, two, three, four, if I

298
00:45:50,900 --> 00:45:56,820
register and everything is fine, it is worth if we come to the development tools,

299
00:45:56,820 --> 00:46:10,610
we are going to give it ok we see that it is showing us all the values ​​well and here we have them

300
00:46:12,090 --> 00:46:18,909
so we have created our routes we have created our first form of our front ok

301
00:46:18,909 --> 00:46:26,809
we have played with tailwind you can and I leave it to you to put it more beautiful also the background color

302
00:46:26,809 --> 00:46:35,210
the best, well, put a bar to be able to move to the different routes, it is worth filling it completely, I

303
00:46:35,210 --> 00:46:41,210
already leave the video here because if not it is very very long, well, a greeting to all, see you later