Frontend Flashcards

1
Q

Was ist ein DOM?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Was sind Komponenten

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Was sind Klassen?

A

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:

  1. 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).
  2. Attribute: Klassen definieren Attribute, die die Eigenschaften eines Objekts beschreiben. Diese können zum Beispiel Variablen wie Name, Alter oder Farbe sein.
  3. 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.
  4. 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.
  5. 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.
  6. Polymorphismus: OOP ermöglicht Polymorphismus, bei dem Objekte unterschiedliche Formen annehmen können. Dies ermöglicht Flexibilität und Erweiterbarkeit des Codes.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Was ist React und wie funktioniert es?

A

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Was macht React so effektiv/besonders?

A

React hat mehrere Eigenschaften, die es besonders effektiv und beliebt in der Entwicklung von Benutzeroberflächen machen:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Was ist JSX?

A

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:

  1. 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>;
  2. React-Elemente: JSX wird in React-Elemente kompiliert. Das obige JSX-Beispiel wird zu:
    javascript
    const element = React.createElement('h1', null, 'Hello, JSX!');
  3. 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>);
    ```
  4. 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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Warum React und nicht Java Script ?

A
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Große Entwicklergemeinschaft: React hat eine umfangreiche und aktive Entwicklergemeinschaft, was bedeutet, dass es viele Ressourcen, Bibliotheken und Unterstützung gibt.
  6. 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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Was wird eigentlich gerendert?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Wie kann eine Komponente gerendert werden?

A

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:

  1. Komponenten werden in das DOM übersetzt:
    • Ja, React-Komponenten werden in HTML-Elemente übersetzt und in den DOM (Document Object Model) injiziert.
  2. 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.
  3. 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.
  4. 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.
  5. render() ist eine Methode des react-dom packages:
    • Ja, die render()-Methode gehört zum react-dom-Paket. Diese Methode wird verwendet, um eine React-Komponente in den DOM zu rendern.
  6. 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!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Was macht Marshal_with_list?

A

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:

  1. Definition der Ausgabe:
    • marshal_with_list wird verwendet, um das Ausgabeformat für eine Liste von Ressourcen zu definieren. Dies könnte JSON oder ein anderes Datenformat sein.
  2. Beispiel:
    • Angenommen, du entwickelst eine API, die eine Liste von Büchern aus einer Datenbank zurückgibt. Mit marshal_with_list könntest du das Ausgabeformat für diese Liste festlegen.

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Warum bekommen wir im Frontend den JSONs vom Backend zurück?

A

Das Zurückgeben von JSON (JavaScript Object Notation) im Frontend durch das Backend hat mehrere Gründe:

  1. Leicht zu Parsen: JSON ist ein leicht lesbares und parsbares Datenformat. Da JavaScript nativ JSON unterstützt (durch JSON.parse() und JSON.stringify()), wird es einfach, die empfangenen Daten im Frontend zu verarbeiten.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Wie ist der Komponenten Lifecycle?

A

Der Lebenszyklus einer React-Komponente umfasst drei Hauptphasen:

  1. Mounting (Montieren):
    - componentDidMount(): Wird nachdem die Komponente erfolgreich im DOM montiert wurde aufgerufen. Hier können Netzwerkanfragen oder Abonnements eingerichtet werden.
  2. Updating (Aktualisieren):
    - componentDidUpdate(): Wird nach der Aktualisierung aufgerufen. Hier können Aktionen nach einer Aktualisierung durchgeführt werden.
  3. 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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Was ist ein Prop?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Was sind PropTypes?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Was ist ein State und was macht dieser genau?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Erklären Sie das Konzept von Hooks.

A

In React sind Hooks Funktionen, die es Funktionalkomponenten ermöglichen, Zustand und andere React-Funktionen zu nutzen, die zuvor nur in Klassenkomponenten verfügbar waren. Sie wurden mit React 16.8 eingeführt. Hier sind einige wichtige Hooks:

  1. useState: Ermöglicht das Hinzufügen von State in Funktionalkomponenten. Zum Beispiel: const [state, setState] = useState(initialValue);
  2. useEffect: Erlaubt das Ausführen von Seiteneffekten in Funktionalkomponenten, z. B. Daten laden oder DOM-Manipulationen durchführen. Beispiel:
    jsx
    useEffect(() => {
      // Code, der nach dem Rendern ausgeführt wird
    }, [dependencies]);
  3. useContext: Ermöglicht den Zugriff auf den Wert eines React-Kontexts in Funktionalkomponenten.
  4. useReducer: Bietet eine alternative Möglichkeit, den State zu verwalten, indem Aktionen definiert werden, die den State modifizieren.
  5. useCallback und useMemo: Optimieren die Leistung von Funktionalkomponenten, indem verhindert wird, dass Funktionen oder Werte bei jedem Rendern neu erstellt werden.

Hooks ermöglichen eine effizientere und leserlichere Art, den Zustand und Lebenszyklus in React-Komponenten zu behandeln, insbesondere in Funktionalkomponenten, die zuvor keinen Zustand haben konnten.

17
Q

Wie kann er Browser JSX Code überhaupt verstehen?

A

Der Browser kann JSX-Code verstehen, indem er durch einen Prozess namens Transpilierung geht. JSX (JavaScript XML) ist eine von React eingeführte Syntaxerweiterung, die es ermöglicht, XML/HTML-ähnlichen Code in JavaScript zu schreiben.

Bevor der Code an den Browser gesendet wird, wird JSX in reguläres JavaScript umgewandelt. Dies geschieht mit Hilfe von sogenannten Transpilern wie Babel. Babel nimmt den JSX-Code und konvertiert ihn in äquivalenten JavaScript-Code, den der Browser dann interpretieren kann.

Der transformierte JavaScript-Code verwendet häufig Funktionen wie React.createElement(), um die JSX-Elemente in JavaScript-Objekte umzuwandeln. Diese Objekte repräsentieren dann die Struktur des virtuellen DOM (Document Object Model), was React dazu ermöglicht, effizientere Updates und Re-Renderings zu steuern.

Insgesamt ermöglicht diese Transpilierung, dass JSX-basierte React-Komponenten vom Browser verstanden und gerendert werden können.

18
Q

Welche Art von Applikation haben wir umgesetzt?

A

Wir haben eine Single Web Page Applikation umgesetzt. Dadurch, dass wir mit React die ganze Seite steuern, das heißt das, wenn wir z.B auf etwas klicken fordert es keine neue HTML-Datei aus dem Server, hier wird lediglich Js benutzt um die Sachen zu changen die für den User sichtbar sind. Bessere UI und User Experience.

19
Q

Was macht das getElementById();?

A

Die getElementById()-Methode ist eine JavaScript-Funktion, die in Verbindung mit dem Document Object Model (DOM) verwendet wird. Sie ermöglicht es, ein HTML-Element auf einer Webseite durch Angabe seiner eindeutigen ID zu referenzieren und darauf zuzugreifen.

Beispiel:
```javascript
var element = document.getElementById(‘meineId’);
~~~

