Don't forget to stay hydrated friends. Alright, we're going to set up a proper build step with VT. In this video we are going to undo a bunch of things that we've done in previous lessons that was useful to demonstrate how GSX transformed to a series of react createElement function calls. But now we want to not really have to look and care about this and just have a streamline proper production ready set up. So let's do a bit of cleanup.

production ready set up. So let's do a bit of cleanup. I will close all the files that are currently open and then go in package.js. So we don't want the jsx script anymore and we also do not need the three Babel dependencies. And looking in our sidebar, uh, we don't need the outputs.js anymore. And we also going to delete our inputs.jsx and have the app.jsx instead of importing

And we also going to delete our inputs that JSX and have the app that JSX instead of importing that app just have a little function here function app that returns H1, hello, react and V. Okay, so if we look at this in the browser, this is what it looks like and oops, it looks like we do have the other H1 hello react. That probably comes from the index.html. Uh yep. So we're going to remove this

That probably comes from the index.html. Uh yep. So we're going to remove this and while we are here we are going to remove the three script tags from the unpackaged CDN we used to transform our JSX and remove the attributes we don't need anymore here. And actually we need type="module". And the reason we need type="module" here is so that throughout our files we can use the import export ES module syntax.

that throughout our files we can use the import export ES module syntax. And I'll do one more thing. Since our project is going to have multiple files, I'll create a src folder. It's not necessary but it's kind of nice to organize our app code inside this src directory. And so I need to update here the path to /src/app.jsx. And I've just realized that at this point I've probably broken the app because I've removed the CDN script tag.

And I've just realized that at this point I've probably broken the app because I've removed the CDN script tag but we haven't done the proper setup yet. So let's take a look at the UI and yep, it's very blank and we should have an error and we do React is not defined. So you remember the two script tags bringing React and ReactDOM packages. Well we need to replace that and we are going to install them.

Well we need to replace that and we are going to install them with npm with our proper setup. Alright, let's install these packages with npm install react and react-dom and you can see them added here. And remember we are going to use Vite to set up a build step and so we need to install one more package from vite npm install @vitejs/plugin-react. And essentially this is going to instruct Vite on how to handle JSX files.

And essentially this is going to instruct V on how to handle JSX files. Just like we had our dev server for HTML files already. This plugin react will enhance the capabilities of the dev server to use JSX files as well. Okay, so V has a configuration mechanism through a V config file and this is where we're gonna go to register a React plugin, I'll create a new file in the route directory called V config.js.

I'll create a new file in the routes directory called v-config.js and we'll need to export default a configuration object here, but by exporting a plain object like this, I'll be sort of flying blind. I need to reference the documentation to know what configuration options are available. So instead I'm going to use a V helper called defineConfig instead of the blank object I will go defineConfig.

So instead I'm going to use a V helper called defineConfig instead of the blank object I will go defineConfig and you can see that it's a helper function from V. And now if I hit Control + Space a hey, I can see all sort of options available and I bet with a bit of luck if we go to the letter P, we have a plugins option which is an array of HIT plugins to use. That does sound like what we need. So I'll have an array and here we want to add the React plugin.

So I'll have an array and here we want to add the React plugin. So let's see if with a bit of luck if I type React we get the yes, we do the suggestion for VIReact and it need to be called as a function. I note that it's been called VIReact here but it can be called React or anything you want as long as the import and function call matches because it's a default export. And believe it or not, I think that's it.

and function call matches because it's a default export. And believe it or not, I think that's it. We have done all the setup to have a proper build step that's going to understand our JSX and do the right thing for the browser to consume. And we're pretty much set up if I try to run npm run dev again, it's actually not gonna work just yet because we are missing a couple of imports in our app file. I'll refresh the page.

of imports in our app file. I'll refresh the page and yep, we're still stuck at this ReactDOM is not defined. Remember we've installed the packages through NPM but we haven't used them and imported React and ReactDOM in our app. Our index.html page, which is sort of the entry point for the app, is loading this JavaScript file in src/app app.jsx. And if I click through to it you can see

SRC app that JSX. And if I click through to it you can see that here we are using ReactDOM to create our root node and then render the app which is up here. But ReactDOM was globally registered before when we used the CDN script tags. Now that it comes from our node_modules folder because when we installed React and ReactDOM with npm, it's downloaded it from the package registry.

and React dumb with NPM, it's downloaded it from the package registry and placed it in these node_modules. So if I look for React and React dumb, you can see that both packages are here. Alright, so we do need to import these packages to consume them. So we want to import React dumb from React dumb. But since modern versions of React have client and server packages, I need to specify,

But since modern versions of React have client and server packages, I need to specify, I want this from React DOM slash and you can see here all the possible files available. We want to import this from React DOM slash client. So now ReactDOM will be defined here and I'm thinking that our app should work once again. Let's refresh the page and we back in business. So let's recap what we've done here just to see how simple the setup is.

So let's recap what we've done here just to see how simple the setup is. Uh, in our entry point, which is this index.html file, we got rid of all the script tags that we were importing for previewing JSX in the browser. All we have is one script tag that points to app.jsx and we have this div with an id of app which is sort of our entry point for mounting the React app in that app.jsx file, uh, import ReactDOM, create a little simple app, set up the root element,

that GSX file, uh, import react-dom, create a little simple app, set up the root element, create the react root node using that element and then rendering the app. And all we needed to do for our dev server to be capable to process these GSX files is install. Of course React and ReactDOM and the Vite plugin react. With that installed, we were able to configure the vite.config.js and register the React plugin

configure the vet configuration and register the React plugin and that's really all there is to it at this stage. We now have a fully functioning dev server that can handle GSX and React and we will reload whenever we make changes. So we are in good position to start building. We're gonna do one more thing and it's talk about styling and then start building something with React.

and then start building something with React.