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

Le composant ProductCard renvoie une balise div avec h1, h2, p ou d'autres balises nécessaires écrites comme HTML, mais il s'agit de Javascript sous le capot. La syntaxe s'appelle JSX (javascript XML). Pas de soucis, je l'expliquerai plus tard.

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

Votre composant est maintenant prêt à être utilisé. Par exemple, vous avez une page Produit et devez afficher certains produits.

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

Votre navigateur affichera 3 fois la ProductCard, ce qui signifie que 3 fiches produits ont été visibles par le navigateur.

Le point est de savoir comment le navigateur réagira après avoir obtenu ce code ProductPage.

• est en minuscule, donc React sait qu'il fera référence à une balise HTML
• commence par un P majuscule, donc React sait qu'il sera traité comme un composant.

Jusqu'ici, tout va bien?. avec succès, nous avons rendu la fiche produit sur la page produit.
Il est maintenant temps d'organiser le code :
Vous pouvez avoir un ou plusieurs composants tels que ProductCard, ProductReviewCard, SimilarProductCard, etc. Il peut donc être fastidieux de déclarer et de gérer tous les composants dans un seul fichier. alors, rendons la gestion plus organisée en utilisant uniquement la structure de fichiers.
créons un dossier réutilisable puisque la ProductCard peut avoir été utilisée à partir de plusieurs pages. Dans le dossier réutilisable, créez le fichier 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
      
  )
}

Maintenant, il y a un point si vous séparez le composant ProductCard, comment l'utiliserez-vous du fichier ProductPage. Je sais que vous avez peut-être déjà compris que oui, nous pouvons exporter la fonction ProductCard à partir du fichier ProductCard sous le nom ou par défaut que vous préférez en fait.

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

il est désormais utilisable à partir du fichier ProductPage. importez simplement la ProductCard à partir du fichier ProductPage, puis utilisez-la autant que vous le souhaitez.

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

J'ai mentionné plus tôt pourquoi le composant devrait être utilisé pour la réutilisabilité, la séparation des préoccupations et la modularité.

• Notre composant ProductCard est désormais entièrement réutilisable. nous pouvons l'utiliser de n'importe où.
• Dans la ProductPage, il peut y avoir plusieurs sections telles que ProductCard, ProductReviewCard, SimilarProductCard, RecommendedProductCard, etc. Ce qui lui permet de gérer et de maintenir le code en se concentrant dans une section distincte, composant par composant et section par section.
• Après avoir brisé l'interface utilisateur, un petit morceau de sections facilite le test, le débogage et le développement. nous pouvons facilement trouver des bogues/problèmes à partir d'un composant particulier si des bogues surviennent. J'espère que c'est beaucoup plus clair maintenant ?

Après tout cela, vous avez compris que vous pouvez également imbriquer votre composant.

ok, jetons un coup d'oeil à nouveau-?
créer un dossier de mise en page
créez le dossier Header sous le dossier Layout, puis créez le fichier index.js dans le dossier 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
      
  )
}

créez maintenant le fichier index.js sous le dossier Layout

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

J'espère que vous avez déjà découvert la beauté de l'architecture des composants React. Cela ne fait que commencer et j'ai essayé de susciter l'intérêt dans votre esprit.
Bon codage ??