All language subtitles for 6. Pure React

Now, just for fun, I want to show you how we can write React code without any modern tooling and any

build step.

So right inside a regular HTML file.

So this is what I call pure react and it will show you why the tools that we will talk about next are

so helpful.

So to start, let's create our very first project folder, which I'm doing right here on the desktop,

where I also have the GitHub files that we downloaded in the first section of the course.

But of course you can do this anywhere you want and I'm simply going to call this first 101 pure.

React.

All right.

And now all we have to do is to open up this folder as a project folder in vs code.

And one way of doing that is to drag and drop this folder onto the VS code icon down here.

Or of course, you can open up the project folder here from this menu or simply here.

So here open folder.

So right now we have an empty folder.

So let's create index dot HTML and to scaffold an empty HTML structure in vs code, we can simply write

the exclamation mark.

Hit enter and then we have an empty HTML structure.

So let's give it a title.

Hello, React.

And then here in the body.

All I will do for now is to create a div with the ID of root.

And it could be any ID here of course, but root is the standard for react and we will place nothing

in here.

So we'll give it a save.

And maybe you noticed how prettier automatically formatted the code as I saved it.

Okay, so let's now add react to this file.

And the way we do that when we write Pure React is by simply including the React library as a script.

Now, to get the URL of those scripts, we can actually check out react's official documentation.

So to do that, let's head over to our browser and then check out react.dev.

So that's the official React website and we will explore it a little bit in a future video.

But for now, let's just come here to this learn part and then right here let's select installation.

So right on this page.

Then you will find this small part here which says Try react locally.

And then here.

Let's click on this link here that says Download this HTML page.

Now, if for some reason that link there doesn't exist anymore in the future, then you can just try

to write these two things here by hand, because it is these two scripts that were now going to add

to our HTML file.

Okay, so let's move back to VS code and paste them right here.

And with this, we have actually included react into this, let's say, project.

Now, again, usually when we write react, we do not do this, but instead we use a modern build tool

such as the ones that we are going to talk about next.

But for now, we're doing it the pure way, just so you see why we actually need those tools.

Now, in case you're wondering why we have two libraries here, it's because this first one here is

basically the core React library.

So this one is the one that works with Component's state.

And really all the React stuff.

So this is basically the interface of how to interact with React.

And then this other one here.

So React Dom is basically the rendering layer which can render react components into the Dom.

And so since we want to render in the browser, we need to use React Dom, but react can actually be

rendered in other environments, for example as native applications using React Native.

But anyway, let's now create our very first component and of course that also needs to happen inside

a script because that is also JavaScript.

And so after these two scripts here where we include the React library, let's open up another script.

And then in there we can create a function and I will call it app just like this.

So remember from the very first app that we built that React is based on components and a component

is basically just a function that starts with an uppercase like this.

And so now from this function here, we can return whatever we want to see on the UI.

Now, in that first application that we built, we returned some JS code.

Remember that.

However, that is not going to work here because well, we don't have the tooling that can convert JS

back to JavaScript.

And so here we need to use the create element function.

So let's do return.

React dot create.

Element and then simply the name of the HTML element.

So let's say we want a header.

So this React object here is the one that's coming from this script right here.

So this script will give us this React object.

And so from there, we can then use this create element method.

And if all this is really confusing to you right now, then please don't worry.

So again, the goal here is to really not for you to understand react.

At this point, we're just doing some experiments and just getting a first look at React here, but

we are not really learning it yet.

All right.

So I'm really just trying to demonstrate here how we write pure react without a build tool.

But anyway, let's now actually go back to that folder here and open index.html in Google Chrome.

Just to see what happens and let's inspect.

And close down.

This will make it just a bit bigger here for you.

And so this is just to show you that right now, actually, nothing happened.

So we still only have this root div and then of course our scripts.

So the reason why that header that we created is not here yet is because we didn't tell React to actually

render it onto the page.

So basically to place that header into the Dom.

And so let's now go back and do that.

And we do this here right at the very end.

So after the component.

So let's create a so-called root.

And so here now we need that react Dom library that I mentioned before.

So this one here.

So from react Dom we now do create root.

