React Material UI hello world

React使用Material UI元件函式庫(component library)。

範例環境：

• node v16.5.0
• npm 7.19.1
• react@18.2.0
• @mui/material@5.11.2

事前要求

參考「React 使用Create React App建立React應用程式」建立React應用程式。

安裝 Material UI

在專案目錄/app下輸入npm install @mui/material @emotion/react @emotion/styled安裝Material UI相關套件。

~/.../react-demo/app % npm install @mui/material @emotion/react @emotion/styled

up to date, audited 2017 packages in 17s

157 packages are looking for funding
  run `npm fund` for details

47 vulnerabilities (1 low, 3 moderate, 30 high, 13 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details

使用 Material UI

開啟App.js修改內容如下。在function App()返回Material UI的Button元件。

App.js

import './App.css';
import * as React from 'react';
import Button from '@mui/material/Button';

function App() {
  return <Button variant="contained">Hello, world!</Button>
}

export default App;

github。

測試

啟動專案顯示如下。

• React Material UI fetch data from Go