React JSX with Material UI example on JSFiddle https://jsfiddle.net/2fgyL1j9/

index.html

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<div id="app"></div>

script.js

const {useState, useEffect} = React;
const {
  Alert, Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, List, ListItem, ListItemText, ListItemAvatar, Avatar, ImageIcon, WorkIcon, BeachAccessIcon, Card, CardContent, Typography, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle
} = MaterialUI;

const HelloWorld = ({name}) => {
  const [showAlert, setShowAlert] = useState(false);

  onHello = () => {
    setShowAlert(true);
  }

  onCloseHello = () => {
    setShowAlert(false);
  }

  return (
    <div className="hello-world-container">
      <div className="hello-text">
        <Button variant="contained" color="primary" onClick={onHello}>
          Hello, {name}
        </Button>
        { showAlert && <AlertDialog title="Hello World" text={`Hello, ${name}`} open={showAlert} onClose={onCloseHello}></AlertDialog> }
      </div>
      <MyTable />
      <MyList items={['Alice', 'Bob', 'Cathy']} />
    </div>
  )
};

const MyList = ({items}) => {
  return (
    <div className="list-container">
      { !items ?
        <Card>
          <CardContent>
            <Typography gutterBottom sx={{ color: 'text.secondary', fontSize: 14 }}>
              No items found.
            </Typography>
            <Typography variant="body2">
              Set the items in the property of the MyList element.
            </Typography>
          </CardContent>
        </Card>
      :
        <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }} component={Card}>
          { items.map((item, i) => {
            return (
              <ListItem key={i + 1}>
                <ListItemAvatar>
                  <Avatar>
                  </Avatar>
                </ListItemAvatar>
                <ListItemText primary={item} secondary={i + 1} />
              </ListItem>
            )
          })}
        </List>
      }
    </div>
  );
}

const MyTable = () => {
  const [entries, setEntries] = useState([]);
  
  useEffect(() => {
  	const populateData = async() => {
    	const data = [
      	'one',
        'two',
        'three'
      ];
      setEntries(data);
    };
    
    populateData();
  }, []);
  
  const render = (
  <div>
    <div className="table-container">
      <TableContainer component={Paper}>
        <TableHead>
          <TableRow>
            <TableCell scope="col">
              #
            </TableCell>
            <TableCell scope="col">
              Text
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          { entries.map((item, i) => {
            return (
              <TableRow key={i + 1}>
                <TableCell scope="row">{i + 1}</TableCell>
                <TableCell>{ item }</TableCell>
              </TableRow>
            )
          }) }
        </TableBody>
      </TableContainer>
    </div>
   </div>
  );
  
  return (
    <div className="table-parent-container">
      {render}
    </div>
  );
};

const AlertDialog = ({title, text, open, onClose}) => {
  return (
    <React.Fragment>
      <Dialog
        open={open}
        onClose={onClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {title}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {text}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose} autoFocus>
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(<HelloWorld name="Alice" />);

style.css

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.table-container {
  margin-top: 25px;
  width: 200px;
}

.table-container .MuiTableCell-head {
  width: 100%;
}

.list-container {
  margin-top: 25px;
}