24. diel - Databázový klient v React - Komponent prihlasovacej stránky

V minulej lekcii, Databázový klient v React - Príprava autentizácie , sme si pridali autentizáciu užívateľov, aby nám každý nemohol databázu filmov editovať. Pridáme nový server a upravíme klienta.

V dnešnom React tutoriále si vytvoríme prihlasovaciu stránku, na ktorej sa prihlásime za novo registrovaného užívateľa. Tohto užívateľa tiež potom uvidíme vypísaného v záhlaví stránky vďaka pripravenému kontextu.

Komponent prihlasovacej stránky

Tvorba stránky s prihlasovacím formulárom bude veľmi podobná tvorbe tej s registráciou. V zložke src/ si vytvoríme novú podzložku login/. V tej potom vytvoríme nový súbor LoginPage.js.

Importy

Na začiatku súboru ako vždy prvýkrát importujeme potrebné komponenty a hooky:

import FlashMessage from "../components/FlashMessage";
import InputField from "../components/InputField";
import {useEffect, useState} from "react";
import {useSession} from "../contexts/session";
import {useNavigate} from "react-router-dom";
import {apiPost, HttpRequestError} from "../utils/api";

JSX

Na stránke bude opäť formulár s


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár eur

Došiel si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiovej sekcie.

Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel

Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš s Prevádzkovými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • Prístup k jednotlivým lekciám podľa spôsobu obstarania.
  • Kvalitné znalosti v oblasti IT.
  • Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.

Popis článku

Požadovaný článok má nasledujúci obsah:

V React tutoriále si vytvoríme prihlasovaciu stránku, na ktorej sa prihlásime za novo registrovaného užívateľa.
Článok pre vás napísal Martin Macura
Avatar
Aktivity