// === Reminder ===
All tags must return under a parent tag or using a react fragment(>)

// === Reminder ===
React component name must start with a capital letter otherwise it won't treated as a component

The ProductCard component returns a div tag with h1,h2,p, or some other necessary tags written like HTML, but it is Javascriptunder the hood. The syntax is called JSX(javascript XML). No worries I will explain it later.

// === Reminder ===
JSX is a syntax extension for javascript that lets you write HTML-like markup inside a javascript file which handles the logic of rendering and markup live together in the same place as components.

Now your component is ready to use. For example, you have a Product page and have to render some products.

//Products.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

function ProductPage(){
  return(
      
product page
        
  )
}

Your browser will render 3 times the ProductCard means that 3 product cards have been visible to the browser.

The point is How the browser will react after getting this ProductPage code

• is lowercase, so React knows it will refer to as an HTML tag
• starts with a capital P, so React knows that it will be treated as a Component.

so far so good?. successfully we have rendered the products card to the product page.
Now times to organize the code:
You may have one or more components like ProductCard, ProductReviewCard, SimilarProductCard, etc. so, it might be cumbersome to declare and manage all the components in one file. so, let's make it more organized to manage using just file structure.
let's create a reusable folder since the ProductCard may have been used from multiple pages. Inside the reusable folder create ProductCard.js/jsx file.

//reusable/ProductCard.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

Now there is a point if you separate the ProductCardcomponent how will use it from the ProductPage file. I know you may have already understood yes, we can export the ProductCardfunction from the ProductCardfile as named or default which you prefer actually.

//reusable/ProductCard.js or jsx file
export default function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

now it is being usable from the ProductPage file. just import the ProductCardfrom the ProductPagefile then use it as much as you want.

//ProductPage.js or jsx file
import ProducrCard from './reusable/ProductCard.js'
function ProductPage(){
  return(
      
product page
        
  )
}

I mentioned earlier why component should use-for reusability, separation of concern, and modularity.

• Our ProductCard component is fully reusable now. we can use it from anywhere.
• In the ProductPage there may have multiple sections like ProductCard,ProductReviewCard,SimilarProductCard,RecommendedProductCard etc. Making it manage and maintain the code focusing into a separate section as component by component and section by section.
• After breaking the UI as small chunk of sections makes it easier to test, debug, and develop. we can find bugs/issues easily from the particular component if bugs arise. I hope it is much clearer now?

After all of this, you have understood that you can be nesting your component also.

ok let's take a look again-?
create a Layout folder
create Header folder under the Layout folder then create index.js file inside Header folder

export default function Header(){
  return(
      
Header
      
  )
}

create `Footer` folder under the `Layout` folder then create `index.js` file inside `Footer` folder
export default function Footer(){
  return(
      
Footer
      
  )
}

now create index.js file under Layout folder

import Header from './Header';
import Footer from './Footer';
export default function Layout(){
  return(
      
page content
        
  )
}

I hope you already have discovered the beauty of react component architecture. This is just starting and tried to grow interest inside of your back of mind.
Happy coding??