And now we simply need to select this div element right here.

So this div here, this element will become the root of our application, which means that the application

will be rendered inside of this element.

So basically right here.

So let's simply.

Select that with document dot get element by ID, which is just normal Dom manipulation or in this case

just normal selecting elements using Dom methods.

So we created our route and now we can do route dot render.

And then again react dot create element.

Yep.

So here is where our app component comes into play.

So we render basically creating a new element out of this app component.

And once again, please don't memorize any of this.

All right.

This is just to show you.

So if you want it, you didn't even have to write this code.

It would be perfectly fine just watching me.

But still, I think it's probably a good idea to just start typing a bit of code.

But anyway, when I reload this now we should see a header element here.

So remember, it's inside this route.

And yeah, there it is.

Now it's empty because we didn't actually place any content in it.

But React did render this header right here.

So this header element inside or Dom and so let's now actually add something in there.

Now the way this works is a bit confusing.

So this create element function does not only accept the name of the HTML element, but also so-called

props, which in this case are null.

And then as a third argument, the children of this element and in this case, let's just write it as

a string.

Let's just do.

Hello.

React.

Give it a save.

Let's go back.

And yeah, there we go.

Beautiful.

So now this.

Hello.

React is basically a child node of this header node right here.

But let's go back and yeah, as I mentioned before, we used to write this and then we wouldn't have

to write this weird thing right here.

We would just write it as HTML basically.

But that doesn't work here.

And so that's one more reason why we do not write pure react like this in a real development environment.

But anyway, right here in this function, we can of course just write any normal JavaScript logic.

So let's, for example, create a string of the current time.

So that's new date.

And of course, this has nothing to do with React.

Two local.

Time string.

And then let's add that here into the string and we can just use a template literal for that.

And in case you're not familiar with that, for some reason, there is the next section in which I will

explain all the essential JavaScript that we need for react.

All right.

But here, let's just place now.

This time, let's say it's.

And then whatever the time is right now, let's go back and you see that we always have to manually

reload the page.

And of course, that also will disappear as soon as we start using some modern tooling.

But anyway, here now we have our time.

And as a last small thing in this application, what I want to do is to now update this every second

with the new time, which then basically will make this function as a clock.

So let's go back and let's do that.

And for that we need the concept of state.

So maybe you remember from the first app that we built that state is necessary whenever we want to update

something on the screen.

But of course, we will go really deep into what state is and how it works a bit later in the course.

For now, let's just create a new piece of state and then we don't need this anymore actually.

So let's say const and again calling it time and then set time, which is a function with which we can

update that time state.

So then we need to say react dot use state.

And again, the React object is that big object that we got here from this script.

And then here we need to set the default value.

And so that's then going to be this.

Let's paste that here.

Give it a save.

And if we update now, it will look just exactly the same.

So there is no updating yet.

So it, of course, simply reflects the current time now.

Now.

Okay.

So let's go back and basically have it update every second.

So for that, we need something called an effect.

So react use effect.

And we also did that in the first app.

And now in here, inside this effect, we will simply use the JavaScript setinterval function.

So this is not a react function, but it's simply a JavaScript function that we're going to use to set

up a timer that every second will update this time state here.

So Setinterval also needs a function.

And we could use arrow functions here to make it a bit shorter, but never mind.

So this function should run every 1000 milliseconds.

So once a second and what should happen each time.

So each time that this function here will be executed is that the time should be set.

So set time and then again this because this will then always be the new current time.

So paste that here and now.

Finally, here we need to define this empty array and this will all make sense once we start learning

about effects.

But for now, just copy the code like this.

And this should now already work.

So let's check it out.

Of course we need to again manually update and yeah.

Beautiful.

So we have a working clock that we coded only with React.

You see down here that the Dom is actually updated in this place once every second.

And so that's the work of React.

Nice.

Now, this, of course, is all very bare bones.

And yeah, as I said, this is really, really not how we use react in the real world.

So we have no modules here.

We have no way of converting JS X, we have no Http server which automatically reloads the application

and so on.

But again, I still believe that it was quite useful to shortly explore this pure react in this lecture.

But of course now it's time to move on to a more robust and real world setup.