React Grundlagen

6 Kernkonzepte

Die wichtigsten React-Konzepte für die Entwicklung von Benutzeroberflächen: JSX · Funktionale Komponenten · Props · State · Events · Hooks React ist eine JavaScript-Bibliothek für den Aufbau von interaktiven Benutzeroberflächen. Diese Cheatsheet fasst die grundlegenden Konzepte zusammen, die Sie für den Einstieg benötigen.

JSX – JavaScript & HTML kombiniert

{ } · className · self-closing

function Greeting() { const name = "Welt"; return ( <div className="greeting"> Hallo { name }! </div> ); }

JSX ist eine Syntaxerweiterung für JavaScript, die es erlaubt, HTML-ähnlichen Code in JavaScript zu schreiben. Er wird von React verwendet, um die Struktur von Komponenten zu beschreiben.

Wichtige JSX-Regeln

Regel	Beschreibung
{ }	JavaScript-Ausdrücke in JSX einbetten
className	CSS-Klassen (statt class in HTML)
Self-closing	Tags ohne Inhalt: `<img />`
Ein Root-Element	JSX muss ein einzelnes Wurzelelement haben
Fragment	`<>...</>` für mehrere Elemente
camelCase	Attribute wie `onClick`, `tabIndex`

Beispiele

// JavaScript-Ausdrücke in JSX

<p>{ `Hallo ${name}` }</p>

<p>{ items.length > 0 ? "Elemente vorhanden" : "Keine Elemente" }</p>

// Fragmente für mehrere Elemente

<h1>Titel</h1>

<p>Absatz</p>

</>

// Attribute in camelCase

Tipp: JSX wird von Babel in reguläres JavaScript transpiliert. Sie können jeden gültigen JavaScript-Ausdruck in geschweiften Klammern { } verwenden.

Komponenten – Wiederverwendbare Bausteine

function · export default · props

// Button.jsx function Button({ label, onClick }) { return ( <button onClick={ onClick }>{ label }</button> ); } export default Button;

Komponenten sind die Grundbausteine von React-Anwendungen. Funktionale Komponenten sind einfache JavaScript-Funktionen, die JSX zurückgeben.

Beispiele

// Einfache Komponente

function Welcome({ name }) {

return <h1>Hallo { name }!</h1>;

}

// Komponente mit Kindern (children)

function Card({ title, children }) {

return (

<h2>{ title }</h2>

{ children }

</div>

);

}

// Komponente mit Default-Props

function Avatar({ src = "/default.png", alt = "Avatar" }) {

return <img src={ src } alt={ alt } />;

}

Tipp: Komponentennamen sollten mit einem Großbuchstaben beginnen (PascalCase), damit React sie als Komponenten und nicht als HTML-Tags erkennt.

Props – Daten an Komponenten übergeben

props · destructuring · children

// Elternkomponente <UserCard name="Anna" age={ 30 } /> // Kindkomponente function UserCard({ name, age }) { return <p>{ name } ist { age } Jahre alt.</p>; }

Props (Properties) sind Daten, die von einer Elternkomponente an eine Kindkomponente übergeben werden. Sie sind schreibgeschützt – die Kindkomponente kann sie nicht verändern.

Beispiele

// Props mit Destructuring

function Product({ name, price, inStock }) {

return (

<div>

<p>Preis: { price }€</p>

<p>{ inStock ? "Auf Lager" : "Nicht vorrätig" }</p>

</div>

);

}

// children-Prop für verschachtelte Inhalte

function Container({ children }) {

return <div className="container">{ children }</div>;

}

// Spread-Operator für Props

const user = { name: "Max", age: 25 };

Tipp: Props sind unveränderlich – eine Komponente sollte niemals ihre eigenen Props ändern. Für veränderliche Daten verwenden Sie State.

State – Veränderliche Daten

useState · setter · immutability

import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: { count } </button> ); }

State ist der interne, veränderliche Zustand einer Komponente. Mit dem useState-Hook können Sie State-Variablen erstellen und aktualisieren.

Wichtige State-Regeln

Regel	Beschreibung
useState	Gibt aktuellen Wert und Setter-Funktion zurück
Immutabilität	State nie direkt verändern – immer Setter verwenden
Aktualisierung	Setter löst erneutes Rendern aus
Funktionale Aktualisierung	Für Updates auf Basis des vorherigen Werts

Beispiele

// useState mit Objekt

