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

ProductCard コンポーネントは、h1、h2、p、または HTML のように記述されたその他の必要なタグを含む div タグを返しますが、内部は Javascript です。この構文は JSX(javascript XML) と呼ばれます。心配しないでください、後で説明します。

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

これでコンポーネントを使用する準備が整いました。たとえば、製品ページがあり、いくつかの製品をレンダリングする必要があるとします。

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

ブラウザが ProductCard を 3 回表示するということは、ブラウザに 3 つの製品カードが表示されていることを意味します。

重要なのは、この ProductPage コードを取得した後にブラウザがどのように反応するかです。

• は小文字であるため、React はそれが HTML タグとして参照されることを認識します
• は大文字の P で始まるため、React はそれがコンポーネントとして扱われることを認識します。

ここまでは順調ですね？。製品カードを製品ページにレンダリングすることに成功しました。
ここでコードを整理します:
ProductCard、ProductReviewCard、SimilarProductCard などのコンポーネントが 1 つ以上存在する場合があるため、すべてのコンポーネントを 1 つのファイルで宣言して管理するのは面倒な場合があります。そこで、ファイル構造だけを使って管理できるように整理してみましょう。
ProductCard は複数のページから使用されている可能性があるため、再利用可能なフォルダーを作成しましょう。再利用可能なフォルダー内に 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
      
  )
}

ここで、ProductCard コンポーネントを ProductPage ファイルからどのように使用するかを分離する場合にポイントがあります。すでに理解しているかもしれませんが、はい、ProductCardfile から ProductCardfunction を名前付きまたはデフォルトとしてエクスポートできます。

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

これで、ProductPage ファイルから使用できるようになりました。 ProductPagefile から ProductCard をインポートするだけで、必要なだけ使用できます。

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

コンポーネントを使用する必要がある理由については、再利用性、関心事の分離、モジュール性のために前に述べました。

• ProductCard コンポーネントは完全に再利用できるようになりました。どこからでも使用できます。
• ProductPage には、ProductCard、ProductReviewCard、SimilarProductCard、RecommendedProductCard などの複数のセクションがある場合があります。コードをコンポーネントごと、セクションごとに別のセクションに集中して管理および保守します。
• UI を小さなセクションとして分割した後、テスト、デバッグ、開発が容易になります。バグが発生した場合、特定のコンポーネントからバグや問題を簡単に見つけることができます。 もっと明確になったと思いますか?

ここまでの説明を終えると、コンポーネントもネストできることがわかりました。

わかりました、もう一度見てみましょう-?
レイアウトフォルダーを作成する
Layoutフォルダーの下にHeaderフォルダーを作成し、Headerフォルダー内にindex.jsファイルを作成します

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

ここで、Layout フォルダーの下にindex.js ファイルを作成します

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

React コンポーネント アーキテクチャの美しさをすでに発見していただければ幸いです。これはまだ始まったばかりで、皆さんの心の中で関心を高めようとしました。
コーディングを楽しんでください??