Informatik Webentwicklung – React Grundlagen und Komponenten

JSX ist eine Syntax-Erweiterung für JavaScript, die HTML-ähnlich aussieht, aber className statt class und camelCase-Attribute wie onClick verwendet.

Ein Element ist ein unveränderliches Objekt, das beschreibt, was gerendert wird. Eine Komponente ist eine Funktion oder Klasse, die Elemente zurückgibt.

Props (Properties) sind schreibgeschützte Eingabeparameter, die Daten von Parent- zu Child-Komponenten übergeben und Wiederverwendbarkeit ermöglichen.

Props werden von außen übergeben und sind immutable. State wird intern verwaltet, ist mutable über Setter-Funktionen und löst Re-Rendering aus.

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.

Nach jedem Render, wenn das Dependency-Array sich ändert. Leeres Array: nur nach erstem Render. Ohne Array: nach jedem Render.

Children ermöglicht es, beliebige Inhalte zwischen Öffnungs- und Schließtag einer Komponente einzufügen – für flexible Wrapper-Layouts wie Card oder Modal.

Mit ternärem Operator (condition ? <A /> : <B />), logischem UND (condition && <A />) oder frühzeitigen Return in der Komponente.

Keys helfen React, Elemente eindeutig zu identifizieren, minimale DOM-Operationen zu berechnen und State bei Listenänderungen korrekt zuzuordnen.

Event-Handler werden als camelCase-Props (onClick) an JSX-Elemente übergeben und erhalten ein synthetisches Event-Objekt mit standardisierter API.

Formularfelder, deren Wert über React-State gesteuert wird – onChange aktualisiert State, value-Prop spiegelt State wider. Single Source of Truth.

Wenn Stateful-Logik (useState, useEffect) in mehreren Komponenten wiederverwendet werden soll – Namenskonvention: useSomething.

componentDidMount → useEffect mit []. componentDidUpdate → useEffect mit Dependencies. componentWillUnmount → Cleanup-Funktion im useEffect-Return.

Browser-Erweiterung zur Inspektion der Komponenten-Hierarchie, Props, State und Hooks – ermöglicht Debugging der Render-Bäume und Performance-Analyse.