すべての項目1-React Hooks、ログインページ

📕React Hooks

反応素子は2種類ございます
クラス構成部品とピーク構成部品があります
両者の違いは以下の通り

Class Component

クラスコンポーネントには多くの機能があります
だからコードが長くて複雑です
しかもスピードが遅い

Functional Component

パッケージ構成部品は少量の機能を提供
だからコードは短くて簡単です
しかもスピードが速い
だから私たちは大体多くの種類の素子を使っています.
でも反応器でhookを更新しました
これにより、ファン構成部品で使用される機能が
使用可能
だから私はパンク素子で実現します.

📘ログインページ

まず、今ページを開くとログインページが表示されます.
現在のボタンをクリックしてページを移動することは実装されていません.
手動で/loginを追加してサイトアドレスを移動
このようにログインページに入ると、Eメール、パスワード、ログインボタンが表示されます.
CSSを追加して入力フォームを中央にする必要がありますが、まだ正確に
私は知らないので、コードしか持っていません.CSSは後で勉強しましょう.
LoginPage.jsに入るとdivラベル間に入力フォームを追加する必要があります
divラベルの横にスタイルをあげましょう

<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center',
    width: '100%', height: '100vh'}}>
      LoginPage
    </div>

こう書けばいい
これからの入力表を入れましょう.

import React from 'react'

function LoginPage() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}>
        <label>Email</label>
        <input type="email" value onChange />
        <label>Password</label>
        <input type="password" value onChange />

        <br />
        <button>
          Login
        </button>
      </form>
    </div>
  )
}

export default LoginPage

こんな感じでLoginPagejsを修正してWebサイトにアクセスすると、次のように表示されます.

しかし、何かを打ちたいなら、何の変化もありません.
私たちはValueonChangeで何かをするべきですが、私たちは前のReduxで
彼はページ内が変化すれば状態になると言った.
だからvalueにstateを入れるべきだ
EmailとPasswordの2つのstateを作成する必要があります

const  [state, setstate] = useState(initalState)

これはstateを生成するコードで、constの横にstateと書かれた部分を変えればいいです.
そして後ろの頭文字STATEは最初はどうやって展示されていましたか?
スペースに変更すればいい

import React, { useState } from 'react'

function LoginPage() {

  const  [Email, setEmail] = useState("")
  const  [Password, setPassword] = useState("")

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}>
        <label>Email</label>
        <input type="email" value={Email} onChange />
        <label>Password</label>
        <input type="password" value={Password} onChange />

        <br />
        <button>
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

このようにコードを変更してもまだ打てない
入力すると、onChangeというイベントが発生し、ステータスが変更されます.
Inputラベルのvalue変化の論理
だからonChangeにはアクティブなリスナーが必要です

import React, { useState } from 'react'

function LoginPage() {

  const  [Email, setEmail] = useState("")
  const  [Password, setPassword] = useState("")

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value)
  }
  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}>
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />

        <br />
        <button>
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

このようにハンドルを作って、保存して入力すると、タイプが見えます.
次に、データ移動のログインボタンを作成します.
まず、ボタンにsubmitタイプを入力し、
formタグにonSubmitを作成し、上のようにイベントハンドラを作成します.
次に、現在のステータスに含まれるコンテンツをコンソールに簡単に撮影します.

import React, { useState } from 'react'

function LoginPage() {

  const  [Email, setEmail] = useState("")
  const  [Password, setPassword] = useState("")

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value)
  }
  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
  }
  const onSubmitHandler = (event) => {
    event.preventDefault();
    console.log(Email)
    console.log(Password)
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}
        onSubmit={onSubmitHandler}>
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />

        <br />
        <button type="submit">
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

このように記入し、ボタンを押すと次のように見えます

私たちは前回データを交換したときにAxiosを使うと言いました.
EmailとPasswordを対象にデータを送信
その後Axiospostをサーバのindexとして使用します.jsで作成したログインAPIアドレスを使用
データを入れて送ることです.

import { response } from 'express'
import React, { useState } from 'react'

function LoginPage() {
  const  [Email, setEmail] = useState("")
  const  [Password, setPassword] = useState("")

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value)
  }
  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
  }
  const onSubmitHandler = (event) => {
    event.preventDefault();
    
    let body = {
      email: Email,
      password: Password
    }

    Axios.post('/api/users/login', body)
    .then(response)
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}
        onSubmit={onSubmitHandler}>
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />

        <br />
        <button type="submit">
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage

サーバのインデックス.jsファイルで作成したapiから見ると、ログインに成功すれば、
DBがユーザーを検索している場合は、タグを作成してCookieに送信します.
車に戻って、それを受け取って、私たちはさらなる処理が必要です.
ここでリデスを使います.
リデスを使う部分はどう使っても言葉では表現しにくいので、リンクで代用します.
上の動画を見て、ゆっくりフォローして、ログインしてみました.

このようにログインが正しい様子が見られます
そしてYouTube動画の最後の部分を見るとログインページに移動します
YouTube動画のようにするとプッシュ関連エラーが発生します

import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate('/')

この3種類を利用すれば、ログインページにアクセスできます
コード全文は以下に置く

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { loginUser } from '../../../_actions/user_action'


function LoginPage(props) {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const  [Email, setEmail] = useState("")
  const  [Password, setPassword] = useState("")

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value)
  }
  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
  }
  const onSubmitHandler = (event) => {
    event.preventDefault();
    
    let body = {
      email: Email,
      password: Password
    }

    dispatch(loginUser(body))
      .then(response => {
        if (response.payload.loginSuccess) {
          navigate('/')
        } else {
          alert('Error')
        }
    })
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column'}}
        onSubmit={onSubmitHandler}>
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />

        <br />
        <button type="submit">
          Login
        </button> 
      </form>
    </div>
  )
}

export default LoginPage