反応:useStateプレビュー

import {useState} from 'react';
import {Page, LoginContainer, Title, Input, Waring, Button, Password} from '../../styles/LoginStyle.js'
function LoginPage(){

  const[email, setEmail] = useState();
  const[pw, setPw] = useState();
  
  const errorStyle = {
    border: '1px red'
  }
  
  function login(){
    if(!email.includes('@') || !email.includes('.'))
    {
     document.getElementById('waring').innerText = '이메일이 유효하지 않습니다';
     return;

    } else if(pw.length < 7) {
      alert('비밀번호가 유효하지 않습니다.');
      return;
    }
    console.log('Login');
    console.log(email);
    console.log(pw);
  }

  function emailChange(e){
    const temp = e.target.value;
    setEmail(temp);
  }
  function passwordChange(e){
    const temp = e.target.value;
    setPw(temp);
  }
  return(
    <>
    <Page>
    <LoginContainer>
    <Title>로그인</Title>
    <div>Email : <Input name= "email" type="text" onChange={emailChange}/></div>
    <div>Password : <Password name="password" type="password" onChange={passwordChange}/></div>
    <Waring id="waring"></Waring>
    <Button onClick={login}>login</Button>
    </LoginContainer>
    </Page>
    </>
  )
}
export default LoginPage;

useState

これは、電子メールの検証とパスワードの長さで検証する非常に簡単なコードです.
重要なのは、Hooks機能を導入し、関数コンポーネントでステータスを管理し、usState()関数を使用するときにステータスを管理できるようにすることです.
また、応答でオブジェクトを変更するときにオブジェクト(input aaa=valueなど)を直接変更すると、オブジェクトの不変性は保証されません.
既存のオブジェクトをコピーして新しいオブジェクトを更新することによってのみ、必要な部分がリフレッシュされます.

ログイン画面の作成

Emotionによるcss の実装
divでうまくやったか?
ボタンスタイル

問題

divの幅と高さはまだ不明です

ボタンのスタイルが正しくない

figmaとJafflin

正規表現

を学ぶ必要があります.