<aside> 🚧

以下內容尚未修改，原本內容以page router為例，未來將改以app router為例。

</aside>

引用元件

在React裡跟一般的php網頁最不一樣的就是元件的概念，可以利用元件切割並重複利用我們的程式。在next.js，如果使用app router，每個資料夾裡的page.js就是主畫面，同一個資料夾裡的其他檔案就會是被引用的元件。這樣的組織方式要比pages router直覺多了。

• React簡介 (吳濟聰老師進階web程式設計教材)
  • React基本語法
  • React元件

使用習慣上，我們會把元件放同一個資料夾裡。例如: /app/product/ProductList.js

export default function ProductList() {

  return (
    <ul>
    <li>iPad / 20000</li> 
    <li>iPhone X / 30000</li>
   </ul>
  );
}

在/app/product/page.js中引用這個元件:

**import ProductList from "ProductList";**

export default function Home() {
  return (
    **<ProductList/>**
  )
}

如果把內容放進陣列裡並利用陣列的map()方法 (詳參:Array方法)將內容顯示在畫面上，修改後的內容: /app/product/ProductList.js

export default function ProductList() {
  
  let products= [
    {desc:"iPad", price:20000},
    {desc:"iPhone X", price:30000}
   ];

  return (
    <ul>
    {products.map(product => <li>{product.desc} / {product.price}</li>)}
    </ul>
  );
}

執行的時候，如果打開開發人員工具，會看到一個警告:

Warning: Each child in a list should have a unique "key" prop.

在react裡，為了要監控畫面內容的更動，建議加上key，所以，做一點小修改:

export default function ProductList() {
  
  let products= [
    {desc:"iPad", price:20000},
    {desc:"iPhone X", price:30000}
   ];

  return (
    <ul>
    {products.map((product) => <li **key={product.desc}**>{product.desc} / {product.price}</li>)}
    </ul>
  );
}

Routing

事件與useState()

Form