Frontend Flashcards
Was ist ein DOM?
DOM steht für Document Object Model. Es ist eine Programmierschnittstelle (API) für HTML- und XML-Dokumente und stellt die Struktur eines Dokuments als Baum dar, in dem jede Komponente (Tag, Attribut, Text usw.) als Objekt repräsentiert wird. Das DOM ermöglicht es Programmen, auf die Struktur, den Stil und den Inhalt von Webseiten zuzugreifen und sie zu manipulieren.
Mit dem DOM können Entwickler auf ein HTML- oder XML-Dokument zugreifen, es ändern, Elemente hinzufügen oder entfernen, und auf Benutzeraktionen reagieren. Die Änderungen, die am DOM vorgenommen werden, werden direkt auf die angezeigte Webseite angewendet, was die dynamische Aktualisierung von Inhalten und die Interaktion mit Benutzern ermöglicht.
In Webentwicklungskontexten wird JavaScript häufig verwendet, um auf das DOM zuzugreifen und es zu manipulieren.
Was sind Komponenten
Komponenten sind wiederverwendbare und eigenständige Einheiten, die eine Benutzeroberfläche repräsentieren. Jede Komponente hat ihre eigenen Funktionen und Daten, ist unabhängig voneinander und kann in verschiedenen Teilen der Anwendung wiederverwendet werden. Die Struktur von React-Anwendungen wird durch das Zusammenfügen und Verschachteln dieser Komponenten erstellt, was zu einer modularen und gut organisierten Codebasis führt.
Was sind Klassen?
In der Programmierung bezieht sich der Begriff “Klassen” auf eine Vorlage oder einen Bauplan, der zur Erstellung von Objekten verwendet wird. Klassen sind grundlegend für die objektorientierte Programmierung (OOP), einem Paradigma, das darauf abzielt, Programme durch die Modellierung von Objekten und ihrer Interaktion zu strukturieren.
Hier sind einige Schlüsselkonzepte in Bezug auf Klassen:
- Objekte: Klassen dienen als Baupläne für die Erstellung von Objekten. Ein Objekt ist eine Instanz einer Klasse und repräsentiert eine bestimmte Entität mit Eigenschaften (Attribute) und Verhalten (Methoden).
- Attribute: Klassen definieren Attribute, die die Eigenschaften eines Objekts beschreiben. Diese können zum Beispiel Variablen wie Name, Alter oder Farbe sein.
- Methoden: Klassen enthalten Methoden, die die Aktionen oder Operationen definieren, die auf den Objekten ausgeführt werden können. Methoden sind Funktionen, die in der Klasse definiert sind.
- Verkapselung: OOP fördert das Prinzip der Verkapselung, bei dem die internen Details einer Klasse vor dem externen Zugriff geschützt sind. Dies bedeutet, dass der Zugriff auf Attribute und Methoden durch speziell definierte Schnittstellen erfolgt.
- Vererbung: Klassen können von anderen Klassen erben, wodurch eine Hierarchie von Klassen entsteht. Die abgeleitete Klasse erbt Attribute und Methoden der Basisklasse und kann sie bei Bedarf erweitern oder überschreiben.
- Polymorphismus: OOP ermöglicht Polymorphismus, bei dem Objekte unterschiedliche Formen annehmen können. Dies ermöglicht Flexibilität und Erweiterbarkeit des Codes.
Was ist React und wie funktioniert es?
React ist eine JavaScript-Bibliothek für die Entwicklung von Benutzeroberflächen (UI), die von Facebook entwickelt wurde. Es ermöglicht die einfache Erstellung von wiederverwendbaren UI-Komponenten und wird häufig für den Aufbau von Benutzeroberflächen in Single-Page-Anwendungen (SPAs) eingesetzt.
Grundlegende Funktionsweise von React:
- Komponenten: Die Grundbausteine in React sind Komponenten. Diese repräsentieren wiederverwendbare Teile der Benutzeroberfläche, die in einer hierarchischen Struktur verschachtelt werden können. Jede Komponente kann ihre eigenen Eigenschaften (Props) und ihren internen Zustand (State) haben.
- Virtual DOM: React verwendet ein Konzept namens Virtual DOM (virtuelles DOM), um effizient Änderungen an der Benutzeroberfläche zu verwalten. Statt das tatsächliche DOM direkt zu ändern, erstellt React eine virtuelle Repräsentation davon im Speicher. Nach jeder Änderung vergleicht React den virtuellen DOM mit dem tatsächlichen DOM und führt nur die notwendigen Updates durch, um die Effizienz zu verbessern.
- Reconciliation (Abgleich): React führt einen Prozess namens Reconciliation durch, um die Änderungen zwischen dem virtuellen DOM und dem tatsächlichen DOM zu bestimmen. Es aktualisiert dann nur die Teile der Benutzeroberfläche, die geändert wurden, anstatt die gesamte Seite neu zu rendern.
- Einweg-Datenbindung: React verwendet eine Einweg-Datenbindung (one-way data binding), was bedeutet, dass Daten durch die Komponenten-Hierarchie in eine Richtung fließen. Dies fördert eine klare Datenflussrichtung und erleichtert das Debuggen.
- Komponentenlebenszyklus: React-Komponenten haben einen Lebenszyklus, der Ereignisse wie die Initialisierung, Aktualisierung und Zerstörung einer Komponente abdeckt. Entwickler können diese Lebenszyklusmethoden verwenden, um auf bestimmte Ereignisse zu reagieren.
- React Router: Für Single-Page-Anwendungen bietet React Router eine Navigation zwischen verschiedenen Seiten oder Ansichten, ohne die Seite neu zu laden.
Zusammengefasst bietet React eine effiziente Möglichkeit, Benutzeroberflächen zu erstellen und zu aktualisieren, indem es eine klare Struktur in Form von wiederverwendbaren Komponenten und einem Virtual DOM verwendet. Dies erleichtert die Entwicklung von reaktionsfähigen und wartbaren Webanwendungen.
Was macht React so effektiv/besonders?
React hat mehrere Eigenschaften, die es besonders effektiv und beliebt in der Entwicklung von Benutzeroberflächen machen:
- Virtual DOM: React verwendet ein Virtual DOM, das im Speicher existiert und als Zwischenschicht zwischen der Anwendungslogik und dem tatsächlichen DOM dient. Dies ermöglicht eine effiziente Aktualisierung des DOMs durch Minimierung von tatsächlichen DOM-Manipulationen und Reduzierung von Neuzeichnungen der Benutzeroberfläche.
- Komponentenbasierte Architektur: React fördert eine komponentenbasierte Architektur, bei der die Benutzeroberfläche in wiederverwendbare Komponenten aufgeteilt wird. Diese können unabhängig voneinander entwickelt, getestet und gewartet werden, was die Code-Wiederverwendbarkeit und -Lesbarkeit verbessert.
- Einweg-Datenbindung: React implementiert eine Einweg-Datenbindung, bei der Daten in einer klaren Richtung durch die Komponenten-Hierarchie fließen. Dies fördert einen klaren Datenfluss und erleichtert das Debuggen und Verstehen des Codes.
- JSX-Syntax: React verwendet JSX, eine Syntaxerweiterung von JavaScript, die das Schreiben von XML-ähnlichem Code in JavaScript ermöglicht. Dies erleichtert die Beschreibung von Benutzeroberflächen und macht den Code lesbarer.
- React Router: Die Integration von React Router ermöglicht die einfache Navigation in Single-Page-Anwendungen, ohne die Seite neu laden zu müssen. Dies trägt zur schnellen und nahtlosen Benutzererfahrung bei.
- Entwicklerwerkzeuge: React bietet leistungsstarke Entwicklerwerkzeuge, die die Inspektion und Analyse von Komponenten, deren Zuständen und Aktualisierungen erleichtern. Dies unterstützt Entwickler bei der Fehlersuche und Optimierung von Anwendungen.
- Aktive Community: React hat eine große und aktive Entwicklergemeinschaft, was bedeutet, dass es viele Ressourcen, Bibliotheken und Erweiterungen gibt. Die Community trägt zur ständigen Weiterentwicklung und Verbesserung von React bei.
Insgesamt ermöglicht React durch diese Eigenschaften eine effiziente Entwicklung von reaktionsfähigen, wartbaren und skalierbaren Benutzeroberflächen für Webanwendungen.
Was ist JSX?
JSX steht für JavaScript XML und ist eine Syntaxerweiterung für JavaScript. Es wird hauptsächlich von React verwendet, um die Beschreibung von Benutzeroberflächen zu erleichtern. JSX ermöglicht es, XML-ähnlichen Code in JavaScript zu schreiben, was die Erstellung von React-Elementen intuitiver und lesbarer macht.
Beispiel eines einfachen JSX-Ausdrucks:
```jsx
const element = <h1>Hello, JSX!</h1>;
~~~
In diesem Beispiel repräsentiert <h1>Hello, JSX!</h1> ein React-Element. Hier sind einige wichtige Punkte zu JSX:
-
Integration mit JavaScript: JSX wird in JavaScript eingebettet und ermöglicht die Verwendung von JavaScript-Ausdrücken innerhalb von JSX-Klammern
{}.jsx const name = "World"; const element = <h1>Hello, {name}!</h1>; -
React-Elemente: JSX wird in React-Elemente kompiliert. Das obige JSX-Beispiel wird zu:
javascript const element = React.createElement('h1', null, 'Hello, JSX!'); -
HTML-ähnliche Struktur: JSX ähnelt der Struktur von HTML, was die Erstellung von Benutzeroberflächen intuitiver macht.```jsx
const component = (<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>);
``` -
Attribute und Ereignisse: Wie in HTML können in JSX Elementen Attribute und Ereignisse hinzugefügt werden.
jsx const button = <button onClick={() => alert('Clicked!')}>Click me</button>;
JSX bietet eine klare und ausdrucksstarke Art, Benutzeroberflächen in React zu definieren, und wird von Entwicklern häufig genutzt, um den Code lesbarer und wartbarer zu gestalten. Es wird jedoch während des Build-Prozesses in reguläres JavaScript umgewandelt, da Browser JSX direkt nicht verstehen können.
Warum React und nicht Java Script ?
- Komponentenbasierte Entwicklung: React ermöglicht die Entwicklung von wiederverwendbaren UI-Komponenten. Dies fördert eine klare Strukturierung des Codes und erleichtert die Wartbarkeit, insbesondere in größeren Anwendungen.
- Effiziente Aktualisierungen mit dem Virtual DOM: React verwendet das Virtual DOM, um Änderungen effizient am tatsächlichen DOM vorzunehmen. Dies führt zu besserer Leistung und einer reaktionsschnelleren Benutzeroberfläche.
- Deklarative Syntax: Die deklarative Natur von React ermöglicht eine leichtere Beschreibung von UI-Komponenten und deren Zustand. Dies führt zu einem klareren und leichter verständlichen Code.
- React Router für Single-Page-Anwendungen: React Router erleichtert die Implementierung von Navigation in Single-Page-Anwendungen, was gut zu Flask als Backend passt, das API-Endpunkte bereitstellen kann, während React die Benutzeroberfläche steuert.
- Große Entwicklergemeinschaft: React hat eine umfangreiche und aktive Entwicklergemeinschaft, was bedeutet, dass es viele Ressourcen, Bibliotheken und Unterstützung gibt.
- Unterstützung für Server-Side Rendering (SSR): React ermöglicht es, Seiten serverseitig zu rendern, was insbesondere für die Leistung und Suchmaschinenoptimierung von Vorteil sein kann. Flask kann dabei helfen, die benötigten Daten bereitzustellen.
Es ist wichtig zu beachten, dass React nicht “anstatt von JavaScript” verwendet wird, sondern es ist eine JavaScript-Bibliothek. Die Frage könnte eher darauf abzielen, warum React als Frontend-Framework in dieser speziellen Anwendung verwendet wird, und die oben genannten Punkte bieten einige mögliche Antworten darauf.
Was wird eigentlich gerendert?
In React werden sogenannte React-Elemente in der virtuellen DOM-Hierarchie gerendert. Ein React-Element repräsentiert eine Beschreibung von dem, was auf der Benutzeroberfläche erscheinen soll. Es ist eine einfache JavaScript-Objektstruktur mit Informationen über den Typ des Elements, seine Eigenschaften (Props) und seine Kinder.
Wenn du in React etwas renderst, erstellst du im Grunde genommen React-Elemente und reichst sie an React weiter. React verwendet dann einen Prozess namens Reconciliation, um die Unterschiede zwischen dem aktuellen virtuellen DOM und dem vorherigen zu bestimmen und nur die notwendigen Änderungen im tatsächlichen DOM vorzunehmen.
Hier ist ein einfaches Beispiel:
```jsx
const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById(‘root’));
~~~
In diesem Beispiel wird ein einfaches React-Element (<h1>Hello, React!</h1>) erstellt und mithilfe von ReactDOM.render im tatsächlichen DOM gerendert. Das Element wird in einem HTML-Container mit der ID ‘root’ platziert.
Während der Ausführung von ReactDOM.render wird React den aktuellen Zustand des virtuellen DOMs mit dem vorherigen Zustand vergleichen und nur die notwendigen DOM-Änderungen vornehmen, um die gewünschte Benutzeroberfläche darzustellen.
Wie kann eine Komponente gerendert werden?
Komponenten werden in das DOM übersetzt
->Browser muss Anordnung der HTML-Elemente neu berechnen
->bei Verändern des States oder props oder bei Aufruf der render()
Im index.js: root von HTML
->render() ist eine Methode des react-dom packages
- generell: Prozess vom generieren von visuellen output aus Daten. Ja, deine Zusammenfassung ist im Großen und Ganzen korrekt. Hier sind einige Erläuterungen zu den von dir genannten Punkten:
-
Komponenten werden in das DOM übersetzt:
- Ja, React-Komponenten werden in HTML-Elemente übersetzt und in den DOM (Document Object Model) injiziert.
-
Browser muss Anordnung der HTML-Elemente neu berechnen:
- Richtig. Wenn sich der Zustand (State) einer Komponente ändert oder wenn neue Props übergeben werden, kann dies zu einer Aktualisierung der Benutzeroberfläche führen. Der Browser berechnet dann die neuen Anordnungen der HTML-Elemente.
-
Bei Veränderung des States oder Props oder bei Aufruf der
render():- Korrekt. Die
render()-Methode wird aufgerufen, wenn sich der Zustand einer Komponente ändert oder wenn ihr neue Props übergeben werden. Dadurch wird eine Aktualisierung der Ansicht ausgelöst.
- Korrekt. Die
-
Im index.js: Root von HTML:
- Ja, in der Regel wird die React-Anwendung in einem HTML-Dokument durch das DOM-Element mit der ID “root” (oder einem anderen benutzerdefinierten ID-Namen) platziert. Dieses Element fungiert als Wurzel (Root) für die React-Anwendung.
-
render()ist eine Methode des react-dom packages:- Ja, die
render()-Methode gehört zumreact-dom-Paket. Diese Methode wird verwendet, um eine React-Komponente in den DOM zu rendern.
- Ja, die
-
Generell: Prozess vom Generieren von visuellem Output aus Daten:
- Das ist eine präzise Zusammenfassung. Der React-Prozess beinhaltet das Generieren von visuellem Output (HTML) basierend auf Daten (State, Props) und der Struktur von React-Komponenten.
Insgesamt hast du die wichtigsten Aspekte des React-Renderprozesses gut erfasst!
Was macht Marshal_with_list?
marshal_with_list ist eine Funktion in Flask-RESTful, einem Erweiterungsmodul für Flask zur Entwicklung von RESTful-APIs in Python. Diese Funktion wird verwendet, um die Ausgabe einer Liste von Ressourcen in einem bestimmten Format zu definieren. Hier ist eine einfache Erklärung:
-
Definition der Ausgabe:
-
marshal_with_listwird verwendet, um das Ausgabeformat für eine Liste von Ressourcen zu definieren. Dies könnte JSON oder ein anderes Datenformat sein.
-
-
Beispiel:
- Angenommen, du entwickelst eine API, die eine Liste von Büchern aus einer Datenbank zurückgibt. Mit
marshal_with_listkönntest du das Ausgabeformat für diese Liste festlegen.
- Angenommen, du entwickelst eine API, die eine Liste von Büchern aus einer Datenbank zurückgibt. Mit
from flask_restful import Resource, marshal_with_list, fields
book_fields = {
‘title’: fields.String,
‘author’: fields.String,
‘published_date’: fields.DateTime
}
class BookResource(Resource):
@marshal_with_list(fields=book_fields)
def get(self):
# Hier holst du die Liste der Bücher aus der Datenbank
books = get_books_from_database()
return books
Hier wird marshal_with_list verwendet, um das Ausgabeformat der Liste von Büchern zu definieren, basierend auf den in book_fields definierten Feldern. Das stellt sicher, dass die API-Antwort das gewünschte Format hat.
Warum bekommen wir im Frontend den JSONs vom Backend zurück?
Das Zurückgeben von JSON (JavaScript Object Notation) im Frontend durch das Backend hat mehrere Gründe:
-
Leicht zu Parsen: JSON ist ein leicht lesbares und parsbares Datenformat. Da JavaScript nativ JSON unterstützt (durch
JSON.parse()undJSON.stringify()), wird es einfach, die empfangenen Daten im Frontend zu verarbeiten. - Sprachenunabhängigkeit: JSON ist sprachenunabhängig, was bedeutet, dass es von vielen Programmiersprachen verwendet werden kann. Dies ermöglicht die Interoperabilität zwischen verschiedenen Technologien. Das Backend kann in Python, Java, Ruby usw. geschrieben sein, während das Frontend in JavaScript läuft, und dennoch können beide problemlos JSON verstehen und austauschen.
- Kompakt und Effizient: JSON-Daten sind kompakt und effizient für die Datenübertragung über das Netzwerk. Sie haben eine einfache Struktur und verbrauchen weniger Bandbreite als andere Datenformate.
- Objektorientierte Repräsentation: JSON entspricht der objektorientierten Struktur von JavaScript. Objekte in JSON ähneln JavaScript-Objekten, was das Arbeiten mit den empfangenen Daten im Frontend intuitiv macht.
- RESTful APIs: Bei der Entwicklung von RESTful APIs (Representational State Transfer) ist es gängige Praxis, Daten zwischen Server und Client im JSON-Format auszutauschen. RESTful APIs verwenden standardmäßig das HTTP-Protokoll, und JSON eignet sich gut für die Repräsentation von Ressourcendaten.
- Einfache Fehlersuche: JSON-Daten können leicht auf Fehler überprüft werden. Wenn Sie die JSON-Daten im Browser anzeigen oder auf der Konsole ausgeben, sind sie in einer gut lesbaren Form, was die Fehlersuche und das Debuggen erleichtert.
Insgesamt ermöglicht die Verwendung von JSON eine reibungslose Kommunikation zwischen Frontend und Backend, unabhängig von den eingesetzten Technologien. Es ist eine flexible, weit verbreitete und gut unterstützte Möglichkeit, Daten zwischen verschiedenen Teilen einer Anwendung auszutauschen.
Wie ist der Komponenten Lifecycle?
Der Lebenszyklus einer React-Komponente umfasst drei Hauptphasen:
-
Mounting (Montieren):
-componentDidMount(): Wird nachdem die Komponente erfolgreich im DOM montiert wurde aufgerufen. Hier können Netzwerkanfragen oder Abonnements eingerichtet werden. -
Updating (Aktualisieren):
-componentDidUpdate(): Wird nach der Aktualisierung aufgerufen. Hier können Aktionen nach einer Aktualisierung durchgeführt werden. -
Unmounting (Demontieren):
-
componentWillUnmount(): Wird aufgerufen, bevor die Komponente aus dem DOM entfernt wird. Hier können Ressourcen freigegeben oder Abonnements gekündigt werden.
-
Es ist wichtig zu beachten, dass seit React 16.3 einige Lifecycle-Methoden als veraltet gelten und in zukünftigen Versionen möglicherweise nicht mehr unterstützt werden. Es wird empfohlen, auf React Hooks umzusteigen, insbesondere wenn du mit Funktionskomponenten arbeitest. Hooks wie useEffect können Lebenszyklusfunktionalitäten in Funktionskomponenten bereitstellen.
Was ist ein Prop?
In React bezeichnet “Props” (kurz für “Properties”) die Eigenschaften, die du einer React-Komponente übergeben kannst. Props sind eine Möglichkeit, Daten von einer übergeordneten (parent) Komponente an eine untergeordnete (child) Komponente weiterzugeben.
Props sind schreibgeschützt und können von der untergeordneten Komponente nicht verändert werden. Sie ermöglichen jedoch eine einfache und klare Möglichkeit, Daten zwischen Komponenten zu übertragen und machen React-Komponenten wiederverwendbar, da sie mit unterschiedlichen Daten konfiguriert werden können.
Was sind PropTypes?
PropTypes ist eine Funktionalität in React, die es ermöglicht, die erwarteten Typen der Props (Eigenschaften) einer Komponente zu definieren. Es handelt sich um eine Möglichkeit, die Typen der Daten zu überprüfen, die deine Komponente erhält, und damit sicherzustellen, dass die Daten die erwarteten Formate haben.
In einfacheren Worten: Mit PropTypes kannst du angeben, welche Art von Daten du für jede Prop in einer React-Komponente erwartest. Dadurch wird die Konsistenz der Daten, die durch die Komponente fließen, sichergestellt und auch die Lesbarkeit des Codes verbessert.
Hier ist ein einfaches Beispiel:
```jsx
import React from ‘react’;
import PropTypes from ‘prop-types’;
function MeineKomponente(props) {
return <p>Hallo, {props.name}!</p>;
}
MeineKomponente.propTypes = {
name: PropTypes.string.isRequired,
};
~~~
In diesem Beispiel wird durch PropTypes.string festgelegt, dass die name-Prop vom Typ String sein sollte, und durch isRequired, dass sie zwingend erforderlich ist. Falls jemand versucht, diese Komponente ohne eine name-Prop zu verwenden oder wenn die name-Prop nicht vom Typ String ist, wird eine Warnung in der JavaScript-Konsole angezeigt. Das hilft, Bugs frühzeitig zu erkennen.
Was ist ein State und was macht dieser genau?
In React bezieht sich der “State” auf ein spezielles Konzept, das verwendet wird, um die Daten zu verwalten, die sich im Laufe der Zeit ändern können. Der State in React ist eine JavaScript-Objekt, das Informationen über den aktuellen Zustand eines Components enthält. Wenn sich der State ändert, löst React eine Aktualisierung des UI aus, um die neuen Daten zu reflektieren, ohne die gesamte Seite neu zu laden.
Zum Beispiel:
```jsx
import React, { useState } from ‘react’;
function BeispielComponent() {
// Definiere einen State namens “counter” mit Anfangswert 0
const [counter, setCounter] = useState(0);
// Funktion, die den State ändert und eine Aktualisierung auslöst
const incrementCounter = () => {
setCounter(counter + 1);
};
return (
<div>
<p>Counter: {counter}</p>
<button onClick={incrementCounter}>Erhöhen</button>
</div>
);
}
~~~
In diesem Beispiel wird der State counter mit der Funktion useState erstellt. Die Funktion setCounter wird verwendet, um den Wert des Counters zu aktualisieren und eine Neuzeichnung des UI auszulösen.
