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

El componente ProductCard devuelve una etiqueta div con h1,h2,p o algunas otras etiquetas necesarias escritas como HTML, pero internamente es Javascript. La sintaxis se llama JSX (javascript XML). No te preocupes, te lo explicaré más 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.

Ahora su componente está listo para usar. Por ejemplo, tienes una página de Producto y tienes que renderizar algunos productos.

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

Su navegador mostrará 3 veces la ProductCard, lo que significa que 3 tarjetas de productos han sido visibles para el navegador.

El punto es cómo reaccionará el navegador después de obtener este código de ProductPage.

• está en minúsculas, por lo que React sabe que se referirá a ella como una etiqueta HTML
• comienza con P mayúscula, por lo que React sabe que será tratado como un Componente.

¿Hasta ahora, todo bien?. Hemos presentado correctamente la tarjeta de productos en la página del producto.
Ahora toca organizar el código:
Es posible que tenga uno o más componentes como ProductCard, ProductReviewCard, SimilarProductCard, etc., por lo que puede resultar engorroso declarar y administrar todos los componentes en un solo archivo. entonces, hagámoslo más organizado para administrarlo usando solo la estructura de archivos.
Creemos una carpeta reutilizable ya que es posible que ProductCard se haya utilizado desde varias páginas. Dentro de la carpeta reutilizable cree el archivo 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
      
  )
}

Ahora hay un punto si separa el componente ProductCard cómo lo usará del archivo ProductPage. Sé que es posible que ya hayas entendido que sí, podemos exportar la función ProductCard desde ProductCardfile con el nombre o el valor predeterminado que prefieras.

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

ahora se puede utilizar desde el archivo ProductPage. simplemente importe la tarjeta de producto desde el archivo de página de producto y luego úsela tanto como desee.

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

Mencioné anteriormente por qué se deberían utilizar los componentes: para su reutilización, separación de preocupaciones y modularidad.

• Nuestro componente ProductCard ahora es completamente reutilizable. podemos usarlo desde cualquier lugar.
• En la página del producto puede haber varias secciones como Tarjeta de producto, Tarjeta de revisión de producto, Tarjeta de producto similar, Tarjeta de producto recomendada, etc. Haciendo que administre y mantenga el código centrándose en una sección separada, componente por componente y sección por sección.
• Después de dividir la interfaz de usuario en una pequeña porción de secciones, es más fácil probar, depurar y desarrollar. Podemos encontrar errores/problemas fácilmente desde el componente particular si surgen errores. Espero que quede mucho más claro ahora.

Después de todo esto, habrás comprendido que también puedes anidar tu componente.

ok, echemos un vistazo de nuevo-?
crear una carpeta de diseño
cree la carpeta Encabezado en la carpeta Diseño y luego cree el archivo index.js dentro de la carpeta Encabezado

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

ahora cree el archivo index.js en la carpeta Diseño

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

Espero que ya hayas descubierto la belleza de la arquitectura de componentes de reacción. Esto recién está comenzando y trató de generar interés en su mente.
¿Feliz codificación?