React von Grund auf.
Deine erste interaktive Webseite.

Du startest bei den Grundlagen des Webs und endest bei einer kleinen Seite, die auf deine Eingaben reagiert. Kein React-Vorwissen nötig, ein bisschen Gefühl für HTML reicht.

Weiter mit der Pfeiltaste → oder dem Button unten.

0Überblick

Was dich erwartet

Bei Endress+Hauser dreht sich alles um Messtechnik. Sensoren erfassen Daten, Software macht sie sichtbar und nutzbar. Am Ende dieses Kurses hast du selbst so eine kleine Software gebaut, die Messwerte aufnimmt und auswertet.

Diese Präsentation führt dich Schritt für Schritt. Jede Folie bringt genau einen Gedanken. Erst das Konzept dahinter, dann der Code, dann das nächste Stück.

Teil 1

Wie das Web funktioniert und warum es React gibt.

Teil 2

Die Bausteine: Komponenten, JSX, Props, State.

Teil 3

Ein echtes Projekt: der Messwerte-Tracker.

Tipp: Lass dir Zeit pro Folie. Verstehen ist wichtiger als Tempo.

1Konzept Hintergrund

Drei Bausteine tragen jede Webseite

Bevor React ins Spiel kommt, musst du wissen, worauf es aufsetzt. Jede Seite im Netz besteht aus drei Schichten, die zusammenspielen.

HTML

Das Skelett. Es legt fest, welche Bausteine es gibt: Überschriften, Absätze, Buttons.

CSS

Die Haut. Sie bestimmt das Aussehen: Farben, Abstände, Schriftgrößen.

JavaScript

Die Muskeln. Es bringt Bewegung rein und reagiert auf Klicks, Eingaben oder Zeit.

Der Browser liest diese drei Teile und baut daraus das Bild auf deinem Schirm zusammen.

1Grundlagen

So sieht eine winzige Seite aus

Nur HTML, sonst nichts. Eine Überschrift und ein Button.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <button>Klick mich</button>
  </body>
</html>

Der Button lässt sich anklicken, aber es passiert nichts. Die Logik fehlt. Genau hier stellt sich die Frage, die zu React führt.

2Konzept Warum React

Das Problem mit reinem JavaScript

Stell dir eine Seite mit einem Zähler vor. Bei jedem Klick müsstest du von Hand die richtige Textstelle im Dokument suchen und überschreiben. Bei zehn solchen Stellen wird das schnell unübersichtlich und fehleranfällig.

Man nennt diese Handarbeit imperativ: Du beschreibst jeden einzelnen Schritt der Änderung.

Die Idee von React: Du beschreibst nur, wie die Oberfläche bei einem bestimmten Zustand aussehen soll. Ändert sich der Zustand, zeichnet React von selbst neu. Das nennt man deklarativ.

2Konzept Was ist React

React in einem Satz

React ist eine JavaScript-Bibliothek, ursprünglich bei Meta entstanden. Sie übernimmt den dritten Baustein, das lebendige Verhalten, sobald eine Seite viele wechselnde Zustände hat.

Merksatz

Zustand rein, Oberfläche raus. Ändere den Zustand, und React zeichnet neu.

3Konzept Komponenten

Alles besteht aus Bausteinen

In React arbeitest du mit Komponenten. Eine Komponente ist ein wiederverwendbarer Baustein: ein Button, eine Messkarte oder eine ganze Seite.

Denk an Lego. Du baust einen Stein einmal und steckst ihn beliebig oft zusammen. Große Oberflächen entstehen so aus vielen kleinen, überschaubaren Teilen. Das macht den Code lesbar und wartbar.

Mehr zu Komponenten bei W3Schools

4Einrichtung

Arbeitsplatz mit VS Code

Für den Einstieg reichen ein Editor und ein Browser. Wir nutzen Visual Studio Code und laden React direkt aus dem Netz, ganz ohne Installation von Zusatzwerkzeugen.

Lade VS Code von code.visualstudio.com und installiere es.
Lege einen leeren Ordner an, etwa react-kurs.
In VS Code: Datei → Ordner öffnen und den Ordner wählen.
Im Explorer Neue Datei, nenne sie index.html.

4Einrichtung

Das Grundgerüst

Kopiere diesen Code in index.html und speichere mit Strg + S.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mein erstes React</title>
  </head>
  <body>
    <!-- Hier landet später unsere Oberfläche -->
    <div id="root"></div>

    <!-- React selbst -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- Babel übersetzt JSX direkt im Browser -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- Unser eigener Code -->
    <script type="text/babel">
      function App() {
        return <h1>Hallo React</h1>;
      }

      ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
  </body>
</html>

React einrichten bei W3Schools

4Einrichtung

Vorschau per Live Server

Die Erweiterung Live Server aktualisiert den Browser automatisch, sobald du speicherst. Kein ständiges Neuladen von Hand.

Links auf Erweiterungen klicken oder Strg + Umschalt + X.
Nach Live Server von Ritwick Dey suchen und installieren.
Rechtsklick auf index.html, dann Open with Live Server.
Der Browser öffnet sich unter http://127.0.0.1:5500.

Wichtig: Diese Variante braucht eine Internetverbindung, weil React aus dem Netz geladen wird.

5Bausteine

Deine erste Komponente

Eine Komponente ist eine normale JavaScript-Funktion, die zurückgibt, was angezeigt werden soll. Der Name beginnt groß, das unterscheidet deine Bausteine von einfachen HTML-Tags.

function Gruss() {
  return <p>Willkommen im Kurs.</p>;
}

function App() {
  return (
    <div>
      <h1>Startseite</h1>
      <Gruss />
      <Gruss />
    </div>
  );
}

Die Funktion App nutzt Gruss gleich zweimal. Einmal bauen, oft verwenden.

Komponenten bei W3Schools

6Konzept JSX

Warum HTML im JavaScript steht

Dir ist sicher aufgefallen: mitten im Code steht etwas, das wie HTML aussieht. Das ist JSX. Es lässt dich Struktur und Logik an einem Ort schreiben, statt beides mühsam getrennt zu halten.

Mit geschweiften Klammern holst du JavaScript-Werte direkt in die Anzeige.

function App() {
  const name = "Max";
  const jahr = 2026;

  return (
    <div>
      <h1>Hallo {name}</h1>
      <p>Wir schreiben das Jahr {jahr}.</p>
      <p>In zwei Jahren ist {jahr + 2}.</p>
    </div>
  );
}

JSX bei W3Schools

6Bausteine

Zwei Stolpersteine bei JSX

className statt class

Das Wort class ist in JavaScript schon vergeben, deshalb schreibt man in JSX className.

Ein Wurzelelement

Jede Komponente gibt genau ein umschließendes Element zurück, meist ein äußeres div.

Merkst du dir diese zwei Dinge, ersparst du dir die häufigsten Fehlermeldungen am Anfang.

JSX-Regeln bei W3Schools

7Konzept Props

Bausteinen Werte mitgeben

Ein Baustein wird erst nützlich, wenn du ihn anpassen kannst. Die Werte, die du einer Komponente von außen mitgibst, heißen Props, kurz für properties.

Denk an eine Funktion, der du Argumente übergibst. Genau so funktionieren Props: dieselbe Komponente, andere Werte, anderes Ergebnis.

Merke die Richtung: Props fließen immer von außen nach innen, vom Elternteil zum Kind. Eine Komponente ändert ihre eigenen Props nie selbst.

Props bei W3Schools

7Bausteine

Props im Einsatz

function Messkarte(props) {
  return (
    <div>
      <h2>{props.titel}</h2>
      <p>Aktueller Wert: {props.wert} {props.einheit}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Messkarte titel="Temperatur" wert={21.5} einheit="°C" />
      <Messkarte titel="Druck" wert={1013} einheit="hPa" />
    </div>
  );
}

Dieselbe Messkarte zeigt einmal Temperatur, einmal Druck. Nur die Werte wechseln.

7Bausteine

Kürzer geschrieben

Du kannst die Props direkt in den geschweiften Klammern auspacken. Das spart das ständige props. davor.

function Messkarte({ titel, wert, einheit }) {
  return (
    <div>
      <h2>{titel}</h2>
      <p>Aktueller Wert: {wert} {einheit}</p>
    </div>
  );
}

Beide Schreibweisen tun dasselbe. Die kürzere siehst du in fast jedem echten Projekt.

8Konzept State

Warum eine Seite ein Gedächtnis braucht

Props kommen von außen und ändern sich für die Komponente nicht. Aber was, wenn eine Komponente sich selbst etwas merken soll, etwa wie oft ein Button gedrückt wurde?

Dafür gibt es State, den inneren Zustand. Ändert sich der State, zeichnet React die Komponente automatisch neu. Genau das macht eine Seite lebendig.

useState bei W3Schools

8Interaktivität

Der typische Anfängerfehler

Eine normale Variable funktioniert hier nicht. React merkt die Änderung nicht.

function Zaehler() {
  let anzahl = 0; // normale Variable, React merkt Änderungen NICHT

  function hoch() {
    anzahl = anzahl + 1;
    console.log(anzahl); // steigt in der Konsole, Seite bleibt stehen
  }

  return <button onClick={hoch}>Klicks: {anzahl}</button>;
}

Die Zahl steigt in der Konsole, die Seite bleibt aber stehen. Es fehlt der Weg, React über die Änderung zu informieren.

8Interaktivität

Richtig mit useState

const { useState } = React;

function Zaehler() {
  const [anzahl, setAnzahl] = useState(0);

  function hoch() {
    setAnzahl(anzahl + 1);
  }

  return <button onClick={hoch}>Klicks: {anzahl}</button>;
}

useState(0) startet bei null und gibt dir zwei Dinge: den Wert anzahl und die Funktion setAnzahl. Rufst du setAnzahl auf, zeichnet React neu.

Regel: Zustand nie direkt überschreiben. Immer die set-Funktion nutzen.

useState-Hook bei W3Schools

9Reaktionen

Auf Klicks und Eingaben hören

Ereignisse verbinden Nutzer und Code. Einen Klick fängst du mit onClick ab, eine Tastatureingabe mit onChange.

function Eingabefeld() {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Schreib etwas"
      />
      <p>Du hast getippt: {text}</p>
    </div>
  );
}

Bei jedem Tastendruck speichert setText den neuen Wert, und der Absatz darunter zeigt ihn sofort. Eingabe und Anzeige bleiben im Gleichschritt.

Events bei W3Schools

10Wiederholung

Listen aus Daten erzeugen

Selten steht die Zahl der Einträge vorher fest. Statt jede Zeile zu tippen, lässt du React die Liste aus deinen Daten bauen. Das Werkzeug heißt map.

function Liste() {
  const staedte = ["Weil am Rhein", "Lörrach", "Basel"];

  return (
    <ul>
      {staedte.map((stadt, index) => (
        <li key={index}>{stadt}</li>
      ))}
    </ul>
  );
}

Das key-Attribut gibt jedem Element eine eindeutige Kennung, damit React Änderungen sauber zuordnet. Ohne key beschwert es sich zu Recht.

Listen bei W3Schools

11Abschlussprojekt

Der Messwerte-Tracker

Endress+Hauser baut Messgeräte, die in Fabriken und Anlagen rund um die Uhr Temperatur, Druck oder Durchfluss erfassen. Aus solchen Zahlenreihen entstehen Entscheidungen, ob ein Prozess sauber läuft oder nachgeregelt werden muss.

Genau dieses Prinzip baust du jetzt im Kleinen nach. Deine Seite nimmt Temperaturwerte auf, sammelt sie in einer Liste und rechnet den Durchschnitt aus. Ein Mini-Messsystem im Browser.

Wichtig ist die Reihenfolge. Wir zeigen nicht sofort das fertige Programm, sondern bauen es in fünf Etappen auf. Jede Etappe fügt genau ein Stück hinzu.

11Schritt 1 von 5

Das Gerüst ohne Leben

Zuerst nur die Struktur: Überschrift, Eingabefeld, Knopf. Noch reagiert nichts, aber du siehst, wie die Oberfläche aussehen soll.

const { useState } = React;

function App() {
  return (
    <div className="app">
      <h1>Messwerte-Tracker</h1>
      <p>Trage Temperaturwerte ein und behalte den Überblick.</p>

      <div className="row">
        <input type="number" placeholder="z. B. 21.5" />
        <button>Hinzufügen</button>
      </div>
    </div>
  );
}

Wie beim echten Messgerät baust du erst das Gehäuse, bevor die Sensorik rein kommt.

11Schritt 2 von 5

Die Eingabe merken

Jetzt bekommt das Feld ein Gedächtnis. Mit useState hält die Komponente fest, was gerade getippt wird, und zeigt es sofort darunter an.

function App() {
  const [eingabe, setEingabe] = useState("");

  return (
    <div className="app">
      <h1>Messwerte-Tracker</h1>

      <div className="row">
        <input
          type="number"
          value={eingabe}
          placeholder="z. B. 21.5"
          onChange={(e) => setEingabe(e.target.value)}
        />
        <button>Hinzufügen</button>
      </div>

      <p>Aktuelle Eingabe: {eingabe}</p>
    </div>
  );
}

Das ist der erste Sensor: Die Seite nimmt wahr, was du eingibst.

11Schritt 3 von 5

Werte sammeln

Ein zweiter Speicher hält alle bisherigen Messungen. Der Knopf ruft hinzufuegen auf, prüft die Zahl und hängt sie an die Liste an. Das Feld wird danach geleert.

function App() {
  const [eingabe, setEingabe] = useState("");
  const [werte, setWerte] = useState([]);

  function hinzufuegen() {
    const zahl = parseFloat(eingabe);
    if (Number.isNaN(zahl)) return; // leere Eingabe ignorieren
    setWerte([...werte, zahl]);
    setEingabe("");
  }

  return (
    <div className="app">
      <h1>Messwerte-Tracker</h1>

      <div className="row">
        <input
          type="number"
          value={eingabe}
          placeholder="z. B. 21.5"
          onChange={(e) => setEingabe(e.target.value)}
        />
        <button onClick={hinzufuegen}>Hinzufügen</button>
      </div>

      <p>Gespeichert: {werte.length} Werte</p>
    </div>
  );
}

Ab hier zählt die Seite mit, wie viele Werte du erfasst hast.

11Schritt 4 von 5

Die Messreihe anzeigen

Eine eigene Komponente Messwert stellt eine Zeile dar. Mit map erzeugt React für jeden gespeicherten Wert eine solche Zeile.

function Messwert({ wert, einheit }) {
  return (
    <li>
      <span>Messung</span>
      <span>{wert} {einheit}</span>
    </li>
  );
}

function App() {
  const [eingabe, setEingabe] = useState("");
  const [werte, setWerte] = useState([]);

  function hinzufuegen() {
    const zahl = parseFloat(eingabe);
    if (Number.isNaN(zahl)) return;
    setWerte([...werte, zahl]);
    setEingabe("");
  }

  return (
    <div className="app">
      <h1>Messwerte-Tracker</h1>

      <div className="row">
        <input
          type="number"
          value={eingabe}
          placeholder="z. B. 21.5"
          onChange={(e) => setEingabe(e.target.value)}
        />
        <button onClick={hinzufuegen}>Hinzufügen</button>
      </div>

      <ul>
        {werte.map((w, i) => (
          <Messwert key={i} wert={w} einheit="°C" />
        ))}
      </ul>
    </div>
  );
}

Aus einzelnen Zahlen wird eine sichtbare Messreihe, wie das Protokoll eines Sensors.

11Schritt 5 von 5

Auswerten

Zum Schluss die Kennzahl. Der Durchschnitt rechnet sich bei jeder Änderung neu, ganz ohne Knopfdruck. Diese zwei Ergänzungen kommen ins Innere von App.

// im Inneren von App, nach der hinzufuegen-Funktion:
const durchschnitt = werte.length
  ? (werte.reduce((a, b) => a + b, 0) / werte.length).toFixed(1)
  : "0";

// im return, direkt unter der Liste:
<div className="stats">
  <span>Anzahl: {werte.length}</span>
  <span>Durchschnitt: {durchschnitt} °C</span>
</div>

Genau das macht ein Messsystem wertvoll: Es liefert nicht nur Rohdaten, sondern eine Aussage.

11Abschlussprojekt

Alles zusammen als Referenz

Hier steht das komplette Programm am Stück, so wie deine fünf Schritte es ergeben. Alles passt in eine index.html. Speichern, per Live Server öffnen, fertig.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Messwerte-Tracker</title>
    <style>
      body { font-family: Arial, Helvetica, sans-serif; margin: 0;
             background: #f2f6f9; color: #1b1b1b; }
      .app { max-width: 480px; margin: 40px auto; background: #fff;
             padding: 24px; border-radius: 10px;
             box-shadow: 0 2px 12px rgba(0,0,0,.08); }
      h1 { color: #0a2f4a; font-size: 1.4rem; margin-top: 0; }
      .row { display: flex; gap: 8px; margin: 16px 0; }
      input { flex: 1; padding: 10px; border: 1px solid #cdd8e0;
              border-radius: 6px; font-size: 1rem; }
      button { background: #009EE3; color: #fff; border: none;
               padding: 10px 16px; border-radius: 6px; cursor: pointer;
               font-size: 1rem; }
      button:hover { background: #007AB8; }
      ul { list-style: none; padding: 0; }
      li { display: flex; justify-content: space-between; padding: 8px 0;
           border-bottom: 1px solid #eef2f5; }
      .stats { display: flex; gap: 24px; margin-top: 16px;
               color: #0a2f4a; font-weight: bold; }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      const { useState } = React;

      function Messwert({ wert, einheit }) {
        return (
          <li>
            <span>Messung</span>
            <span>{wert} {einheit}</span>
          </li>
        );
      }

      function App() {
        const [eingabe, setEingabe] = useState("");
        const [werte, setWerte] = useState([]);

        function hinzufuegen() {
          const zahl = parseFloat(eingabe);
          if (Number.isNaN(zahl)) return; // leere Eingabe ignorieren
          setWerte([...werte, zahl]);
          setEingabe("");
        }

        const durchschnitt = werte.length
          ? (werte.reduce((a, b) => a + b, 0) / werte.length).toFixed(1)
          : "0";

        return (
          <div className="app">
            <h1>Messwerte-Tracker</h1>
            <p>Trage Temperaturwerte ein und behalte den Überblick.</p>

            <div className="row">
              <input
                type="number"
                value={eingabe}
                placeholder="z. B. 21.5"
                onChange={(e) => setEingabe(e.target.value)}
              />
              <button onClick={hinzufuegen}>Hinzufügen</button>
            </div>

            <ul>
              {werte.map((w, i) => (
                <Messwert key={i} wert={w} einheit="°C" />
              ))}
            </ul>

            <div className="stats">
              <span>Anzahl: {werte.length}</span>
              <span>Durchschnitt: {durchschnitt} °C</span>
            </div>
          </div>
        );
      }

      ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
  </body>
</html>

12Weiter geht es

Wohin von hier

Du hast den Bogen von rohem HTML bis zu einer reagierenden React-Seite geschafft. Für den nächsten Schritt lohnen sich drei Dinge: das Aufteilen einer App in mehrere Dateien, das Build-Werkzeug Vite und der Haken useEffect, sobald deine Seite mit einem Server sprechen soll.

Ideen zum Weiterbauen am Tracker

Einen Löschen-Knopf pro Zeile.
Eine Farbe für Werte über einem Grenzwert.
Eine zweite Messgröße neben der Temperatur.

Jede Erweiterung übt genau die Bausteine, die du hier gelernt hast.

Das ganze React-Tutorial bei W3Schools

Geschafft!

Du kennst jetzt Komponenten, JSX, Props, State, Events und Listen und hast ein echtes Projekt gebaut.
Der Rest ist Übung...

React von Grund auf.Deine erste interaktive Webseite.

Was dich erwartet

Drei Bausteine tragen jede Webseite

So sieht eine winzige Seite aus

Das Problem mit reinem JavaScript

React in einem Satz

Merksatz

Alles besteht aus Bausteinen

Arbeitsplatz mit VS Code

Das Grundgerüst

Vorschau per Live Server

Deine erste Komponente

Warum HTML im JavaScript steht

Zwei Stolpersteine bei JSX

Bausteinen Werte mitgeben

Props im Einsatz

Kürzer geschrieben

Warum eine Seite ein Gedächtnis braucht

Der typische Anfängerfehler

Richtig mit useState

Auf Klicks und Eingaben hören

Listen aus Daten erzeugen

Der Messwerte-Tracker

Das Gerüst ohne Leben

Die Eingabe merken

Werte sammeln

Die Messreihe anzeigen

Auswerten

Alles zusammen als Referenz

Wohin von hier

Ideen zum Weiterbauen am Tracker

Geschafft!

React von Grund auf.
Deine erste interaktive Webseite.