Was ist React?

React ist die beliebteste JavaScript-Bibliothek fuer die Entwicklung von Benutzeroberflaechen. Entwickelt von Facebook (Meta), wird React heute von Millionen Entwicklern weltweit eingesetzt – von kleinen Startups bis hin zu Tech-Giganten wie Netflix, Airbnb und Instagram.

Wenn du eine moderne Webanwendung baust, ist die Wahrscheinlichkeit hoch, dass React dahintersteckt.

Warum React?

Das Problem ohne React

Stell dir vor, du baust eine Todo-App mit reinem JavaScript:

// Ohne React: Manuelles DOM-Update
function addTodo(text) {
  const li = document.createElement('li');
  li.textContent = text;
  li.addEventListener('click', () => {
    li.classList.toggle('done');
    updateCounter();
  });
  document.querySelector('#todo-list').appendChild(li);
  updateCounter();
}

function updateCounter() {
  const items = document.querySelectorAll('#todo-list li');
  const done = document.querySelectorAll('#todo-list li.done');
  document.querySelector('#counter').textContent =
    `${done.length} von ${items.length} erledigt`;
}

Das wird schnell unuebersichtlich. Du musst manuell das DOM aktualisieren, Events verwalten und sicherstellen, dass alles synchron bleibt.

Die Loesung mit React

// Mit React: Deklarativ und uebersichtlich
function TodoApp() {
  const [todos, setTodos] = useState([]);

  function toggleTodo(index) {
    const updated = todos.map((todo, i) =>
      i === index ? { ...todo, done: !todo.done } : todo
    );
    setTodos(updated);
  }

  const doneCount = todos.filter(t => t.done).length;

  return (
    <div>
      <p>{doneCount} von {todos.length} erledigt</p>
      <ul>
        {todos.map((todo, i) => (
          <li key={i} onClick={() => toggleTodo(i)}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

React kuemmert sich automatisch darum, dass die Anzeige immer zum aktuellen Zustand passt.

Die drei Grundprinzipien von React

1. Komponentenbasiert

In React zerlegst du deine UI in kleine, wiederverwendbare Bausteine – sogenannte Komponenten:

// Jede Komponente ist eine eigene Funktion
function Header() {
  return <header><h1>Meine App</h1></header>;
}

function Card({ title, content }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Header />
      <Card title="Willkommen" content="Das ist React!" />
      <Card title="Einfach" content="Und macht Spass!" />
    </div>
  );
}

2. Deklarativ

Du beschreibst was angezeigt werden soll, nicht wie es angezeigt wird:

// Deklarativ: "Zeige eine Liste der aktiven User"
function UserList({ users }) {
  return (
    <ul>
      {users
        .filter(user => user.active)
        .map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

3. Einweg-Datenfluss

Daten fliessen in React immer von oben nach unten – von der Eltern-Komponente zur Kind-Komponente:

App (Datenquelle)
├── Header (empfaengt Daten)
├── MainContent (empfaengt Daten)
│   ├── ArticleList (empfaengt Daten)
│   └── Sidebar (empfaengt Daten)
└── Footer (empfaengt Daten)

React vs. andere Frameworks

Aspekt	React	Vue	Angular	Svelte
Typ	Bibliothek	Framework	Framework	Compiler
Lernkurve	Mittel	Niedrig	Hoch	Niedrig
Verbreitung	Sehr hoch	Hoch	Hoch	Wachsend
Unternehmen	Meta	Community	Google	Community
Jobs	Sehr viele	Viele	Viele	Wenige
Flexibilitaet	Sehr hoch	Mittel	Niedrig	Mittel

React ist keine “bessere” Wahl als die anderen – aber es hat das groesste Oekosystem, die meisten Job-Angebote und eine riesige Community.

Was du mit React bauen kannst

Single Page Applications (SPAs)

// Komplette Web-Apps mit Navigation
function App() {
  return (
    <Router>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Router>
  );
}

Mobile Apps mit React Native

// Gleiche Konzepte, native Apps
import { View, Text, Button } from 'react-native';

function MobileApp() {
  return (
    <View>
      <Text>Hallo von React Native!</Text>
      <Button title="Klick mich" onPress={() => alert('Hi!')} />
    </View>
  );
}

Weitere Einsatzgebiete

• Server-Side Rendering mit Next.js
• Statische Webseiten mit Gatsby oder Astro
• Desktop-Apps mit Electron
• VR/AR mit React 360

So funktioniert React unter der Haube

React verwendet einen virtuellen DOM – eine leichtgewichtige Kopie des echten DOM:

1. State aendert sich
2. React erstellt neuen virtuellen DOM
3. React vergleicht alten und neuen virtuellen DOM (Diffing)
4. Nur die tatsaechlichen Aenderungen werden im echten DOM aktualisiert

Das macht React schnell, weil direkte DOM-Manipulationen teuer sind.

// Du schreibst das:
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// React aktualisiert nur den Text im Button,
// nicht den ganzen Button oder die ganze Seite!

React im Jahr 2026

React entwickelt sich staendig weiter. In der aktuellen Version (React 19) gibt es spannende neue Features:

• React Compiler – automatische Optimierungen ohne manuelle Memoization
• Server Components – Komponenten, die auf dem Server rendern
• Actions – vereinfachte Formular-Verarbeitung
• use() Hook – Promises direkt in Komponenten auflösen

Du wirst all diese Konzepte in diesem Kurs kennenlernen.

Was kommt als Naechstes?

In den naechsten Lektionen wirst du:

1. Dein erstes React-Projekt aufsetzen – mit Vite in wenigen Minuten
2. JSX verstehen – die Syntax, die React so elegant macht
3. Komponenten bauen – wiederverwendbare UI-Bausteine
4. State verwalten – interaktive Anwendungen erstellen
5. Eine komplette App entwickeln – von der Idee bis zum fertigen Projekt

Zusammenfassung

• React ist die beliebteste UI-Bibliothek fuer moderne Webanwendungen
• Es basiert auf Komponenten, ist deklarativ und nutzt einen Einweg-Datenfluss
• React hat das groesste Oekosystem und die meisten Job-Angebote im Frontend-Bereich
• Du kannst damit Web-Apps, Mobile Apps und sogar Desktop-Apps bauen
• React 19 bringt spannende neue Features wie den React Compiler und Server Components

Bereit? Dann lass uns im naechsten Kapitel dein erstes React-Projekt erstellen!

---