Original subtitles

Now, to get a first feeling

for how React keeps the user interface in sync with state,

let's quickly compare the advice app that we built

in the first section,

with a Vanilla JavaScript implementation

of the same application.

So here I have them open side by side,

and if you want to follow along,

I actually added this vanillajavascript.html file

right into the same code sandbox

that we used to build this first advice app.

So right here in the source folder,

there is now this vanilla.js,

or actually vanilla-.html file.

And again, I will post the link

to this code sandbox into this lecture, all right?

So in case you don't really remember what we did back here,

you can always pause the video

and just analyze this code here for a second for yourself.

So what I want to do now again,

is to just quickly compare the React code

that we wrote before with this Vanilla JavaScript.

Now, ironically, this Vanilla JavaScript implementation

is actually in an HTML file.

So I placed all the HTML files

and then also the JavaScript right into one HTML file,

just to keep it all in the same place.

But already this shows us the very first difference

between the two philosophies.

So here,

everything is basically done in JavaScript,

so even the JSX.

So basically this kind of HTML here

is written inside of JavaScript.

So JavaScript is taking care of everything.

While here, in the Vanilla JavaScript,

HTML is still in charge.

So we have an HTML file, and that HTML file

is then including the JavaScript into it.

So it's basically the other way around, right?

So right inside this HTML,

we still have our same H1 here, for the advice.

The only difference is that it's empty.

While here, we include that advice state,

then we have the button and the paragraph for the message.

Then inside of the script,

so inside of the JavaScript part,

we need to, of course,

then manually select all of these three DOM elements.

So I selected the advice element,

the button and also this one here for the count.

And so for that,

all of them needed to have this class,

while here, well, we don't need any of that.

There is no class here in any of these elements.

And also we are nowhere manually selecting them, right?

So then next we have this get advice function,

which we will get to in a minute,

and then we still basically have two pieces

which we can call state.

So we have a count value, which starts at zero,

and an advice.

And so these are exactly the same as here, these states.

Then finally, in the end, we also attach an event listener.

So this get advice function right here.

So we attach that to the button

that we selected here manually before,

while here, in the JSX,

we do it using this on-click attribute right here.

So right off the bat you see immediately

that we need to do a lot of things manually over here,

that here, happen more automatically.

And again, that here it is really the JavaScript

that is in charge of everything,

while here, it is still the HTML.

But anyway, let's now get here

to the heart of the application,

which is really this get advice function.

So just like here, in our React implementation,

we start by getting the data.

And then we update the service, or actually the advice,

and the count values that we defined down here, right?

So we're updating the count here,

and the advice right here.

However, simply updating these two values

will, of course, do nothing.

So the user interface will not change

by us updating these JavaScript values.

While here, in this React example,

as soon as we update the advice and the count state,

automatically, React kept the user interface

in sync with these two values.

And so that's basically the big message that we got

from the previous lecture, right?

So that React and all these other front-end frameworks

are really good at keeping the data automatically in sync

with the user interface.

And again, that's exactly what's happening here.

All we care about here is to set the new data,

and that's all we do.

React is the one who automatically takes care

of updating the user interface

without us having to do anything.

But here, of course,

in the Vanilla JavaScript implementation,

we need to manually do that.

So we need to manually keep the data in sync with the UI.

So we have the data here,

and then we use that data to update the DOM manually.

So we come here to our count element,

and the advice element

that we also manually selected previously,

and we change their text content property,

which is just normal DOM manipulation.

So then here we set this one to the count variable,

and this one to the advice variable.

And this really is a fundamental difference

and a fundamental shift

in how we build front-end applications.

Now, you might argue that in this very small example,

doing this is not a lot of work,

and maybe it might not even be necessary to learn React.

And I would agree with you

that we would, of course, not need React

to build something really small and simple such as this.

But as soon as we get just a little bit bigger than this,

it starts kind of getting out of control.

So we would have to select tons of elements

and we would really need to create a lot of extra code

that, with React, we don't have to,

again, because it automatically takes care

of keeping the data in sync with the user interface.

That's really the main thing

that I want you to keep in mind from this lecture

and from the previous one.

So, of course,

feel free to analyze all the differences

that exist here in this code,

because just with this,

you can really see the two different philosophies at work.

I'm not going to go even deeper into this at this point,

but it would be pretty interesting

if you take a few minutes and really compare

what's going on on this side here,

and on the React implementation.

And so once you're done doing that,

it's now time to finally learn

what React actually is in a bit more detail.

So hopefully, I see you right in the next lecture soon.