React-Projekt 04.04¶
1. Einleitung¶
Der erste Versuch unseres DVA-Praktikums führte uns in die Grundlagen von React JS ein. Unser Ziel war es, eine einfache HTML-Seite zu erstellen, die die Benutzer zur Eingabe eines Benutzernamens und Passworts auffordert. Hierbei lag der Fokus darauf, die grundlegenden Konzepte von React JS zu verstehen und anzuwenden.
Motivation, Aufgabenstellung¶
Die Motivation für diesen Versuch lag darin, ein Verständnis für die Funktionsweise von React JS zu entwickeln, einer der führenden JavaScript-Bibliotheken für den Aufbau benutzerfreundlicher Webanwendungen. Die Aufgabenstellung bestand darin, eine Benutzeroberfläche zu erstellen, die die Eingabe von Benutzerinformationen ermöglicht und die Grundlagen von React JS nutzt.
2. Grundlagen¶
([Abb.1]): React Logo
Was ist React?¶
React ist eine JavaScript-Bibliothek zur Entwicklung von Benutzeroberflächen. Sie ermöglicht die Erstellung von benutzerdefinierten Webanwendungen mit einer komponentenbasierten Architektur. React wurde von Facebook entwickelt und erstmals im Jahr 2013 veröffentlicht. Seitdem hat es sich zu einem der beliebtesten Frameworks in der Webentwicklung entwickelt und wird von einer großen Community unterstützt.
Architektur von React¶
Die Architektur von React basiert auf dem Konzept der komponentenbasierten Entwicklung. Eine React-Anwendung besteht aus einer Hierarchie von Komponenten, die jeweils eine spezifische Funktionalität implementieren. Jede Komponente besteht aus einer ‚render()-Methode, die JSX (JavaScript XML) verwendet, um die Struktur der Benutzeroberfläche zu definieren. Mehr zu React kann man in der Dokumentation ([REACT1]) oder in dem Tutorial ([REACT2]) nachlesen.
Komponenten und JSX¶
In React werden Benutzeroberflächen durch die Verwendung von Komponenten erstellt. Eine Komponente kann eine einfache Funktion oder eine Klasse sein, die JSX verwendet, um die Darstellung der Benutzeroberfläche zu definieren. JSX ist eine Syntaxerweiterung von JavaScript, die es ermöglicht, HTML-ähnliche Strukturen direkt in JavaScript-Code einzubetten.
Zustand und Props¶
React verwendet das Konzept von „Props“ (Eigenschaften) und „State“ (Zustand), um Daten zwischen Komponenten zu übertragen und den Zustand der Anwendung zu verwalten. Props sind Parameter, die von Elternkomponenten an ihre Kindkomponenten übergeben werden, während der Zustand von einer Komponente intern verwaltet wird und sich während der Lebensdauer der Komponente ändern kann.
Routing¶
Für die Navigation zwischen verschiedenen Ansichten und Komponenten in einer Single-Page-Anwendung können Sie in React eine Routing-Bibliothek wie React Router verwenden. Diese ermöglicht es, URLs mit bestimmten Komponenten zu verknüpfen und die Anwendungszustände zu verwalten.
<BrowserRouter>
<Routes>
<Route index element = {<LoginPage></LoginPage>}></Route>
<Route path='/register' element = {<RegisterPage></RegisterPage>}></Route>
</Routes>
</BrowserRouter>
3. Versuchsdurchführung¶
Vorbereitung¶
Installation von Node.js und npm zur Verwaltung von Paketen. .. code-block:
sudo apt install nodejs
Erstellung eines neuen React-Projekts mit Create React App. .. code-block:
npx create-react-app <appname>
Erstellung einer Komponente für das Benutzerformular. Konfiguration der Zustandsverwaltung für Benutzereingaben. Implementierung der Validierung für Benutzername und Passwort. Styling der Benutzeroberfläche mit CSS.
Durchführung¶
Implementierung der Komponenten für das Benutzerformular unter Verwendung von JSX. Festlegung des Zustands der Benutzereingaben und Aktualisierung bei Änderungen. Implementierung der Validierungslogik, um sicherzustellen, dass Benutzername und Passwort korrekt eingegeben werden. Testen der Benutzeroberfläche durch Eingabe von verschiedenen Benutzernamen und Passwörtern.
Ergebnisse¶
Wir konnten erfolgreich eine HTML-Seite erstellen, die es Benutzern ermöglicht, ihren Benutzernamen und ihr Passwort einzugeben. Die Benutzeroberfläche war ansprechend gestaltet und reagierte dynamisch auf Benutzereingaben. Die Validierung funktionierte wie erwartet und gab Fehlermeldungen aus, wenn ungültige Informationen eingegeben wurden.
async function submitHandler(event){
event.preventDefault();
const form = document.getElementById("form");
if(!usernameInputRef.current || !passwordInputRef.current || !form){ //error handling
return;
}
const username = usernameInputRef.current.value //getting username from input form
const password = passwordInputRef.current.value //getting password from input form
form.reset();
try{ // fetching username and password from database
const response = await fetch(`${dataBaseUrl}/users/${username}.json`);
const user = await response.json();
if(!user){ //checking if user exists
throw(new Error());
}
if(user.password === password){ //checking if given password matched database password
setMessage("User:" + username + " logged in!");
}else{
throw(new Error());
}
}catch(error){ // error handling
setMessage("Wrong password or username");
}
}
Probleme¶
Am Anfang hatten wir Probleme, das React-Projekt einzurichten. Wir mussten die richtigen Pakete und Programme in der richtigen Version herunterladen. Schwierigkeiten ergaben sich bei der Datenbank. Wir benutzen die Firebase Realtime Database von Google. Zu Demonstrationszwecken wollten wir, dass jeder in die Datenbank schreiben und Daten aus ihr lesen kann. Dazu mussten wir die richtigen Policies aktivieren. Außerdem hatten wir Probleme mit Git, da wir für das erste Projekt auf einem Branch bestanden und es manchmal zu Merge-Konflikten kam.
4. Zusammenfassung¶
In diesem Versuch haben wir die Grundlagen von React JS kennengelernt und angewendet, um eine einfache Benutzeroberfläche zu erstellen. Wir konnten die Funktionsweise von Komponenten, Zustandsverwaltung und Validierung verstehen und anwenden.
Fazit, Tipps für spätere Teams¶
Verbringen Sie genügend Zeit mit der Einarbeitung in die Grundlagen von React JS, insbesondere in Bezug auf Komponenten und Zustandsverwaltung. Lesen Sie die offizielle React-Dokumentation und suchen Sie nach Tutorials, um sich mit bewährten Methoden vertraut zu machen. Nehmen Sie sich Zeit für das Debuggen und die Fehlerbehebung, insbesondere bei der Implementierung komplexerer Funktionen wie Validierung. Außerdem wäre es sinnvoll, mehrere Branches für das Projekt zu erstellen, damit es bei den Commits nicht zu Kollisionen kommt.
5. Literaturangaben¶
- REACT1
React Documentation: https://reactjs.org/docs/getting-started.html
- REACT2
React Tutorial von React Docs: https://reactjs.org/tutorial/tutorial.html
Abbildungen:
