【React + Material-UI入門】カッコいいデザインを秒速で作成

import HomeRoundedIcon from '@material-ui/icons/HomeRounded';

export default function App() {
  return (
    <>
    <HomeRoundedIcon />
    </>
  );
}

import {Button} from '@material-ui/core';

export default function App() {
  return (
    <>
    <Button variant="contained">
      おにちゃん塾でmaterial-ui学習
    </Button>
    </>
  );
}

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const useStyle = makeStyles ({
  tableContainer: {
    width: 1000,
    justifyContent: 'center'
  },
  table: {
    minWidth: 650,
  }
});

function LanguageData(language, level, understand) {
  return {language, level,  understand};
}

const tablerows = [
  LanguageData('HTML', 1, 10),
  LanguageData('CSS', 3, 9),
  LanguageData('JavaScript', 6, 5),
  LanguageData('PHP', 8, 3)
];

export default function App() {
  const classs = useStyle();
  return(
    <TableContainer component={Paper} className={classs.tableContainer}>
      <Table className={classs.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>プログラミング言語</TableCell>
            <TableCell>難易度</TableCell>
            <TableCell>理解度</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
        {tablerows.map((row) => (
            <TableRow>
              <TableCell>{row.language}</TableCell>
              <TableCell >{row.level}</TableCell>
              <TableCell>{row.understand}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )
}