React vs. Angular: Unterschiede und wann du was wählst

React ist eine JavaScript-Bibliothek zum Bauen von Benutzeroberflächen, und Angular ist ein vollständiges Framework zum Bauen von Webanwendungen. Mit React schreibst du Komponenten als Funktionen, die JSX zurückgeben, und wählst separate Werkzeuge für Routing, Formulare und Daten; mit Angular schreibst du TypeScript-Klassen mit HTML-Templates und bekommst Routing, Formulare, einen HTTP-Client und Dependency Injection mitgeliefert. Hier ist derselbe Zähler in beiden.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

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

Die Angular-Version dieser Komponente:

import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update((n) => n + 1);
    }
}

Die Ideen entsprechen sich eins zu eins: useState(0) in React ist signal(0) in Angular, onClick={...} ist (click)="...", und {count} ist {{ count() }}. Der Unterschied ist, wo der Code lebt: eine Funktion, die Markup zurückgibt, in React, eine Klasse plus ein Template-String in Angular.

Bibliothek vs. Framework

Das ist der Unterschied, der die meisten anderen bestimmt. React deckt das Rendern und den State von Komponenten ab. Alles andere wählst du selbst:

• Routing: React Router, TanStack Router oder die dateibasierten Routen eines Frameworks.
• Daten laden: fetch in einem Effekt, TanStack Query oder die Loader und Server Components eines Frameworks.
• Formulare: einfache kontrollierte Inputs, Form Actions aus React 19 oder React Hook Form.
• Globaler State: Context, Zustand, Redux Toolkit, Jotai.

Viele Teams überspringen die meisten dieser Entscheidungen, indem sie mit einem React-Framework wie Next.js oder React Router im Framework-Modus beginnen, das Routing, Datenladen und Server-Rendering bündelt.

Angular trifft diese Entscheidungen für dich: @angular/router, reaktive und templatebasierte Formulare, HttpClient, Dependency Injection, ein Test-Setup und die CLI ng, die Komponenten und Services generiert. Jedes Angular-Projekt sieht im Großen und Ganzen gleich aus, ein häufiger Grund, warum große Organisationen es wählen. Der Preis ist eine größere Fläche zum Lernen und weniger Freiheit, ein Teil auszutauschen.

JSX vs. Templates

React-Komponenten geben JSX zurück, und das ist JavaScript. Bedingungen sind && oder ein ternärer Operator, Listen sind .map(), und alles, was du in JavaScript kannst, kannst du im Markup. Angular-Templates sind HTML mit eigener Syntax: @if, @for mit track, Bindings mit [property] und (event) sowie Interpolation mit {{ }}. Templates halten Markup und Logik sichtbar getrennt; JSX hält sie an einem Ort und gibt dir die ganze Sprache. Hier ist eine gefilterte Liste, das zweite Feature zum Vergleichen.

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    console.log('render, query =', JSON.stringify(query));

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

Tippe an ins Feld und beobachte die Konsole: Die ganze Funktion läuft bei jedem Tastendruck erneut, und visible wird einfach neu berechnet. Dieselbe Komponente in Angular, mit dem Template in einer eigenen Datei:

import { Component, computed, signal } from '@angular/core';

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

In Angular deklariert computed, dass visible von query abhängt, also weiß Angular, welches Template es liest, und berechnet visible nur neu, wenn sich query ändert. In React gibt es keine Deklaration: Die Komponente läuft erneut und berechnet neu. Das key={fruit} in React und track fruit in Angular erledigen dieselbe Aufgabe: Sie sagen dem Framework, welcher Listeneintrag welcher ist.

JavaScript zuerst vs. TypeScript zuerst

React ist reines JavaScript mit JSX, und TypeScript ist eine Option, die du hinzufügst (npm create vite@latest my-app -- --template react-ts). Die meisten neuen React-Projekte fügen es hinzu, aber du kannst React lernen, ohne Typen zu kennen. Angular ist für TypeScript gebaut: Decorators, Dependency Injection und die Typprüfung der Templates setzen es alle voraus. Wenn dein Team schon typisierten Code schreibt, ist das kein Thema; wenn du neu im Programmieren bist, ist es eine Sache mehr, die du gleichzeitig lernen musst. Die Seite zu React mit TypeScript zeigt, wie Typisierung auf der React-Seite funktioniert.

