在為什麼要用JS框架，就提到了元件的使用。在React基本語法中，

元件

多個元件

props

元件裡的物件陣列

Material-UI

Material Design是Google開發的設計語言，Material-UI就是一些Material Design的react模組/元件。各位可以使用過去慣用的Bootstrap，在react裡，可以使用React Bootstrap 。不過，我們課程帶大家使用Material-UI。目前的版本是6.1.1。

安裝material-ui，需要使用套裝管理程式，可以使用npm、yarn或pnpm。我們只要選擇其中一種，本課程以npm為例。

• Installation

首先，要先讓terminal中正在執行的伺服器停下來，在terminal裡按「ctrl+c」(Mac OS是「command+C」)

再執行安裝的動作:

npm install @mui/material @emotion/react @emotion/styled

可以看到package.json裡，多了:

{
  "name": "next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    **"@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/material": "^6.1.1",**
    "next": "14.2.11",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.11",
    "typescript": "^5"
  }
}

<aside> 💡 安裝好了之後，別忘了利用npm run dev啟動伺服器

</aside>

Material Design 基本上是mobile-first的設計模式，所以，很多的元件是以手機的操作為主，但是，也可以在網頁上使用，例如: List。

List

• Lists