REACT JS TUTORIAL #4 - State vs Props & Application Data

in this video we're going to cover the fundamentals of how data gets managed within react we're also going to see one of the first great features that react provides so there's basically two ways that data gets handled and react it gets handled through States and it gets handled through props there's a third way context but it's a little bit more of an advanced feature and the API is not guaranteed stabilized as it's something newer to react so we're going to leave that out for now we'll touch it a little bit more later on in the course so let's look at state first and as you go you'll end up moosic using props much much more but state is also used by a lot of people in some ways as well so state is basically available through this dot state which by default is null so by default state will be no and then you can set it so let's go ahead and make a constructor method and the only place you want to set States this way is in the constructor method you literally just set your initial state this state equals name we'll and then we can access this by entering this state's name so you see it's kind of a similar concept to what I did earlier but this is the proper way to do it so you see that there you go my name will is printed on top now what's really cool about state is whenever state changes on a component the component will automatically rerender and update the Dom if there are any changes if there are no changes the Dom won't get touched at all that's the first big amazing thing that react brought to the world is it manages a virtual Dom for you so whenever react renders out all the components the component tree is what it's called it renders the layout the header the footer everything then it looks for changes from the virtual Dom to the actual Dom if there are changes it will update only the affected nodes in the most efficient way if there's no changes at all it doesn't even touch the webpage this is great because javascript is really really fast but the Dom is really really slow whenever we have to actually go to the DOM and update elements that's the slow part of anyway Paige so by having a virtual Dom where everything is updated behind the scenes and only changed in the real dumb if there's differences that allows our applications to become extremely fast so let's go ahead and look at how we change the state we could go ahead in this render method do a set timeout let's pretend after one second the user did some action and we want to change our state so we're going to go this set state that's the one method that you need to know with States and you just give it a new state in this case our name has now changed to Bob and so when step set state gets fired it will update the state and then that will automatically rerender and again if there's any changes it will print out you see it went from will to Bob let's actually show you what react is doing behind the scenes in my console on Chrome I'm going to hit the Escape key and that gives me these rendering options I can enable paint flashing so now the screen will flash green whenever a node gets changed you can see at first the whole screen was green and one second later Bob changed only Bob nothing else even though we did a complete new render of the header the footer the entire layout the only actual Dom element that changed was the one that contains state name so that's all that react updated I'm going to go ahead and update this here or inspect this you can see that automatically made a span for Bob that's the only thing that will change let's go to refresh again flashes green and the only thing that flashed changed was this span for Bob excellent so react automatically manages the Dom manipulation for us this is one of the best things in my opinion to react because if you've done backbone at all you understand that there's always this question of hmm at what point should I update the Dom and when I do who should update that should the list component update the whole list and re-render the whole list or should just each list item manage rendering itself and basically react takes all of that out and says we're going to re-render everything all the time on any change but we're only going to do it in JavaScript and we're only going to touch the Dom if something is actually changed that would reflect in a visual way so that's the great first thing about react I hope that made sense and that's how you'd manage State the header could have its own state as well so kind of mentality behind state is state only gets used if a component has an internal value that only affects that component and doesn't affect any of the rest of the app if there's something that affects layout and effects absolutely nothing else State may be appropriate aside from that you want to use props and props are injected into every other components let me show you how props work let's get rid of all this state get rid of the state name and we're going to now inject a prop into header let's say ver title will do a Const title equals welcome we'll and now my header I'm actually going to inject a title title equals title there we go so I've basically created a prop just like you would on an actual Dom element you'd give it a prop so now if I go to my header j/s I can access this dot props let's do a console.log this stop prompts and see what we're getting here let's look at my console you can see that I have a title of welcome we'll so it automatically gets converted into an object I could give this multiple props I could give it a let's see name equals some thing we'll just give it a brand new string right there you can see that I have name is something and title is welcome we'll down here so that's how you inject props into things I could create a second header and I could give its title something else and again that's how we're going to actually create multiple versions of a header that are different so let's make that header now use a different title so in header we're going to actually just continue props right on over to title we're going to go title equals this props title so we're just going to continue passing that straight on through to title and title will actually make use of it there we go so now we have welcome we'll and we have other title they've rendered through our layout has passed in a different title to each header our header is just transparently passing them through to the title only the title prop and then our title is actually receiving that and spitting it out so we have a completely different header and we have a completely different footer for each one and again let's go ahead and look at this and now what I can do is I could let's go ahead and change our layout here to use both state and title now let's do our super this state equals title so by default our title will be welcome and let's go ahead and pass in this dot state title and we'll leave that one there as well so then again our set timeout let's make this two seconds I felt like one was a little too fast to catch we're going to change our state basically changing it from welcome to welcome will let's go and see what happens over here you can see that after two seconds our header component got updated let's go ahead back to these elements and let's see if the header or the header and the title got updated so this is our header component this is our title component header component title component let's refresh you can see that two seconds in only the h1 changed that's because even though our header component received an update our header component received a new prop it rendered out the exact same div no changes so it didn't rerender this div to the Dom then it rear-ended a child component of title that changed the Dom looks different for the H one-minute renders so updated the h1 and the h1 only again once you get this concept it's really monumentally huge no matter how many components change we're only going to update the Dom with the actual element changes that got created when the entire tree rendered so there you go that's the basics on how we manage data within our components let's go ahead and move now and let's look at some events and how we'd handle events and have those events actually change real-time data for us

Channel: LearnCode.academy

Views: 443,201

Rating: 4.9180503 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, state, props, state vs props, props vs state

Id: qh3dYM6Keuw

Length: 9min 35sec (575 seconds)

Published: Fri Feb 05 2016