Datenfluss und Change Detection

Beide reichen Daten über Inputs nach unten (Props in React, input() oder @Input() in Angular) und senden Events über Callbacks nach oben (als Props übergebene Funktionen in React, output() oder @Output() in Angular). Der Unterschied ist, wie jedes eine Änderung bemerkt.

React behandelt State als unveränderliche Momentaufnahmen. Du rufst einen Setter mit einem neuen Wert auf, React führt die Komponentenfunktion erneut aus, vergleicht das neue JSX mit dem alten und flickt das DOM. Nichts wird automatisch verfolgt: Die Render-Funktion ist der Abhängigkeitsgraph. Darüber lässt sich einfach nachdenken, und der Preis ist, dass du manchmal memo, useMemo oder useCallback hinzufügst (oder den React Compiler sie hinzufügen lässt), um Arbeit zu überspringen.

Angular nutzte früher Zone.js, um jedes async-Event zu erkennen, und prüfte dann den Komponentenbaum auf geänderte Bindings. Modernes Angular wechselt zu Signals: signal, computed und effect verfolgen, welche Werte jedes Template liest, also prüft Angular nur die Komponenten, deren Signals sich geändert haben, und neuere Versionen können ganz ohne Zone.js laufen. Angular-Templates führen bei jeder Änderung nicht eine ganze Funktion erneut aus, wie React-Komponenten es tun.

Im Alltag fühlen sich die beiden ähnlicher an, als die Mechanik vermuten lässt: Du hältst State, leitest Werte daraus ab, und der Bildschirm folgt.

State-Verwaltung

In React ist lokaler State useState oder useReducer, geteilter State wird in ein Elternteil verlagert oder in Context gelegt, und App-weiter State lebt oft in einer kleinen Store-Bibliothek. In Angular ist lokaler State eine Reihe von Signals an der Komponente, und geteilter State lebt meist in einem Service, der überall injiziert wird, wo er gebraucht wird; Dependency Injection ist Angulars eingebaute Antwort auf „wie teilen sich zwei weit entfernte Komponenten Daten“. NgRx gibt es für Teams, die einen Store im Stil von Redux wollen. React hat kein System für Dependency Injection; Context füllt eine ähnliche Rolle.

Vergleichstabelle

Lernkurve

Mit React fängst du schneller an. Wer JavaScript kann, baut nach dem Lernen von Komponenten, Props, State und Effekten etwas Echtes, und die Seite Was ist React erklärt die ganze Idee in ein paar Minuten. Das Lernen verschiebt sich nach hinten: Du musst einen Router, einen Ansatz zum Datenladen und eine Strategie für Formulare wählen, und verschiedene React-Codebasen treffen verschiedene Entscheidungen.

Angular hat einen steileren Einstieg: TypeScript, Decorators, Templates, Signals, Dependency Injection, die Module für Router und Formulare und RxJS für einige APIs. Wenn du es aber kannst, nutzt jedes Angular-Projekt dieselben Teile auf dieselbe Weise, also fällt der Wechsel zwischen Projekten leichter.

Wann du was wählst

Wähle React, wenn:

• du einen kleinen Kern und die Freiheit willst, den Rest selbst zu wählen, oder ein Framework wie Next.js für Server-Rendering und dateibasierte Routen.
• du auch mobile Apps bauen willst, wo React Native dasselbe Komponentenmodell wiederverwendet.
• das Team sich vor allem in JavaScript wohlfühlt oder du Frontend-Entwicklung lernst und den kürzesten Weg zu einer funktionierenden App suchst.

Wähle Angular, wenn:

• ein großes Team eine einheitliche Struktur über viele Projekte braucht, mit weniger Architekturentscheidungen, über die man streiten muss.
• du Formulare, HTTP, Routing und Dependency Injection von einem Team gemeinsam gepflegt und von der CLI gemeinsam aktualisiert haben willst.
• das Team schon TypeScript schreibt und klassenbasierte Services sowie eine klare Trennung zwischen Template und Logik mag.

Beide sind ausgereift, in der Produktion weit verbreitet und gut für die Karriere. Die Fähigkeiten lassen sich übertragen: Komponenten, Datenfluss in eine Richtung, abgeleiteter State und reaktive Updates sind in beiden dieselben Ideen.