React套用Material UI從Go REST API獲取資料。
範例環境:
- Go 1.19
- React 18
事前要求
參考「React fetch data from Go REST API」建立React及Go應用程式。
參考「React Material UI hello world」安裝Material UI套件。
套用Material UI元件
把App.js
內容修改如下,即在<Message/>
中套用以下Material UI元件包括:
在<Message/>
外加上ThemeProvider
及CssBaseline
套用深色主題(dark mode)。
App.js
import { useEffect, useState } from "react";
import './App.css';
import * as React from 'react';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
const darkTheme = createTheme({
palette: {
mode: 'dark',
},
});
function App() {
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Message/>
</ThemeProvider>
);
}
const Message = () => {
const [messages, setMessages] = useState([])
useEffect(() => {
fetch("http://localhost:8080/messages")
.then(response => response.json())
.then(data => setMessages(data))
},[])
return (
<>
{
messages.map((message) => {
return (
<Box>
<List>
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary={message} />
</ListItemButton>
</ListItem>
</List>
</Box>
)
})
}
</>
)
}
export default App;
測試
啟動專案顯示如下。
沒有留言:
張貼留言