Informatik Webentwicklung – React Grundlagen und Komponenten
Karteikarten zum Thema „Informatik“ · 15 Karten · von atrio. Beispiele: Was ist React? · Was ist JSX und wie unterscheidet es sich von HTML?
Karten
15 KartenWas ist React?
Rückseite
Eine JavaScript-Bibliothek von Meta für deklarative, komponentenbasierte Benutzeroberflächen mit virtuellem DOM für effiziente Updates.
Was ist JSX und wie unterscheidet es sich von HTML?
Rückseite
JSX ist eine Syntax-Erweiterung für JavaScript, die HTML-ähnlich aussieht, aber className statt class und camelCase-Attribute wie onClick verwendet.
Was ist der Unterschied zwischen einem React-Element und einer Komponente?
Rückseite
Ein Element ist ein unveränderliches Objekt, das beschreibt, was gerendert wird. Eine Komponente ist eine Funktion oder Klasse, die Elemente zurückgibt.
Wozu dienen Props in React?
Rückseite
Props (Properties) sind schreibgeschützte Eingabeparameter, die Daten von Parent- zu Child-Komponenten übergeben und Wiederverwendbarkeit ermöglichen.
Was unterscheidet State von Props?
Rückseite
Props werden von außen übergeben und sind immutable. State wird intern verwaltet, ist mutable über Setter-Funktionen und löst Re-Rendering aus.
Wie funktioniert der useState-Hook?
Rückseite
useState gibt ein Array zurück: aktuellen State-Wert und eine Setter-Funktion. Bei Aufruf des Setters plant React ein Re-Rendering mit dem neuen Wert.
Wann führt useEffect seine Callback-Funktion aus?
Rückseite
Nach jedem Render, wenn das Dependency-Array sich ändert. Leeres Array: nur nach erstem Render. Ohne Array: nach jedem Render.
Wie nutzt man die children-Prop für Komponenten-Komposition?
Rückseite
Children ermöglicht es, beliebige Inhalte zwischen Öffnungs- und Schließtag einer Komponente einzufügen – für flexible Wrapper-Layouts wie Card oder Modal.
Wie realisiert man bedingtes Rendering in JSX?
Rückseite
Mit ternärem Operator (condition ? <A /> : <B />), logischem UND (condition && <A />) oder frühzeitigen Return in der Komponente.
Warum braucht React beim Listen-Rendering einen key?
Rückseite
Keys helfen React, Elemente eindeutig zu identifizieren, minimale DOM-Operationen zu berechnen und State bei Listenänderungen korrekt zuzuordnen.
Wie behandelt man Events wie onClick in React?
Rückseite
Event-Handler werden als camelCase-Props (onClick) an JSX-Elemente übergeben und erhalten ein synthetisches Event-Objekt mit standardisierter API.
Was sind Controlled Components bei Formularen?
Rückseite
Formularfelder, deren Wert über React-State gesteuert wird – onChange aktualisiert State, value-Prop spiegelt State wider. Single Source of Truth.
Wann erstellt man einen Custom Hook?
Rückseite
Wenn Stateful-Logik (useState, useEffect) in mehreren Komponenten wiederverwendet werden soll – Namenskonvention: useSomething.
Wie bildet man Klassen-Lifecycle-Methoden mit Hooks ab?
Rückseite
componentDidMount → useEffect mit []. componentDidUpdate → useEffect mit Dependencies. componentWillUnmount → Cleanup-Funktion im useEffect-Return.
Wofür sind React DevTools nützlich?
Rückseite
Browser-Erweiterung zur Inspektion der Komponenten-Hierarchie, Props, State und Hooks – ermöglicht Debugging der Render-Bäume und Performance-Analyse.