Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Back end Vs Front end - Vídeo 25 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 1 de agosto de 2024 por Mario S.

57 visualizaciones

utilizando las librerías react-router-dom y react-hook-form para crear nuestras GUI del cliente

Más información Transcripción

Descargar la transcripción

well in this video we are going to start to see 00:00:01
the creation of the register form, it is valid from the client from the front, you already know that we are with the 00:00:07
front once we have finished seeing the framework of the tailwind because that is how we start to create 00:00:15
the front with its interfaces, then well here you see the first thing you can see is that there is 00:00:23
a route that has been created exactly not the same with another library but the logic of the 00:00:32
operation is exactly the same as when we were doing the backend and we used the 00:00:41
router of the express is worth here first I am going to create several routes because they can be to register 00:00:48
the login this is the one to register we also did the tasks update a task see a 00:00:56
profile well because all these things are worth we are getting them with the routes is worth once 00:01:06
we have to throw the routes what we do is create different pages for each of 00:01:12
these routes in this case I have created the register page of the register ok and then you 00:01:18
see that it is first a container that is the body in which I have used flex and I have centered and I have 00:01:28
put a margin then another container that is another dip that I use as the back of the 00:01:36
form is worth to draw it then the fields one of text one of email another of 00:01:44
type password and the button this is a form that will give us the 00:01:51
own read is worth both the routes as 00:01:56
the form we are going to use it with read libraries then the routes 00:02:04
we are going to use them with react router ok then we have here the page of react router we have 00:02:10
here in the tutorial it tells you how to install it tells us that we have to install the npm install react 00:02:17
router down well then we install it ok and then we have to do the form and do 00:02:27
validations de datos vale pues por ejemplo esto no me deja enviarlo si yo me cojo y me voy más 00:02:34
herramientas herramientas de desarrollo esto lo vamos a borrar vale si le doy a registrar 00:02:46
aquí me deberían salir los datos que estoy metiendo no los mete porque he metido una 00:02:52
validation from read good form that serves me to validate the data in this case the only thing 00:02:58
I have said is that all these fields are necessary because you have to remember that this is what 00:03:05
we said in the back in these fields will be necessary to be able to register, you always have to 00:03:11
obviously do the front in relation to what we have put to the schemes and to the models that we use 00:03:18
in the backend ok then here we needed an email then at the time of entering the email 00:03:24
and when I give it to send it without sending me those data because it already fulfills all the conditions 00:03:34
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 00:03:40
this case the only thing I have said is that I visualize it ok then that has already started 00:03:47
to play with the classes of tailwind I have put a shade of green color because I have not put the 00:03:53
source I have put the margins the padding I have rounded the corners and little else is worth when you say that 00:04:00
the width that you want to occupy but come on I have not used any animation as I said in the 00:04:09
video of yesterday or anything like that and what I get is to do the form that would be 00:04:15
only this and this would have to put a header a bar like the one we did yesterday or something 00:04:22
like that is worth to be able to move between the different pages not having to be writing here the 00:04:29
routes is worth but we are already doing it according to later well then the code to do this 00:04:34
this I am going to close the code is this 00:04:43
is all this then I am inside app jsx and well then the code would be this ok 00:04:51
we are going to delete it and we are going to do it little by little then we are going to this 00:05:05
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 00:05:12
any kind of problem, you see that the browser stays in gray, it is worth erasing everything, then 00:05:23
here I have created these good pages that I am going to erase this whole, this is worth it 00:05:30
Well, I delete it and we do it, it is worth it and in the app jsx what I have created are the routes, 00:05:35
okay, then we are also going to do this again, I delete this and this you would have it like this with 00:05:51
your code is worth 00:06:01
also that I do not need to have them all the same 00:06:13
and I think I have not done anything else, okay, well then the first 00:06:21
is control c yes ok the first thing is to install that library that we are going to use to create the routes 00:06:30
ok then we have stayed in that that library is the real router 2 because we are going to put and 00:06:42
remember that these installations this npm and everything that I am installing now I do it within 00:06:53
client, you do it within the client because if you are not going to put it in the backend you have to be very 00:06:59
careful with that, it is worth that it is not the same the json package of the client that the json package of the 00:07:05
backend is worth if I do it outside the client of the client folder then it will make me 00:07:12
know it will make me the installation and that dependence on the package point json of the backend is worth and 00:07:21
that is not what we want you have to be very careful with that ok then the first thing I put the npm 00:07:28
and real router where it is worth and we install it I already have it installed well because it is already installed 00:07:36
Once I have it installed, the first thing I'm going to do is in the apjsx file I'm going to use it 00:07:48
so far I have been using it to create the different pages that from if you remember 00:08:04
from index html we call the main js x javascript and xml sorry and ajax not if xml is valid and 00:08:10
the main I open it and then it puts me that what I want is or that what I visualize is what 00:08:27
in app that app is app.js x is worth that is why I am working all the time on the app js x 00:08:34
because in the end the one I am calling the one I am viewing is the code is worth retune the labels 00:08:43
that I am putting between these two tips it is worth remembering that which is what we have been doing 00:08:52
doing so far ok and then here what I want is to start instead of creating directly 00:08:57
the web pages ok what I am going to do is create the different routes and from here we are going to 00:09:04
call the different web pages that we are going to create within a folder that is going to be 00:09:13
within that rc that is going to be called page ok pages or as you want ok then I am going to 00:09:18
create this 00:09:26
this page is worth I already have it ok then I come back here and we are going to 00:09:28
continue we have installed the real router dom we are going to start 00:09:37
our server is worth to go seeing what it is what it is doing 00:09:45
ok then the first thing as always import and what are we going to import from this 00:09:53
library that we have just loaded, we are going to import three functions, one is the browser 00:10:00
in browser ok router browser router another is going to be routers and another is 00:10:11
and here we are going to put the real router where it is worth then I am going to use these three functions 00:10:24
is worth one is the browser router other routers and other road the browser router is the first container 00:10:48
ok then well if you get into the documentation of the real router you see that they always use 00:10:54
these three browser router is the container of all routes contains all routes ok it is 00:11:02
like the container of the routes and road is for route to route it is worth defining route to route 00:11:11
then the first thing I'm going to do is change this one, this one, instead of being 00:11:18
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 00:11:25
first changes instead of starting with deep and ending with deep it will start with the container 00:11:46
that reat routerdom asks us for, okay, what is the second one that I have told you is that container that 00:11:50
will contain the routes, okay, so I'm going to put routes here, ready, okay, okay, and then what 00:12:00
am I going to do inside the container where all the routes are going to be using root and 00:12:14
go routing each of the links of the links of the directions of my from 00:12:20
ok then because what is the first because the home is worth then here we are going to 00:12:31
put the road we are going to say the peace 00:12:38
is worth the peace which is the initial this is worth and we are going to tell the element 00:12:46
what we want to be worth if you remember with the back-end we had that address is the link and then 00:12:56
what function we wanted to be executed in this case we are going to do the same in element we are going to 00:13:05
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 00:13:13
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 00:13:27
ok and we are going to put home for example ok and what I do then is to close the 00:13:41
rock ok and so I am going to create my first route we can do this I think six times more 00:13:54
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 00:14:11
ok what was another one that we need so the register is the one that I am going to focus on 00:14:21
ok then here I am going to put the register there was another one that is the login ok these I already tell you 00:14:29
siempre que es lo básico que se hace siempre vale 00:14:41
habrá por ahí miles de ejemplos exactamente iguales 00:14:47
en este caso es de un libro y es tal cual vale entonces login 00:14:52
qué más teníamos en el back en las tareas que nos mostrar las tareas 00:14:57
what else did we have we had the tasks we had to add a task from task to add 00:15:09
we had 00:15:30
the two points and that this was to update the perception we put because we remember that we did 00:15:33
the raw operations in the backend, it is worth updating 00:15:45
we had another one with the profile and to see well I don't know if I 00:15:52
I'm missing one but if we're missing it, we'll be putting it in such a way that 00:16:01
we already have our container for the routes the container for good everything 00:16:07
what the real router is, then the container for the routes and the different routes in the 00:16:15
different routes, the only thing we put is the pack and the elements in the pack we put the links in the 00:16:22
element what we want to be displayed on our page when we enter one of these links in 00:16:27
this case the only thing we do is a text, it is worth that I have played with the classes of tailwinds 00:16:38
I have put the text 7 xl so that it looks a bit that it looks big ok then we see that 00:16:44
let's go here we see that as it is in register it shows me register ok if it is in login 00:16:52
what it is going to show us is login if we enter profile ok profile well that's it ok it's 00:17:02
everything working well, well, we have everything perfect, okay, what do we do now? Well, a 00:17:13
web page, then we have created the page, okay, then within the page we are going to create 00:17:24
a file, okay, it will always be of the type jsx, okay, and in this case we are going to call it 00:17:32
register page, for example, or as you want, it is always a little 00:17:41
page, it is always a little to your choice because I put these names or I put them in English or 00:17:49
because in the end if you start to see technical documentation you start to look at things out there you see 00:17:55
that everything because they have more or less these names then well I think it is the correct way 00:18:01
to put it is always this ok ok and we are going to create our rfc structure ok look this is 00:18:08
real functional is sport component ok then it is a functional component ok to export a 00:18:18
real function ok then it puts you it makes the skeleton by default if I put rfc I give it 00:18:27
to intro because I already believe it and I believe it with the same name as the name of the file is worth this 00:18:34
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 00:18:42
you have to have this library installed it is worth that 7 real redux graf ql real native the snippet 00:18:48
vale el sniper vale tenéis que tener instalada está en el momento en el que lo tenéis esta 00:18:58
extensión cargada ya podéis usarlo y la verdad es que merece mucho la pena porque ganáis mucho 00:19:05
tiempo vale una vez dicho todo esto pues nada vamos a quitar esto que no me hace falta este 00:19:12
import we will already be putting the ones we need 00:19:27
ok here I have the div ok right now I'm not going to put anything on it and what I'm going to 00:19:33
do is ok I already have my folder 00:19:39
page within page I have the register page and inside I have this page that is 00:19:44
now where we are going to put these and it is worth the same thing we did before in the 00:19:49
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 00:19:54
in the jsx app here in the register ok because it is where I want that form to be shown 00:20:00
instead of saying hey show me this text this h1 label with that text I am going to tell it 00:20:07
to take me to the register page website ok then what do I do first import 00:20:15
then import remember that as it comes with default I do not need to put the keys 00:20:23
ok then I'm going to say ok well import me register page from says the page register page 00:20:30
dot jsx remember that when they are our files we always put that extension 00:20:41
is worth that jsx when they are libraries that we have installed with the npm or that are from the 00:20:53
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 00:20:59
tell it when we enter the register path because it shows us that page is worth that we put it 00:21:09
register page ok and we close ok and then now when we go to our page ok when we put 00:21:18
here it exists ok it shows it to me without anything because there is nothing in the register page because there is 00:21:43
and nothing is worth and then it is already worth I have already done everything necessary to start making that 00:21:53
form is worth then we are going to start making that form and to make the forms 00:21:59
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 00:22:07
to make our page we have said that we are going to use the react hud font so I stop the from 00:22:17
we do the npm is looking good 00:22:28
now yes 00:22:42
for then that the client we put the npm install 00:22:42
read 00:22:54
ok this provides me with a fairly decent library that is very good, in fact 00:23:01
in what I taught you before if we go back to the browser here it is worth when you go into its 00:23:10
website you have a video in which it begins to show you how to do the different options here with 00:23:21
a simulator it is worth against that because look at a device that is supposed to be a mobile it is 00:23:26
is worth how it puts the g because that is the summit how it is putting different or how it calls the fields 00:23:34
instead of the idea of ​​how it puts that it has been required or not, well, this is very cool, this 00:23:45
documentation is interesting that you see it at the time of doing good because this type of things 00:23:55
aunque también las vamos a hacer en nuestra en nuestro formulario vale vale bueno seguimos 00:24:01
entonces a ver que se está viendo bien sí vale pues entonces 00:24:07
quedamos en que instalamos el react form se nos instala yo ya lo tenía ya lo tengo creado si me 00:24:18
I go to the client's json package, always remember, very important, I see that in the dependencies 00:24:25
I already have the hook form, the router DOM, okay, remember about the development dependencies, which was 00:24:33
when we passed the minus D capital, okay, important, but these are for development, okay, 00:24:40
then this I remove it we begin to make that that form is worth then the first thing is as 00:24:46
always import what we have just installed is worth then the import in the import from 00:24:58
read hook for ok and what is it going to import for ok what are we going to import 00:25:09
because on the one hand the register and on the other hand well for now I am going to import only this 00:25:33
no I'm wrong here we are going to import the user for that is worth the user for this function 00:25:43
of which is the one that will allow us to play with that form it is worth this is worth 00:25:54
I am like come then I have the register page function and it is now when I say 00:26:03
the variables of that user form that I am going to use in one of them is the register this is the one that 00:26:14
will allow me to give the name is worth the name to that field that we are going to collect to 00:26:22
then be able to work with it put some schemes some data models remember what 00:26:32
is what we did in the backend, well, to tell it this field is required, it is not required to 00:26:39
remove the spaces in white from the front from behind, it is good because it complies with that rule, it is 00:26:48
valid, we do everything through the register, then we are going to put the register and this is the same as 00:26:56
I like it, it's okay, okay, and then once I've done that, well, nothing, well, let's 00:27:03
start then we're going to put it in here as we've always been doing, label 00:27:35
ready that is going to be the label we are going to see it what we are going to do on the page 00:27:40
is worth down here is worth form is worth what we are going to put an input of type tex 00:27:49
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 00:28:02
type 00:28:40
password these three are the fields that were 00:28:44
mandatory in the back end ok then if we see the page 00:28:49
first we launch our customer npm where 00:28:55
ok and here 00:29:00
something has happened 00:29:06
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 00:29:26
well where it comes from because I have put here instead of use form I have put the user form 00:29:37
ok and it has been just for that you see that at the time of removing the r because everything is already 00:29:43
working well you already have here ok the three text fields that we have put now this 00:29:51
you have to give it a little shape, then we are going to give it shape, we are going to put it for example 00:29:58
in this in the container we are going to put a class because with everything we have seen it is worth the 00:30:09
timing because there you are doing it a little as you want or as you are asked in this case 00:30:19
because we are going to put a color that is darker than this one, we are going to put the maximum width 00:30:26
and then we are going to say that it is md md and it will put it to that resolution size of the md 00:30:42
ok always remember that label and those those names of the mb lg 2 x l x l ok 00:30:52
always remember the breaking points ok we are going to put a padding a 00:30:59
general padding of 10 for example so that it gives it shape we are going to put it 00:31:05
so that the corners are rounded 2 where 00:31:14
we are going to put it with the md for example what else can we put on it so 00:31:19
we are going to put it for example here 00:31:29
some classes that are 00:31:44
because we are going to put the same as the paris we are going to say that the width is 00:31:47
complete we are going to say for example 00:31:54
the background is of color 5 but it is not as dark as we have put before 00:32:03
that it is 700 ok so it is a bit like I have done before 00:32:11
that when we write the text is in white that 00:32:17
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 00:32:22
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 00:32:32
putting it good because it is taking a certain one that way is worth then this I am going to copy and paste 00:32:44
control c, in all, control v, control v, okay, so this, we are going to, in the form, 00:32:52
we are also going to put one of these fields, a margin, margin in i, 00:33:20
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, 00:33:31
ok username we are going to make this bigger and so we see it well here ok username the email and the 00:34:03
password ok that allows us to play because always with all these little things 00:34:24
good that we would lack the button of the summit is worth the typical button of the summit because here we are going 00:34:30
we are going to put a button 00:34:41
this is 00:34:47
sunet and we are going to put it to be 00:34:49
register 00:34:59
ok this we can put 00:35:01
a class with a bg color 00:35:06
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 00:35:11
the background color because it changes to the best to 500 00:35:54
ok well then with everything we have been seeing you can go 00:35:59
playing you as you like as you want ok here we can put a shadow 00:36:03
this is how I had it I am putting it because before well when I 00:36:17
taught at the beginning 00:36:22
because this is a shadow color 00:36:26
white 00:36:34
white ok so it seems that it is more like 00:36:43
illuminated ok because here it is already starting 00:36:50
to play I can put another tip 00:36:53
here that I am going to use it as the 00:36:56
container to play with the flex class is good then here I am going to put 00:37:00
the flex 00:37:18
for example we can tell him that the justify is in the center and so we have it here in the center well 00:37:25
podría ir poniéndole aquí un título en vez de que ponga aquí registro o algo 00:37:35
así vale ir haciéndolo más bonito vale que al final esto pues bueno aquí le 00:37:39
podemos meter un margen 00:37:47
de 15 00:37:54
for example so I already have it here all good because centered and such but this would have to 00:38:06
control it well with the breakpoints ok and you could go doing it because all the 00:38:26
nice you want ok I already leave it like that because in the end what interests me here now is to use 00:38:31
the react form and so far well I have used the button so far I have not used anything 00:38:37
that is from the library itself, here we have the register so that I am going to use that register 00:38:45
to say the name of this field and to put those conditions those good ones and those conditions 00:38:51
that must fulfill that field to be validated or not, then we are going to put, for example, here 00:39:00
a key point point point register and here you tell him the first thing is the name of the field, it is worth 00:39:09
then in parentheses commended here I am going to say the user name we are going to tell him after the comma 00:39:18
after a comma, it is worth between keys that what are those criteria that that field must 00:39:28
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 00:39:36
so in this way I am using the read good form to give it a name to that field and to 00:39:48
and tell him that it is a field that has to be required, okay, so what else can I put here 00:39:56
we are going to separate this to go 00:40:06
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 00:40:10
before closing it I am going to put the placeholder here, so here we are going to put it and I am 00:40:20
ok and this is ok then this would stay like this ok and I am going to do the same with the rest 00:40:36
then I'm going to take less time copying and closing so I'm going to delete this I'm going to select 00:40:52
this input and I'm going to copy it three times this is going to be email type this is going to be the 00:41:04
the placeholder we are going to tell it that it is going to be 00:41:20
email here it is going to be the password of the type of password 00:41:30
password all fields are required because we needed in the backend 00:41:38
password and password and password is good because we would already have it ok then we would already start here 00:41:44
we would already write our fields and everything will work for us. Now, what do I want to happen 00:41:57
when I click on the register button? Well, in this case I'm not going to send the 00:42:07
data to the backend yet, I'm just going to make it show them to me in the development tools in the 00:42:14
console of the browser, it is worth the client then there I am going to import the second function that 00:42:21
provides me the react hood form, which is the one of the hand is to the summit ok then you already 00:42:31
know you have used in first forms and you know that when you click when you put 00:42:44
a button of the summit type this is going to do an action that we have put inside the 00:42:50
form label in this case and using this library of the react good form what we are going to do is 00:42:56
that we are going to capture that event where we are here with its myth, okay and we are going to execute an 00:43:04
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 00:43:17
tell him we are going to pass the values values ​​it is worth those values ​​are the ones that are inside 00:43:26
what we have been writing within each of those fields is worth and that they are the ones that we have 00:43:39
been putting inside the register is worth and what are we going to do with those values because to visualize them 00:43:49
by console is worth then we do our arrow function as we have done until now all the 00:43:57
time something is going to happen to me here this video where it has come out I do not know 00:44:05
we have our arrow function we are going to put this here 00:44:17
and this is giving me some kind of error, I don't know why, now we see it, console.log, 00:44:38
that it displays the values, values, okay, so we have this, we have the onSummit, 00:44:52
and that's it, that's it, that's it, okay, then the arrow function, I'm telling you, okay, when I press 00:45:02
the submit button, you're going to come, okay, you're going to do what I'm telling you here through the 00:45:28
let him submit, which is to take those values ​​that we have been writing and you are going to return them by 00:45:35
console, nothing else, so here I put various saints, here we put this one, two, three, four, if I 00:45:41
register and everything is fine, it is worth if we come to the development tools, 00:45:50
we are going to give it ok we see that it is showing us all the values ​​well and here we have them 00:45:56
so we have created our routes we have created our first form of our front ok 00:46:12
we have played with tailwind you can and I leave it to you to put it more beautiful also the background color 00:46:18
the best, well, put a bar to be able to move to the different routes, it is worth filling it completely, I 00:46:26
already leave the video here because if not it is very very long, well, a greeting to all, see you later 00:46:35
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
57
Fecha:
1 de agosto de 2024 - 19:55
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 16″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
129.96 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid