Hirefullstack – Software Engineering & IT-Beratung aus Berlin
React-Tutorial
← Zur Übersicht
Einstieg 12 Min Lesezeit

React von Null

Die sechs Wörter, die du brauchst, bevor irgendetwas Sinn ergibt

In einem Satz

Komponente, JSX, Props, State, Render, Hook – wenn diese sechs Begriffe sitzen, ist der Rest von React nur noch Detailarbeit.

Du kannst JavaScript. Was dir fehlt, ist die Sprache, in der React über sich selbst redet. Hier sind die sechs Wörter, die in jeder Erklärung vorkommen – jedes in zwei Sätzen.

Tipp So liest du diese App

Wörter mit gestrichelter Unterstreichung kannst du anklicken – dann erscheint die Erklärung. Und alles, was unter „Genauer erklärt“ eingeklappt ist, kannst du beim ersten Durchgang getrost überspringen.

1. Komponente = eine Funktion, die Oberfläche beschreibt

Eine KomponenteEine Funktion, die beschreibt, wie ein Stück Oberfläche aussehen soll – zum Beispiel ein Button oder eine ganze Seite.Sie beginnt immer mit einem Großbuchstaben und gibt JSX zurück. Du benutzt sie dann wie ein eigenes HTML-Element: <MeinButton />.→ ist eine ganz normale JavaScript-Funktion. Das Besondere: Sie gibt keine Zahl und keinen String zurück, sondern eine Beschreibung dessen, was auf dem Bildschirm stehen soll.

Willkommen.tsx 
function Willkommen() {
  return <h1>Hallo!</h1>;
}

// Benutzen tust du sie wie ein eigenes HTML-Element:
<Willkommen />
Achtung Großbuchstabe ist Pflicht

<Willkommen /> ist deine Komponente, <willkommen /> wäre für React ein unbekanntes HTML-Element. Der erste Buchstabe entscheidet.

2. JSX = HTML, das im JavaScript wohnt

Die Zeile <h1>Hallo!</h1> mitten im Code heißt JSXDie HTML-artige Schreibweise mitten im JavaScript-Code, also Zeilen wie <p>Hallo</p>.Es ist kein echtes HTML. Ein Werkzeug übersetzt es vor dem Ausführen in normale Funktionsaufrufe.→. Es sieht aus wie HTML, ist aber JavaScript: Ein Werkzeug übersetzt es vor dem Ausführen in normale Funktionsaufrufe.

jsx.tsx 
const name = "Ada";
const istAdmin = true;

<div className="karte">        {/* class heißt hier className */}
  <h1>Hallo, {name}!</h1>       {/* geschweifte Klammer = JavaScript */}
  <p>{2 + 3} Nachrichten</p>    {/* darin geht jeder Ausdruck */}

  {istAdmin && <button>Löschen</button>}      {/* Bedingung */}
  {istAdmin ? <p>Chef</p> : <p>Gast</p>}      {/* Wenn/Sonst */}
</div>
In geschweiften Klammern darf alles stehen, was einen Wert ergibt – aber keine if-Anweisung und keine for-Schleife.
Gut zu wissen Listen entstehen mit map

Weil es kein for in JSX gibt, baut man Listen mit map: {namen.map(n => <li key={n}>{n}</li>)}. Das key erklären wir gleich noch.

3. Props = die Argumente einer Komponente

PropsDie Werte, die eine Komponente von außen mitbekommt – wie Argumente einer Funktion.Kurz für „properties“. Sie kommen von oben herein und dürfen von der Komponente nicht verändert werden.→ sind die Werte, die eine Komponente von außen bekommt. Du schreibst sie hin wie HTML-Attribute, und die Funktion bekommt sie als ein Objekt herein.

props.tsx 
function Gruss(props) {
  return <h1>Hallo, {props.name}!</h1>;
}

// Üblicher ist es, das Objekt gleich auseinanderzunehmen:
function Gruss({ name, laut }) {
  return <h1>Hallo, {name}{laut ? "!!!" : "."}</h1>;
}

<Gruss name="Ada" laut />
<Gruss name="Grace" />
Stolperstein Props sind Lesestoff, kein Notizbuch

Eine Komponente darf ihre eigenen Props nie verändern. Sie gehören dem, der sie hereingegeben hat. Was sich ändern soll, ist State – der kommt jetzt.

4. State = das Gedächtnis einer Komponente

Eine normale Variable in einer Komponente ist nach dem nächsten Durchlauf weg. StateEin Wert, den sich eine Komponente merkt und der sich ändern darf – zum Beispiel der Text in einem Eingabefeld.Ändert sich State, zeichnet React die Komponente neu. Genau das unterscheidet ihn von einer normalen Variablen.→ ist der Wert, den React für dich aufhebt – und wenn du ihn änderst, zeichnet React die Komponente neu.

