Erstellen Sie ein elegantes Anmelde- und Registrierungsformular auf React

Blog

Erstellen Sie ein elegantes Anmelde- und Registrierungsformular auf React

Einstieg

Wenn Sie React noch nicht kennen oder mit den meisten Aspekten von React noch nicht wirklich erfahren sind, müssen Sie sich möglicherweise mit der Gestaltung von Benutzeroberflächen auf React vertraut machen auf React verwenden wir die create-react-app für eine einfache Einrichtung und Projektkonfiguration, damit wir schnell loslegen können.

Die besten Kerzenzauber vor Gericht

Sie können den vollständigen Quellcode der Anwendung daraus abrufen Github-Repo.

Vielleicht möchten Sie die CSS-Style-Dateien aus dem Github Repo greifen, um die Nachverfolgung zu erleichtern

Wenn Sie SASS in Ihrer von Create-React-App generierten Anwendung verwenden möchten, müssen Sie Node Sass als Abhängigkeit installieren und die Dateinamenerweiterung des Stils in eine der beiden (.sass|.scss) ändern.

npm install node-sass --save-dev

Login- und Registrierungsbox erstellen

Login- und Register-Boxen werden separate Komponenten sein, so dass wir sie später leicht manipulieren und je nach Anwendungsstatus entscheiden können, welche gerendert werden soll oder nicht. Außerdem wird es viel einfacher, coole Animationen beim Übergang zwischen den Zuständen anzuwenden.

Erstellen Sie also einen Ordner components/ in src/ und legen Sie darin den Ordner login/components ab, der die Anmeldung enthält und eigenständige Komponenten registriert.

/* login.jsx */ import React from 'react'; import loginImg from '../../login.svg'; export class Login extends React.Component { constructor(props) { super(props); } render() { return ( Login Username Password Login ); } }

Stellen Sie außerdem sicher, dass Sie sich das in diesem Beispiel verwendete Anmeldelogo schnappen. Sie können es neben vielen anderen Open-Source-SVG-Illustrationen von ausziehen

Ich werde es unter src/login.svg ablegen.

Sie können jede andere Struktur verwenden, um nutzlose Inhalte je nach Bedarf hinzuzufügen oder aus dem Anmeldeformular zu entfernen.

Für die Login-Klassenkomponente rendert sie einen einfachen Container und ein Formular, in dem der Stil in login/style.scss enthalten ist

Wir müssen auch die Register.jsx setzen.

/* Register.jsx */ import React from 'react'; import loginImg from '../../login.svg'; export class Register extends React.Component { constructor(props) { super(props); } render() { return ( Register Username Email Password Register ); } }

Wir mussten nur die für den Registrierungsprozess hinterlegte E-Mail hinzufügen.

Lassen Sie uns nun den Stil für die Anmelde-/Registrierungskomponenten erstellen.

.base-container { width: 100%; display: flex; flex-direction: column; align-items: center; .header { font-size: 24px; font-family: 'Open Sans', sans-serif; } .content { display: flex; flex-direction: column; .image { width: 21em; img { width: 100%; height: 100%; } } .form { margin-top: 2em; display: flex; flex-direction: column; align-items: center; .form-group { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; label { font-size: 20px; } input { margin-top: 6px; min-width: 18em; height: 37px; padding: 0px 10px; font-size: 16px; font-family: 'Open Sans', sans-serif; background-color: #f3f3f3; border: 0; border-radius: 4px; margin-bottom: 31px; transition: all 250ms ease-in-out; &:hover { //background-color: #ffffff; //box-shadow: 0px 0px 14px 0.3px #0e81ce96; } &:focus { outline: none; box-shadow: 0px 0px 12px 0.8px #3474dbb2; } } } } } .footer { margin-top: 3em; } }

Das Beste an SASS oder jedem anderen Präprozessor ist, dass Sie verschachtelte untergeordnete Elemente verwenden können, um sicherzustellen, dass nur auf das untergeordnete Element unter einem angegebenen übergeordneten Element der Stil angewendet wird. Dies kann jedoch auch gefährlich sein, wenn Sie versuchen, benutzerdefinierte Stilnamen auf Elemente anzuwenden, die nicht der verschachtelten Struktur entsprechen.

Wir haben auch Flex-Box verwendet, um Kinder sowohl vertikal als auch horizontal entlang der X- und Y-Achse auszurichten, da wir den Login-Box-Container (Basiscontainer-Kinder) vollständig zentrieren müssen.

Versuchen wir nun, die Anmelde- und Registrierungskomponenten mit der ES6-Reexportierungsleistung erneut zu exportieren, damit wir sie problemlos aus App.jsx importieren können

Also einfach index.tsx unter login/ erstellen und login/register von dort erneut exportieren.

/* index.tsx */ import './style.scss'; //Import and Re-export Login/Register Components export { Login } from './login'; export { Register } from './register';

Status rendern und ändern

Jetzt werden wir unter App.jsx die Login/Admin-Komponenten rendern und wir müssen den Zustand optimieren, um einen animierten Übergang zwischen beiden Komponenten anzuwenden.

/* App.jsx */ import React from 'react'; import './App.scss'; import { Login, Register } from './components/login/index'; class App extends React.Component { constructor(props) { super(props); this.state = { isLogginActive: true }; } render() { const { isLogginActive } = this.state; const current = isLogginActive ? 'Register' : 'Login'; return ( (this.container = ref)}> {isLogginActive && ( (this.current = ref)} /> )} {!isLogginActive && ( (this.current = ref)} /> )} ); } }

Wir verwenden den isLogginActive-Zustand, um zu überprüfen, ob die Anmeldekomponente derzeit gerendert wird oder nicht (die Registrierungskomponente wird gerendert), damit wir zwischen Anmelde- und Registrierungskomponenten wechseln können.

Wir verweisen auch auf das Container-Div, damit wir es später leicht verwenden können, um einen coolen Übergang zwischen dem Wechsel von der Anmeldung zur Registrierung und umgekehrt anzuwenden.

Umschalten mit Animation

Wir müssen die rechte Komponente hinzufügen, die es uns ermöglicht, zwischen den beiden Zuständen der Anmelde-/Registrierungskomponenten umzuschalten und auf ihren coolen Bewegungsübergang anzuwenden.

Erstellen wir also einen einfachen RFC (React Functional Component).

/* App.jsx */ /*We also add custom container ref to pass ref to the App Component so we can easily manipulate the right-side container*/ const RightSide = props => { return ( {props.current} ); };

Wir übergeben die aktuelle Requisite, die entweder Login oder Register enthält, als nächsten Zustand (Komponente), in den wir übergehen möchten.

... render() { const { isLogginActive } = this.state; const current = isLogginActive ? 'Register' : 'Login'; return ( (this.container = ref)}> {isLogginActive && ( (this.current = ref)} /> )} {!isLogginActive && ( (this.current = ref)} /> )} (this.rightSide = ref)} /> ); } ...

