React + TypeScript でログイン画面を作成してみた

ReactとTypeScriptでログイン画面を作成しました。

手順

雛形作成

npxコマンドでReactのプロジェクトを作成します

npx create-react-app login-app --template typescript

ログイン画面作成

1.sample-app/src配下にLogin.tsxを作成します

touch sample-app/src/Login.tsx

2.ログイン機能を作成

Login.tsx

import React, { useState } from 'react';

interface LoginProps {
  onSubmit: (email: string, password: string) => void;
}

const Login: React.FC<LoginProps> = ({ onSubmit }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit(email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>ログイン</h1>
      <label>
        メールアドレス
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <label>
        パスワード
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </label>
      <button type="submit">ログイン</button>
    </form>
  );
};

export default Login;

解説
このコンポーネントは、onSubmitプロパティを受け取ります。
これは、ユーザがフォームを送信するときに呼び出される関数です。
useStateフックは、emailとpasswordの入力状態を管理するために使用されます。
handleSubmit関数は、フォームが送信されたときに呼び出され、emailとpasswordを引数にonSubmit関数を呼び出します。

3.App.tsxでLogin.tsxを参照するように設定

App.tsx

import React from 'react';
import Login from './Login';

const App: React.FC = () => {
  const handleLogin = (email: string, password: string) => {
    console.log('ログインされたメールアドレス:', email, 'とパスワード:', password);
  };

  return (
    <div>
      <Login onSubmit={handleLogin} />
    </div>
  );
};

export default App;

備考

CSSで装飾する場合は
1.sample-app/src配下にLogin.cssを作成

touch sample-app/src/Login.css

Login.css

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.logo {
  margin-bottom: 50px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 40px;
}

.form label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #5f6368;
}

.form input[type="email"],
.form input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-bottom: 1px solid #dadce0;
  font-size: 16px;
  color: #202124;
  background-color: transparent;
}

.form button[type="submit"] {
  background-color: #1a73e8;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  margin-top: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.form button[type="submit"]:hover {
  background-color: #0d47a1;
}

3.Login.tsxでstylesheetを読み込ませます。

Login.tsx

import './Login.css';

このような画面が出来上がります。