Erste React-App: JSX, Props und State

React beschreibt Oberflächen als Komponenten. Eine Komponente ist hier eine Funktion, die JSX zurückgibt. JSX ähnelt HTML, steht aber in JavaScript beziehungsweise TypeScript. Props sind Eingaben einer Komponente. State ist ihr veränderlicher Zustand. Wenn sich State ändert, berechnet React die Darstellung erneut. Wir bauen einen Zähler mit einer eigenen Anzeige-Komponente.

Beispieldateien

01Das Lernprojekt vorbereiten

Lege einen neuen Ordner an und speichere alle vier Beispieldateien mit ihren angegebenen Pfaden. npm install installiert die festgelegten Abhängigkeiten. npm run dev startet Vite. Öffne die vom Terminal angezeigte Adresse. Nutze Node.js 22.13 oder neuer.

package.json · jsonDatei öffnen

{
  "name": "react-learning",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --host 127.0.0.1",
    "build": "vite build",
    "test": "vitest run"
  },
  "dependencies": {
    "react": "19.2.3",
    "react-dom": "19.2.3"
  },
  "devDependencies": {
    "vite": "8.1.5",
    "typescript": "6.0.3",
    "@types/react": "19.2.14",
    "@types/react-dom": "19.2.3",
    "vitest": "4.1.10",
    "@testing-library/react": "16.3.2",
    "@testing-library/user-event": "14.6.1",
    "jsdom": "29.1.1"
  }
}

Starten / prüfen

npm install
npm run dev

02JSX und Props lesen

Count erwartet value als Zahl. <Count value={count} /> übergibt den aktuellen Wert. Geschweifte Klammern setzen einen TypeScript-Ausdruck in JSX ein. Die Funktion muss nicht selbst wissen, wie der Wert verändert wird.

src/App.tsx · tsxDatei öffnen

import React, { useState } from 'react';
function Count({ value }: { value: number }) { return <p>Entries: {value}</p>; }
export function App() {
  const [count, setCount] = useState(0);
  return <main>
    <h1>House notes</h1>
    <Count value={count} />
    <button onClick={() => setCount(previous => previous + 1)}>Add entry</button>
  </main>;
}

03State aktualisieren

useState liefert den Wert und eine Aktualisierungsfunktion. setCount(previous => previous + 1) berechnet den neuen Wert aus dem letzten Zustand. count++ wäre eine versteckte Änderung und aktualisiert React nicht zuverlässig.

04Verantwortung nachvollziehen

main.tsx verbindet React mit dem DOM-Knoten root. App besitzt den Zähler. Count stellt nur dar. Die tatsächlichen Projekte ergänzen Routing, Fachservices und Speicherung. Dieser Zähler bleibt bewusst im Speicher.

Erwartetes Ergebnis

Add entry erhöht Entries: 0 jeweils um 1. Nach einem Neuladen steht der Zähler wieder auf 0.

Deine Übung

Ergänze einen Reset-Button. Soll Count diese Aktion besitzen?

Lösung mit Erklärung anzeigen

Der Button gehört zu App und ruft setCount(0). Count erhält weiter nur value. So bleiben Anzeige und Änderung getrennt. Wenn Count später einen Button darstellen soll, kann die Aktion zusätzlich als Callback-Prop übergeben werden.

Projektbezug und Quellen

Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.