maybe called bind once okay it's still finishing and doing all that so it's so bad it comes right so here they were using ng and all that now you've turned it to bo bind bind once bind and all those things you've changed that now if you if you load the same 8000 rows for one you see it's already fast right and it is only created five watches it's still as responsive actually okay so how does it work I mean it's very simple I'm still confused there's only one editable box in the old page yes why does it need to have 66000 watches so because you you create this uh what is it array of models right here these are objects and every time you do an ng bind on these things or every time you do an interpolation with this double curly braces it actually creates a watcher for you but when all those items are not um uh you should do any type of the way you just you just you still have to show it here right like watcher watches the module to update the view yes so this is how angular works I mean like this would usually how you write code in angular so where you do an ng bind or you do this interpolation to get you there and that's what happens it creates a whole lot of watches and the way you uh you know get around this problem is used something called as bind once it's an open source director of the library which does that now the problem with bind once is that it sheets actually right it's not bound anymore so and if these change then this this won't change it's just it just binds it once and then it doesn't create any watches right so and the reason why you need bind once over other things is because in angular sometimes you need you may not have data available when you when you get that thing in so these directives may be empty and so only when data comes in you need to be able to flush it in actually so you don't need something like binding there but you're not going to change it every time and so it uses bind once but if you do have to change it then you would have to pay the cost of all these watches okay coming back so now we have kind of seen what what happens if we take to a data binding to the strip of course this is like a kind of a very contrived example of what happens if you have too many watches and too many uh you know bindings on a page but I mean it's it's easy to get there and it kind of demonstrates why this is bad right and so of course like I said right I mean mutable state is the root of all of it right so how do you get rid of mutability right and then how do you how do you make sure that some as mutable some is not beautiful so react says that okay you could have properties which you can pass in and then you can have state so there are two different things state is something that is required by the current object to re-render itself well property is immutable and it simply passes around just for binding another so if properties change they don't uh if if you change just the properties along the the thing will not get re-rendered actually but if you change state it'll re-render so in a react component uh if you want to if you want it and it's child components to re-render you do something like set state right once you say this stuff set state and provide it a new model it'll go ahead and re-render itself and all the child components beneath it right and then you'd be selling like right are you crazy I mean that's just a very costly operation to anybody who has done backbone knows that that's that's like the absolute idiotic thing to do because you have your scroll positions people may be typing in the form at that point in time and somewhere on top something changes right if you go and re-render the whole thing won't the form just like go away I mean like won't the contents what he typed into okay or if he he's scrolled into a particular point and if you remove all the thumbnails and put in the thumbnails doesn't your scroll position get affected right all those kind of things right are you but react is pretty smart about it in fact this is the reason why you react is awesome is because they wanted to make what I say these JavaScript applications fast and even yesterday somebody was asking hey you're doing all these things in Angular where you're adding these listeners in between and doesn't that make it slow right and Shyam was saying it's almost always that the what's the JavaScript is to never the bottleneck it's always the DOM which is the bottleneck right as it turns out JavaScript is fast and fast enough that you can actually maintain the entire DOM structure in memory actually and then when estate change happens you construct another DOM structure and then you do a diff actually and then figure out the parts only the parts which change and play those into the into the browser actually so that way your scroll positions don't go away if you have form variables that don't get affected that they don't go away and all those DOM nodes are really so this is actually pretty neat right and this is how a DOM diff happens right now you have so you have two items say first and second as you mean and then you have like the first one where first render is like okay div span first and this thing and then you have like the second render which goes and says div span first and second you add the second thing then the DOM operations that will get played is the it replaces the attribute of the first content to second and it inserts a new load as first right this is how the diff logic works but you can see that this is already wasted I mean all we need is to insert one DOM element why is it playing twice of course you can insert a key operation to make sure that doesn't happen but the point is it that's how it does so it starts walking a tree and then it starts finding out hey in the second one the first guy says this thing has changed so I'm going to change only the unit text of this guy and I have to add one more node called span so the algorithm is generic enough to know that okay creates two trees and then it says okay it starts compiling the first node and second node okay from the usage do that and then add one more node and then you're done like those kinds but you can make it work a little smarter by having key attributes to make sure that hey that is the same DOM element don't change it and so it'll also compare for keys and all that so but this is this kind of illustrates how how the how the thing works right so and the most contentious point of using the act is something called as JSX actually so JSX is kind of an XML okay now people are getting very so it's like almost kind of XML syntax for describing DOM so you already have HTML which is sort of XML and then it shows the markup and all that now what React gives is that it's it gives you the ability to stick in your HTML into JavaScript let me I let that settle there now so if you're going to beat me up now let me just hold on give me a few more slides I'll explain why it's a good idea now what happens is that this is purely a compiler thing right so this is not like a new JavaScript templating language right this is this is just a variant of JavaScript it's just an extension on top of JavaScript but once you run it through the JSX compiler it turns it into this actually so what it does is that so earlier you had like div, span, ul blah blah and then ul and div so it actually turns it down into inline function analytics it turns it into react.dom.div react.dom.span and so on so these are like normal components that you and I would write actually and it turns it into that and the first attribute is the first parameters the attributes that it takes and the second parameter is the continuity and this is how it works I'm sorry this is not a string so you're returning an object no it's not a string it is not a string okay so you're just writing it as this is an expression and then I mean you're just turning it out into actual so it goes line by line instead of filing the whole thing and pushing out one object no no it doesn't do line by line it's still it's a smart compiler in a sense that it knows that there is something open and so it needs to add it and so on so it goes like react.dom.div.ls so why not just create one object and push it in react.dom I mean I didn't quite get that I mean it's it's basically pushing one object in the react.dom no this is like react.dom.div is a component which has these attributes and which has these children right so the children are react.dom.span and all that so I mean so it has a couple of interesting ramifications here right so what we are returning is a function call which is basically a DOM component function call outside here and so that means that we can JavaScript functions can only return one value at a time so in jss expressions you can every single component is basically a so this is a component hello message is a component right so you you create that and this all components need to have one kind of root node and everything is like a variable you can't have multiple multiple nodes being returned because of the JavaScript language so what this has is there are no templates no so okay there is a difference between okay imagine how a handlebar templates right so when you have a handlebar template it actually goes through the compiler and it returns a JavaScript function okay and the JavaScript function does string interpolation in between and then it renders out a string which then gets stuck into your DOM right that's how it works now what this returns is a virtual DOM representation of how your display should look like it's not a template although it is similar to that of a template it is not a template though the way in which templates work right now and the way in which the jss expressions work are very different in fact you don't even need to use jss you can actually write this if you if you wish but it it becomes cumbersome after a point right because you need to have you need to like track all the nested things and I mean it's essentially a markup kind of structure so I for one like like this I mean it's similar to flex right when flex had this mxml in action script then you can you can actually put in xml inside action script files and kind of syntax and it's very similar to that in electric and being a little apologetic right now because but once you start coding you will find out it's not as bad as it seems right so yeah but most people will go this right when we came away from php and like we were doing connection strings there and finally learned our mistakes the hard way and then we came to jQuery and jQuery was like you know sticking dom as string and all that we came out and we used underscore template and then we had handlebars and then angular jss and now you're asking us to go back to this right right but it's not that good let's so as any ideas go there's this excellent blog post called give it five minutes and you should read that I'll link up to it but this is from the react document I promised that this is the only wall of text slide in my in my entire presentation so it is basically means that so the reaction philosophy is that they think of display as components and not as a large controller and templates right so angular things of it as controller and templates things of it as controller and templates and so on and so forth right but reacts philosophy is that these are components and these components have behavior and these components react to events and they give rise to a state so the view is essentially functional transformation of a model and this component is a way to get that actually and that is the reason why they have made this kind of choice in you know in avoiding templating languages and directly using JavaScript and any expression that we use in between here is like a proper expression they put in any like within that you can just put any JavaScript expression and it's it's fine and you can be safe that you don't have to like worry about devalueing and all that because it's actually done at compile time and not at content okay now okay let's start building you know a react task but I have to warn you right I have mad CSS skills I mean I think it was zero right so I mean the applications are going to look very bad but actually I hope I'll be able to demonstrate a part of it but this is like an awesome thing so I found I first found it on Scott Hazelman's talk on the future of VMs and I think it's called the state of VMs anyway so let's go back so let me so I have you can go to this bit.ly link actually js2-liniac so this is basically a jsgin link so the internet seems to be good here so my original idea was to do a complete kind of offline kind of thing I think also okay if the URL comes like this just put an edit on it I got an investor copy the picture so if you get if you in fact you can actually write this URL down it's easier let me know if you're all on this so do you know if you have any questions if you want to like me I mean feel free to you know shout out and we can you can have it as it turns out it's not actually we can experiment with it yeah we'll put in like 20,002 items and check how fast or how slow it is we'll enable the FPS mix and shake that we'll do a set interval try to find out make the worst case for it possible and just turn you know five percent of it and then let your case yes then there is a cost associated with that so there is a cost associated with if you have a lot I mean it's kind of a needle in the haystack problem right so if you have a large set of things and then you're like only five percent of these things right then then in such a case yes you're doing a lot of down three generation and different and doing that for very little thing the solution to that which not to be react but you react with the beautiful data structures that would be cool but we'll talk about as we report so is everybody on this or does anybody everybody okay cool so I like jsp because it brings back the level actually so just cool um anyway so I'm just going to turn on the react actually so once you have react it's going to so is it is it visible to everybody or should I increase the responses is it better okay so so once you choose jsx react on this it will uh it will create uh it'll add the react irons or automatically here right so you need a mount point for the react component right so I'm assuming document or body is the mount point so what I'm going to do is say react dot render component and say h1 and okay so now if you run this it's going to it's not going to work because you have to tell jsx that this javascript file is actually a jsx one to do that what you do is you do this uh within a comment you say jsx react dot com I mean hello whatever right now this is what happened here so you're you're asking it to so let me get rid of the this team and we look really change I think that so this is what happened so we have uh we had this h1 component and h1 is actually react dot dom dot h1 actually so this would work so even if I don't have this and if I want to just use mz react dot is exactly so it's just javascript code right it's just that this is a nicer way of putting so the is just a nicer way of showing the same thing but both are virtually the same oh sorry I wanted to turn it into jsx expression so if you're here I mean you have done like 30 percent of react already so here if you're mounting a react component so h1 is a normal component like anything else and you're mounting a download actually and which happens to be document dot com but it could be any download you can create a div id app it's a document or get element id of r and stick it in there so okay the resource of this well yeah and actually it's you know you'll have to play uh the react is library and then you'll scroll back and always go absolutely that's right yes yeah actually so you have to put that comment like the rgsx react dot okay so does anybody else have problems getting this to work yes I'm sorry where's the skull hands I will come to add on to it later so react has this uh slightly I mean like for example the screw way linking functionality some class management functions and all that so they are they're classified under add-on so they ship a few mix-ins and features so you can also use some core react library and that's what's working so yeah so you can actually click on this arrow uh and this will take it to a new and here you can basically look at elements and use source now how we could no this so when you're running it in runtime like this yes probably because you're also compiling and running it but uh usually in your product you will pre-compile it and then you won't see a picture I mean in fact there won't be any difference so let's start building the canonical uh to do example okay so the way you work with or you build react applications is that uh you start building a simple html thing of your app and then slowly start extracting it into components okay so let me add bootstrap just because everybody uses bootstrap it gets the reset and all that so I'm going to get rid of jQuery I don't want jQuery here I'm also going to get rid of uh the bootstrap JavaScript I just want to use it for that so the way you want to do it is you can do class as if the guile equals app so you're going to have the app is going to be and then you're going to say so you're going to have I'm going to have li and then I'm going to have a span indicate of say whether it's computer or not so I'm going to add the font possibility okay is it there's anybody know what is it font awesome so and this is complete and so this is uh library called font awesome actually uh so font awesome has these nice icons that you could use and you just put uh if a icon whatever thing that you want and automatically this icon's do you have an input or yeah so I added the font awesome so this is kind of the output that we want so we will try to get here first actually so how does this work now you have your get rid of output for moments so here we have uh so you have the main app and then you have the tasks component and you have the task component within that actually so let's fill the task component because that's the simplest actually right uh so assuming we have a few tasks so task is just going to be an array and uh so we say task push say set this to true and I'll create one per task now um so what you're going to do is you're going to have a task component the way you create a component in react is that I call it the task view react for the components and every component has a render method actually right and this render methods would basically give out some hdms yeah so basically a DOM expression as you order DOM expression and in our case the DOM expression is mi and you know display the task and so we'll assume that somebody is going to give us the task as a property actually so what we do is dot props dot um dot title and we'll just get this working we'll come to the states a little shorter and then we also have tasks here so it's just going to be the main thing or we call it the task list so before we go further let's first find out how this looks actually so I'm going to create a small placeholder here and she did it for three plus oh sorry good catch thanks and then as area dot render component and create a task view okay and I need to set a property for that so I'll say task equals tasks of c and since this is a JavaScript expression I'll have to put this within curly braces and close this and I'll say this I would render it into a test so let's look at the output um again here I missed setting this and so it creates task one and if you want to change this so this works now that this works so we start entering all the tasks in this so do that so let's say our task list view and that would be a react dot create class that will have a render function now here I need to create a whole bunch of these li objects right and this is just a URL so I have to return a URL but then I'll have to have a whole bunch of task view objects here actually so the way you do that in react is that since they are just JavaScript expressions you can say tasks dot so here I am I will get tasks as the initial state so I'll say to get initial state of how this comes in so this is just a react component lifecycle function which basically when before the component is rendered this function will be called and it expects you to return a set I mean in the initial state of the component so I'm just referring the variable that we created on top here and just return so in this function I would be able to access it as this dot state dot tasks actually so this is an array for us um so as since I'm on Chrome I can do that otherwise I'll have to use underscore or something like that because Chrome has has this ES5 array functions that I'm interested in so I'll give the task object here and here I can say return task view task equals t now I can capture this in a variable so these are a bunch of task views and I can then stick it into the URL so task view will be output string I'm sorry so task view again none of this is an output string right so like how this return works it's just a dom node expression right so task view would be a dom node expression which will then when it runs it will expand it to li it won't be a string none of it actually returns this string I'm sorry no it's just a map function right so here so this is an array right so I mean this is like any other array dot map so array dot map basically returns this dom element so task use is a array of this task view dom the react dom element but the compiler is smart enough to figure out that between you are closing your array so all of those are changing exactly exactly but the compiler doesn't do anything here it just is I mean it just translates it to task views comma task views that's all the compiler doesn't do anything so if you want to see how this is in a compiler so let's do this so there should be a that is a live jsx editor so let's do this here so so we have a task list view right so let's see what what happens if you stick this in there you put the jsx on top so the compiler jsx just sticks in task series here you see this it doesn't expand it's just an expression for it right and and so that yes works yes yes yes yes no no so it was always one argument there's always one argument I mean so you you'd have the attributes on the content the content just happens to be an array of things here that's all yeah so now I'll just end up this so what I'm going to do is I'm going to get rid of the stuff in divide the app because we have this now and I'm going to say react dot render component this thing explicit here now if you look at the output you should have first taken this and just so it works so I'll just here so let me know if you've gotten this part so here I deleted everything there isn't there isn't an app actually and this was a bit like this so now if you send that URL again then you can get to the like the stage if you're getting stuck so So what I am doing here is I am creating task queue, task is this task object, right? So this.props.task actually refers to that task object. No, no, this is the object in the area. So this is what I am doing here. So this is what I am doing here. This is what I am doing here. This is what I am doing here. This is what I am doing here. This is what I am doing here. This is what I am doing here. This is what I am doing here. This is what I am doing here. This is what I am doing here. So does anybody else need some assistance? Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. For. To my knowledge, I only know of these two. For is a JavaScript keyword, right? So it won't be possible to. Why do you want to use for in a template? So you would say, you would say a label for this ID. And so for accessibility features, you need that. Okay. Yeah. Yes, it's part of it. So whatever you pass in as. So here we are saying task view task is equal to something. Right. So what do we say? What is equal to something? They get passed in as props. To this. Okay. That does not work to my knowledge. Actually, we can try. Here it works. Here it works. That's because it's getting as a part of the content here. But I haven't tried sending those to a scenario. Because it expects that the components are in their method should return a DOM expression out. I'm not here. A good question. Currently it's not working. There's an open bug for it. And it's very good. There are a few STM entities. Which cost problems actually. Yeah. And NBSP. So and NBSP, if you try it now. We had escaped kind of people. Yeah, it doesn't work. Yeah. So now we need to either have this check or not have this check right. And that's pretty much what we want to do. So here we can turn it into an expression. So now. Yeah. So it does. So here I'm just doing a string calculation here. I need FA. And then I have an expression which basically says if it's completed. Then you add FA check. It's just an empty string. And I set that to the class name. So here you can pass the stimulants and the stimulants. Instead of the last name. I want the span type in this case. Okay. So what, how would you want it? See the span itself. Yeah. For example. The span class could be FA. That is a problem. Okay. Good point. I don't want that. So here they come here. And you can say I'll just get it out for a month. And if you want to take this out into the table, you can say. So if you want to look at this. So if you look at, okay, let me show you this. So if I have. Yeah, I'll show you one second. So if I say. So the compile JS basically looks like this. What is the history? What is the JavaScript keyword? Yeah. The compiler should change it to something else. Yeah. So the reason is JSX is meant to be a spec, actually. So they want to keep that spec. So you also have data as an attribute and all this kind of thing. So they can't possibly think of every single. So they have implemented it in the library. React library. And JSX is just a spec for translating XML to your. So they want to keep JSX as light as possible. They don't want to have like Tom kind of logic into JSX. So you've gotten to a point where. Where we have got this check box in the indication of status. Then we'll now have to tie it up. Actually, so do you guys want to take a break now? Or what is it? What do you want to do? So the last thing. 450 is the rate. Okay. We have 15 minutes. Okay. Okay. I think I stopped following me. Hi. Hi. So are you guys comfortable with this? Yes. Come here. Do you need any assistance? Yes. We have until six. Yeah. Yes, you would put it in a separate file. In fact, the project structure generally looks like views within the views directly. You will put that the stuff that we put on top that usually models. So you would split your JavaScript code out. I mean you split your JavaScript code just like any other thing. Like you would do the same thing in Angular or whatever. I'm just using JSX because I didn't want to go through the setup pain that others have. Status, right? Yeah. So that's because I'm just using it as a variable inside here. Right. So it's just a download for me. So if I have to, so I can as well write this expression. Yeah. That's what I was trying. Yeah. It looks ugly. Right. And so it says, okay, you have this title. So I first wrote it within this and then I refactored it out there. Does it answer all of these is like saw all this stuff. Right. So I mean this is just JS been thinking that some of them are valid, of course. Okay. So it doesn't need a same color. I'm very pretty good. Okay. So we talked about props and state, right? So props are supposed to be immutable. You're never ever supposed to change props. Right. But you can change state. Okay. We'll come to that. We'll come to actions shortly. So when you change state, then you can trigger a re-render of the component. Essentially. Does anybody else need any? Okay. So the first thing we have to understand is that just a JSX compiler. Right. So JSX compiler basically takes the expression as is. Like for example, if I put an expression here, right? Reactors. Sorry. So I say, and here I say task view, task is this. Right. So essentially when JSX goes through all it does is it does this. It doesn't do any transformation there. Except for the fact that it changes that kind of brackets into the unit puts this as a. And that's about it. Right. Everything else is then done by reactants. So react knows that it needs to create this task view with the props set to task T. And then the rest is kind of the same. Right. So this basically gives a declaration saying that, okay, this is the class that you need to use. And these are the properties that you need to pass in. So it will probably create an object of task T. And then. So we have all the object that we created changes in the context. Yes. Let's put some negators and let's draw. Yeah, I draw it. It gets a representation of the task and it has a change. Yeah. Yeah. They are comfortable. I'll be here anyway. It's somehow done. So if you guys want to like grab T and come back. So we'll come back at 420. Is that right? Yeah. So we get current. Okay. So. So we haven't gone down the data binding route yet. Right. So everybody has this canonical example like angular has one and has one and say, okay, how do you do data binding and put something in a text box and that comes out in a label with it. So we'll do that to understand how events work. So I'm going to have. So I'm going to have. So like above these tasks, I just want to put another input element and I want to, when you hit enter, I want to add that to the task. Let's see how it works. So I'm going to have something called a new task. So I'll have two things here. One I will have an input. Next. And I also have a span for the object. So I'm going to close this with a snapshot here. I'm also going to put a few here. And then I'll have to add a snapshot here. Format is a fix. So this is creating something. So that's probably for us. So get initial state. So overriding the get initial state is compressing the problem. If you, whenever you want to use state, you need to do that. But here I'm using state when we outboard this. So now that lets me do what I want. But now I want to also like for the, just for sake of fun, I want to show the value right below whatever I like. So all the DOM events are also available in as a part of React. So you can do on change. And I'll say on change event handler. This dot handle change. I'll have a handle change function here. I'll say this dot state. Output is now get. So what I did is now I have the, so whatever I type basically. So let's see what we have. So now I have an on change function on the input type text. Actually, and when I change this, then I just get the value. So the thing that we have to observe here is that these are synthetic DOM. So if you look at the console, so as I type in, let me also console.log here, here this. So what you get back is a synthetic event here. Actually, synthetic event is basically the nice part about it is React works on all browsers from IE8 and above. Actually, so even if you have like HTML5 drag and drop events, React makes it available in IE8. Because these are synthetic events. They just work. Maybe you have to put around a little bit because it's IE8, but essentially they're there. So synthetic event is basically wrapping over the native event. So the native event may be a mouse, but you may get a drag and drop event in Lima, which is there. Like for example, on change does not get triggered on certain browsers unless it's blurred. Because you have to do a key down otherwise or a key up to do it. But React kind of homogenizes all this as on change is like as you like. So you don't have to do on blur on one thing and on key down on something else. Yes. No, it's it's great. I mean, like directly on the matter on the down here. Getting closer. Yeah. And also it is small. Can you tell me this is mine?    So you don't have to do. Yeah, we'll come to key. No. Shocking. They are bound to this element. So, okay. I understand. I get your question now. So for example, if I want to put a put an event on new task here and not on the input element inside the new task. That won't work. So you will have to take that as a property and then pass the property on to your. So you can either use transfer props to that or you can do. You can actually manually assign it. We'll have it. Let me know if you've got there because this is kind of one other milestone. Once you get through this, this would be kind of. Relatively simple. See from there. What sets it as here. So what sets it does is that it's here and changing this. So the state is the output here. So this is what determines what the output looks like. So whenever something changes, so if you have to re-render this thing. So anytime you call a set state, it actually renders the whole thing. So what we added in task list view was we added this div. And we just because earlier it was just you. So it's basically this dot. So as long as you can access this, this dot and set state on it. It's going to re-render this and all this too. Yes. Yes. Yes. So you will always have to render the first time. So your initial state needs to take care that even if it's empty, it does render it properly or you need to put in some values which. Yeah. Yeah. Something like that, which gives some sort of a down or you can, even if it's not there, then you put it in an if and not done and there it also. The moment you have set state, then the render function is going to get called again. And then things will come. So whichever point you set set state on, everything below that will get rendered. So here. All it's silent. All it's silent. So here for the new task theme, the output has one and then it has this and it has this. So it's going to render all of this. So you have to understand that these are also, like reactive components. It's reactive downloaded. Reactive downloaded input. Reactive downloaded standard. Basically when you set state, it's going to render it. Yes. But it's input which already has a value doesn't it? Yeah. So the thing is here it doesn't change because it doesn't have to change. There is no effect on state on it. So when you render it, render it again, the diff will basically say you don't need to do this. Effectively only this will change. This new task view is creating a class. Yes. For rendering it, someone needs to instance here the class and make an option. React will do that. So react does that. So which one? Instance creating the class. For which class? New task. The new task view we are basically calling it here. So in the main task list, so we have put a new task view there. Yeah. So whenever the tag is there it will create an object out of it and render it. Yes. It's like anything else that you see. You just need to move it above the task view. It will work anyway because it's the render thing and it will be of good value. But since we are referencing new task view from task view, better if it's loaded in. That's right. If you're putting it down, the new task view is on the top. It will still work because you're already calling new task view in the render function and by the time it comes to render it knows what it is. But ideally speaking you should be. Who is evoking that latency is straight? So it's part of the life cycle method. So you would actually have. The class is sent here. Yes. So the first time it is being injected into the norm, then get initial state to be called. That's really good that you are setting and how. Yeah, that's just a. Yeah. It's getting it. You. Well, I think you are passing task view does close to. Yeah. Yeah. So when we do like this, it comes as a property. Yes. We can pass it. Yes. You can pass any object. So basically all these will come as. You can even pass the functions. You will actually pass the functions to as properties. It will always be in the form of this. Yes, it will always be within this. What if we. Use some original. It will not be able to use it in this. I don't quite understand. If I use what I like. Yeah, I mean we are basically shadowing it. At that point. After that, we will not be able to use the original. At least within the scope. I haven't tried it. Yeah. It could be at least for that scope. Yeah. That's a good point. This angle has this concept of scope. So each wheel. So if you state this. I mean if you see the process state is what it depends on. So there is no magic in terms of like, okay, I can. I can trust any very good. It has to always be from props or state. And everything else is there. So there's no scope concept here. So we have costs in state. And every view is having. Yes. That is the only thing that can influence how the UI will decide from the outside. So in that case the pilot view cannot decide. We cannot see what the pilot view is. Yes. So you don't have scope in minutes. Which is the biggest problem. It's not itself. It's the source of new ones. So what you want to do is. So in the past list view, your tasks is here. So, so ideally what I want to do is I want to be able to find out the key of. So instead of hand on change. I'm going to change this to on key up. Okay. And so if I do on key up, I actually get e.target, e.keycode. Right. And for enter, since I'm scarred with JavaScript programming. I know the value of end of 13. So, yeah, it's just a magic number. So if key code is not 13, or if it is 13, then we do this. Otherwise, we simply return from there. So that. So what this basically means at this point in time is that. So this one happened. If I only if I hit enter, it comes up. So this does nothing. Only if I hit enter. So far so good. Makes sense. Okay. I think this has to do with the time it brings this. Something. Something. Yeah, it seems odd. I haven't figured out why this happens. But I seem. Yeah. Yeah. So if you do e.keycode that works. Yeah. That works fine. Yes. Yeah. One of those. They say it's like. Yeah. I'm not. I'm not sure why it is so. I haven't looked into it. Here. Any corvani side. So if you look at the number of native events. You have to handle on on chains. It's actually higher than you just do. So he was just doing a benchmark. So. So you. So it takes about three, four hours. And. In the selection, the same thing that's also. Yes. Better to do one of these and not all of them. Yeah. So you have like six well and it's a lens that. The product. And. So it's better to do. Better to do. So just on key up alone would be 2 or 3 MS. So how to change actually every key down here. How do you get to that? I would say, capture last, then I would say, take off and keep that set. It should be blue. It's not recorded. So you can see all that's happening. Change option selection. See, when you're doing that, you are intentional to show that you know what it's like. So for that, you don't need to be disciplined. You don't have to do it as fast as that. So you either don't have to be there, you don't have to do it as fast as that. So you have to make sure to do it quickly. It's not easy, it's not all of that. All of these are workable. There's no painting as well. So shall we move on? So instead of saying set, this starts at state, what I want to really do is change tasks here. And do this. I want to add one more item here. So I can't change tasks here because new task view doesn't know about tasks. So the only thing that knows about tasks is task list view. But I put the handle change here. So I could always say, suppose I have an image like this. So I should be able to call on new task and say new, I'll say, I think I'll call these titles, right? I'll call these titles. And I need the action value right here. So what I will do is I can do e.target.value. Or if I'm doing something more complicated, I can put a ref here and say new task. And I can then get this .refs.new task input. So this will give me the react download. So to get the actual download, I can say get download. This will give me the actual download. And I can then say value. So I can do this and I can get the set. So where does this on new task come? So what is the obvious place to put it? You know, it will be here. So I'm going to have a function on my task list view, say handle new task. And say this would be like, and here I can say, oh, this is the place to your passing function instead of the option. Exactly, exactly. And I can get the task. And here it says, what if multiple views want to listen to it? You know any change in that? Yeah, so multiple things will come to that. So you need a proper eventing system.  Actually, so I put it on props. So this will be available on this .prop store on your task. So here if I comment, and I can then say this.state.pass.push task. And I can say this. So what I can do now is then I should be able to, so now it's not clearing the input though. That's another thing that you want to do. So you can call this and you can say this.state. So now I can create all these things. So what we did here was we passed in, so when we created the new task view, we actually created a property called on task view. Passed it a handle new task. And then this function is supposed to get a task and then it pushes the task, new task to the state or task and resets the state to the same object essentially. And then what here we do is that we have the handle change and the handle change actually does the, checks for the enter event and if it's enter then it actually creates a new task object with title and the value of the download and then calls props.onNewTask which basically delegates down to that and the reason why you're doing it is because the guy who has to change the state has to be the owner who has the state. I mean this new task list doesn't have the, I mean it doesn't own the task state object actually. So its parent holds it, so it expects a call back from the parent and then you can then set, the parent then sets the state on itself and everything changes there. SetState is a part of the object to the setState. Yes. We are already updating the state in the previous name, right? So the idea of hiring an event, setState. Yeah, so if you just do this, nothing will change because you're not, I mean, although you have mutated this object, it doesn't know that it has to re-render. Is it really the code that we need to pass that property again into that one? Can't we just code setState? Yes, you can. That's very observant of it. You can actually. So this would also work. The reason it works is that, okay, state is all, we have already mutated state, all we have to do is like indicate that it needs to redraw itself because of the state estimation. But this is considered kind of an anti-partner because it's okay. We saw get initial state and render, right? So there are multiple component lifecycle methods, right? So we saw, we looked at render component, right? We say react or render component and you say a mount node, actually, right? So before the component mounts, it actually will mount component. Component will mount, will get called. And then it will basically call, I mean, so if you call get initial state and component will mount, you can try to do Ajax calls and registers things there, actually. And then you can, and component will mount, you can also change state. And then you will then get to render. And after render, you'll get to component did mount and all this. This is the whole lifecycle of the functions of callbacks that you can deal with here. So when you're doing these kind of things, the get initial state and all the kind of things, there, the state object here, they're changing from here, right? So we should be, I mean, it is easier for us to know what has changed if you set this thing again, even from a readability perspective. Everything happens there, actually. And it gets merged in. Where Ajax has no head, right? Ajax enter is not happy. Okay, so if you hit enter here, actually, right? So if you hit enter, then it goes to handle change. Handle change then expects a property called onUtask. So the onUtask is basically passed in from the task history. So this is handleUtask. So it creates a type task object with title set to the download value, okay? And then it basically calls onUtask. OnUtask basically calls setState, okay? And it comes here. And it reads as the both. So the beauty of this approach is that since nothing changed, for example, if we don't, we didn't change it. So we said setState basically calls everything, right? I mean, so here if I don't clear the download, even though it has re-rendered the entire thing. So that means that it has re-rendered this dev, new tasks in the CUL and this dev. It doesn't change the input element here because there's no change on it required. Even though it has re-rendered it. It is re-rendered. So we are calling this.setState here, right? So you call this.setState, it calls the render function, right? It's going to generate the whole new DOM again, right? But since there is no change required on the input element, it basically doesn't get re-rendered. Yes, yes. Even the whole UI won't be re-rendered, right? Yeah, not the whole UI. So you will have this, only the last item will get added, basically. No, the task list view, the new task view is outside the task list view, right? No, it is inside that. Yeah, it is inside the task list view. Okay, okay. Yes. What is the difference? The difference is you don't have to care about it. React will take care of it. That's a huge thing, actually. If we are re-entering this, the new task view will not go through all the lifecycle method. It will call the lifecycle methods. It will actually call render again on this. No, get initial state. No, get initial state will not be called. It will only re-rendered. So like for example, let me show you, right? I've got a console.log here. So you see this? It's getting rendered again. So even if one field or any, in the way it calls its state, all the elements in the view... Yeah, basically everything downstream will get re-rendered. Well, re-rendered version. Re-rendered version? Yes. But it sets state called render. Yeah. Now, I don't know, I'll just find this in the next minute of the talk. I was calling this.setState to this.state so that we... You don't know the state? Yeah. So when we were passing in the empty object, I thought you would clear the whole state. No, okay, so it merges. So that's the reason I... So it merges whatever you pass with the whole state. Replace state. This sort of replace state will replace the whole state. So is that merge necessary? Yeah, I just got this.setState to this.setState. Yeah, you can answer. I don't see a reason why you... No, it's not. It works. Yeah, but it's superfluous state. This sort of state, this is the reason. It's like a no-off. Yeah. No, it's not. This sort of setState equals to this sort of state. So in a sense, it basically merges the... anything that you do. So essentially, if you pass an empty array, so we have already mutated it. So what we wanted to do was this. We wanted to set tasks to the new tasks that you mutated. Actually, now the argument here is that you are anyway mutating it in place, actually. So since you are mutating it in place, why not do this? So if it's like an Ajax call, then this question won't arise. You will basically get a new object from there, and you need to do this, actually. But since it's all happening in there, so since we are mutating the whole thing, so we cannot pass anything. That will also work. Or anyway, it's going to merge the keys there. So it can actually pass at this sort of state itself. That will also do it. But I prefer to have it this way. It's explicit on what we are changing. This concept state, you want to pass on here? Yeah, I'll show you. This concept state, yeah, it basically triggers a re-reader of the itself knowledge of the object. You will see that the first object, the next object here, after setting it as A, it will only get the last question. No, it is not that. So in a sense that even if it renders the same top speed, actually, so that's a virtual render. And then it finds out that the input mode that we have doesn't need any change. That's exactly. So when it's finally writing the top object, or then fitting the actual top, this change will not be propagated. So that's why you will have to manually go and clear it, actually. Otherwise, since that DOM doesn't need any change, or any change that happened outside, even if it says dot value there, it wouldn't know because it is not happening on the virtual DOM, it's happening on the real DOM. Any change on the real DOM, react will not know. It will have a virtual DOM, and it will have the new re-reader of the virtual DOM to try to make it different and favorable. So that means, anything that affects the real DOM, so you will have to redo it or reconcile it, because whatever changes there on the real DOM, it will not know. So that will have an attribute that will take up all the changes that are on the real DOM. What has it done? jQuery also has its virtual DOM. No, jQuery actually works on the real DOM. So when you render a component out, and then you are making some changes in the actual scene, then in such a case, if you've already made a change, and then you are going through one more change here. So if some of the real DOM has changed, this will not know. So you'll have to do a component data update, and then try to do a jQuery binding. Either destroy the old one, or create another one. As far as possible, if you can avoid this anymore. So is there a case with the Android that allows you to use it? No, Angular does not use any virtual DOM. Angular, if you're using a directory, you can always use the link function, and do what we want. In the jQuery standard, you want it to go like this. This would be the real DOM. So what we are going to do is we are going to change the real DOM in the actual scene. That part of the DOM. So in a sense, that is something that I think we shouldn't take out a true DOM. So let it go through the JavaScript. So that you are going to do the DOM. Exactly, exactly. So most of the jQuery coming in, actually quite a bit re-rided in most of the top web. And you see, much less in-demand. You don't have We have a published API to deal with it. Can you explain that these projects are new tasks? Oh that's because that's how we create our title objects and task objects before. Like this. It's basically that. Let me know if you're all able to add things or if any of you leaves a system so you'll be happy to. How do they create the text box? Here. This line. Line 24. Look there it has passed on the task property to the child object. Yes. And that's how the child interacts with the object over there. Exactly. Yeah. So this is like a defined contract that you know that you need to get this on top. If I could say, I forget the exact syntax for it. You can say something like that. So I'm sorry. Let's see what happens. So you can actually say, you can declare the properties. So you can actually say, I'll need this as probably get back to you. So you can actually say, you want to have these particular properties and you can say this is required. React.properties. So you can say proper. You can say proper. And then you can say react.properties.com. And so if you don't have a whole bunch of properties. You can do this. So if you don't pass the on new task here, actually. So it will actually give an error. So I think speaking it should have shown an error. Maybe I forgot the problem. Actually it's supposed to give an error saying that you haven't passed on new task actually. So these are the property types that new task view requires. And then you can say, this guy on new task actually requires all these things. And I can say on new task.properties.com. I'm very violation. Yeah, yeah, yeah. It has actually, it must be a function. It can be. So if you. Yeah, it's just a warning. Yeah. I thought it would give an error. Yeah. It's just a warning. Now the warning goes away. So it also gives one more thing saying that the site in an array should have a unique property. Actually, so here it comes because this we are actually doing a loop on this and we are not. I mean, none of these have the key value here. So you can say you can do this. So essentially what this does is that you need to have these unique values and these unique. Remember, we saw that when I said how does this DOM operation in the second one got introduced. It actually said change the text to second and then this that's not ideal. Right. You just need to add one node and not not do this. And so if you put a key, then it will not touch the company with the same key. And these keys need to be unique among siblings. It's not that it needs to be unique among. It's not like ID. Right. So ID DOM ID needs to be unique across the entire page. Key just needs to be unique across siblings. So it's a better way to say. Does anybody need any assistance? So how is it going? Is it like going too fast? Too slow? Yeah. So it's not that I won't change it's just that. So if the key is the same, then it will try to match the same DOM node with the same key. And then if they haven't changed, then it moves on to the next one. So it doesn't like do DOM operations for and stuff. So it tries to be a little bit intelligent when it's giving. Similar to track-by-in. I'm sorry? Similar to track-by-in. I'm not aware of that. I haven't done so much. I'm not aware of track-by-in. I mean, in jpeg, we use a, say, where you mean there is a particular question. Okay. Track-by-in. Oh, okay. I wasn't aware of that. Just something to react to. Yeah. Yes, it adds the data. Does it make you a proof to actually change? Or does it make different changes? No, it just uses it for its own, like, it's usually a part. You might start with zero, or zero, or zero, or zero. It's the part in which it goes out from the main, which is what it's doing. What it's doing. What it's doing. It's usually a part of its receiving, and whatever it is, it's eventually going to change. No, I don't think you should know that if you're on track, you're on track, you're on track. But actually, to my understanding, I mean, I don't check that. I don't check that. I don't check that. Yes. Yes. This means that you give it to us, and we'll give you a manual. And in the end you give the API to the investment, the economic. And then in the end, it's there. I mean, that's not a good thing to do. You need to have these. Yeah, I was just being gazing and I said, ah, this is the index, I just said the index. I think if you repeat the same thing twice, it will actually be there. I am sorry. Can you close this? Oh, the key part, I put it here. What do you mean the key part? Oh, the prop type. Prop type is basically to say that I require a on new task. If it's not there, it generates a warning actually. I was thinking that it should generate an error, but it's being soft on me. He says that it tries to be a little smart about DOM 50. So let me go back to this here. So here we saw that we need to do a render A and render B. So the change that it does is that, okay, it comes here and say, hey, I need to change the first guy to second and I need to add one more thing called first. Ideally speaking, what should have done is come here. Just insert one code here and that's about it. I need a key. This is a key within a particular sibling range. Okay, for example, say this has span 0 and this is also span 0 and this is span 1. So it knows that, hey, I have a span 0 already here, so I don't have to touch it. So I just need to do only one insert node on span 1, span with key 1. So instead of two DOM operations, it will just be one DOM operation.  I just killed a warning, so it still works. It just does lesser DOM operations. So in our case, it anyway didn't matter because we were adding it to the end. We did task dot push. So if we do a task dot unshift, then if it puts it up first, then it will have to change the first thing to this. It's looking at the slide. You are appending one extra node to the existing tree. Yes. So that's only one way you can do it. In a sense, if you think about, okay, think you are writing this default. So you have one within that you have one span and then you have the inner text. And then you have another tree which has one, two spans and each one of them having inner text. So you walk through this and you find the first span having the text changed. So you create one DOM operation, so the first guy changes text. And then you come and say, oh, within the next div, add a span with this. So you generate these two operations when you do this predefined. But if you have a key, then you find the key and say, hey, this key is different from this key. So don't touch this guy. Maybe mark it for a deletion if it's not done. If you have a lot of keys, let's say, So you keep marking them right and then it'll say, any one shot, just remove those logs. If the key is not done. This is not the react wave of DOM. This is the react wave of DOM. So in here, it is anything in it. Yes. So if you put a key, then it wouldn't, okay. But react is only put in the key, sir. No, react puts a data, react data ID or something like that. I don't know for sure what it's used for. But my intuition is that it, huh? So you're trying to add that to you. That the data that you was the one took my key. Oh, yeah. Oh, okay. Okay. The final thing on this takes it. My motion is the hierarchy of the key. Yeah, it looks like it's the path where it will be realized in the DOM. Possibly. Possibly. Yeah. I haven't gone that. Is that key refers to all the path or even the text node as well? It will refer only, it depends on where it is, right? For us, we put it directly on the, we put it directly on the new task, right? So it's going to be there. So let me get this out here. Right? So I have this react plug-in. This is an awesome plug-in. You should look at it. So here, so it will be at, so it will be at the task view level. Right? And the task view level, it will set the key here. So as I change this, it keeps adding this to this. So if I don't have the key, let me get rid of this. So let me not put the key here. Yeah, yeah. Let's do a, remove the key, do an unshift and check what happens. This works. So here there is no key, actually. So my, this thing is that. So let's look at the data-id. So this is react 1. Let's look at the li. 100, 100, 100 and all that. So the data-id doesn't change. Right? Then let's try doing the key 1. Let's see if that changes. I'm not sure if that will work. Again, it will be 0. So it will be the order of the array. Oh, we are finding the string or something. Is it the order of the array? It will be the order of the array. Yes, but it puts a dollar in front of it. Dollar. So maybe we'll try to, let me. So I have like a broken code function. Maybe we can try using that. Don't use this in your production code. Because the length of the code keeps changing. I have to use this. So what I'm going to do is, again, and we need to ask you also, I'll say, id code into it. And in key, I'll say, id or id. Let's see what happens. The elements have this id. So as I push this, so if you have the key, probably this won't happen. It will just be the id and then it will change. What is the data, the xid? Is it the auto-gendered identifier? So it looks like the part of this node in the virtual DOM, actually. And if it doesn't have a key, then it just gives a numerical value. If not, whatever you put as a key, basically check dollar and key. I think it uses for DOM manipulation also. Yes, yes. It needs some sort of identifier. Yes, that's good to know. Thanks. By the way, that was from Stack Overflow, the code function. The assistants, can we move along? Next one. So we do a double-click to toggle this thing. That's the next cool thing to do. Let me get the output back here. So what we want to do next is, when I double-click it, I want to toggle this computer. So that obviously, the double-click happens in here, on a light, actually. So it'll be on double-click. This is what's supposed to happen. So the thing is, now, so this is a task view, and so you can't change the tasks in here. So you only need to change the value of the task, actually. So usually what you could do is, you could say, get initials here. And here, in this case, since the state of this is purely on the basis of whether the task is completed or not, I can say, return task colon this.prompt.task. And here, I can refer the states, actually. And so, I can say this.task.task. So I'll have to get the start. Not, not, not click. And then I'll say this starts at state. So if it's null, then you put a not, a recent value, and then you put a not-not, it turns it into a Boolean of a true-the or a false-the value, and then you turn one more not to turn it into either true or false. It's like a... So you can just put one not, and it depends on it. If it's a true-the value, then it turns into false, if it's a false-the value, then it turns into true. But in JavaScript, true-the and false-the, null is false-the value, then it turns into true. But it's kind of a... I mean, it's inelegant to me. I want to deterministically know that it's... So generally I would doubt not. Yeah, I will talk about this. You would only talk about it if you want to. I don't think we'll have time to set up dispatcher, actions, stores, or control of the new one. I'm sorry? Yeah. Yeah, so... It's really a problem. I accidentally double-ticked on the... Oops, I don't... I guess my CSS skills are amazing, right? So let me know if you need assistance. So if you notice this, I mean, this is kind of an anti-partner, actually. The anti-partner is that we... So what we have in props is supposed to be immutable, actually. But we get that turned into state and then we do it here. We could, as well have said this and then we could have said... We could have as well changed the props and said state of nothing. This would still work. But ideally speaking, this task view is only dependent on that. So we can take it as a state and then work with it, actually, rather than props. So the community is kind of divided on this kind of a pattern. So it's kind of like saying, okay, what is the proper mode as a state? So you're only doing this because that's the only way of getting data in there. There's only a very stage in there. You're using it as a state. I mean, if you do a transformation but here in this case, you're clearly using it as a state. But these are some of the problems where you use React as a state. Once you use Flux, the problems will work. So can we move on? Okay, so moving on. So one more thing that I want to do is I want to display a summary of how many tasks are completed, how many tasks are pending and all that. And I wanted to do it about the input thing. Okay, so I'll have a summary view and this would have a render function which would be like, so now I'm just going to render the summary view. So this is the task list view. So about the view task view, we'll also have summary view. And to this, I'll pass the tasks as a state, pass the values to do the computation and stuff. This one is wrong. I think I forgot to do the term there on the summary view. So it's just completed 0 to 0. So basically what I want to do is I want to be able to say completed um this task filter. So I'll get the summary. As I said, I haven't seen this design space. So the problem now is that this okay, I'll let it get here. Oh yeah, here in the task list view, so I said summary view task list. Yes, it is now. Why? Yeah, the set state is happening on one of those components below. It's not happening on top. But it doesn't know. So even though the component is changed, even though the task is changed, it doesn't render on the top. All the way on top. All there is another way. We'll talk about it. We'll be here so far. Not because of the reaction. Just to be clear. My question. So this is where you find the summary view and the task view and the set task list view. So it became aware of these things. Yes. And one of them has this excitement. Right? So we have a download review of my task view. So that means these are similar task list views. So what if I try to do something inside summary view exactly the same way you added task list view. No, try that. I mean. Yeah, it will. It will. It has to be there. No, I mean, even on a JavaScript level, it will actually cause because a start over flow right there. And not right at the chase. Yes. It seems to be very particular about the start over flow and the whole project. Yes. The Yeah. Okay. Okay. Yes. F.A. and F.A. has to be okay. Okay. It's not happening on the previous one. So can we continue? So now the problem is if we double click on task 2 and you change the completed count, right? You see the summary does not change. Actually. Right? So that's the problem for us. The reason it is not happening is because when we double click on it, we set the state for the task view, right? And that is like a child of, you know, the task list view, which is, which then has summary queue within it. So summary queue doesn't get updated. So the obvious thing would be to actually have a callback on this thing and keep passing it around, right? And so when this task changes, do this so that we can do a set state on it again and so on. That is one way of doing it, right? So the other way of doing it. So that's what we did with the handle, so handle on key down. So that's what we did. So the other way of doing it or rather the preferred way of doing it would be to, so you have this task of it here. So we can say, this is a very crude thing, okay? So what I will do is, I'm just going to do a little bit of in there, actually. And then I'm going to say this task equals, okay? Now I'm going to say, keep it at this at this point in time. So I'll say, task equals, here we get initial states of this tasks, this task, summary queue, then to same. So essentially we've got something here, so let's put it as well. So it's like a poor man's kind of thing, but I've got an object now, actually, right? So since I've got an object, I can actually say, I basically add these two variants. So even in the handle new task, so I'm going to do a couple of things here. So I'm going to also do this dot close for time, dot add function, which takes in the cross, I'm going to add alir underscore, okay? Just to, so I'm going to say, so I'm just making this an add function here, which basically takes in a bunch of properties, and then it closes them, it merges them with a new ID and class of this, and then pushes it. So instead of class dot, class dot push, define dot add, and define is not a function, pass this dot add underscore dot clone is probably causing a problem, so I'm just going to say underscore dot, that's where it is, so we have to say underscore dot. So it is underscore dot merge, so here we are doing underscore dot merge of, so now what we have done is, we have gotten, we are directly injecting fluid and this thing, so we don't need to pass this here, we don't need to pass this here, so fluid and stuff is already there now, so we have simplified the API a little bit, so first of all, now, and so similarly what we will do is, when you have this, we will create a past object, have this contain props, actually, and we will do this, so that we basically get all the props here, and instead of class dot push, class, you will say, class dot push, new class of props, current, so this should start working, this course is not working, so you've got this working now, now I'm also going to say, past dot prototype dot clone, and say this dot, we'll start working on this, so the kind of thing, so here when I double click it, still continue to work this, so far so good, we haven't broken it, now what we have, we have toggled it here, so now since we have toggled it, so we can basically say, so I'm going to add couple of more items on to task list, now I'm going to say task list dot prototype dot on, this is actually a function that takes, call it on change, that basically takes a call back, and task list I will actually, for the sake of simplicity, I'm going to do this, this bear with me for a moment here, I will go through this as we do, so I've pushed a call back into this, and so I'm trying to build an eventing system of sounds, so I also will have a task list dot prototype dot image change, and all this does is this dot callback dot for each, simply calls callbacks, that's all it does, very, very simple, so and when this task prototype gets toggled, I will say this dot task dot image change, with me so far, so basically what I've done is, I've gotten away out of react to signal models to basically say, I have changed, sorry, whenever they go through a change, similarly when I go through a prototype dot add, I will do the same, now in my summary view, so there is this life cycle event called component will mount, component will mount, I will say this dot prompts dot, or in fact let me not do this here, so I'll go all the way to the task list, because this is where the issue of tasks is, so I will go component will mount start, turn, start, change, this dot handle change, this dot handle change all it does is this basically says this turn set state, what we'll also do is, in this callback, we will pass it this, so this is a function we have to apply, so we are basically going to call each one of these, and so what would happen now is, I get the new tasks object here, so this handle change will have a new tasks object, and I can say, okay, so component will mount is basically, just give me one second, hold on, just give me one more, so you are saying you are passing the entire task list instead of just last, yes, I am passing the entire task list, and in the handle change it will just bring this dot state to the task list, the handle change I just said task to task, but that is task list, yeah, even here it's task list only, it's task list only, the task list is now a function with the tasks as a property, no, it's a class actually, yes, it has tasks in its property, yes, so it's okay, it's saying that push is repeated couple of times, just give me one second, so I have a task list of ads, so I have a task list of ads, it's basically going to tasklist.prototype.app, because I have already said what task is going to new task list, okay, so I have created an object, so tasklist of prototype.app basically gets this new task thing, and this task could be there already, or this dot change, yes, so now it works, okay, in fact it works so well that we can remove all these other stuff, right, we can actually not do this handle new task here, ad also does an image change, so for example prototype.ad also does an image change, so I can get rid of this, here, so it does a task or an shift, right, instead what we can do is, so we can let this be here, we can not set state here, we can simply do this task dot and task, so this will make sure that this gets added, it totally gets updated, and similarly in the task view, we are doing a set state here that is also not required, because since the change propagates, and some of you change the whole thing changes, so this simplifies a lot of this local state changes, and side loads this change from there, so this is a lot to digest, so let me walk through the change one more time, okay, earlier we just had a tasks array, and we just had just pure JavaScript objects onto it, so what we did was, we created two models out of it, so the task list model and the task model, and for each one of them, we added a few methods onto them, right, so then we move them so that they look, so for the task list thing, we initialized it with an empty array for tasks, and an empty array for callbacks, and then on an add thing what we did is, so we also had an on change and image change, so on on change basically takes all these callbacks, and then it registers a callback with you actually, so you should do a lot more things like for example, you need to check if the callback has already been registered, have a way to unregister a callback, but this is like very bare bones kind of thing, and then what we then do is whenever you add, then you actually just get a list of properties, you clone the properties that you get, because you don't want to have cool 8 propagated outputs actually, so you want to make sure it's cool 8 always propagates downwards, so you clone that, and then you do an underscore extend with a few defaults, so what I'm doing is I'm passing a reference and basically setting the tasks parent to myself actually, which is tasks, and then I'm also setting the ID for it, so and then I underscore at an extend basically copies over these properties, and then creates a new property value, and then I also have a new task object, and what this new task object does is basically whatever set of properties it gets, it basically copies over to itself, so that's all it does, and then whenever an add changes, I emit the change, and when I emit a change what happens is that it actually goes through a list of callbacks, and then it calls that thing here, and since we are using this here, you will have to bind it, otherwise it will be a global window object, so you will have to do, so and when this emits, it basically calls it off, so there is nothing here, and similarly for task also there is this toggle method, which sets it, which toggles its completed property, and it calls an emit change on its parent, I'm just being sloppy here, ideally speaking I should only emit a change for myself, and your parent will listen to changes of its children, and then it has to do its own things, but we don't have time for that now, but ideally speaking that would be the way in which you want to go, so because of this now what we have is in the task list view, so we have an initial state that is tasks actually, and then we have a component will mount actually, and in the component will mount we have a on change kind of thing, and then we have a handle change actually, so the handle change will basically do a same state, and that's what, and then the rest of it continues. Now the other thing that we did in the task view was that we called this dot state data, in fact this is a very nice thing, so we get it as props, so we are not changing anything in state here, so we can do props, so this should also work, can't do property task of men, I have states on that, oh here yes, so now since we are doing it on the prop this should still work, so that's a nice thing, so we've got it rid of state dependency when we're in flow through it program, and again some of you you get the same thing and some of you also get re-rendered, so there is no necessity to watch or re-render it, it still renders on props. I realized that I went a little bit fast here. Where is the only task, this is props, props, tasks, so here I'm doing a filter, in fact I can take it there, so this is a task list object, and within that it has this array, so ideally speaking like if I use something like backbone, you can just set up filter directly on it, so that's the only way. Okay, so here whenever task changes, somebody views a child of this type, so you're calling a, so whenever you do an image change, this starts at state changes, and so it's going to re-render the whole thing. When is component will mount in C? So component will mount will just be for render, so this is the perfect place if you want to like make an Ajax call, and then on this thing of Ajax call you want to have a fix. And it will be called every time it's going to be rendered? Answer? It will be called every time it's going to be rendered? Component only once, because you just need to set up a call back only once. I'm sure you have a lot of questions here. In this thing on this thing, examples like online where we can, or through it one second like this. So yeah, I will, this is available on Gaspin, so... Same link going with... Yeah, I'll put it on the funnel actually, so you can take it. Yes, yes, I'll put it on the funnel. I'll put the slides and I'll show this on the funnel. Oh, no, I will come to that. I mean, if you have any more questions, we can deal with that now. Right, right. Component will mount in C. Yeah. What exactly is the life cycle? So, okay, I should have put a slide for it, but since it's not there, I'll just talk in here. So you have component will mount, and then render will be called, and then it does component did mount, actually, and before that it'll actually get... So it'll be component will receive props, and then component will mount, and then it'll be... then should component update, and then it'll be render, and then component did mount, and then it'll be component... component will mount when it is supposed to be there, and then you'll have component will update and component did update, if it's for the rear end of the second. So component will update, render, component did update. Before component will mount, it's called get initial state. It calls get initial state. No, you'll say component will receive props and get initial state. Yeah, I mean, component will receive props, and component will be... Oh no, it's just getting initial state. It's not called for the initial state. It's just there. Sorry, I... Wow! That the random number generated parts that should be... Come on, Shruti. Come on, Shruti. Fix. Yeah. That the random number generated parts. Yeah. That's an optional extra thing. Yeah, I just put it over there, and it didn't really come in. Don't use it. It's bugging. So how is this not state and this not props? It's just an invention, right? Yes. So now, yes. In the sense that props are supposed to be immutable, they're supposed to be small kind of values that you get passed on. But state is where we need to change stuff. Okay, so if this is not there, so since we are running really short on time, I just want to get back here very quickly. So problems, right? We noticed it somewhere here. So if you have card details and card summary and somewhere there, you tend to bubble up state in the reactor, actually. And that's a problem, right? Because when you're bubbling up state, ultimately your parent, this guy, will be responsible for everything, actually. So you will keep doing that. So that's where, to answer Shruti's question, flux comes in, actually. So what flux does this add? Okay, so you have these views, okay? And then views, so any type of actions that we do, basically goes to dispatcher, actually. And the dispatcher basically will call back the store. So it's assumed that the store registers for a callback, actually. And then the store would do whatever it has to do, to do stuff, maybe even make an Ajax call, get something, all those kind of things. So the store will then make change events to your controller views. What are controller views? Maybe these are components which have this top-level kind of components, or if they hold the logical components, which hold other side components and so on and so forth. They get triggered and they will then go and do a search data method. So the thing is that the data always flows in a unidirectional manner. So that's essentially the idea. We tried doing that a little bit, in a sense that we just got a term to the store, and then we just did store to view action, where we skip the dispatcher and do the same. So essentially what the to-do list and the to-do thing was for a store was, it was a store for us, actually. And from that emit event, we actually passed it a new object of tasks. I mean, even the referentially, they will be equal if we compare. But essentially, that is the new object on which we are calling a set state. And then this whole cycle happens. So this is just like coding in that one, actually, if you notice. But except that, it's like the liberty of doing a render every time. You just do a null, this dot, you get a dot, html is underscore a template. And then call that. Flux is just a design pattern. There is a sort of a like GitHub repo where the sample code for each one of this is there. But essentially, it's kind of a design pattern that you say, you do unidirectional data flows, and you sideload data in the component. So it's not that you pass it from parent to child and child to this thing and all of that. So each component what it requires is, does a get initial state and gets whatever state it needs, directly from the store. So it is not that, OK, so if I have these controller views, which are logical views, which hold that, so that is what is responsible for the data part of it. It can actually get it from the store. Store dot fetch, person, comma, id is this. If you use ember data or something like that, just say person dot find id is this. And if it's there in local storage, it has to do an XHR and get it into an XHR. Or if it has responded over some other like web socket stream, it can do that. All that is left to the store. That's what the store is supposed to do. And we try doing something like that for our tasks and this thing. So where he has abstracted that piece out actually. And where it gets the data from, the view doesn't have to work. It so happens that these are JavaScript projects. Yeah, so the controller view, when I say control to me, I don't like the term controller view. I mean, think of it as like an ng-control, angular controller, right? Angular controller is responsible for scope. In a sense, right? So I think they call it controller views because of that. For me, it is the logical component which is responsible for data. And then it may have all these like input days and all those kind of things. So it will pass on whatever that it needs as props to it. And then they make the changes. So each one of this when it does that, it will actually publish a change action. Those views will publish an action there. And that will go to dispatcher and dispatcher will say, okay, which store is going to get it? And the store will then go this way. So this is like, yeah, this is just boxes and arrows. But you get the idea. The idea is to get to a unidirectional data flow. And with unidirectional data flow, you can sideload the data and not have to pass it from parent to child strictly. So that will free you from having to. So you can say props is, so when you pass in props, you don't have to send the entire object, but you can send the ID of the object. And then you'll get initial state. You can fetch it from the store. So the props always remains immutable. Only the state changes. Is that it? Does it answer your question? Okay.