I want the focus of this series to be on React, not HTML and CSS, but I also want something that looks nice and is pleasant to work with. I don't want minimal example with default browser stars. So what I thought of doing is reverse engineer our way from A-H-T-M-L and CSS static, build a template that's already built and we are going to progressively build different parts in React and rectify this static content. I promise you we'll still go

React and rectify this static content. I promise you we'll still go through basic React concepts one by one. This should not get in the way of learning React. Matter of fact, it should make it more pleasant and intuitive. All right, let's take a look at the starter template we work from. It's a website called Deaf Pups, uh, which has a cool little chat GPT generated logo.

It's a website called Deaf Pups, uh, which has a cool little chat GPT generated logo and it's basically a collection of puppies, dogs belonging to the deaf community. So I've asked on Twitter for some folks to send their pictures and I added them. There's a bunch more uh, in the public/images folder and basically the idea is you have a short list, a search bar, but like I said, everything is static. So if I search stuff here, nothing happens.

a search bar, but like I said, everything is static. So if I search stuff here, nothing happens. There's nothing wired up. It's just HTML. I can try to close the short list or add something to the short list and nothing is going to happen. This is just the HTML and CSS markup. Same deal. We have a form, but if I fill it and try to submit it, nothing works. And so we are going to use this app to bring React concept

and try to submit it, nothing works. And so we are going to use this app to bring React concept to the table, how to have a short list of favorite dogs, how to filter through the list of dogs, how to add a new dog through a form and things like this. I have this static HTML page running in a different VT app. And if we look at the index.html, this is a giant single page bunch of markup with all the puppies, great list the search form, the new submission form and so on.

the puppies, great list the search form, the new submission form and so on. And so we are going to take all of this and make sense of it to build a React app. And to be honest, it's very likely that at some point you'll be asked to port a static markup to a React app. So the work we're going to do here is actually quite relevant. The way we're going to approach this is first put everything

is actually quite relevant. The way we're going to approach this is first put everything in a giant React component that has the entire markup and then break things down in a way that makes sense. Before we do that, let's see what else we have in this directory. And we have one app.css file. You can see it's using tailwindcss and setting the default font family to inter. And the only other thing this project has is these images.

and setting the default font family to enter. And the only other thing this project has is these images directory that has 22 images and our fancy chat GPT logo. Here's what sits in the images directory. So shout out to the folks that send their dogs all rabbits through the uh, Twitter thread. I've added them and added some of my dogs as well. So let's together bring this static markup to our VT app that we've built up to this point.

So let's together bring this static markup to our VT app that we've built up to this point. We are going to bring the images folder as well and take it from there. Okay, so this is the app that we've been building in this course so far. And so I'll create a public directory so that we can place our images and off screen right here I have an images folder with all the images you've seen just

and off screen right here I have an images folder with all the images you've seen just before and I'll drop them there. And so here they are, beautiful back to the static HTML build. Remember that the site was using Inter and if I go at the top in the document head, you can see that we have our stylesheet link and then we have this Google Font tags that are loading the Inter font.

and then we have this Google font tags that are loading the Inter font. So I'll copy these three link tags and back in the React app in the index.html page, I will go and paste these three link tags. We need to set Inter as the default font family and we can do that in the app.css. And here I'll paste a theme block that sets the default font family to Inter. So with that in place, if I look at the App.jsx

that sets the default font family to enter. So with that in place, if I look at the app that GSX and we just removed the font mono so it's not overriding it, we should now be using inter. And so let's inspect this and if in the computed values I look for font family, it is indeed inter and sans. And you can see that tailwind composes this default font family with all the system fonts as fallbacks, which is great.

family with all the system phones as fallbacks, which is great. Alright, but enough tailwind, this is a react course. So the next thing we want to do, uh, we can get rid of this is have the entire app in here. So here we could yellow import the entire HTML and CSS in one go. And perhaps in real life that's what you would do. You would go and transform that tools

And perhaps in real life that's what you would do. You would go and transform that tools and paste the HTML, get the GSX on the other side and paste that in your app. But here for learning purposes, we are going to start with the header section of the documents. So we'll take a look at the static HTML and there is a main tag that contains the entire documents. So what I wanna do is take this header section that has the logo

