React ou Angular : différences et lequel choisir

React est une bibliothèque JavaScript pour construire des interfaces utilisateur, et Angular est un framework complet pour construire des applications web. Avec React, vous écrivez les composants comme des fonctions qui renvoient du JSX et choisissez des outils séparés pour le routage, les formulaires et les données ; avec Angular, vous écrivez des classes TypeScript avec des templates HTML et obtenez d'office le routage, les formulaires, un client HTTP et l'injection de dépendances. Voici le même compteur dans les deux.

import { useState } from 'react';

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

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

La version Angular de ce composant :

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);
    }
}

Les idées se correspondent une à une : le useState(0) de React est le signal(0) d'Angular, onClick={...} est (click)="...", et {count} est {{ count() }}. La différence tient à l'endroit où vit le code : une fonction qui renvoie du balisage dans React, une classe plus une chaîne de template dans Angular.

Bibliothèque ou framework

C'est la différence qui entraîne la plupart des autres. React couvre le rendu et l'état des composants. Tout le reste est à votre choix :

• Routage : React Router, TanStack Router, ou les routes basées sur les fichiers d'un framework.
• Récupération de données : fetch dans un effet, TanStack Query, ou les loaders et server components d'un framework.
• Formulaires : de simples champs contrôlés, les actions de formulaire de React 19, ou React Hook Form.
• État global : contexte, Zustand, Redux Toolkit, Jotai.

Beaucoup d'équipes évitent la plupart de ces choix en partant d'un framework React comme Next.js ou React Router en mode framework, qui regroupe le routage, le chargement des données et le rendu serveur.

Angular fait ces choix pour vous : @angular/router, les formulaires réactifs et basés sur les templates, HttpClient, l'injection de dépendances, une configuration de tests et le CLI ng qui génère composants et services. Tous les projets Angular se ressemblent dans les grandes lignes, une raison fréquente du choix d'Angular par les grandes organisations. Le prix à payer est une surface plus grande à apprendre et moins de liberté pour remplacer une pièce.

JSX ou templates

Les composants React renvoient du JSX, qui est du JavaScript. Les conditions sont des && ou des ternaires, les listes sont des .map(), et tout ce que vous pouvez faire en JavaScript, vous pouvez le faire dans le balisage. Les templates Angular sont du HTML avec leur propre syntaxe : @if, @for avec track, liaisons [property], liaisons (event) et interpolation {{ }}. Les templates gardent le balisage et la logique visiblement séparés ; le JSX les garde au même endroit et vous donne le langage complet. Voici une liste filtrée, la deuxième fonctionnalité à comparer.

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>
    );
}

Tapez an dans le champ et regardez la console : toute la fonction s'exécute à nouveau à chaque frappe, et visible est simplement recalculé. Le même composant en Angular, avec le template dans son propre fichier :

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>

En Angular, computed déclare que visible dépend de query, donc Angular sait quel template le lit et ne recalcule visible que lorsque query change. En React, il n'y a pas de déclaration : le composant se réexécute et recalcule. Le key={fruit} de React et le track fruit d'Angular font le même travail, en indiquant au framework quel élément de la liste est lequel.

JavaScript d'abord ou TypeScript d'abord

React, c'est du JavaScript classique avec du JSX, et TypeScript est une option que vous ajoutez (npm create vite@latest my-app -- --template react-ts). La plupart des nouveaux projets React l'ajoutent, mais vous pouvez apprendre React sans connaître les types. Angular est conçu pour TypeScript : les décorateurs, l'injection de dépendances et le vérificateur de types des templates le supposent tous. Si votre équipe écrit déjà du code typé, ce n'est pas un problème ; si vous débutez en programmation, c'est une chose de plus à apprendre d'un coup. La page React avec TypeScript montre comment fonctionne le typage côté React.

Flux de données et détection des changements

Les deux transmettent les données vers le bas par des entrées (props dans React, input() ou @Input() dans Angular) et envoient les événements vers le haut par des callbacks (fonctions passées en props dans React, output() ou @Output() dans Angular). La différence tient à la façon dont chacun remarque un changement.

React traite l'état comme des instantanés immuables. Vous appelez un setter avec une nouvelle valeur, React réexécute la fonction composant, compare le nouveau JSX à l'ancien et corrige le DOM. Rien n'est suivi automatiquement : la fonction de rendu est le graphe de dépendances. C'est simple à raisonner, et le prix est que vous ajoutez parfois memo, useMemo ou useCallback (ou laissez React Compiler les ajouter) pour éviter du travail.

Angular utilisait historiquement Zone.js pour détecter tout événement async puis vérifiait dans l'arbre des composants les liaisons modifiées. L'Angular moderne passe aux signals : signal, computed et effect suivent les valeurs que lit chaque template, donc Angular ne vérifie que les composants dont les signals ont changé, et les versions récentes peuvent fonctionner entièrement sans Zone.js. Les templates Angular ne réexécutent pas une fonction entière à chaque changement comme le font les composants React.

Dans le code de tous les jours, les deux se ressemblent plus que les mécanismes ne le laissent penser : vous détenez un état, en dérivez des valeurs, et l'écran suit.

Gestion de l'état

Dans React, l'état local est useState ou useReducer, l'état partagé est remonté dans un parent ou placé dans un contexte, et l'état global de l'application vit souvent dans une petite bibliothèque de store. Dans Angular, l'état local est fait de signals sur le composant, et l'état partagé vit généralement dans un service injecté partout où il est nécessaire ; l'injection de dépendances est la réponse intégrée d'Angular à « comment deux composants éloignés partagent-ils des données ». NgRx existe pour les équipes qui veulent un store à la Redux. React n'a pas de système d'injection de dépendances ; le contexte joue un rôle similaire.

Tableau comparatif

Courbe d'apprentissage

React permet de démarrer plus vite. Un débutant qui connaît JavaScript peut construire quelque chose de concret après avoir appris les composants, les props, l'état et les effets, et la page React, c'est quoi présente toute l'idée en quelques minutes. L'apprentissage se déplace plus tard : vous devez choisir un routeur, une approche de récupération de données et une stratégie de formulaires, et les bases de code React font des choix différents.

Angular a un départ plus raide : TypeScript, les décorateurs, les templates, les signals, l'injection de dépendances, les modules de routage et de formulaires, et RxJS pour certaines API. Une fois maîtrisé, en revanche, chaque projet Angular utilise les mêmes pièces de la même façon, ce qui facilite le passage d'un projet à l'autre.

Quand choisir lequel

Choisissez React quand :

• Vous voulez un petit noyau et la liberté de choisir le reste, ou un framework comme Next.js pour le rendu serveur et les routes basées sur les fichiers.
• Vous prévoyez aussi de construire des applications mobiles, où React Native réutilise le même modèle de composants.
• L'équipe est surtout à l'aise en JavaScript, ou vous apprenez le développement front-end et voulez le chemin le plus court vers une application qui fonctionne.

Choisissez Angular quand :

• Une grande équipe a besoin d'une structure standard unique sur de nombreux projets, avec moins de décisions d'architecture à débattre.
• Vous voulez que les formulaires, le HTTP, le routage et l'injection de dépendances soient maintenus ensemble par une seule équipe et mis à jour ensemble par le CLI.
• L'équipe écrit déjà du TypeScript et apprécie les services à base de classes et une séparation claire entre template et logique.

Les deux sont matures, largement utilisés en production et bons pour une carrière. Les compétences se transposent : composants, flux de données à sens unique, état dérivé et mises à jour réactives sont les mêmes idées dans les deux.