In diesem Beispiel wird das HTML-Element mit der ID “meineId” gefunden und in der Variable “element” gespeichert, so dass Sie darauf zugreifen und es manipulieren können.

20
Q

Was ist das Frontend?

A

Das Frontend ist die Präsentationsschicht und bezieht sich auf den Teil einer Software oder Website, den Benutzer direkt erleben und mit dem sie interagieren. Es umfasst die Benutzeroberfläche, Designelemente und alles, was auf der Client-Seite ausgeführt wird, um die visuelle und funktionale Erfahrung für die Benutzer zu ermöglichen. Hier werden die Datensätze, die das Backend zur Verfügung stellt visuell dargestellt. Wird oft mit einem Framework dargestellt und erhält die Daten durch das Abfragen einer API.

21
Q

Was für verschiedene Komponenten gibt es und wie sind die den Bibliotheken beispielsweise angeordnet?

A

Es gibt einmal Klassenorientierte Komponenten und einmal Funktional Komponenten.
Klassenorientierte Komponenten sind „stateful Components“, da die Komponenten den State kontrollieren können und sie können auf alle React Lifecycle Methoden zugreifen.
Functional Component sind Java Script Funktionen. Hier muss man nicht mit this.state{} oder Lifecycle arbeiten, sondern mit Hooks wie usestate oder useEffect

22
Q

Wie ist die Präsentationsschicht aufgebaut?

A

Man codet die UI mit React, es gibt zwei separate Clients mit einem wird Editiert (Erstellen, Editieren, Löschen, Zuweisen) und mit dem anderen wird zum Auszeigen benutzt (List und ListEntry)
Client 1 = Das sich der Nutzer Registrieren kann, dass man hier Sachen Anlegen kann, etwas editieren oder löschen von Sachen oder Personen.
Verknüpfen von Personen, Modulen, Modulteilen, SPO oder nach einer SPO filtern
Client 2 = Ausgeben einer Liste von Modulen, Modulteilen oder einer Statistik

23
Q

Warum JSX?

A

Anstelle von künstlich separierten Technologien, bei denen Markup und Logik in getrennten Dateien liegen, trennt React die Dateien nach Zuständigkeit auf und bindet die daraus resultierenden Einheiten in sogenannten Komponenten (“components”) lose zusammen. Diese Komponenten enthalten sowohl Markup als auch Logik. Jeder valide JavaScript Ausdruck ist zwischen den geschweiften Klammern in JSX erlaubt.

