All language subtitles for 3. React vs. Vanilla JavaScript

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 vanilla JavaScript dot 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 dot JS or actually vanilla dot 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 file 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 JS.

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 like State.

So we have a count value which starts at zero and an advice.

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 onClick 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 frontend 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.