All language subtitles for 038 React and ReactDOM_en

Now, before we begin, I want to peel back the curtain a little bit on what it is that Create React

app was doing for us because create racked up sets up a lot for us.

And when we were writing our code, it kind of seemed like there was a lot of magic happening.

But I'm going to show you what react and react, Dom, as libraries do.

And I'm just going to use pure vanilla JavaScript and some HTML.

It's actually incredibly easy.

And the first thing that I'm going to do is I'm going to make a new folder called Purulia.

And inside of pure react, I am going to make a sauce folder and then inside of our sauce folder, I'm

going to make index dot HTML5.

And then we're going to open it up.

Now, inside of our index, that HTML file, I'm going to just generate our basic.

HTML, right, our basic base demo.

And then I'm going to in the body add in that div that we first saw inside of our monster's Rolodex

with the idea of root.

Now, if you remember, what we do in our index dodgiest file is we replace that root div with the actual

content of our application.

So that's what we need to do as well.

We need that same thing.

Right.

And then we're going to include the two packages, react and react, Dom.

In order to do that, I'm just going to add a script tag where the source goes to the Riak project.

So this is something called Unpackaged, which lets us very easily bring in the Riak library.

Just like that, and then we're going to do the same thing with react on.

Our REAC project has both these libraries, so why are there to write?

Well, React is kind of just the API, right?

But then the thing that actually renders out to the dorm is what react on is the reason for this is

because react is a great kind of engine.

Right.

But you could have many different views that run on the same engine.

So react is for the web and you might have to react native reacting if it is actually exactly what it

is.

It's for native Android and iOS.

So while it uses the same react engine, it uses a different package other than react dom to render

its Android and iOS views.

So that's why it's such a great package, because you can even find ones like really 60 if you want

to build 3-D stuff.

Right, like virtual reality stuff.

But that's all we're doing, which is pulling in these two packages now to show that it actually removes

what's inside of this root div.

When we actually render in our reachout, I'm just going to put in here react rendered first.

So let's open up our index, that HTML in the browser.

And now we'll see that react is not rendered right, because we haven't actually done that call where

we replace the content inside of this div with our application and we haven't built the application

yet.

But first, if we open up our dev tools, we can actually see now because we pulled in both those packages,

we have access to both react and react, Dom.

Right.

These are the objects that the two packages provide into our global JavaScript namespace once we brought

those packages in.

And this is pretty much the same thing that we do when we import in react and react, Dom, into our

files.

It just gives us access to these two things right now.

I'm going to actually add my own script tag and inside we're going to start writing our own JavaScript

to see what it is that these libraries do for us.

So first, I'm going to write a functional component called app the same way we were writing them before.

Except this time, what I'm going to return is react, John, create elements now, create element is

a function on Riak that builds out those elements that we saw when we wrote our return right inside

of like, let's say, our Kahless component.

Right.

It just we return from this function.

This HTML markup will create element is actually what it's doing.

But instead of sex, this is vanilla, right?

So what we got to do is we write in here that we want to make a div right.

You can put any other HTML tag or whatever that you're looking for, but I want to do so.

I put div and then the second argument is an object of any attributes that I want to add to my div.

So if I wanted to add a class or an ID right, I would put them in here.

Right.

So like if I wanted a class right then I would put like, you know, card list the same way I did before.

Right.

But I don't want one so I can keep it empty.

And then the third and last argument is any children we want to nest inside of our div, right?

So I want to put in react create element again.

Right.

And I'm going to put on an H1 again.

I don't want any attributes.

And inside of our H1, I'm going to put the text react is rendered right.

And now.

We have our functional component.

And I'm going to call react, dom render, I'm going to put a react crit element again, right?

And I'm going to put on our app.

I'm not actually going to give it these two because these are actually optional, right, these last

two arguments are completely optional.

I don't want attributes.

I don't want children.

Right.

And then you remember with our render, we got to target that element that we want.

So get element by ID of route.

And just like that.

If we refresh.

Reactors rendered.

Right.

That's all we were doing here.

Except with gas, but now we're just doing it with vanilla JavaScript, right, that's all it's doing.

React, Dom, render right.

We're creating that our application.

Right.

And just like that, we that's all the react library does for us.

It just helps us create these HTML elements using functions or classes right now.

Let's actually take this a step further now.

Let's say I wanted to make a contact person.

Right.

And CONSED person is the same thing.

It just react to create element and inside as a div right now attributes.

And instead, what I want to render is an array, so if we want to multiple elements, right, we want

a multiple children inside of this dif, we would just use an array.

And inside I would do react create element H1.

And then an empty object.

And I'm going to put EOWA.

And then I'm going to make another one, except it's going to be a PAETEC and it's going to say developer.

And now.

Instead of just rendering in our application that each one of reracked is rendered right, I'm also

going to render in.

Multiple person.

I'm going to do react element person and I'm going to do it three times.

Now, if we check our application, we'll see, right, we rendered our person component.

Three times you are a developer, you are a developer, you are a developer.

Now, we can't go to these valleys, but what if we wanted to do the same thing we did with our other

components?

Right.

We wanted to use props?

Well, because it's just a functional component, as we had before.

We can do exactly that can pass props into this.

Right.

And instead of you're going to do something like props that name right.

Or proper occupation.

And these are whatever it is that the attributes are that we want for this component to take.

Right.

So now, if we wanted to actually add those in, we would do our name inside of that second argument

with that object.

Right.

We do our attributes of name of Yehuda.

And then occupation.

Of developer.

And now we can do the same thing, right, for these other three.

And this one will be Andre.

Instructor.

And let's say, Ted.

And he's an actor.

Right.

Now, if we look at our application.

We see we can pass in our props, right?

That's all we were doing when we were writing our functional components and our class components.

It's just that with JSF we don't have to call react element constantly.

Right.

It knows to read from that Telmo mark up that we were writing.

And that's why J sex is so good when we use it with react, because this is kind of redundant, right?

It's just a quality of life improvement.

Now, you might be wondering how would we do it with our class components?

It's actually the exact same.

So instead of an app.

I'm just going to put I'm just to make a class app extends react component, right, because component

is just the method that exists on react, right.

Sorry.

It's a class that exists on Riak that it exposes to us.

And then we have access that render again.

And in that render, I'm just going to return what it is that we had here.

And now, instead of app being a functional component, we're still rendering our class component of

that.

And if we look.

We'll see their application stays the same.

That's all it is, that's all Riak does for us.

It helps us build out these views and that's why react and react, Dom, are such great libraries,

because it just helps us simply build out our views and manage figuring out what the right thing in

our views is to update.