24
Q

Was ist das Frontend?

A

Das Frontend ist die Präsentationsschicht (Presentation Layer): Diese Schicht ist für die Darstellung der Benutzeroberfläche verantwortlich. Hier erfolgt die Interaktion zwischen Benutzer und Anwendung, wobei Nutzereingaben getätigt werden. Das Frontend kümmert sich um die Präsentation von Daten und sorgt für eine ansprechende Benutzeroberfläche.

25
Q

Wie wird im DOM manipuliert?

A

Analyse des aktuellen DOM-Baums
->Auffinden der Stelle an der etwas passieren soll
->neue Daten an dieser Stelle einfügen/entfernen
-Elemente werden angesteuert über document.getElementById oder
document.querySelector(name des tags)
-hinzufügen/löschen: appendChild, removeChild

26
Q

Was ist index.js

A

-Einstiegspunkt einer React-Anwendung
-hier wird das root Element der Anwendung in das DOM eingefügt
->root Component wird gerendert (meistens <App>)
->wenn das Root Component gerendert wird, werden auch seine Kinder
gerendert
->Inhalt der Anwendung wird angezeigt</App>

27
Q

Was enthalten index.js und index.html jeweils?

A

In React-Anwendungen gibt es normalerweise eine klare Trennung zwischen der JavaScript-Logik und der HTML-Struktur. Hier ist der Zusammenhang zwischen index.js und index.html in einer typischen React-Anwendung:

  1. index.html:
    • Dies ist die Haupt-HTML-Datei deiner React-Anwendung.
    • Enthält das grundlegende HTML-Grundgerüst mit <head> und <body>.
    • In der Regel enthält es ein leeres <div>-Element mit einer bestimmten ID, z.B. <div id="root"></div>. Dies ist der Wurzelelement-Knotenpunkt, in den React die Anwendung einfügt.
  2. index.js:
    • Dies ist die Einstiegsdatei für deine React-Anwendung.
    • Enthält den Code, der deine React-Anwendung initialisiert und in den DOM einfügt.
    • Verwendet die ReactDOM.render()-Methode, um deine Hauptkomponente in das Wurzelelement der index.html einzufügen.
    • Hier könntest du auch andere Konfigurationen vornehmen, z.B. Service Worker-Registrierung, Routing-Konfiguration usw.

Beispielcode in index.js:

