Beispiel-React-Karteikarten aus unserer App

Laden Sie unsere App aus dem App Store oder Google Play herunter, um mehr kostenlose Lernkarten zu erhalten, oder abonnieren Sie für Zugriff auf alle Lernkarten.

Was ist JSX und warum verwendet React es?

JSX ist eine Syntax-Erweiterung für JavaScript, die das Schreiben von HTML-Strukturen direkt im JavaScript-Code ermöglicht. Es ist eines der grundlegenden Elemente, auf denen React.js aufgebaut ist. Deshalb ist JSX im React-Ökosystem so entscheidend.

React verwendet JSX aus mehreren Gründen:

1. Code-Sauberkeit: JSX vereinfacht den Code-Entwicklungsprozess, indem es Entwicklern erlaubt, HTML-Strukturen direkt in JavaScript zu platzieren. Ohne JSX wäre die Erstellung von Benutzeroberflächen in React wesentlich komplizierter.

2. Benutzerfreundlichkeit: JSX lässt JavaScript wie HTML aussehen, was es für Entwickler, insbesondere solche, die bereits mit HTML vertraut sind, einfacher macht.

3. Sicherheit: JSX sichert Code automatisch gegen alle Arten von Angriffen, wie z.B. XSS (Cross-Site Scripting), durch einzigartige Elementeinbettung ab.

4. Leistung: JSX-Code ist für die Performance optimiert. Er wird in JavaScript-Syntax übersetzt, die von Webbrowsern schneller interpretiert wird.

Technisch gesehen ist JSX nichts anderes als syntaktischer Zucker für die `React.createElement(component, props, ...children)` Funktion.

Was ist das Virtual DOM und welche Vorteile bietet es?

Der virtuelle DOM oder das virtuelle Modell des Document Object Model (DOM) ist ein Konzept, das in bestimmten JavaScript-Bibliotheken wie React verwendet wird. Es handelt sich dabei um eine leichte Kopie des echten DOM, die im Speicher gehalten und unabhängig vom tatsächlichen DOM aktualisiert wird.

Die Hauptvorteile des virtuellen DOM sind:

1. Updates sind schneller. Der virtuelle DOM ist leichter und weniger Operationen laufen durch ihn als im Fall des echten DOM. Daraus resultiert, dass Update-Operationen schneller durchgeführt werden.

2. Reduziert die Belastung des tatsächlichen DOM. Alle Änderungen werden zuerst im virtuellen DOM verarbeitet, und dann werden durch einen Prozess namens Reconciliation ausgewählte Änderungen in den echten DOM eingeführt. Dies kann schwere, häufige DOM-Updates vermeiden.

3. Optimiert den Render-Prozess. React ist in der Lage, mit dem virtuellen DOM den effizientesten Weg zur Durchführung von Updates im echten DOM zu berechnen. Dies reduziert die Menge der notwendigen Operationen und verbessert die Render-Leistung.

4. Die Codierung wird einfacher. Entwickler können so codieren, als ob die gesamte Seite nach jeder Änderung neu gerendert würde. React kümmert sich um die Optimierung des Prozesses, so dass nur die minimale Menge an Arbeit ausgeführt wird, die notwendig ist, um den virtuellen und den echten DOM zu synchronisieren.

Was sind Props und wie werden sie in React-Komponenten übergeben?

Props (aus "properties") sind die Eigenschaften von Komponenten in der React-Bibliothek. Sie werden verwendet, um Daten von einer Komponente zur anderen zu übertragen. Diese Daten sind die Daten, die eine Komponente von der übergeordneten Komponente erhält und die normalerweise übertragen werden, wenn die Komponente aufgerufen wird.

Props sind unveränderlich, das heißt, eine Komponente sollte die Werte der von ihr empfangenen Props nicht ändern, sondern nur lesen.

Props werden auf eine einseitige Weise (von oben nach unten) übergeben, d.h. von übergeordneten Komponenten zu untergeordneten Komponenten. Es ähnelt der Übergabe von Attributen an HTML-Elemente.

Hier ist ein Beispiel für die Verwendung von Props:

function Welcome(props) {
  return <h1>Willkommen, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

In dem obigen Beispiel erstellen wir eine `Welcome`-Komponente, die einen `name`-Prop erwartet. Dann erstellen wir in der `App`-Komponente eine Instanz der `Welcome`-Komponente und übergeben einen `name`-Prop mit einem Wert von "Christopher". Als Ergebnis wird dort, wo wir die Welcome-Komponente verwendet haben, der Text "Willkommen, Christopher" angezeigt.

Erklären Sie, was der useEffect-Hook ist und wofür er verwendet wird.

Der useEffect-Hook in React.js wird verwendet, um Nebeneffekte in funktionalen Komponenten auszuführen. Nebeneffekte sind typischerweise Aktionen, die die Darstellung der Komponente nicht direkt beeinflussen, aber für ihre ordnungsgemäße Funktion notwendig sind, wie beispielsweise das Abrufen von Daten aus einer API, das Behandeln von Timern oder das Aufräumen von Ressourcen.

Er funktioniert ähnlich wie die Lebenszyklusmethoden der Komponente: componentDidMount, componentDidUpdate und componentWillUnmount in Klassenkomponenten.

Wir können es in drei verschiedenen Varianten verwenden:

1. Ohne ein zweites Argument: Der Code wird nach jedem Rendern aufgerufen.

useEffect(() => {
  console.log('Dies wird nach jedem Rendern ausgeführt');
});

2. Mit einem leeren Array als zweitem Argument: Der Code wird nur einmal nach dem ersten Rendern aufgerufen, analog zu componentDidMount.

useEffect(() => {
  console.log('Dies wird nur einmal ausgeführt, nach dem ersten Rendern');
}, []);

3. Mit einem Array von Abhängigkeiten als zweitem Argument: Der Code wird nach dem ersten Rendern und dann jedes Mal ausgeführt, wenn sich der Wert einer beliebigen Abhängigkeit im Array ändert.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Dies wird nach dem ersten Rendern ausgeführt und jedes Mal, wenn sich "count" ändert');
}, [count]);

Zusammenfassend ermöglicht der useEffect-Hook die Ausführung von Nebeneffekten nach oder während des Renderns von funktionalen Komponenten, was wiederum sauberen und verständlichen Code ermöglicht und dabei volle Funktionalität gewährleistet.

React-Karteikarten

Beispiel-React-Karteikarten aus unserer App

Was ist JSX und warum verwendet React es?

Was ist das Virtual DOM und welche Vorteile bietet es?

Was sind Props und wie werden sie in React-Komponenten übergeben?

Erklären Sie, was der useEffect-Hook ist und wofür er verwendet wird.

Jetzt herunterladen IT Flashcards