So we are going to start from complete scratch. And when I mean complete scratch, I mean a blank folder. So I'm going to create a folder with mkdir and we'll call that react-from-scratch and I'll open this in my VS Code editor. So we literally have nothing in this folder. And I'll quickly scaffold a package.json file with npm in it with the --yes flag for yes to all the default questions. And so this file holds some metadata about a project. You can sort of think about it like the composer.

And so this file holds some metadata about a project. You can sort of think about it like the composer.json that Jason filed, but in the Node.js world. Okay, the next thing I'll do is create the most simple HTML file index.html and I will scaffold a basic doc type here. Maybe we'll change the title to React from scratch and we'll have an <h1> tag that says Hello React. Now, while technically it is possible to open this index.html file in the browser, as you can see here,

Now, while technically it is possible to open this index.html file in the browser, as you can see here, this is the file that I've just created. Every time I make a change, I'm going to have to refresh the page like it's the early two thousands say we added the exclamation mark. It is not going to show up until I manually refresh the page. And so I think we should take a few seconds to make a little dev server here.

And so I think we should take a few seconds to make a little dev server here. And in the back of my head, I'm thinking Vite is one of the fastest way to get set up with a dev server and any way for the rest of the course we are going to use Vite as a build step for our React application. So we may as well use that from the start. So let's install a dependency to our project with npm install or npm i for short. And we want to save this as a dev dependency.

with npm install or npm i for short. And we want to save this as a dev dependency with uppercase D and we are going to install V. There we go. And if I open my package.json, you can see that V has been added as a dev dependency now and turns out V has a vt command to run a dev server. Since I'm in package.json, I'll quickly add a new script dev and we are going to indeed run the vt command npm run to run one of the scripts and we're going to run dev and watch what happens.

to run one of the scripts and we're going to run dev and watch what happens. We now have a dev server running on localhost port 5173 for site, and I have it here running side by side with the code. And now when I make a change, so let's say hello Vet, as soon as I hit save, boom, the page refreshes instantly, which is going to make a life much more pleasant going forward. Alright, let's go back to hello React.

more pleasant going forward. Alright, let's go back to hello React. And speaking of React, we technically don't have any React on the page at this point. Now React or specifically JSX, which is a syntax we're going to talk about, doesn't run in the browser directly. It needs to be compiled to JavaScript that the browser can run. And so we kind of need to have a build step, but

that the browser can run. And so we kind of need to have a build step, but before we do a proper setup, we're going to take a sneaky shortcut and have a handful of CDN script tags that are going to allow us to have our first experience of React directly in the browser without any build step.