Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Back end Vs Front end - Vídeo 28 - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Utilizando el useEffect de react y el useNavigate de react-router-dom
Well, in this video we are going to see how to use a function, the useEffect, that
00:00:02
React provides us and that is, well, like a listener, an eventListener, a listener that
00:00:11
when a certain change occurs, in this case as we are working with all the aspect
00:00:23
del from pues es cuando se vuelve a renderizar la página se vuelve a recargar se actualiza vale
00:00:30
entonces podemos decirle que se produzca un determinado evento cuando se actualiza toda
00:00:37
the page or one or several variables that we have created in our provider, it is worth then
00:00:50
in this case what I am going to do to simplify myself if I can even more life is worth
00:01:02
continuing to see different ways of acting is another state type variable with the use
00:01:08
state, just as we use this user variable and the setuser, we can create a new one that
00:01:17
is, for example, a boolean that is that you are authenticated and in the arrow function that
00:01:25
we had created from logged that I have put a try and catch is good
00:01:35
because in addition to sending the request request I remember this function so that I with
00:01:45
axios will connect to our back-end and save the data that we have passed from here, it is worth
00:01:52
from values, well, that he would save it to us in our mongo database, he would make that dictionary,
00:02:02
that document is worth and our data collection would be added, well, and if I make a state variable,
00:02:15
for example constant and we are going to put it here and it is worth as it is state because you already know the set is
00:02:24
ok ok we declare this as a state variable and use state and we put it to false
00:02:45
because at this time we have not yet created any context remember that this is like a continuation of the previous video in which we are creating the contexts
00:02:58
in this case we have created or we are going to create a context we know that we create the context when we log in and when there is no error in the register request
00:03:11
So, in addition to saving the data as we did yesterday, we are going to tell it that setIsAuthenticated, we are going to put it to true, okay?
00:03:23
And this variable, this state variable, is another variable that we are going to pass in our, with our provider, with our wii.
00:03:40
with our provider, so now all the children
00:03:54
that are within our context
00:04:01
can consume in this case these three
00:04:06
variables these three values that we are passing on and one of them is this one that if it is true
00:04:09
then it means that
00:04:15
Well, you are authenticated, okay
00:04:18
that there is a context that is authenticated, so if I come to register page, which is where
00:04:21
we are working, well, first this here, because I have enough, so we are going to remove it, okay,
00:04:29
what I am going to use is I am going to import two functions one that is the effect
00:04:40
that comes from react ok and it is what I tell you is a function that is capable of every time
00:04:56
and the first time it is rendered obviously also our page in this case because it
00:05:02
listen to that rendering, that update, that modification and it will execute what we
00:05:09
tell it, it is worth remembering that it can be from the entire page or only from one of the variables, in this
00:05:18
case, instead of saying hey, no, every time the page is updated, it can be recharged, in this
00:05:25
case, the register page, because you do that to me, no, what I want is every time that context variable
00:05:32
that we have loaded so we are going to pass here also the is
00:05:38
worth this context variable this is worth it is why we are going to ask then first I am going to import
00:05:49
import the effect there you are with real it is worth I am going to import this function so here what we are going to
00:06:01
do is after the declaration of the variables that we are going to use from that context
00:06:19
well, we are going to create a function of the effect that is use effect
00:06:28
parentheses we are going to create our arrow function because what we want is that you execute
00:06:41
cada vez que se actualiza o lo que llevo diciendo todo el tiempo vale toda la página y en este caso
00:06:50
voy a decir no no toda la página no solo quiero que sea cuando se modifica el is auténtico vale
00:06:59
solo quiero que se ejecute lo que voy a poner en esta función flecha cuando hay una modificación en
00:07:06
is auténtica y esto podéis poner aquí separado por comas varias variables y entonces va a
00:07:14
responder a todas esas variables y esto está muy bien por qué sí sí por ejemplo queremos que según
00:07:21
el contexto recordar que os decía que se pueden declarar varios contextos entonces según el
00:07:31
context I want you to do one thing or do another when I modify it
00:07:37
when I update the page, okay, well, in this case we could go one thing or another I mean
00:07:45
go to a link or go to another, okay, well, from here we could do it, okay, in this case
00:07:55
yo lo que quiero es que cuando hay una modificación o sea se pone a true esta variable lo que quiero
00:08:01
es que me lleves a otro a otra a otra de nuestras páginas vale yo solo tengo creada ahora mismo la
00:08:10
de register page bueno si pensamos buenos cuando si tú te has registrado lo que quiero que hagas
00:08:16
es pues por ejemplo ir a la de las tareas para empezar a añadir tareas o ver las tuyas o todas
00:08:22
las funciones que hemos hecho de operaciones cruz sobre nuestro mongo vale entonces yo quiero que se
00:08:29
vaya a tareas entonces existe una función que se llama el navigate que es del read
00:08:40
reacción medio router dom vale el dom ya sabéis que es que viene de lo que es todo el árbol de
00:08:50
nuestro proyecto vale entonces bueno aquí le ponemos el import aquí le vamos a poner el
00:09:01
use navigate navigate from and what I tell you is worth read
00:09:07
there it is ok then this function is
00:09:18
I navigate what it does is let us or allow us to send or load directly when
00:09:27
a certain condition is met, a page is worth that we navigate, that it lets us navigate,
00:09:35
then what I want to tell you here, well, if it is authentic, that is, if it is true, then
00:09:42
what I want you to do is and before this what I am going to create is as always a constant navigate
00:09:50
it is the same there is someone who is worth this always if it does not give us problems
00:10:05
it is worth once I have it created I tell it ok yes
00:10:17
you are authenticated if this true is state variable remember that we put it
00:10:23
here to true at the time of executing the function logged if it is true then navigate
00:10:29
navigate ok we pass it where we want it to go which is in this case I do not remember
00:10:41
where we have the routes in a pp jsx here it is because let's go for example to task for example or
00:10:53
to anyone whatever it is ok in this case I am going to use task ok then I tell you where we are
00:11:05
here ta ta ta task ok and we know that when we go to tax as we have not created the page or anything
00:11:13
all you do is show us this message, it is worth tasks, it is worth with that, it is not worth
00:11:22
to do the test, it is already worth it and this is that function of the use of effect, it is worth that
00:11:31
it seems to me super interesting when it comes to moving and as we will see well in the video that
00:11:38
that comes
00:11:46
because as we are now talking well, we are going to map the errors that can come out of us
00:11:52
here, it is worth remembering that we have created the models
00:11:59
of the data that we want the type of data that we want to receive in the backend, it is worth then
00:12:06
if there was an error that we were receiving it and right now I am looking at everything from
00:12:12
more development tools here it gives me an error I do not know what and we are looking at it, it is
00:12:18
good here, its thing is that a message comes out here saying hey, the username is missing, hey, the
00:12:24
email is wrong, hey, the password has to be nine digits, whatever it is, okay, well, to
00:12:31
do that we are going to map all the errors that we receive from the backend and once we have mapped them
00:12:39
we are going to go if there is any if any error occurs by putting it in the position that it has to
00:12:46
appear ok that in the next video then what I want is good we cannot allow that if I
00:12:53
here I write task directly, it is worth it because it takes me to this page because here you can only enter if you
00:13:02
are logged in, which is why we are doing everything about the context, then something is done
00:13:13
called the protected or private routes, okay then, well, we will do that right now, the
00:13:17
only thing I wanted to see in this video so that it is not very long is this of the use of effect is to create
00:13:26
this boolean variable of state this variable of boolean state and use the
00:13:33
just navigate so that you can see how it is ok then I already have it all started
00:13:42
the two terminals one for the back in another for the front I have the mongo db
00:13:49
started ok everything is operational everything I do not have any user right now
00:13:55
created ok then let's go so you can see it well the page of our front and here we are going to put
00:14:02
our data here we are going to put this and here 1 2 3 4 5 6 7 8 and 9 ok and then when we
00:14:15
We are going to register, here something has happened, let's see what it may have been, more tools, development, register 1, let's see, we have imported the useEffect, we have imported the useNavigate,
00:14:23
constant, navigate, this is fine, we have also put where you are here, that is, here I do not see anything
00:15:08
nothing weird, useEffect, and close, okay, sorry, here we leave you like this, where I do not see the error, it failed,
00:15:25
we are going to see if they have saved it for us, the user has saved it for us, but nevertheless they are not
00:16:06
Okay, let's see why it can be this, the app, this is Tasks, Tasks, ah, here I see it all well,
00:16:20
Set is Authentic, this we are going to pass to True, ah, we have passed it to False, we have,
00:16:45
I do not see any error we are going to close it all and I'm going to open it again
00:17:23
to see what happened here first is the npm
00:17:33
where it is worth with this we have the port 4000 the database is open
00:17:40
I see that I have it open, the docker I have everything connected, everything is fine
00:17:47
ok
00:17:57
and the second is the cd client
00:18:01
npm.dev
00:18:06
ok we already have our front let's update this I'm going to delete
00:18:10
everything, delete with history, here we are going to put Mario, Mario, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, it registers it, ah, now it has not worked, I don't know why it hasn't worked before, I don't know, it's weird, the code is all right, okay, and as you can see, it has already taken us
00:18:18
to the task page, it has worked for us, everything is good and this is a bit what
00:18:47
I wanted to teach you, okay, a greeting, see you later
00:18:55
- Idioma/s:
- Idioma/s subtítulos:
- Autor/es:
- Mario S.
- Subido por:
- Mario S.
- Licencia:
- Dominio público
- Visualizaciones:
- 21
- Fecha:
- 6 de agosto de 2024 - 20:57
- Visibilidad:
- Público
- Centro:
- IES VILLABLANCA
- Duración:
- 00′ 15″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 54.57 MBytes