◾️はじめに

React の マテリアル デザイン フレームワークの代表格の
Material UI（MUI）について扱う

【１】Material UI（MUI）

* React の マテリアル デザイン フレームワーク

https://mui.com/material-ui/
templates
https://mui.com/material-ui/getting-started/templates/

【２】作業の流れ

１）Reactプロジェクト作成

* 今回は、Viteを使って、Reactプロジェクトを作成する
 => npm create vite@latest

Vite 〜入門編〜
https://dk521123.hatenablog.com/entry/2025/10/08/004137

２）ライブラリのインストール

npm install @mui/material @emotion/react @emotion/styled

３）UIコンポーネントを組み込む

* 今回は、src/App.tsxにButtonを組み込む

src/App.tsx

import * as React from 'react';
// ★注目
import { Button, Container, Typography } from '@mui/material';

function App() {
  const handleClick = () => {
    alert('Hello MUI + TypeScript!');
  };

  return (
    <Container
      maxWidth="sm"
      sx={{
        textAlign: 'center',
        marginTop: '100px',
      }}
    >
      <Typography variant="h4" gutterBottom>
        Hello World from React + MUI + TypeScript!
      </Typography>
      <Button variant="contained" color="primary" onClick={handleClick}>
        Click Me
      </Button>
    </Container>
  );
}

export default App;