✕ passiert nichts auf dem Bildschirm 
function Zaehler() {
  let count = 0;

  return (
    <button onClick={() => count++}>
      {count}
    </button>
  );
}
✓ so merkt React es 
function Zaehler() {
  const [count, setCount] = useState(0);

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

Links steigt count zwar kurz an – aber niemand sagt React Bescheid, und beim nächsten Durchlauf beginnt alles wieder bei 0. Rechts weiß React von der Änderung und zeichnet neu.

Bildlich gesprochen

Stell dir React als Zeichner vor. Eine normale Variable ist ein Gedanke, den er sofort wieder vergisst. useState ist sein Notizbuch: Was da drinsteht, überlebt – und sobald du etwas hineinschreibst, malt er das Bild neu.

5. Render = React ruft deine Funktion auf

Ein RenderReact ruft deine Komponentenfunktion auf und schaut sich an, was sie zurückgibt. Mehr passiert dabei noch nicht.Das Ergebnis ist eine Beschreibung („so soll es aussehen“). Erst danach entscheidet React, was auf der Seite wirklich geändert wird.→ ist nichts Geheimnisvolles: React ruft deine Komponentenfunktion auf und schaut sich an, was zurückkommt. Danach vergleicht es das Ergebnis mit dem von vorhin und ändert im Browser nur die Unterschiede.

ablauf.txt 
Du klickst auf den Button
        ↓
setCount(1)  – React notiert: "hier hat sich was geändert"
        ↓
React ruft Zaehler() erneut auf          ← das ist der Render
        ↓
Ergebnis vergleichen: "die 0 muss zur 1 werden"
        ↓
Nur diese eine Zahl im Browser ändern
Gut zu wissen „Rendert neu“ klingt schlimmer, als es ist

Ein Re-RenderReact ruft die Komponentenfunktion noch einmal auf, weil sich etwas geändert hat.Das heißt nicht, dass die Seite neu gebaut wird. Kommt dasselbe heraus wie vorher, ändert sich im Browser gar nichts.→ heißt erstmal nur: Die Funktion läuft noch einmal. Kommt dasselbe heraus wie vorher, passiert auf der Seite überhaupt nichts.

6. Hook = eine geliehene Fähigkeit

Eine Funktion allein kann sich nichts merken. Ein HookEine eingebaute Funktion, deren Name mit „use“ beginnt und die deiner Komponente eine Fähigkeit gibt – etwa sich etwas zu merken.Hooks dürfen nur ganz oben in einer Komponente stehen, nicht in einer if-Abfrage oder Schleife.→ leiht ihr genau so eine Fähigkeit: useState das Erinnern, useEffect das Reagieren auf die Außenwelt, useRef einen stillen Merkzettel. Alle Hooks beginnen mit use.

regeln.txt 
Zwei Regeln – die gelten immer:

1. Hooks stehen ganz oben in der Komponente.
   Nicht in einem if, nicht in einer Schleife, nicht nach einem return.

2. Hooks stehen nur in Komponenten (Großbuchstabe)
   oder in eigenen Hooks (Name beginnt mit use).
Stolperstein Warum diese Regeln?

React merkt sich deine Hooks anhand der Reihenfolge, nicht am Namen. Wird beim zweiten Durchlauf einer übersprungen, verrutscht die ganze Liste – und dein Zähler bekommt plötzlich den Wert des Eingabefelds.

Alles zusammen

Alles.tsx 
import { useState } from "react";

// Eine Komponente, die eine Prop bekommt
function Gruss({ name }: { name: string }) {
  return <p>Hallo, {name}!</p>;
}

export default function App() {
  // State: der Text, den jemand tippt
  const [name, setName] = useState("Welt");

  return (
    <div>
      <input
        value={name}                                  // gesteuert vom State
        onChange={(e) => setName(e.target.value)}     // Tippen ändert den State
      />
      <Gruss name={name} />                           {/* Prop weitergeben */}
    </div>
  );
}
Tippen → setName → React ruft App erneut auf → Gruss bekommt den neuen Namen → der Absatz ändert sich.
▸ Genauer erklärt: was heißt eigentlich „gesteuertes Eingabefeld“? optional

Im Beispiel oben steht am <input> sowohl value als auch onChange. Das nennt man ein gesteuertes Feld: Nicht der Browser bestimmt, was drinsteht, sondern dein State.

controlled.tsx 
// gesteuert: der State ist die Wahrheit
<input value={name} onChange={(e) => setName(e.target.value)} />

// ungesteuert: der Browser merkt sich den Wert selbst
<input defaultValue="Welt" />

Der Ablauf ist ein kleiner Kreis: Du tippst → onChange feuert → setName ändert den StateEin Wert, den sich eine Komponente merkt und der sich ändern darf – zum Beispiel der Text in einem Eingabefeld.Ändert sich State, zeichnet React die Komponente neu. Genau das unterscheidet ihn von einer normalen Variablen.→ → React zeichnet neu → das Feld zeigt den neuen value. Deshalb wirkt es, als würdest du direkt ins Feld schreiben – in Wirklichkeit macht React den Umweg über den State.

Stolperstein Nur value ohne onChange

Schreibst du value={name} und vergisst onChange, lässt sich im Feld nichts mehr tippen – der State ändert sich ja nie. React warnt dann in der Konsole.

Sitzt das schon?

6 Fragen zu dieser Lektion. Falsche Antworten landen in deiner Statistik.

Jetzt selbst schreiben

⌨ Deine erste Komponente

Baue eine Begrüßung: Was jemand ins Feld tippt, soll direkt darunter erscheinen. Du brauchst dafür genau das, was oben stand – eine Prop, einen State und ein gesteuertes Eingabefeld.

  • □Gruss zeigt Hallo, <name>! an – der Name kommt als Prop herein
  • □Tippen im Feld ändert die Begrüßung sofort mit
  • □Am Anfang steht Welt im Feld
import { useState } from "react";

// TODO: Die Prop "name" annehmen und "Hallo, <name>!" ausgeben
function Gruss(props: { name: string }) {
  return <p data-testid="gruss">Hallo, ???</p>;
}

export default function App() {
  // TODO: State anlegen, Startwert "Welt"

  return (
    <div style={{ fontFamily: "system-ui", padding: 16 }}>
      <input aria-label="name" />
      <Gruss name="???" />
    </div>
  );
}
Hirefullstack

Ihr braucht React-Verstärkung im Team?

Wir bauen seit Jahren React- und Next.js-Anwendungen für Kunden in ganz Deutschland – als einzelner Experte, als Verstärkung fürs Bestandsteam oder als komplettes Scrum-Team.

Projekt besprechen →