All language subtitles for 005 One Way Data Flow_en

So we've learned the first two concepts.

The third concept that made to react really popular is this idea of uni directional dataflow.

What do I mean by that?

Well.

So far, we understand that React is just a JavaScript library that allows us to write more JavaScript

to have interactivity on our website.

And in fact, we have this idea of state, which you can think of it as a JavaScript object that describes

our app, so all the data of our app is within the state.

And then we also learned about this idea of components that we can build using react with this weird

HTML looking thing, but inside of our JavaScript files.

This idea of state, which is the data over app works with the components which are built using what

will eventually learn is called JSF X.

So it's XML like syntax inside of JavaScript.

And these all combine to essentially give our reactor library to things, that is the components that

we've built, the state overapplication, and you can think of this as a function.

A react library is simply a function that we give all these things to.

What it's going to do is it's going to create what we call a virtual dump, that is it creates a JavaScript

version of the DOM.

Remember this, this isn't the dam we installed, they react, Plug-In, to have something that looks

like the elements tab but isn't exactly and this is just a JavaScript object that describes our app.

Into what we called this virtual dawn, which is a tree like object like this that gives react a blueprint

of how it should update the actual done.

So what happens then is react takes all of this and says, hey, here is the actual dorm or the document

object model of the website.

And the react little board over here is going to go look at the blueprint of what it needs to build

and modifies the DOM for us.

Now, this idea of a uni directional dataflow means that any time we want something to change on our

Web page, well, the state has to change.

That is, the data has to change in our app.

So what happens if as a user I click on, let's say, a button?

Well, I click on a button, react, is going to intercept that and say, hey, somebody just clicked

on the bottom.

How does that let's say I click on the Sinabung react is going to say, hey, somebody just clicked

on this on our button.

How are we going to change the state?

Well, internally, we would say that if somebody clicks on the sign up, then we're going to change

is logged in to now say Phos.

And react as soon as the state changes, reacts to that change and says, hey, the state just changed,

combine the new state and the components we have and update the dome.

You see the data only flows one way.

A better way to think about this is like this.

Our application is simply built with this virtual dump, this JavaScript object that describes our app

and as soon as a state changes.

It's going to trickle down that information and let everybody know, hey, the state just changed if

is logged in is now false display this version of the app data can never move up.

So, for example, the state, as we'll learn, can live in different locations, different components.

And if the state, lets say, changes here, the data can never move up.

That is, all these changes can only trickle down.

Now, this concept is hard to explain without actually seeing any code.

So if you don't get this right away, don't worry.

We will explore this idea and revisit this idea of one way dataflow throughout the course.

But the key takeaway here is that by having this restriction of data, only being able to move down

from the state of our application all the way to the dorm, and if any changes or events happen that

change the state while we go back to the state and that state, change trickles down to different components.

And one direction is a restriction on how data can move through our app.

And by adding this restriction, it's really easy to debug code.

For example, if there's something wrong with our sign function, I can go to wherever the state is

logged in lifts.

Let's say it lives in this top component here.

I can go over here and know that this is where the bug is happening and whatever is underneath this

component.

Well, that's it.

I don't have to look outside of the component of this tree was massive with thousands and millions of

components.

I only have to look in the place where the data exists and where the data flows through.

Again, this is a really hard concept that we will explore throughout the course, but this idea of

one way dataflow is the restriction, and because of this restriction, it's easier for us to understand

how our app works.

Unlike the arrows and points that we saw with an angular app where things got confusing really, really

fast.