So what I wanna do is take this header section that has the logo and then the hero copy all the way to here. So I will copy that including the <main> and <div> opening tags that I need to remember to close. And so that's essentially this section of the website that we're going to copy over to start with. So let's replace the <div> here with what I've copied in my clipboard and before I forget, I will close the <div>.

what I've copied in my clipboard and before I forget, I will close the div and close the main tag. Now as you can imagine from the squiggly, that is not going to work and indeed it's not looking great and the syntax has an issue with this HTML comments here. So those were HTML comments and the syntax is not correct in JSX. If you want a comment, you can do it like so. So once again opening

If you want a comment, you can do it like so. So once again opening and closing { } to enter the JavaScript expression world. And then we have a JavaScript comment inside of it. So let's go and select all the opening HTML comments arrows and I will replace them with {/* and then we'll select the closing one and do exactly the opposite */}. Okay, so we fixed the comments.

and do exactly the opposite star / closing brace. Okay, so we fixed the comments but we have a lot more red squigglies now and I think you can guess what's happening next. Yep, all the class attributes that instead should be class name. Let's select all the class equals and again, I'll change them all at once with class name. And at this point it looks like our markup is ratified. And so let's go take a look at what we've got.

And at this point it looks like our markup is ratified. And so let's go take a look at what we've got and yeah, it looks like it's working. You can see we have a div id of app which is the entry point for the React app. And inside of it we have all the markup that we have placed. Okay, so we could keep the code as is, there's nothing wrong with it, but since it's going to be a very long component with all the markup, how about we take this Header component that starts here and ends down here.

with all the markup, how about we take this header component that starts here and ends down here and make it its own header component. So we are going to break out this header component, put it somewhere else and then use it inside the main App components. One thing I love about React is you can have components in different files but you can also organize multiple components and sub components within the same file, if that makes sense.

components and sub components within the same file, if that makes sense. So for now I'm going to create a header in the same file just below. So down here I'll declare another component function header and we call it header, but it could really be called anything we want. And I will grab the header tag in its entirety and cut it in my clipboard. And inside the header components this component needs

and cut it in my clipboard. And inside the header components this component needs to return some JSX. And then here I will paste the markup. So all I've done is extract a little chunk of JSX of HTML basically into a header component. So now because I have removed it from inside here, well it's no longer being rendered, but I can use that header component right where I wanna put it back there.

but I can use that header component right where I wanna put it back there. So to use a component, you use the opening bracket and then the name of the component header and we're going to close that component directly since it doesn't need to contain anything between the opening and closing tag at this point. And for now, I'll keep everything in this file. It's perfectly fine and we can decide later if you want to start moving things in appropriate different files.

It's perfectly fine and we can decide later if you want to start moving things in appropriate different files. Okay? And just like that our header should be back. So we haven't fundamentally changed anything here. We've just taken a part of the markup of the JSX and put it in its own Header component. So now that Header can live somewhere else, evolve by itself, and we have that app which is going to express this render tree if we have multiple components like this.

to express this render tree if we have multiple components like this. And then different parts can be placed in different places. So it helps you break down mentally, but also if you have logic and customization that comes into play, uh, make things a little bit more maintainable by breaking down components as you see fit. Let's break out a couple more components here. So uh, other components like the puppiesList

Let's break out a couple more components here. So uh, other components like the PuppiesList and NewPuppyForm components will come down here. So I think it makes sense to create a maxWidthContainer here. Again, not completely necessary, but for learning purposes I think it makes sense. So let's call this one container function container. And it's essentially just a wrapping div with a maxWidthContainer and some padding.

And it's essentially just a wrapping div with a max width container and some padding. So let's return that. So that would make more sense to break out this component if you were going to reuse it multiple times. Perhaps every page in an application would have the same container or multiple section would have the same container. So let's go with that approach. But here now we want to be able to output something inside, right?

But here now we want to be able to output something inside, right? And this something that we want is basically anything that goes inside the container. Let's replace our markup with container. This time I will not self close it, but I will put the opening and closing tags where they belong. And let's remove this div. So basically I now have my container component.

