All language subtitles for 2. Rendering the Root Component and Strict Mode

Welcome to the Pizza Menu Project that we're going to build throughout this section.

And in this lecture, I actually want to start to build this project from complete scratch.

And with complete scratch.

I mean that we are going to delete all of these files that we have here that we don't really need and

start a project from scratch, as I just said.

So let's close this one and this one and even the index.html, which we will not delete and recreate.

But all of these feel free to ignore them and to delete them.

So delete and let's start from scratch.

So here we have our first error and notice that I placed the browser here on one side and our code editor

on the left side so that we can always see the output at the same time.

So you see that our application is kind of looking for this file right here, but of course it doesn't

exist anymore because we just deleted it.

So let's start from scratch.

And we're going to create our first file inside of this folder and it's going to be called Index Dot

JS and it really needs to be called Index.js because Webpack, which is the module bundler in this project,

expects the entry point to be called Index.js.

All right.

But anyway, let's now start by importing React.

From React.

And again, this is just simple JavaScript here.

So importing modules is part of JavaScript and specifically since ES6, then let's also import React

Dom.

From.

React.

Dash dom slash client.

All right.

And as I keep saving, somehow it keeps moving the file here.

But never mind.

So we just imported these two libraries.

And again, remember how we imported basically these exact two same libraries in the Pure React lecture.

And in fact, I want to open up that file here so that we can compare it.

So open.

And then on the desktop, pure react, then index.html.

And so remember here we imported also react and react Dom using these script tags.

But again, here these were installed using NPM and here we are now importing them into our project

using the import syntax which is coming directly from JavaScript.

Next up, let's actually create our app component again.

So function app and it wouldn't have to be called app.

This is just a convention, right?

What is necessary is that this component starts with an uppercase here.

So now let's return here again the same thing that we returned before, which is just.

Hello?

React.

And now all we need to do is to render this to the Dom.

And so, once again, this is going to be similar to what we did here.

So we could even copy paste all of this here into our app that we already have.

But let's write it by hand.

So, of course, in the future we will not be writing all of this by hand.

But at least once I want you to write all of this by hand so that you actually know what is going on

here.

All right.

So let's now create a so-called root.

And for that we use the React Dom library on which there is a create root method.

And so now we select.

This root element.

Well, not here, of course, but in our public folder.

So here you have all this stuff like this strange URL here.

And again, Webpack will take care of all of this.

Like it will replace this URL right there.

But what we're looking for here is this div with this ID.

So ID route.

So we are going to select this element so that react can render our application inside of this div.

So document dot get element by ID.

Okay.

And then let's do root dot render.

And we could also have written it all in one line.

So without storing this here as an intermediary variable, but like this, it's a bit cleaner.

Okay.

And then here we place our app.

Give it a safe.

And there it is.

Hello.

React, which is or a nice app component right here.

So this is how we write react from scratch, basically.

Now, I just want to draw your attention that this is the way that we render the route so that we basically

render our app in the Dom in React version 18.

So React version 18.

But if you're seeing an older code base that is before React 18 this worked in a different way, so

it looked a little bit different.

So let's just exemplify that here.

And you don't need to write.

Now, this code here, I just want to quickly show it to you.

So before React 18, we would simply do.

React, dot render and then place the app in there.

All right.

And another change that we would have to do is to get rid of this.

So this would be a React 17 app, but with these changes.

So with having React Dom slash client and with rendering this way, we made our app ready for React

18 So we can now comment this one out and I will just leave it here as a reference.

Now just one final thing that I want to talk about here is strict mode.

So we can simply activate strict mode by instead of directly rendering the app component as a root component,

wrapping this here into a strict mode component.

So let's write react.

Not strict mode.

And so this strict mode is basically a component that is part of react and that we can take from React.

And so you see that automatically vs code then closes this component.

So let's copy or cut this from here and place it here.

Give it a save.

And so the app is now wrapped inside of this strict mode.

And strict mode is really not a big deal.

The only thing that it does is that during development it will render or components twice in order to

find certain bugs and also react will check if we're using outdated parts of the React API.

So strict mode is nothing groundbreaking, but it's still a good idea to always activate it when we

develop react applications.