```jsx
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’; // Annahme: Deine Hauptkomponente heißt “App”

ReactDOM.render(

<React.StrictMode>
<App></App>
</React.StrictMode>

,
document.getElementById(‘root’)
);
~~~

In diesem Beispiel wird die App-Komponente in das Wurzelelement mit der ID “root” in der index.html eingefügt. Das ist der Ort, an dem deine React-Anwendung im DOM beginnt.

Zusammengefasst: index.html dient als Container für deine React-Anwendung und index.js initialisiert und fügt die React-Komponenten in dieses HTML-Gerüst ein.

28
Q

Was ist JSON?

A

Steht für JavaScript Object Notation und wird für den Austausch von Daten in Anwendungen verwendet
-basiert auf JS-Objekten, besteht aus Key-Value-Paaren
-programmiersprachen unabhängig
-JSON.parse(): von JSON zu JS
-JSON.stringify(): von JS zu JSON

29
Q

Was ist CORS?

A

Cross-Origin Ressource Sharing. Daten können von mehreren Servern geladen werden (Zugriff per HTTP-
Header)
Origin: Protokoll (https)
Anfragen auf verschiedene Domains gleichzeitig z.b. wenn in einem Web
Dokument zwei Bilder von zwei unterschiedlichen Domains/web Servern
geladen werden sollen
Meist aus Sicherheitsgründen unterbunden

30
Q

Was ist eine pure function?

A

Eine Pure Function ist eine Funktion, die bei gleichen Eingaben immer denselben Ausgabewert liefert und keine Seiteneffekte hat, d.h., sie verändert keinen externen Zustand.

31
Q

Was ist eine Promise?

A

Ein Promise ist ein Objekt, dass die eventuelle erfolgreiche Beendigung oder den Fehlerfall einer asynchronen Operation repräsentiert
› Im Wesentlichen ist ein Promise ein zurückgegebenes Objekt, an das Callbacks übergeben werden, anstatt Callbacks an eine Funktion zu übergeben
› Ein Promise repräsentiert einen Proxy für einen Wert, der nicht zwingend bekannt ist, wenn der Promise erstellt wird
› Erlaubt so die Assoziation zwischen Handler und dem Gelingen oder Fehlschlagen einer asynchronen Aktion
› Mit diesem Mechanismus können asynchrone Methoden in gleicher Weise Werte zurück geben wie synchrone Methoden:
› Anstelle des endgültigen Wertes wird ein Promise zurückgegeben, dessen Wert es zu einem Zeitpunkt in der Zukunft geben wird.

32
Q

Welche Promise Zustände gibt es?

A

› Initial ist ein Promise immer im Zustand pending
› Ein Promise wird fulfilled, wenn die asynchrone Funktion einen Wert zurückgeben möchte
› Ein Promise wird rejected, wenn die asynchrone Funktion einen Fehler zurückgeben möchte
› Ein weiterer Begriff beschreibt den Zustand settled (erledigt aber nicht zwingend erfolgreich)

33
Q

Was ist REST?

A

Representational State Transfer (REST) bezeichnet ein Programmierparadigma für verteilte Systeme
› Schwerpunkt Maschine-zu-Maschine Kommunikation
› REST kodiert keine Methodeninformation in den URI, da der URI Ort und Namen der Ressource angibt, nicht aber die Funktionalität, die der Web-Dienst zu der Ressource anbietet
› Zustandslosigkeit: Jede REST-Nachricht enthält alle Informationen, die für den Server bzw. Client notwendig sind, um die Nachricht zu verstehen
› Weder der Server noch die Anwendung soll Zustandsinformationen zwischen zwei Nachrichten speichern
› Die Bezeichnung „Representational State Transfer“ soll den Übergang vom aktuellen Zustand zum nächsten Zustand (state) einer Applikation verbildlichen
› Dieser Zustandsübergang erfolgt durch den Transfer der Daten, die den nächsten Zustand repräsentieren
› Vorteil: Skalierbarkeit eines Webservices z.B. über Lastverteilung

34
Q

Was ist ein State?

A

Zusätzlich zur Erfassung von Eingabedaten (this.props) auch die
Verwaltung der Statusdaten (this.state) einer Komponente
->bei Änderung des State wird gerendertes Markup aktualisiert
->aktueller Stand der Anwendung (bezogen auf ein Objekt)
->sollte immer ein JavaScript Objekt sein
->enthält Daten, die spezifisch für eine Komponente sind und sich ändern
können
->nur Daten, die auch gerendert werden oder wichtig für den Datenfluss
sind
->alles andere: kann als Variable definiert werden

35
Q

Was ist ein Ereignis?

A

› Ereignisse sind Aktionen oder Vorfälle, die in einer Applikation auftreten
› Das System erzeugt (oder “feuert”) ein Signal, wenn ein Ereignis eintritt (“Ereignisquelle”)
› Ereignisse werden erzeugt und „angemeldete“ Interessenten werden darüber informiert
› Daraufhin wird im sog. EventListener Code ausgeführt (“Ereignissenke”)
› Zur Anmeldung als Ereignisinteressent wird durch Aufruf einer Methode dem betreffenden Widget ein Objekt mit einer Schnittstelle zur Ereignisbehandlung übergeben.

36
Q

Phasen eines Ereignisses

A

› Moderne Skripte durchlaufen deshalb verschiedene Phasen:
› Das Dokument wird geladen
› JavaScript fügt Event-Handler an Elementknoten an
› Der Anwender bedient das Dokument und das Script reagiert darauf

37
Q

Erklären Sie das Ereignismodell.

A

› Event: Das Eintreten eines Ereignisses, auf welches das Programm reagieren muss (z.B. Tastendruck, Mausbewegung, etc…)
› Event-Quelle: Events werden immer dem DOM-Element zugeordnet, in dem sie entstehen: der “Event-Quelle”.
› Event-Objekt: Das Auftreten eines Events ist verbunden mit der Erzeugung eines Objektes. Dieses Objekt gehört einer der Unterklassen von Event an. Es enthält alle notwendigen Informationen über
das Event.
› Event-Handler: DOM-Elemente speichern eine Liste von EventListenern ab. Dies sind Objekte, die über das Auftreten eines Events „benachrichtigt“ werden sollen („Event-Senke“).
› Event-Action: Beim Auftreten eines Events veranlasst die Event-Quelle den Aufruf aller dem Event zugeordneten Funktionen. Der Aufruf dieser Funktionen ist dem Event selbst gleichzusetzen!

38
Q

Was ist eine Markup Language

A

Auszeichnungssprache -> Maschinen können Textinhalte gliedern und
formatieren -> maschinenlesbare Sprache
Beispiel: HTML (hypertext markup language) -> beschreibende language da
sie Inhalt einer Seite vorgibt