‫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.