Warum Profis React nutzen · Code mit Martin

Du erinnerst dich an den Schmerz aus Level 1 – und verstehst, warum Komponenten erfunden wurden. Eine Lektion zum Lesen.

Erinnerst du dich an das kopierte Menü?

In Level 1 hattest du auf jeder Seite einen Header mit Menü. Und jedes Mal, wenn du eine neue Seite hinzugefügt hast, musstest du das Menü kopieren – und bei jeder Änderung überall anpassen. Nervig bei drei Seiten, ein Albtraum bei dreißig. Und genau dieser Schmerz ist der Beginn unserer Geschichte.

Komponenten: einmal schreiben, überall nutzen

Die Profis dachten: Was, wenn das Menü ein Stück Code wäre, das einfach auf jede Seite „eingefügt” wird? Änderst du es an einer Stelle – ändert es sich überall. So ein Stück heißt Komponente.

Und es geht nicht nur ums Menü. Schau deine Website durch die Augen eines Baukastens:

eine Spielerkarte (du hast sie 4× – und nur Name und Position unterscheiden sich),
ein Foto in der Galerie (10× – nur das Bild unterscheidet sich),
ein Button (überall – nur der Text unterscheidet sich).

Eine Profi-Website ist kein Haufen HTML-Dateien. Sie ist eine LEGO-Kiste: eine Handvoll eigener Bausteine (Komponenten), die zu einer ganzen Anwendung zusammengesetzt werden.

Was React ist

React ist ein Werkzeug (eine Bibliothek) für JavaScript, das genau dieses Zusammensetzen übernimmt. Es wurde bei Facebook erfunden, ist kostenlos, und ein riesiger Teil des Internets baut darauf: Facebook, Instagram, Netflix, Airbnb… Eine Komponente in React sieht so aus – keine Sorge, wir schauen erst mal nur:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

Und so wird sie genutzt – wie ein eigenes HTML-Tag:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Erkennst du das? Es ist eine Funktion (aus Level 2), die HTML zurückgibt. Die Karte wird einmal geschrieben und mit verschiedenen Daten genutzt – wie ein Stempel mit austauschbaren Buchstaben.

Superkraft Nummer zwei: React übernimmt das Neuzeichnen

In Level 2 hast du geschrieben: „Finde das Element, ändere den Text, füge eine Klasse hinzu…” In großen Anwendungen gibt es so viel manuelles Umräumen, dass man sich verlieren kann. React dreht das um:

Du beschreibst, wie die Seite für bestimmte Daten aussehen soll. Wenn sich die Daten ändern, findet React von selbst heraus, was neu gezeichnet werden muss.

Der Stand ändert sich von 0 auf 1? Du suchst kein Element – du änderst einfach die Zahl, und React zeichnet neu, was nötig ist. Das siehst du in Aktion in der Lektion über State.

Was in diesem Level kommt

Du installierst Profi-Werkzeuge: das Terminal und Node.js (nächste Lektion).
Du richtest deine erste React-App mit Vite ein.
Du lernst Komponenten, Props und State.
Du baust deine Level-1-Website in React neu.
Du baust deinen eigenen Node.js-Server und verbindest ein Gästebuch damit.

💡

Du musst nicht alles aus der heutigen Lektion sofort verstehen. Nimm dir einen Satz mit: React = Komponenten (LEGO-Steine) + automatisches Neuzeichnen. Den Rest lernst du hands-on in den nächsten Lektionen.

Das nimmst du aus dieser Lektion mit

Denselben Code an mehrere Stellen zu kopieren ist eine Falle – das hast du schon in Level 1 selbst entdeckt.
Eine Komponente ist eine Funktion, die ein Stück Seite zurückgibt. Einmal schreiben, oft mit verschiedenen Daten nutzen.
React zeichnet die Seite für dich neu: Du änderst die Daten, der Bildschirm folgt.