REACT JS TUTORIAL #5 - Javascript Events & Data Changes in React

okay now that we know how to manage data in our react application let's look at actually binding events interacting with user inputs and changing that data real time so let's say we want to add an input that's going to allow us to change this title as we type so the first thing we're going to want to do is let's go ahead over to that header now let's add an input and save it that'll update now let's get rid of this other header that we absolutely don't need anymore so then as this gets updated as this header input gets typed in we're going to want to take that change we're going to want to trigger some kind of event on the layout that says hey update your state we want a new title that title will then get passed into the header and the whole rendering process will begin because the state changed so the goal is we've got to get this state to change so let's go ahead and make a change title method and then this will receive a value so this set state well basically is just going to do this right I'm just going to set our state to the new title and because we're receiving title here we can actually use es6 and just go title which is the same as doing title equals title just cleans things up Thank You es6 so there we go let's go get rid of this we don't need you anymore and now how we'll change title fire well we're actually going to pass that in as a prop to header change title equals this change title now one thing that's very important is when passing functions or methods around you always want to bind them to this if we don't do bind this then it's going to execute in the context of whoever's calling it so let's say we pass in change tile title as is and then header later says let's go this props change title because remember we got passed in as a prop then that's basically the same as calling it there on the header component so now it'll set state of title on our header component our header component doesn't do anything with that nowhere in here is it looking for this dot state so that change title just failed silently it didn't throw an error and absolutely nothing happen so it's very important that you always bind this so now no matter who calls this change title function it's going to fire on the layout component so that's very important that has bit me more times than I can imagine and sometimes it can take you a little while to figure out exactly why your app is not working so there's change title and then let's go here into the header now you can see it automatically is changing my title new title so right away when it renders it's going to automatically change to new title but we want this to happen whenever the user types in our input so that's very simple we just add an on change event again bind this because you've always got to make sure it's bound to the right context so whenever the user input receives a change event it's going to call our or handle change and that handle change Reesie receives a JavaScript event just like a normal event in jQuery or vanilla JavaScript woods so you can make this on change you can make this on click you can make this on blur basically every type of event you'd expect so on change it's going to fire this function and all we're going to do is go this stop props change title I call it change title or update title change title so that's going to change title let's actually get that title out of the element constant idle equals a target --top' value a target is the element that's receiving the on change so that's our input right there and we're just getting that value out so we've got our title let's pass it on to change title layout is going to fire change title which sets our state as soon as that state changes the entire react tree does a rerender and if there's any changes that get printed on out let's test it and see if it works awesome our title changed you notice green is flashing here because this guy's changing and green is flashing there excellent that's working great only change I want to make on this is I want this to say welcome by default I don't I want this to be two-way bound to the state of the title so that's very easy change we simply go in here and we make the value this stop props title so now by default my value is going to be whatever the title is there we go welcome boom add an exclamation what just happened is is I actually added that exclamation handle change fired exactly the same thing state got updated the whole tree rear-end 'red and now my header actually rendered the input actually got its value dynamically updated to be whatever the new value was so that is also very cool so if you were to change this to value but you never added an on change you get a very interesting reaction here from react so I'm setting my value but I'm not going to listen any change events it's actually nothing's going to happen no matter how many keys I hit every time there's a rerender it rear Enders the value to be this props title which has not changed so that's another thing that can be frustrating if you're not sure what's going on with react whenever you're buying to give value you also want to set up a change listener for that so it actually changes when the value changes so I hope by now you've been able to get a sense of how that reacts ecosystem works you basically we've created an app that has data living only in one place which is a great thing because this has enabled us to make really dumb components this header doesn't really care where the data comes from or what the data is it just knows I'm going to pass title in here and whenever this input changes I'm going to call the prop that was handed to me change title I don't care what it does I just know that this is my job our title component is even dumber it just renders whatever you give it this props title it's not aware of the data it doesn't care about the data you can move this to a completely different application if you wanted to the data could come from a completely different place it doesn't care so you get much more reusability out of your components and you get much more stability our data only lives on layout right now and it's just whenever the data changes we render the entire application and we update the Dom if there's any changes it makes your application development much more simple because you don't have to care about near as many moving parts that's part of the beauty of react I'm going to go ahead and leave basic react here and in the next videos we're going to move more into some patterns of how we actually deal with applications and how we deal with routing and a lot of other great things hope you've enjoyed this intro course to react have a good day

Channel: LearnCode.academy

Views: 313,010

Rating: 4.9490447 out of 5

Keywords: web developer, web development, react, react.js, react js, tutorial, react js tutorial, react.js tutorial, reactjs tutorial, for beginners, beginner, js, javascript, framework, frameworks, react tutorial for beginners, react js beginner, react.js beginner

Id: _D1JGNidMr4

Length: 7min 27sec (447 seconds)

Published: Mon Feb 08 2016