在為什麼要用JS框架，就提到了元件的使用。為了讓大家容易理解元件，我們先使用在React基本語法中，最一開始的簡單頁面，因為在每個資料夾哩，只有page.tsx可以直接開啟，所以，我們先新增一個test的資料夾，並且新增page.tsx，/app/test/page.tsx:

export default function Home() {
  return (<div><h1>Hello</h1><h2>我是吳濟聰</h2></div>)
}

啟動伺服器之後，可以看到:

元件

多個元件

props

元件裡的物件陣列

Material-UI

小組作業

• 除了產品列表之外，每個組員請根據本週的教學內容，新增一個資料夾及對應的頁面，頁面中簡單的利用上面介紹過的語法利用陣列建立一個列表 (如: 顧客列表、廠商列表、訂單列表，也可以思考期末專案，並且開始規劃功能)，所有頁面雖然內容不同，但是，請套用同樣的style，並請在首頁新增連結，可以連到這些頁面(包括產品列表)，這些頁面也可以連回主頁面。可以簡單的利用連結，也可以嘗試利用javascript跳轉頁面。
  • How TO - Redirect to Another Webpage

<aside> 📢

請利用git整合所有人的頁面，未整合就不算完成喔~~

</aside>

常見問題