And let's remove this div. So basically I now have my Container component wrapping the Header, and what I'm hoping is the Header would go into this child element of the Container. Right now of course it's just saying something because our Container is outputting well something. And so we throw away all the elements that are nested inside. Okay? So you might already know the solution

elements that are nested inside. Okay? So you might already know the solution because when we were going through JSX, I showed you briefly how components can nest inside another. And the way you do this in React is bypass passing what's called the children prop. Remember that's the third argument in the React.createElement function. So here to be able to pass it, you can see it's not defined. I need to accept it as props.

So here to be able to pass it, you can see it's not defined. I need to accept it as props. And I just said the word props so I could receive the props here and turns out that children is one of the props. So I can go props, do children like this. So I receive the entire props object and then I pass the children between the opening and closing tag. And like this, I now have my header component once again.

between the opening and closing tag. And like this, I now have my header component once again. That said, it's common practice in components to destructure the props that you want. So instead of passing props that children, you would pass children directly. And here the structure with curly braces to access what's inside of props. And here get the children prop. Okay, and just to commit this to memory, let's do one more.

And here get the children prop. Okay, and just to commit this to memory, let's do one more. We're going to take this main tag here and we are going to create yet another component and let's call this one PageWrapper. And so this one is going to return the main tag and once again, we are going to pass children inside of it. And so we receive the children up here. And so we can go here and replace this with our PageWrapper component.

And so we can go here and replace this with our PageWrapper component and make sure we replace the closing main tag with the PageWrapper. And if I remove the comments, you can see that our app is now a tree of self-describing components. Pretty much we have a PageWrapper that wraps a container and inside of it we have a header and more to come. So you don't have to always break down components all the way like this.

So you don't have to always break down components all the way like this. Matter of fact, sometimes it might add layers of indirection if you have to navigate between components to understand what's happening. But you can imagine that at scale, whenever you feel that you need to reduce complexity and take some part away into its own encapsulated components, this is super useful. Right now we've broken down all the components on the same

components, this is super useful. Right now we've broken down all the components on the same page, which is fine and you could even if you wanted to reuse the page wrapper on another page, export it from here and import it from this file. But this is kind of odd, uh, at this point I would move it to a different file, but there is nothing wrong with exporting multiple components per page. You can define multiple and also export multiple.

with exporting multiple components per page. You can define multiple and also export multiple. But what I wanna do here, just to wrap up this lesson, say that we want a components folder where we have things like a page wrapper and a container and maybe also the header. And then we're going to import these and create our App component three from the imported components. So in our src directory,

imported components. So in our src directory, let's create a new folder called components and we'll start with the PageWrapper. So PageWrapper.jsx. And in there I'm going to cut from this page, the component and paste it here instead. And I will have to export it again, you could do a default export here, but I like to do named export to make sure

you could do a default export here, but I like to do named export to make sure that the name remains the same throughout the application. So here we should have {} and yes we do. So we need to import our PageWrapper from components/PageWrapper. Let's do the same with the Container. So Container that's .jsx, export it and then import it. Guaranteed copilot will help. Yes it will.

and then import it. Guaranteed copilot will help. Yes it will. And we'll do the same with the header. So header, that's GSX, export, save, and import like so. And now look how organized and clean our App component feels. That said, do not fall in the trap of abstracting for the sake of abstraction and have clean code. Sometimes it might be confusing for newcomers that needs

for the sake of abstraction and have clean code. Sometimes it might be confusing for newcomers that needs to go check what the page wrapper is only to realize, oh, it's just a div with a bit of style. There is no hard rule for what's right or wrong when making abstraction and breaking down components. But perhaps if the only reason you're making the component breakdown is to have a clean, minimal UI, maybe reconsider this.

breakdown is to have a clean, minimal ui, maybe reconsider this. We've done here as an exercise to understand how component nest inside one another, but typically you kinda want to wait for the complexity to come to you before you make the decision of making an abstraction to reduce the complexity. All right, in the next video we'll bring the rest of the UI into our app and then we'll start playing with some data iteration,

of the UI into our app and then we'll start playing with some data iteration, some state interactivity, and all the good stuff.