REACT JS TUTORIAL #4 - State vs Props & Application Data Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

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