All language subtitles for 006 Pure React_en

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 one, "01-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.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, 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 we're now gonna add to our HTML file.

Now, 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 components, 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 a 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 upper case 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 JSX code.

Remember that?

However, that is not going to work here

because well, we don't have the tooling

that can convert JSX back to JavaScript.

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

So, let's do, "return React.createElement".

And then simply the name of the HTML element.

So, let's say we want the 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.

We'll 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.

And 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 and now we need

that React-dom library that I mentioned before.

So this one here.

So from React-dom, we now do "createRoot".

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.getElementById"

which is just normal dom manipulation,

or in this case just normal selecting elements

using dom methods.

So, we created our root, and now we can do "root.render".

And then again "React.createElement App".

And 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 wanted, 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 root.

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 our 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,

and let's go back.

And yeah, there we go.

Beautiful.

So now this "Hello React!" is basically a child note

of this header note right here.

But let's go back and yeah, as I mentioned,

before we used JSX 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,

"toLocalTimeString".

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

and 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 a 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 "setTime" which is a function

with which we can update that time state.

So then we need to say "React.useState"

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 place that here, give it a save,

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

so there's no updating yet.

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

And okay, so let's go back

and basically have it update every second.

So, for that, we need something called an effect.

So, "React.useEffect" 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, set interval also needs a function

and we could use arrow functions here

to make it a bit shorter, but nevermind.

So, this function should run every thousand 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, "setTime" 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 JSX.

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.