npm create vite@latest pw_test01 -- --template react-ts
cd pw_test01
npm install
npm install react-router-dom
npm install @mui/material @emotion/react @emotion/styled

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './Login';
import DashBoard from './DashBoard';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="dashboard" element={<DashBoard />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { AppBar } from '@mui/material';
import { Stack } from '@mui/material';
import { Typography } from '@mui/material';
import { Button } from '@mui/material';
import { TextField } from '@mui/material';
import { useNavigate } from 'react-router-dom';

function Login() {

  const navigate = useNavigate();

  return (
    <Stack margin={2} spacing={2} height={600}>
      <AppBar><Typography fontSize={20} margin={1}>ログイン</Typography></AppBar>
      <TextField label="ユーザー名" size='small'></TextField>
      <TextField label="パスワード" size='small'></TextField>
      <Button id="login_button" variant='contained' onClick={() => navigate('/dashboard')}>Login</Button>
    </Stack>
  )
}

export default Login

import {useState} from 'react';
import { AppBar } from '@mui/material';
import { Stack } from '@mui/material';
import { Typography } from '@mui/material';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import Radio from '@mui/material/Radio';
import Button from '@mui/material/Button';
import RadioGroup from '@mui/material/RadioGroup';
import TextField from '@mui/material/TextField';

function DashBoard() {
  const [age, setAge] = useState('');
  const [gender, setGender] = useState('other');
  const [msg, setMessage] = useState('');

  const handleClick = () => {
    setMessage(`Clicked ${age}歳 ${gender}`);
  };

  const handleRadio = (event: SelectChangeEvent) => {
    setGender(event.target.value as string);
  };

  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value as string);
  };

  return (
    <Stack margin={2} spacing={2} height={600} width={300}>
      <AppBar><Typography fontSize={20} margin={1}>ダッシュボード</Typography></AppBar>
      <Stack>
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Age</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={age}
            label="Age"
            onChange={handleChange}
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </Stack>
      <Stack>
      <FormControl>
        <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
        <RadioGroup
          aria-labelledby="demo-radio-buttons-group-label"
          defaultValue="female"
          name="radio-buttons-group"
          value={gender}
          onChange={handleRadio}
        >
          <FormControlLabel value="female" control={<Radio />} label="Female" />
          <FormControlLabel value="male" control={<Radio />} label="Male" />
          <FormControlLabel value="other" control={<Radio />} label="Other" />
        </RadioGroup>
      </FormControl>
      </Stack>
      <Button variant='contained' onClick={handleClick}>登録</Button>
      <TextField label="結果" value={msg}></TextField>
    </Stack>
  )
}

export default DashBoard