All right, let's bring the rest of the study qi to our React app. But before we do that, I want to do a really quick fix to our markup. So if I inspect our current markup, you'll see that we have our app here with a <main> tag and then inside of it we have our <header> section. It's not a real issue in the sense that a <main> tag can have a <header> tag inside of it, but I find sort of odd to have this header with the logo.

that a main tag can have a header tag inside of it, but I find sort of odd to have this header with the logo inside the main tag, which is supposed to be for the main section. So we are going to move the main tag somewhere else in the documents, I mean the page wrapper component here where we have that main tag. So I'll change this to a div and then in our app that's JSX. After the header, we'll actually have the main tag here like

and then in our app that's JSX. After the header, we'll actually have the main tag here like so with the components to come nested inside of it. So all still looks exactly the same, but I think it's a little bit more logical to have our header first and then our main tag with the rest of the app to come. Alright, while we've manually brought over our header components to our app this time for the rest of the ui, we are going to use transform that tools

components to our app this time for the rest of the ui, we are going to use transform that tools to transform all the static HTML to JSX and then bring that in and then work from there. So here I am in the static HTML page. And so we have done the header components that goes all the way to here. And basically what we want to grab is the search and short list, the puppies list and the new puppy form. So all of these three sections, all of that.

and short list, the puppies list and the new puppy form. So all of these three sections, all of that. And we're going to go and transform that tools, which I've mentioned earlier, and select HTML to JSX here. I'll delete this and paste the entire markup and I will copy the output on the other side. And here in our React app, I could paste all of this inside the main tag. But actually let's create a Main component. So function main

But actually let's create a main component. So function main and we're going to return everything that is in myClipboard, which is a whole lot of JSX. And you can see that it's been turned to className HTML four and all the good JSX stuff. There's a lot. Oh, and also because there's multiple top level elements you can see transform that tools added this React.Fragment as we've discussed earlier in this course.

transform that tools added this React fragment as we've discussed earlier in this course. But here, I actually want this fragment to be a main tag instead. And so now I can render here this main component and when I say we should have the entire static app in our browser and yep, it looks like everything is here looking really nice. But once again, uh, nothing is dynamic. If I click on the hearts, nothing happens.

But once again, uh, nothing is dynamic. If I click on the hearts, nothing happens. I cannot remove from the short list, I cannot search for. Boy, nothing is happening. It is just static markup. But we have everything set up to tify this UI and start making it interactive progressively. And just because our main function is currently huge, I'm going to break it down in a few components. And since you know the process, I will speed run through this.

And since you know the process, I will speed run through this. This should be a good refresher, but I'll go quite quick. All right, so we're going to start with these search components. So I will copy the markup for it, create a new component called Search that's JSX and export a function called search that returns this markup. All right, so I need to import the search

that returns this markup. All right, so I need to import the Search from Component Search. Yep. And all of a sudden the comment is kind of pointless. So let's remove it and we'll do the same with the ShortList. So grab the code, delete it, remove the comment, and already have our ShortList component that doesn't exist yet, but we'll go and create it here. ShortList.jsx, export function ShortList

yet, but we'll go and create it here. ShortList, jsx, export function, ShortList return, all of that imported at the top and we should still be good. Quick look on the browser and yep, we have our search and our ShortList. Again, this comments now is redundant. Uh, next we are going to do the PuppiesList. Gonna grab all of this, remove the comment and have PuppiesList component.

Gonna grab all of this, remove the comment and have PuppiesList component. We'll create it here. PuppiesList, jsx, export function, PuppiesList, you know the drill by now. We return the JSX, close the file, import it, and we move on. What's next? The new PuppyForm. And I believe this is the last yep. Component. We're gonna break out NewPuppyForm.

And I believe this is the last yep. Component. We're gonna break out newPuppyForm. We need to create this newPuppyForm that, that's just export function newPuppyForm return, and boom, just need to import it. newPuppyForm and we should be good to go. Our main Component now looks much more readable and our UI is still intact. That's very good news. Alright, we've got great foundations in place.

That's very good news. Alright, we've got great foundations in place to start leveraging the power of React. We are going to go through all these components one by one, starting with the puppies list, where we are going to look at how we can iterate through data instead of just having static markup.