 This is not how I am going to play. I am going to play sports for a month. So what happened was, I tried to do good for yesterday. And yesterday in the morning, one of my clients said, can you come with me on Saturday to discuss how to play. I said, you know, on Saturday I was going to a conference, so you moved to Portugal. The woman was saying that she was going to play. I had to go to the conference on Saturday. But when I was on Saturday, it was supposed to be two days, right? And I think I was already in the office. So last Saturday, I was in the office and Taylor got back from there. So I missed him. And then I heard that I was going to another client in the office. I was running to the airport with my laptop back. And they, the airporters, were talking to me, talking to me, they said, and I said, everything. So that's how I got here. So that's how I got here. So this is what we are going to talk about today. The context here is a bit interesting to that, right? We did a stream today to tell us what exactly is context here. And how does it really help developers manage all of this in here. So we are going to talk about context here. How do we use context here? We are going to talk about the use that is actually important for us. Because we are going to be doing something good, right? We are just going to do it everywhere. We are just going to do it all the same way. So, let's say you are, the project is about a real-time website. So that's, you know, kind of the, you know, a site where you go to a product base. You say, I have to must get it. And then there is some more, like, about the right product. It's really, really, really great. So, let's say you are going to be a tagger. So the purpose of the record is just to show the number of products it's having. And it gives you a packet. And it gives you the reason that it should be related to the packet base. Now, this packet icon, right? So let's say, as, let's say, there is nothing about separation of contents. It's about separation of components. So whenever I create one component at a time, that component is only thinking about, okay, how can I do it myself? It doesn't need to tell you about how to get it done. You don't have to make the game or you don't have to get it from some database. You know, where do you go? It's like, where do you get the data from? The component says, I don't know. People always say, just give me this value that the proper is. And I display it. It is your concept. You know, it says, where do you use it? It's not an extension. So, you just take it out like, give me the property, as, like I said, the packet comes, you can give me the value. Then just show it to me right here. So, how do you actually do this? You can see it's a very simple application. Let's say, this is my application component. And this is the component hierarchy. This is the application component. That's the basket type. So, the giant is the application. It's kind of tapping on the basket type. And the application passes if the basket comes, very nicely to the game. So, the application sends out a human body about getting the value. I will make more data for that guy. I'll make a call to the rest of the guy. I'll get the value completely. So, what do you have to do with this? If you want to exchange a product, it is fine and it's available. But, when you think the basket comes, it's not available properly. So, this one comes pretty well. But, as I said, generally we do not have just the basket content as an application. We have an application page like this. We'll have a content area. We'll have a data like this. And then, the basket icon, the component is smooth and prominent and you have to use the basket icon. Okay, so now, what happens is, this is an application. This is the basket icon, and suddenly the data has popped up in here. The data says that there is a kind of an application. So, now this application is being passed on to the basket icon to the basket icon component. So, it can be smooth and prominent. So, this is because some other people were there. I will just pass on the end. But, it isn't always going in the reactor. It can be very smooth and prominent. So, the data can be used in this way. So, the application will have to take each child where it is, the brain number, take the basket icon, and it will be yours. You can do some of that. Someone will take a basket icon. I will just pass on the basket icon to my child. So, this is there. The header, this bucket is considered the basket icon. I think that the header just wants to show that I am a supermarket.com and all this look and stuff that looks like that are the requirements. But, it says I don't really care what is the basket icon. That is not my responsibility. But, you are still passing on to me. So, that I can pass it on further to the basket icon. And, this is something important from today. But, it will see then. And, the example that we just saw, this is actually a very good example. I have to pass on all of the classes properties on this way. Only so that your children are somewhere down on the energy of children and children. They will give you the reason to pass on the property. And, this is something which was there in the event that we had called because we had came up with it. It was more than you guys knew. It was supposed to be showed that you wouldn't rate that for them. They will do it the most confident way. But, they didn't really touch management as part of the work like they did. They never did whatever they did. There were applications to pass on data like that. How can we do it on this way? We will do it using Sextake in the vanilla react app. And, Sextake has this kind of property because in Sextake you can just pass on the property one by one in the label. So, let's say we have serial groups just in mango with the string. It is in a type 1 group like that. And, that should be updated over there in the past icon. So, it is not just that the data is going from communication has got to go from this component back to top and from there back to the last one. So, this thing is kind of as complicit in our applications. If you see what it now looks like because we have an application this is the existing header in the last icon. This is the new product page where I am showing the list of products. And, even if you can add a web in any one of these products it has to raise an event that will be work here. The application now I need to increase the percentage of people as they are trying to add certain things in the product. And, then I am going to talk about this. So, I am assuming that there is some sort of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of kind of We got 490, very satisfied, we don't know if it's going to change or not. It's like if you can just go and change it, and manage the main feature of the application, then it's a hit, because the application pool is completely in it. We can solve it somehow with simple patterns, like you say, as in maintenance, so that we can have some more control over that. But since this is one more major problem, that if I go to the variable, if one component is updating that, it's like if on the add button, and it is updating my passcode now, there is no way for my password. I want to know that this is updated. It doesn't really generate any event. So, when the weather changes, it doesn't really carry anybody, you know, and I do the same. So, you can do it with local variables. And of course, because I have to get cheap on refuse the coding, the thing that is okay, as the passcode can change, and the passcode can function like this, and you can do it, and it is very easy. So, what do you think? Yeah, this is the solution to that, and we'll see how. If you work on any solution, you can definitely use some state management tools, like readers, movers, and all. How many tools do you use? Any of these tools? It is a reader's tool. So, this is our jealous solution. Whenever you want to handle this kind of situation of moving data, and the reason why these tools came up was because of the app in the app, and it was not really possible. So, what exactly is the problem at the end? This is going to interest in the state management of our application. If I was properly receiving, and it's part of the react person in 15.6, a new person, not new anymore. So, as soon as I react, I get 15.4 or so. But it happens. But also we say that it's part of the new react person in 15 months, maybe so. So, they will react since a very long time. Because just then it was kept under the rule, and it was obviously like, this is some area you should never visit. I have been working for the government, and I do not do a complex API. And we don't know why not. And then they came up with a nice API problem so that users of complex API can use more money. This is all it is actually about. For a project, this can take a different route. And then the move is a create context. What exactly is a context? So, we have says and create. Now, when we say create context, I am going to reserve a space for it. And then you do whatever values that we want in there, I have just created a space for it. And these are the two points I am going to provide you. One is a provider. The other one is an engineer. So, this is more like another doctor at CBCA. Another is basically the one who is going to provide some value to be created in the context. And consumers, or consumers, there can be multiple consumers who are listening to that. They will actually be listening to any kind of change and have to do the way in which they have to put in the complex API. So, whenever the private changes in the way in which they have to put in the complex API, all the consumers will be able to know. So, this is how the route looks like. So, let's say, now I am designing one basket now, 321. So, this is not the way it looks like. This is called a simple code. Yes, this is the state of the application, the basket now. This is the same thing from React. Otherwise, simple, you know, and then we do. What I have done here is, I am going to say, password context and create context. Here, in the long-term application, what I am saying is, a basket context for providing help. This is the provider of application. So, the kind of data that the application is a provider, so that any way within the application, we can have consumers. And then, what is the benefit of the storage within the complex API? So, now that I have stored this value here, whenever this value gets modified, anybody who is disengaged, they will get modifications. As you know, the basket icon has to be modified. So, now, the application has this provider. That is, there is a header. And this header was basically the server who was saying, you know, why do I have to pass through this basket icon as a property? Now, the header is kind of happy because the header is just in here. The header is in here. So, the header is kind of really handy. It's just, I mean, I don't care about the basket icon. I just have to store some, I have to store the basket icon somewhere in the top right. But I am going to be clear from passing from that property of the basket icon to the basket icon. When I look at the basket icon, this is where my consumer sits. So, wherever in my application, if I want to consume that value of the basket icon, they are to the consumer. Again, I have to know this. And what it does is, this one basically is actually a header. So, I have to define a method. So, the way to do this is, in this case, the basket icon was already stored. And the output of that is another component. This is kind of using this query. So, here, what basket icon says is that, you get this basket icon. I was going to show you the basket icon over here. Yes, I will show you. So, now that your basket icon changes, this is going to be going back over here. So, this is now a copy of the process. So, this also is your header. It is not really concerning you. It just says that I am just going to add the basket icon as my child. And it is the basket icon in my application. Now, let's make our the application state that we are storing. Because there is a single variable, they make it an object. So, what I say is, in my app component, the state of my application has one variable for this perfect example. And this is made by this man, I update this state. And now, from there, it is the same product. I just have to avoid it. I have a header and a product now. And the product is saving this function. This is like a modifier. The value. Now, this is basically going to keep on the same method already. And then, that is going to go back over there. Because the application is going to change the value of the work state here. And even if it is consuming, then it will get involved. So, now, here, and I am kind of happy about it. It is kind of empowering having heroes. So, you know, what you want to do is, you can move this method as part of the work state. So, in my context, here, if you look at this code, what we are saying is, the report state is an object which has the project form. And now, instead of bothering my application to do all these provided things, what we are doing is, we are just creating a separate component which will handle the entire context API part. So, we are creating a component, creating a question, creating a component. And I am doing report state. I am creating a component of the story. I say state and report state. And after that, I also define the method that I am going to add, I will change my project component. I am going to do this immediately for one. And now, what I am going to do is, what the children can do as a variable that I am going to show in the provided in the context. So, as part of the variable, we are saying that now, story test state, as well as the method, I am going to show report on the state. So, this is actually the most creative design because, now, you have data and in this data, some data, both of them are actually kind of together in the context. So, this is actually the most creative design. So, there is this problem in some way, right now. This provider that we are talking about right now, is actually the Redux provider that we are talking about. So, Redux, if it is a this provider, we have the application with the provider and we provide the story on the application, right? So, that is nothing but this kind of provider. We give the story of the application as a story. That is, the report state that we are talking about in the application. And this is, but this is generally how it really works. It deals about this story on this detail and then the other that we are passing just and the data is within that. And then, within this detail I can talk about this the state design. So, then, now, this is actually the the company and the company itself. Now, why did this say boot loose on the state design? Any idea why we put this on? Like, very simple idea of on the state design is that it is not somehow say that I can just create a variable which is sitting outside an application anybody can change it and everybody can access it. So, it's kind of there are chances of your application getting messed up if you don't manage your state property. So, what the job says is that boot loose on the state design is just one or two properties it's okay let me make them take it. Because by creating on the state design such a small situation we will actually create more best in your code. So, it's okay I can do profiting. But let's say in real cases where your data is it needs to access in multiple components of multiple layers. So, when you are using your data let's say that it needs to be sent to the state at one place so that everybody can get in the code. So, if you just have one provider and one consumer that's probably a place that you can use. One is things we saw in our previous project like demo how do you do it for thinking. So, how thinking you start and then you just want to change your life. So, what happens is anybody who has to modify their visualization like this there is a button which is starting what I'm saying is like I just saw a light color working. They will actually kind of continuous to the context and everybody changes from English to Hindi normally. Then all these components they are just listening for the language a very active language where first they say I want Hindi in that case there are all the components you have to show some kind of language from English to Hindi and there is so that a great place. So, then you have to show that username here in this kind of places you can use for the state A if you see the kind of businesses that they are looking at is kind of very minimal. They are not really looking at storing the application state in context A B A Another way to use the new logic is Jessica want to handle multiple topics in your and then you can actually use it all over context is more like your best friend how many of you have kind of compared to something very private to your friend most of you have done and then if you know how many of you have kind of compared to something very private to your friend most of you have done and somewhere you think that you know how to store it but yes you think it is all given about it so this method we do is written another method with the package in way so there is already a consumer here so wherever my thing is changing in my context it will kind of really end up a component my theme button can actually listen to the changes to the theme of that I am the provider if you can have language provider theme provider there are different kind of providers so there are many very specific products my theme provider said that I am only concerned about theme I am only concerned about language so now I will introduce this one this is how I told you today my application will have that providers which had both the providers the language and theme and it also had both the consumers so therefore either the theme changes or the language changes you always need to know about that nearer readers will understand that readers will spend time in the application will have the route links and we will communicate with each other so for that the developer needs context a theme so that the author can take on the values and he got a parameter for them that can be passed on through all this such a you will go with that and check and then you will have a boundary it will probably just take the props and send it to super but one thing that we probably even used was the second argument which was context so context was actually part of react for a great outcome and it was second argument with the component because it was just that they had obviously that wouldn't be with you but otherwise it's not really a new thing it just has become it's not very good just getting that it was actually internally it was using context for long end so what happened was all these libraries they were actually allowed to use context because there was a kind of trust that was a library made in it even if in the context they would keep changing they would change their sets and they wouldn't do it because it doesn't mean that readers are actually using context itself because readers yes readers apart from creating a piece of code and the best thing is that it has really good like we have this readers they do how many readers they do so you know the stupid thing that it is like it makes readers actually it's not the four times but I see how many I come who are the fifth one and we just keep going once and you know and you have to see there is something yes so those are really readers and more readers and I think state management they will even the old buildings must be there there are a lot more readers that they do it apart from this and this is the last bit of it so this I again take the example of internet nationalization so I have this language selector so I have a component which is considered that let's say there is a problem in the drop down language and the readers have just seen that and the moment the language changes there has to be active language or my image should be active language how much is this component so let's say the component is called language selector and here you see context and we have to store this language in the context so if I do it this can be just that and what I do is I have to mock out the context so within my component I will be having what we said I have to use this context and then create a context to store the language and I will just mock that out and say that we will get stored the context is stored instead of sending whatever is there in the code send this part so there is a language English French and Spanish and active language English so now what we have is within my test and this so now what happens is wherever within the test because it has changed to a different language instead of calling actual context if you just go to this mock and the mock will have its own different value so my test says out of these three values we have to write will the active language be here anymore now so there are other things but not much so there are other things but not