‫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.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
‫ReactDOM
‫from
‫"react-dom/client".
‫All right?
‫And as I keep saving, somehow it keeps moving the file here
‫but nevermind.
‫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 import it, also React
‫and Reactdom, using these script texts.
‫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 status component
‫starts with an upper case 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 dump.
‫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 ReactDOM library
‫on which there is a createRoot 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="root".
‫So we are going to select this element so that
‫React can render our application inside of this div.
‫So document.getElementById.
‫Okay, and then let's do root.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 our 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 root so that we basically render
‫our app in the Dom in React version 18.
‫So React v18.
‫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 this code here
‫I just want to quickly show it to you.
‫So before React 18, we would simply do
‫React.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/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.StrictMode.
‫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 safe.
‫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 all 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.