React Material UI fetch data from Go

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元件包括：

• Box
• List
• ListItem
• ListItemBotton
• ListItemText

在<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;

github。

測試

啟動專案顯示如下。