Wir erkennen den Strom (die nächste Komponente, zu der wir wechseln möchten), indem wir einfach auf isLogginActive schauen.

Außerdem legen wir containerRef so fest, dass es die Container-Ref auf der rechten Seite der App-Klasse enthält.

Jetzt müssen wir das Click-Ereignis im rechten Container erkennen, damit wir die andere Komponente umschalten können, indem wir einen coolen Übergang anwenden.

Fügen Sie also eine neue Methode zur App-Klasse hinzu, die den Klick verarbeitet, der auf der rechten Komponente auftritt (stellen Sie sicher, dass das onClick-Ereignis innerhalb der Komponente übergeben wird, da sonst der Ereignis-Listener nicht registriert wird).

changeState() { //ES6 Object Destructuring const { isLogginActive } = this.state; //We togglet component classes depending on the current active state if (isLogginActive) { //Right side for login this.rightSide.classList.remove('right'); this.rightSide.classList.add('left'); } else { //Left side for Register this.rightSide.classList.remove('left'); this.rightSide.classList.add('right'); } //Of course we need to toggel the isLogginActive by inversing it's previous state this.setState(prevState => ({ isLogginActive: !prevState.isLogginActive })); }

Wir prüfen einfach den aktuellen aktiven Status, der entweder Loggin ist aktiv oder Registerkomponente aktiv ist und wir wenden benutzerdefinierte Klassen an, damit die rightSide-Komponente benutzerdefinierte Stile und Übergangsanimationen anwenden kann. Sie können die App.scss für weitere Informationen zum angewendeten Stil überprüfen .

Und vor allem müssen wir sicherstellen, dass wir den aktuellen Zustand umschalten, damit wir ihn abhängig vom vorherigen Zustandswert invertieren.

Stellen Sie abschließend sicher, dass Sie das Click-Ereignis an die aktuelle Methode binden.

... (this.rightSide = ref)} onClick={this.changeState.bind(this)} /> ...

Stellen Sie sicher, dass Sie den aktuellen Klassenkontext binden.

und der Hook onComponentWillMount legt einen Standardwert fest.

componentDidMount() { //Add .right by default this.rightSide.classList.add('right'); }

Speichern Sie die Seite und laden Sie sie erneut, wenn Sie den coolen Übergang beim Umschalten zwischen den Zuständen abspielen sollten.

#react-js #web-entwicklung #javascript

www.youtube.com

Erstellen Sie ein elegantes Anmelde- und Registrierungsformular auf React

In diesem React.js-Tutorial werden wir den Prozess der Erstellung eines eleganten Anmelde-/Registrierungsformulars auf React durchgehen. Wir verwenden die create-react-app für eine einfache Einrichtung und Projektkonfiguration, damit wir schnell loslegen können. Wenn Sie neu bei React sind oder mit den meisten Aspekten von React noch nicht wirklich erfahren sind, müssen Sie sich möglicherweise mit dem Entwerfen von Benutzeroberflächen auf React vertraut machen.