Saltar navegación

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

Back end Vs Front end - Vídeo 27 - 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 5 de agosto de 2024 por Mario S.

38 visualizaciones

Creando un Contexto. reactContext. Context.Provider. useState. useContext()

Más información Transcripción

Descargar la transcripción

well in this video we are going to work that question that approach that I proposed to you in the last 00:00:00
video it is worth that it was we have to be always logging not always sending the data to the backend of 00:00:12
our user of our password because in the end we are working on several routes and 00:00:20
at the security level we cannot allow a user who is not authenticated to go to a route, 00:00:27
for example, to see tasks or to any other route within our front, then 00:00:36
we should either register or log in and from there be able to access the different routes. 00:00:43
The question was, how can we do this? Well, this is done through contexts. 00:00:50
React allows us to create work contexts. When I create a context, two containers are automatically created. 00:01:00
One is the provider, which is what I have been putting here, the provider and the consumer. 00:01:09
vale el provider es el el contenedor que va a proveer a determinados hijos 00:01:15
que engloba este contenedor de tener información información general que van a tener o que en algún 00:01:32
moment they will need to access that information the children are worth in this case that information 00:01:41
would be for example the touch the touch is a field a cookie that to which they will access the 00:01:49
different routes of our front that is information shared between several children each child of 00:02:01
that would be one of the routes that we have created, it is worth then for this case in particular to create 00:02:09
a context comes to us very well and then the consumers because obviously it is each of those 00:02:16
routes, it is worth that it is each of those children, it is worth then I put you here to try the provider is a 00:02:21
component that receives a prop or a value is worth an object that will be the values ​​to share in 00:02:27
our case is going to receive an object that is the user object in which the email goes, the username goes, the 00:02:34
password goes, the touch goes, then all that is what the provider is going to receive, it is going to work 00:02:45
on those fields and it is what will allow 00:02:56
that each of those children has access that is inside the container of the 00:03:04
provider then we are going to use a hook 00:03:09
that is the state state what it does is say if there is a context created or not and 00:03:13
what is a hook then I put it here it is worth taking it out of the documentation 00:03:21
dice los hook son funciones que te permiten enganchar el estado real vale los hook vienen 00:03:26
directamente están desarrollados por real y el ciclo de vida de estos componentes de función 00:03:32
los uno funcionan dentro de las clases vale el problema que tengo con js y con real por tanto 00:03:40
es que no puedo trabajar con clases entonces estos me permiten pues eso no enlazar enganchar 00:03:46
with functions of other files or things like that, then without getting too involved 00:03:54
although there is an extensive documentation and in fact react has its own created we 00:04:06
the one we are going to use is the use state it is worth that the only thing that is going to tell us is that it is going to return us 00:04:15
si hay un contexto creado o no vale y gracias a eso podemos saber si un usuario está logueado o no 00:04:22
vale y entonces no dice tanto los componentes como sus hijos van a poder acceder a estos 00:04:31
valores vale que es lo que estamos buscando vale entonces ahora nos ponemos ya a trabajar con ese 00:04:36
context then the first thing I'm going to do is good I already have here started the front I also have 00:04:44
the back-end with mongo ok I am now connected also to the mongo express to be able to see all 00:04:54
the collections and now I get to work ok then we had the register page with the 00:05:02
let them go, all this we already had done, I have the out 00:05:11
that here remember that I put the function of good if this does not generate it 00:05:19
well, the response visualized it and if not that it was going to generate an error, it is also 00:05:26
captured and we visualized it, I have erased it because in the end it is only to visualize it 00:05:32
and then it gave me a little the same and for not having more lines of code than 00:05:35
necessary routes here we had the different routes from the front in the register we had already 00:05:40
entered the register page which is what I tell you is worth here would be all the html code that 00:05:48
generates me all this page is worth then well because the first thing I'm going to do is create myself 00:05:54
within the part of the client of your src source folder another folder because in this 00:06:07
case I am going to call it because context is worth context within context I am going to create a file 00:06:16
that we are going to call it is a bit following all the documentation that you can see on the internet 00:06:24
or what is being our development, that in the end I am following that documentation, 00:06:37
I am going to create a file that is the outcontext.jsx. 00:06:43
One thing that I have not told you in any of these videos is, why do we use jsx or js only? 00:06:49
Well, the jsx, which you already know is the javascript.com.xml, 00:06:56
vale o el tsx que es más actual más nuevo que es lo que se está usando ahora que es muy similar al 00:07:03
j s x pero es contar vale pero al final bueno prácticamente vale siempre tiene tiene modificaciones 00:07:09
tiene cambios pero bueno vale entonces yo me voy a crear o voy a crear un fichero jsx cuando voy 00:07:19
work with the data in some way I am going to work with those key values those fields those 00:07:29
collections I am going to work with them it is worth if I am going to do only functions that at no time 00:07:37
they are going to work with the data is I am going to object the steps the but at no time I work 00:07:43
with the data internally then with a js it is worth it and it is worth it but the xml you already know or 00:07:49
as you are seeing in one of the modules of second edam because 00:07:56
it is what serves us for the representation of the data is worth then in this case I am going to create a 00:08:05
file that is js x is worth in this js x what I am going to do is first because we are going to import from read 00:08:12
a function that is the great context, the great context, the great context is the first step 00:08:22
to create that context, as I have told you before, you are not seeing the code but I put it 00:08:36
ok now yes ok then I have created the file in the context folder inside I have created the 00:08:54
out with text dot j s x ok I have only done this within out with text dot j s x I have imported the 00:09:18
create context ok which is what I am going to need to create that context ok and we continue 00:09:28
then what is the second thing that I am going to do because we are going to put ourselves here we are going to create a constant 00:09:35
because we are going to call it out provider that is that provider that is created is worth a provider that 00:09:51
what I told you before is worth when I create a context on the one hand a 00:10:03
container is created that is a provider and on the other a container that is the consumer the 00:10:07
data consumers are worth then I am going to create a provider and this is going to be the same as the create context 00:10:13
ok ok then here I have already created this this context ok when I create the context that 00:10:24
provider has a structure like the one that follows ok then how am I going to export it I am going to 00:10:37
put the export directly and here I am going to put it also in case we need it and if not 00:10:47
remove it, okay, we put the export with out provider here you are 00:10:53
okay and in aux provider this is wrong this is not aux provider the first thing we create is the context 00:11:07
this is context, it is worth the out context and now in the out provider what we are going to do is 00:11:16
on the one hand we have to tell him what collection of children of children 00:11:25
are going to be within this context, they are going to be within the context that I have just created and 00:11:34
called outcontext. Outprovider is going to be related to outcontext, okay? 00:11:42
So, the first thing I'm going to tell you is, okay, well, or the first thing we're going to 00:11:49
to pass it is worth a collection of children ok then here we are going to pass it 00:11:59
we are going to put our arrow function as always ok ok and this would be our provider 00:12:12
What does the provider have? Well, this is going to work on a series of data 00:12:21
and a series of data that come in this collection in this case, which ones are going to be 00:12:35
because the user is worth the user with all those values ​​that are the ones we have taken from the 00:12:43
form is worth and on the other hand we are going to return a context point for the idea this is ok and this is going to return 00:12:51
some children we are going to put it like this 00:13:28
this is what our function is going to do, the provider variable, which is the one that we are going to work on 00:13:31
when we create the context, here I am relating provider with out context, it is worth with out 00:13:45
context so in reality I'm not going to export it I'm always going to work on the out 00:13:55
provider the out provider up here before the retum and we can put different 00:14:02
arrow functions different operations that we are going to do on the data that 00:14:09
we are going to collect ok and in the out provider there is a value that is values in which 00:14:13
we are going to tell him what values are those that we are sharing among all the children 00:14:21
among the entire collection of children, that is why the general structure is put like this, it is said that some 00:14:29
children enter with a series of values ​​and in the end all the children will have access to those values, okay 00:14:36
then we are going to come here again and we are going to say good with what I want to work with 00:14:44
on the one hand with user it is worth using remember that it is or that it is where we are going to those values ​​of 00:14:54
the users, and a set user is always passed, the variable is always passed and the set user or the 00:15:05
set is passed, whatever it is, it is always the name of the variable or the object that we have passed it, 00:15:19
because in this case this is not a variable, it is an object, and the set user, which is the one that we are going to 00:15:25
use the one that uses the provider is worth the one that uses the create context to save values from 00:15:30
this part that we are working on to the variable and use it is worth and this is going to be going to come from 00:15:45
we are going to put an equal and we are going to tell it that these variables these or an object in a 00:15:53
principle we are going to put both of them and this was the use of this test 00:16:03
the useState to null, okay? So here I am saying, okay, believe me, I am going to use this 00:16:12
variable user and the setUser that is going to come in each of the children that I am making the context 00:16:26
about which I am making the context and you are going to put them both to null because we have 00:16:34
done anything, it is worth then if I am creating the context but this user object remember 00:16:39
that it is a collection, that is, if I have five routes I will have five users, it is worth 00:16:46
I put them to null, it is worth this and use state that is also real because I am going to bring it 00:16:53
and it is worth it and I would have it ok then what else do I do 00:16:59
we can create ourselves or we are going to create ourselves ok once I have declared this variable 00:17:12
with which I am going to work this object for this variable object I am going to declare a for example 00:17:19
logged, it is worth calling it so constant logged that it will be the same we are going to pass it 00:17:27
I will say some input values ​​user ok 00:17:41
that is why here I also call it user you can call it with the name you want I put it 00:17:48
use it because I am going to use this from here it is worth then in the home summit instead of 00:17:53
calling from here with values ​​I am going to call the logged one and I am going to pass that parameter inside the user 00:18:00
that value object is worth then then start using it like this ok we have this we do as 00:18:12
always arrow function and here we say ok here what I want is with networks equal to remember 00:18:24
the weight that is not necessary and here it will tell you the register request and use it as here I am 00:18:35
using the request register when putting it directly it already tells me here it is worth calling the bet and here 00:18:50
I am always telling you to put the extension ok then here it is js ok then 00:18:57
put it in the extension that already notice that the real itself does not admit it to me sometimes it has given me 00:19:07
some problem ok then I that you and I would put it but we are not asking for it, it is not 00:19:14
restrictive, it is worth then passing the water and the water is giving me an error as always because here 00:19:22
hay que pasarle el así que vale y tengo esto 00:19:28
todo vale entonces una vez que tengo hecho esto si queremos podemos como el 00:19:36
registro request nos devuelve un res vale 00:19:45
vamos a decirle pues como siempre que nos lo visualice 00:19:51
y vamos a decirle también punto y coma y ahora es cuando uso este set y user dónde estás este set 00:19:57
y user vale que es un hook que al final fijaros cómo me cambia estos colores vale estos marrones 00:20:07
estos no son esos esos bueno esos que esas funciones vale que le estoy llamando que son 00:20:15
of the real itself then here I put the set user and I am going to pass 00:20:20
those data then it is networks point data ok then this if you look at this line above all 00:20:29
is the one I have here inside the request register ok then this obviously when 00:20:42
I give it to the register button I am not going to run this what I am going to do is access 00:20:52
logged ok then how can I access logged well then we return to this part of the 00:20:59
network you see that the first part of the provider is where I work with the data and I do what I have 00:21:09
to do ok and the second is what I return then in what I return in the context point provider 00:21:14
I can pass an attribute that is the value is worth in the value what you are going to 00:21:21
pass is what values to what values or what values will be able to share between the 00:21:33
different routes because in this case it is going to be logged and it is going to be a user 00:21:41
they are going to be these two then this is interesting because I do not put the export here because 00:21:51
you are already with the out provider which is the function that in any case you would export, what you do 00:21:59
is to say through the value to the rest of the routes it is worth to all the children who are 00:22:06
inside this container what you want to share with them in this case what 00:22:12
I want because the logged and I want to use it is worth I want these two okay and this would be my 00:22:18
my out context file would be what generates that context for me okay well so far I have 00:22:26
this file but I have not shared it or I have not used it in any other 00:22:34
ok then what is the next thing I have to tell you 00:22:41
well here we are talking about children what are those children ok then I'm going 00:22:47
to come to app js x which is where we had all the routes already created ok 00:22:54
and then what I'm going to do here is 00:23:00
first we are going to import the out provider 00:23:06
from context out j s x ok and now we are going to put all these routes 00:23:21
we are going to include them inside that container so we are going to put the 00:23:30
out 00:23:35
ok this we are going to put it down 00:23:38
here ok we formate and we would already have 00:23:46
created this 00:23:55
that container ok we see that this has stayed in blue and that 00:24:00
has been to put the out provider then let's go here 00:24:06
we have the context provider value and we close this 00:24:12
and we pass it to him 00:24:21
we are going to see what it is 00:24:33
ok then 00:24:38
What is the problem that I have here? I have passed the children, notice how here it has also been imported to me, when you do it in uppercase, it is another function that I can import from READ and that is not what I want, what I want is that it takes me as an entry those children, okay? 00:24:43
then as in the documentation and such that what you are looking at now puts it in 00:25:02
lowercase, well, put it in lowercase and then you will see that everything already works for us, it 00:25:07
already works for us in principle well, so what have we done so far we have created that 00:25:13
context with all the children that are all the routes, all these routes are going to share 00:25:19
those data through the outprovider and the outprovider what it does to us is we have declared this 00:25:26
user with its part setuser to be able to enter those data we call the register request, which is 00:25:34
what we already did from the previous video with the users with the data, we saved them and then we 00:25:42
we return that logged that function logged and that user is worth that variable object 00:25:51
ok then we go to the request register and what is what we have to do here because on the 00:26:01
side, we import, we import the car, well, in this principle, in this case, 00:26:07
what I am going to do is this, I no longer want it here because it is exactly the same thing that we have put 00:26:33
in the out context, it is exactly this line, then I do not want it there, which is what I am going to put 00:26:38
here values ​​and I pass values ​​which is the values ​​that we have put 00:26:46
inside that form is worth now 00:27:03
I have this I will return to the context 00:27:10
and then as I have this code 00:27:16
I would have to be going through the request register all the time, it is worth in the 00:27:20
context then react provides us 00:27:25
another one that is the use this sorry 00:27:31
with text is worth the use context the use context 00:27:38
it allows us to know if there is a created context or not. 00:27:44
So, for us it is easy to use. 00:27:50
And fast. 00:28:00
And maybe, well, as we have to use it. 00:28:03
in this case I am going to create myself after importing it out of the out provider we are going to create 00:28:14
here a first sport out not to call it to this 00:28:28
with us 00:28:36
ok this is the one that is going to tell us if a context is created or not does not have 00:28:41
input parameter 00:28:46
and here what we are going to tell him is ok there is a context or not to tell him 00:28:50
that we are going to create a context that is going to be the same as it is going to be the same as 00:28:56
ios context that is the ios context is the hook that we have just imported and it is the one that 00:29:12
tells us if there is a context created you are going to tell me ok you tell me if there is a context or 00:29:22
if there is an error that is with what I am playing ok in one in the same in the same 00:29:35
development you can have several contexts created and access to the variables is worth that information 00:29:41
que estamos repartiendo o compartiendo mejor dicho entre diferentes en este caso diferentes rutas se 00:29:51
pueden crear varios contextos por ejemplo imaginaros voy a crear un contexto si eres 00:30:00
un administrador o si eres un usuario sin privilegios por ejemplo ese me ocurre entonces 00:30:05
aquí le tengo que decir qué contexto es ese que estoy probando si existe o no entonces aquí le 00:30:12
we are going to pass the out provider ok then from this use out with the use context I call 00:30:21
the out provider and the out provider is the one that is using the out context ok then they are chained 00:30:32
in this way ok then here I check I ask real hey there is some context I have created 00:30:39
of the type out provider this will return an error or not if it does not return an error or 00:30:50
be context is equal to null ok what I'm going to tell you is 00:31:00
throws a new error that is going to be what you want 00:31:05
error and if and if that error does not occur, then what do I want you to do 00:31:29
that you return that context to me, then if the context exists, what I want you to do is 00:31:41
that you return that context to me, that is, those data that I want to share, that is, that login and 00:31:51
that they are worth that is what I am telling you here, then this file would already 00:31:58
would be like this and in the register what I am going to do is I am going to import 00:32:06
how I have called this and use out 00:32:16
from out context jsx ok and then from the home summit what we are going to do is ok 00:32:21
because from the assuming well what you are doing you are going to ask me this I am going to remove it from here 00:32:31
you are going to call me to log in this case in this case because I need logged what it does is 00:32:41
launch the request register it is worth remembering that we are with the register then I need to 00:32:49
launch that request register somewhere so that 00:32:57
where are you here so that with the axis post point it will take it to the server and register it for us, 00:33:05
okay, then we have this one, we have 00:33:15
with the weight to see that everything is fine and logged you have with the values ​​to the 00:33:19
log we pass the values ​​that are the fields of the form and I think it is already 00:33:32
all right ok then let's try it then I'm going to come here let's see if I have any 00:33:40
data if I am going to delete it I am going to leave it there is no user right now in the database 00:33:47
ok in principle this I think I already have it all ok ok well let's see 00:33:54
our our front the register we are also going to put the development tools 00:34:07
well this is to erase the console here what I have also done has been to install an extension 00:34:14
that is the real develop tool that is fine because it allows us to 00:34:27
see the components when there is a context to see that context then look if I give the 00:34:36
context to the extension as the context comes out and I can see the data that is 00:34:41
saved in the context and it is good to see everything if it works for us or not because it is very 00:34:47
ok then I but the email the password 9 is all right I register it and here it tells me 00:34:53
logged it is not defined in register page js x 13 ok let's go to register page 00:35:09
ok I forgot to do something here 00:35:22
we return then to our code and we say ok logged it is not defined it does not know what 00:35:27
this is about the logged what is what I have to do well then we are going to put the cons here 00:35:33
where you are logged from where the logged of the 00:35:45
it should already work, let's go back to our page, let's go back 00:35:53
to see this, we are going to give the format what we have and here we have missed some 00:36:25
we are going to see 00:36:40
we are going to see what is happening 00:36:47
we return to our code while I do not look at this I am going to pay 00:36:53
ok then this is not showing us the front that 00:36:58
is that there is some error then here in the developer tools and 00:37:03
If I go up, it is already telling me that in OutContextJSX, that is, in this file, in the position 00:37:09
OutContext, that is in the 10, in the 8, let's see, in the 10, the error is giving me 00:37:20
esta línea no sé si estoy viendo el código la paz y el código vale me la está dando en esta línea 00:38:08
en el contexto vale y cuál es el problema aquí le he puesto la provider pero no es o sea no puedes 00:38:14
decir provider el provider se crea cuando creas el contexto vale entonces yo aquí lo que le estoy 00:38:22
preguntando es ese contexto existe o no no puedo preguntar por el provider aquí lo que vamos a 00:38:29
ask is for out context, which is the one that has the container of the provider inside, 00:38:34
then here is the context, once we put the out context there, and if our form comes out 00:38:40
and we are going to see if we can use it, we do not return to our page, I am going to erase 00:38:50
todo esto es borrar con borrar historial borrar consola afuera vale entonces vamos 00:38:59
a meter aquí un valor un valor 00:39:07
9 entiendo que antes no nos ha creado 00:39:13
le damos a registrar vale y nos sale 00:39:19
Let's see, I think he has created it for us, he has created it for us, but he is giving us an error and he says he can't read the data, you can't read the indefinite property. 00:39:25
reading data in auto context jsx 22 in out context in 22 which is this I cannot read this 00:39:40
date ok this date I am going to leave it only with networks ok and we are going to try again 00:39:52
but that data if it should leave me we are going to see it then you know what is happening to him 00:40:01
we put the same user again, I register it and now it appears to me that the context is 00:40:08
undefined, that is, it does not give me a problem on the one hand the part of the back in itself that they are 00:40:22
registering it but when I put it in the 00:40:30
the login when I am inside the login and I tell it to visualize it, it is worth this which is the 21 00:40:34
just is the one that comes out as undefined that means that no to res is not 00:40:49
nothing is coming ok then there I have a problem and we have to see what it is ok the request register 00:40:57
we have it here request register this function is valid if I go to the post of the back end 00:41:07
to the register we are going to see it that we had it in controllers the register here is where we took 00:41:17
those data we created well here we saved it here we created the touch it is worth that we created that 00:41:26
key value with these data that we have put it is worth it 00:41:39
this document is worth to whom we created the password and I have two networks on the one hand 00:41:45
res cookie that we returned the touch and the j are with these values then yes I am 00:41:52
back I am when we launch the register yes I am returning information it is worth with 00:41:57
the response that something I am doing wrong here that I am not collecting it then what I am 00:42:05
doing wrong because I have only put the axios post but I am not collecting that answer then here 00:42:13
with networks is equal to axios post ok now in networks if I am collecting all that 00:42:19
information that they are sending me ok and here if I can take a network 00:42:30
ok and when I do the request register there if I pass that service with what 00:42:37
when I am logged in here yes that now in networks I should collect this value and I would have to 00:42:43
be able to visualize it on the console and also put the set user so that it saves me that value in 00:42:57
user and then all the children who are within that context have access to the user, of course, what 00:43:05
I could also take this one because in users yes it is worth when I pass it to logged when I am 00:43:13
working with logged and I pass it values ​​these values ​​that are later transformed into this user 00:43:20
are the data that is in the form and I can take it and say well if I pass it here 00:43:27
I use it and I use it there will be no problem of course we are not taking the touch nor are we taking 00:43:33
nada sólo estamos cogiendo la información que le hemos pasado desde el formulario vale entonces yo 00:43:39
entiendo que ahora sí nos debe de funcionar vámonos a nuestro formulario vamos a borrar todo esto 00:43:52
this and this I am going to remove I am going to eliminate this user ok there is nothing left ok and I will create it again 00:44:01
mario ok ok if I give it now to register now yes ok then look at how now 00:44:13
and if he does not return it to me null already if we are taking those data that he returned to us from the 00:44:26
backend is worth with the red is the response here we take them in the function and now if I work 00:44:33
with them it is worth now we have them all here created it is worth or at least in the context if I come 00:44:40
here to see if it shows me we have the user values with which the data and in the data because they appear 00:44:49
you see the idea of the email the user the username is worth here everything would appear to us what we need 00:45:02
is worth utf-8 with text well here we would have the information here it is already telling us that 00:45:12
everything has created it for us well, well, this video so that it is not much longer I am going to leave 00:45:27
Well, a greeting. See you later, guys. 00:45:35
Idioma/s:
es
Idioma/s subtítulos:
en
Autor/es:
Mario S.
Subido por:
Mario S.
Licencia:
Dominio público
Visualizaciones:
38
Fecha:
5 de agosto de 2024 - 21:02
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 30″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
128.09 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid