前篇文章有說明到 React 是由數個 Components 組成，如果 Components 寫法如下，代表這個 Components 中的狀態已經是無法改變的，萬一我們有很多類似的 Components ，每一個組件只有些微的差距， 我們就會需要針對每一個些微差異的組件再多寫一個Components，當專案越來越大時，後面會變得比較不容易來維護

import React from "react"
import "./product.css"

const Product = () => {
  return (
    <div>
      <div className="expense-item__description">
        <h2 className="expense-item h2">product name</h2>
        <p className="expense-item__price">$1,000</p>
      </div>
    </div>
  )
}

export default Product

因此我們嘗試將上方程式碼進行一些改變，將價格獨立出來，宣告常數，將常數使用{}大括號中，放回原本設定price的欄位

import React from "react"
import "./product.css"

const productPrice = "$1,000" //宣告productPrice常數

const Product = () => {
  return (
    <div>
      <div className="expense-item__description">
        <h2 className="expense-item h2">product name</h2>
        <p className="expense-item__price">{productPrice}</p>
        //使用{}，將變數放回原本設定價錢的位置
      </div>
    </div>
  )
}

export default Product

最後我們可以看到頁面中顯示出來的成果與原先將price寫在<p>標籤中是一樣的效果

接著把剩下的 product name 也一起試著使用宣告常數的方式，將它放回 <h2> 標籤中～

import React from "react"
import "./product.css"

const productName = "i'm product name" //宣告 productName 常數
const productPrice = "$1,000"

const Product = () => {
  return (
    <div>
      <div className="expense-item__description">
        <h2 className="expense-item h2">{productName}</h2> //使用{}將常數放入
        <p className="expense-item__price">{productPrice}</p>
      </div>
    </div>
  )
}

export default Product

最後查看已經正確地將 productName 常數資料放入<h2>標籤

開始學習 React 後發現Components的基本使用方法非常多，最近幾天將會著重在於Components的使用技巧來做筆記，如果文章內容有寫錯誤的部分，歡迎大大們給予指教

參考資料：React官方文件