// === 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 组件返回一个 div 标签，其中包含 h1、h2、p 或其他一些像 HTML 一样编写的必要标签，但它的底层是 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
        
  )
}

您的浏览器将渲染 3 次 ProductCard 意味着浏览器已可见 3 个产品卡。

重点是浏览器得到这个ProductPage代码后会如何反应

• 是小写的，所以 React 知道它将被称为 HTML 标签
• 以大写 P 开头，因此 React 知道它将被视为组件。

到目前为止，一切都很好？。我们已成功将产品卡呈现到产品页面。
现在该整理一下代码了：
您可能有一个或多个组件，例如 ProductCard、ProductReviewCard、SimilarProductCard 等。因此，在一个文件中声明和管理所有组件可能会很麻烦。因此，让我们仅使用文件结构使其更有组织性以进行管理。
让我们创建一个可重复使用的文件夹，因为 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 中导出 ProductCard 函数，如您实际上更喜欢的命名或默认值。

//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 组件架构的美妙之处。这才刚刚开始，并试图在你的内心深处培养兴趣。
快乐编码？？