Okay. Okay. I know that I said we were gonna start building right away, but let's do a tiny round of housekeeping just so we don't regret later. So to be fully transparent offline, I've done a little self review and compared our set up, our code base to this point with the VS React starter kit. And I found a couple more things that I wanted to add to the code base.

And I found a couple more things that I wanted to add to the code base. I added GI to the project just so I can show you these changes. So the V started templated a couple more scripts like build and lint. And speaking of lint, I have added a bunch of packages that are relevant to the ESLint setup. So things like ESLint, plugin, react-hooks, react-refresh. But essentially this is going

So things like ESLint, plugin, React hooks, React Refresh. But essentially this is going to help us not make silly mistakes. So the ESLint config is quite complicated. You don't really need to worry about this, but just having that in place will probably catch a few issues and let us know when we do something wrong. Finally, I've also added the prettier plugin for Tailwind CSS, which is going to sort the classes in a specific order.

for Tailwind CSS, which is going to sort the classes in a specific order. This is not absolutely essential, but I think it's a good idea and it keeps your tailwind classes streamlined through the project. So the way it's set up is you need a prettier config file that I have here and then pass the prettier plugin tailwindcss in the plugins already. If you have other prettier plugins, make sure that this one,

CS, CSS in the plugins already. If you have other prettier plugins, make sure that this one, the tele CSS one comes right at the end. And that's it. That's all the changes I've done. I also wanna do a little bit of refactoring. So in my app that's JSX here I'm wiring up React in three separate steps and it makes sense to teach these steps, but typically you do things a little bit more streamlined. So I'll comment these three lines out and create route. So you can see that I have directly imported it from React

So I'll commend these three lines out and create route. So you can see that I have directly imported it from React dumb client instead of going through react dumb. So I can delete that bit. And so we are going to create the route and inside of here, of course copilot is going to spoil the surprise because it's quite common to do this. I'm going to get my element by ID and then dot render the app inside of it. So this one liner here essentially does the same thing than

and then dot render the app inside of it. So this one liner here essentially does the same thing than these three lines together. And speaking of render, this is also something that is in the V starter app. I will wrap the app in a strict mode. React components. You don't need to worry about knowing exactly what it does, just know that it's going to catch a few more bucks and let us know when we do something wrong. Alright, and we almost done, the last thing I want

and let us know when we do something wrong. Alright, and we almost done, the last thing I want to do is actually not build the app in the same file, but I want to have an app file and then an entry point. So I'm actually going to rename this file here to entry.jsx to signify that this is our main entry point main.jsx is another common name for that. And so I need to update here the link to entry.jsx. And now instead of having this app in here, I will cut that out and create my App and I'll go App.

And now instead of having this app in here, I will cut that out and create my App and I'll go Uppercase App. That's jsx. You don't have to go uppercase, but I think it's a nice convention to specify that it's a React component. And in there I will paste this code. Of course I need to export this function. I could export default, but I actually like named export. So I'm going to export a function called app, which means that in the entry point now where we are rendering this app,

So I'm going to export a function called app, which means that in the entry point now where we are rendering this app, we can, let's just organize the imports real quick. Import the namespace app from app. So everything should still work the same, but we have this slightly cleaner entry point. And then our app.jsx is really the main component where we're going to build our entire app. Let's verify that things still work properly. It looks like it does. Let's just try change something.

Let's verify that things still work properly. It looks like it does. Let's just try change something. So React, tailwind and V and yep, we good to go. Alright, this time let's start building an app.