const [user, setUser] = useState({ name: "Anna", age: 30 });

// Update mit Spread-Operator

setUser({ ...user, age: user.age + 1 });

// useState mit Array

const [items, setItems] = useState([]);

// Element hinzufügen

setItems([...items, { id: 1, text: "Neues Element" }]);

// Funktionale Aktualisierung (bei starken Abhängigkeiten)

setCount((prev) => prev + 1);

// useState mit komplexem State

const [form, setForm] = useState({ username: "", password: "" });

const handleChange = (e) => {

setForm({ ...form, [e.target.name]: e.target.value });

};

Tipp: Verwenden Sie die funktionale Aktualisierung, wenn der neue State vom vorherigen State abhängt – das verhindert Race Conditions bei asynchronen Updates.

Events – Benutzerinteraktionen

onClick · onChange · onSubmit · preventDefault

// Event-Handler function handleClick(e) { e.preventDefault(); console.log("Geklickt!"); } <button onClick={ handleClick }>Klick mich</button>

Events reagieren auf Benutzerinteraktionen wie Klicks, Eingaben oder Formular-Submissions. React verwendet eine synthetische Event-Engine für konsistentes Verhalten über alle Browser hinweg.

Häufige Events

Event	Beschreibung
onClick	Klick auf Element
onChange	Wertänderung (Input, Select, Textarea)
onSubmit	Formular absenden
onMouseEnter / onMouseLeave	Maus betritt/verlässt Element
onFocus / onBlur	Fokus erhalten/verloren
onKeyDown / onKeyUp	Tastatureingabe

Beispiele

// onClick mit Inline-Handler

<button onClick={() => setCount(count + 1)}>

</button>

// onChange für Input-Felder

<input

type="text"

value={ text }

onChange={(e) => setText(e.target.value)}

// onSubmit mit preventDefault

const handleSubmit = (e) => {

e.preventDefault();

// Formulardaten verarbeiten

console.log(formData);

};

<button type="submit">Absenden</button>

</form>

Tipp: Bei Formularen immer e.preventDefault() verwenden, um das standardmäßige Neuladen der Seite zu verhindern.

Hooks – State & Lifecycle in Funktionen

useState · useEffect · useContext · useReducer

import { useState, useEffect } from 'react'; function Example() { const [data, setData] = useState(null); useEffect(() => { // Daten laden fetch('https://api.example.com/data') .then(res => res.json()) .then(setData); }, []); // Leeres Array = einmal beim Mount }

Hooks ermöglichen es funktionalen Komponenten, State und Lebenszyklus-Funktionen zu nutzen. Die wichtigsten Hooks sind useState für State und useEffect für Seiteneffekte.

Die wichtigsten Hooks

Hook	Beschreibung
useState	State in funktionalen Komponenten
useEffect	Seiteneffekte (API-Aufrufe, DOM-Manipulationen)
useContext	Context-API für globale Daten
useReducer	Komplexer State mit Reducer
useCallback	Memoized Callback-Funktionen
useMemo	Memoized Werte
useRef	Mutable Referenzen

Beispiele

// useEffect mit Cleanup

useEffect(() => {

const interval = setInterval(() => {

setCount((c) => c + 1);

}, 1000);

return () => clearInterval(interval);

}, []);

// useContext für globale Daten

const ThemeContext = createContext();

const theme = useContext(ThemeContext);

// useReducer für komplexen State

const [state, dispatch] = useReducer(reducer, { count: 0 });

// useRef für DOM-Referenzen

const inputRef = useRef(null);

useEffect(() => {

inputRef.current.focus();

}, []);

Tipp: Hooks dürfen nur auf der obersten Ebene von funktionalen Komponenten oder anderen Hooks aufgerufen werden – nicht in Schleifen, Bedingungen oder verschachtelten Funktionen.

React im Überblick

JSX HTML in JavaScript
{ } · className

Props Daten von Eltern
Schreibgeschützt

State Veränderliche Daten
useState, setter

Events Benutzerinteraktionen
onClick, onChange

Hooks State & Lifecycle
useState, useEffect

Virtual DOM Effizientes Rendering
Reconciliation

Quick Summary

JSX

Template-Syntax

function

Komponenten

props

Daten weitergeben

useState

State verwalten

onClick

Events

useEffect

Seiteneffekte

function Component({ prop }) { const [state, setState] = useState(0); return <div>{state}</div>; }