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

Die ProductCard-Komponente gibt ein div-Tag mit h1,h2,p oder einigen anderen notwendigen Tags zurück, die wie HTML geschrieben sind, aber unter der Haube steckt Javascript. Die Syntax heißt JSX (Javascript XML). Keine Sorge, ich werde es später erklären.

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

Jetzt ist Ihre Komponente einsatzbereit. Sie haben beispielsweise eine Produktseite und müssen einige Produkte rendern.

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

Ihr Browser rendert die Produktkarte dreimal, was bedeutet, dass 3 Produktkarten für den Browser sichtbar waren.

Der Punkt ist, wie der Browser reagiert, nachdem er diesen ProductPage-Code erhalten hat

• ist kleingeschrieben, sodass React weiß, dass es sich um ein HTML-Tag handelt
• beginnt mit einem großen P, sodass React weiß, dass es als Komponente behandelt wird.

So weit, ist es gut?. Wir haben die Produktkarte erfolgreich auf der Produktseite gerendert.
Jetzt ist es an der Zeit, den Code zu organisieren:
Möglicherweise verfügen Sie über eine oder mehrere Komponenten wie ProductCard, ProductReviewCard, SimilarProductCard usw. Daher kann es umständlich sein, alle Komponenten in einer Datei zu deklarieren und zu verwalten. Also machen wir die Verwaltung besser organisiert, indem wir nur die Dateistruktur verwenden.
Erstellen wir einen wiederverwendbaren Ordner, da die ProductCard möglicherweise von mehreren Seiten verwendet wurde. Erstellen Sie im wiederverwendbaren Ordner die Datei 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
      
  )
}

Nun hat es einen Sinn, wenn Sie die ProductCard-Komponente, wie sie verwendet wird, von der ProductPage-Datei trennen. Ich weiß, dass Sie vielleicht schon verstanden haben, ja, wir können die ProductCard-Funktion aus der ProductCard-Datei so exportieren, wie sie benannt oder standardmäßig ist, je nachdem, was Sie tatsächlich bevorzugen.

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

Jetzt kann es aus der ProductPage-Datei verwendet werden. Importieren Sie einfach die ProductCard aus der ProductPage-Datei und verwenden Sie sie dann so oft, wie Sie möchten.

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

Ich habe bereits erwähnt, warum Komponenten verwendet werden sollten – aus Gründen der Wiederverwendbarkeit, der Trennung von Belangen und der Modularität.

• Unsere ProductCard-Komponente ist jetzt vollständig wiederverwendbar. wir können es von überall aus nutzen.
• Auf der Produktseite kann es mehrere Abschnitte wie „ProductCard“, „ProductReviewCard“, „SimilarProductCard“, „RecommendedProductCard“ usw. geben. Dadurch wird der Code verwaltet und verwaltet und konzentriert sich in einem separaten Abschnitt, Komponente für Komponente und Abschnitt für Abschnitt.
• Nachdem die Benutzeroberfläche in kleine Abschnitte unterteilt wurde, ist das Testen, Debuggen und Entwickeln einfacher. Wir können Fehler/Probleme in der jeweiligen Komponente leicht finden, wenn Fehler auftreten. Ich hoffe, es ist jetzt viel klarer?

Nach alledem haben Sie verstanden, dass Sie Ihre Komponente auch verschachteln können.

ok, lass uns noch einmal einen Blick darauf werfen-?
Erstellen Sie einen Layout-Ordner
Erstellen Sie einen Header-Ordner unter dem Layout-Ordner und erstellen Sie dann eine index.js-Datei im Header-Ordner

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

Erstellen Sie jetzt die Datei index.js im Layout-Ordner

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

Ich hoffe, Sie haben bereits die Schönheit der Reaktionskomponentenarchitektur entdeckt. Das fängt gerade erst an und ich habe versucht, das Interesse in deinem Hinterkopf zu wecken.
Viel Spaß beim Codieren??