// === 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

O componente ProductCard retorna uma tag div com h1,h2,p ou algumas outras tags necessárias escritas como HTML, mas é Javascript nos bastidores. A sintaxe é chamada JSX (javascript XML). Não se preocupe, explicarei isso mais tarde.

// === 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.

Agora seu componente está pronto para uso. Por exemplo, você tem uma página de produto e precisa renderizar alguns produtos.

//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
        
  )
}

Seu navegador renderizará 3 vezes o ProductCard significa que 3 cartões de produto ficaram visíveis para o navegador.

A questão é como o navegador reagirá após obter este código ProductPage

• está em letras minúsculas, então o React sabe que será referido como uma tag HTML
• começa com P maiúsculo, então o React sabe que será tratado como um Componente.

até agora tudo bem?. com sucesso, renderizamos o cartão de produtos na página do produto.
Agora é hora de organizar o código:
Você pode ter um ou mais componentes como ProductCard, ProductReviewCard, SimilarProductCard, etc. portanto, pode ser complicado declarar e gerenciar todos os componentes em um arquivo. então, vamos torná-lo mais organizado para gerenciar usando apenas a estrutura de arquivos.
vamos criar uma pasta reutilizável, pois o ProductCard pode ter sido usado em várias páginas. Dentro da pasta reutilizável, crie o arquivo ProductCard.js/jsx.

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

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

Agora há um ponto se você separar o ProductCardcomponent como irá usá-lo do arquivo ProductPage. Eu sei que você já deve ter entendido que sim, podemos exportar a função ProductCard do ProductCardfile com o nome ou padrão que você preferir.

//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
      
  )
}

agora ele pode ser usado no arquivo ProductPage. basta importar o ProductCard do ProductPagefile e usá-lo o quanto quiser.

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

Mencionei anteriormente por que o componente deve ser usado - para reutilização, separação de preocupações e modularidade.

• Nosso componente ProductCard agora é totalmente reutilizável. podemos usá-lo de qualquer lugar.
• Na ProductPage pode haver várias seções como ProductCard,ProductReviewCard,SimilarProductCard,RecommendedProductCard etc. Fazendo com que ele gerencie e mantenha o código focando em uma seção separada como componente por componente e seção por seção.
• Depois de quebrar a IU em pequenos pedaços de seções, fica mais fácil testar, depurar e desenvolver. podemos encontrar bugs/problemas facilmente em um componente específico se surgirem bugs. Espero que esteja muito mais claro agora?

Depois de tudo isso, você entendeu que também pode aninhar seu componente.

ok, vamos dar uma olhada de novo?
crie uma pasta de layout
crie a pasta Header na pasta Layout e crie o arquivo index.js dentro da pasta Header

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
      
  )
}

agora crie o arquivo index.js na pasta Layout

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

Espero que você já tenha descoberto a beleza da arquitetura de componentes react. Isso está apenas começando e tentei aumentar o interesse em sua mente.
Boa codificação??