Développeur Angular ? Voici comment prendre en main un projet React existant

Passer d’Angular à React peut sembler déroutant lorsqu’on doit reprendre un projet déjà en production. Angular impose une structure très cadrée, alors que React mise sur la liberté architecturale. Ce guide est conçu pour aider un développeur Angular à se repérer dans une codebase React existante, comprendre les équivalences de concepts, et savoir où intervenir pour corriger ou ajouter des fonctionnalités.

1. Angular vs React : deux philosophies différentes

1.1 Angular : le cadre strict

Angular est un framework complet et opinionné, ce qui signifie qu’il impose une architecture stricte et cohérente dès le départ. On y retrouve une organisation claire en modules, services, components et directives, qui structurent l’ensemble de l’application et facilitent la collaboration au sein d’une équipe.

La gestion d’état se fait généralement à travers les services, combinés avec RxJS pour la programmation réactive, et peut être renforcée par l’utilisation de NgRx pour des besoins plus complexes. Enfin, Angular intègre nativement un puissant mécanisme d’injection de dépendances, permettant de partager et réutiliser facilement la logique métier à travers les différentes parties de l’application.

En résumé, Angular est :

• Framework complet, opinionné
• Modules, services, components, directives
• State management via services, RxJS, NgRx
• Injection de dépendances intégrée

1.2 React : la boîte à outils flexible

React est avant tout une bibliothèque centrée sur l’UI, pensée pour construire des interfaces utilisateurs dynamiques et réactives. Contrairement à Angular qui sépare le HTML et la logique, React repose sur JSX, un langage qui mélange directement HTML et JavaScript/TypeScript dans un même fichier, ce qui facilite la lisibilité et la proximité entre la vue et la logique.

La gestion d’état s’appuie principalement sur les Hooks (useState, useEffect, etc.), mais peut être étendue grâce au Context API pour un partage global ou encore des librairies tierces comme Zustand, connues pour leur simplicité et leur flexibilité. Enfin, React ne dicte pas un cadre rigide : ce sont les développeurs qui choisissent leurs outils pour le routing, la gestion des formulaires, ou encore les stores, ce qui offre une grande liberté mais demande aussi des décisions architecturales plus réfléchies.

Pour résumé, React est :

• Bibliothèque centrée sur l’UI
• JSX (HTML + JS/TS dans un même fichier)
• State management via Hooks, Context ou Zustand
• Dépendances choisies par l’équipe (routing, formulaires, stores, etc.)

2. Anatomie d’un projet React typique

Dans la plupart des projets React bien structurés, vous trouverez :

src/
├── App.tsx            # Point d’entrée (routing, providers globaux)
├── modules/
│   ├── activities/
│   │   ├── pages/     # Pages principales (équivalent des routes Angular)
│   │   ├── containers/# Composants avec logique métier
│   │   ├── components/# UI réutilisable au sein du module
│   │   ├── hooks/     # Logique personnalisée (équivalent services)
│   │   ├── stores/    # Gestion d’état (équivalent NgRx)
│   │   └── types/     # Interfaces et types TypeScript
├── components/ui/     # Bibliothèque de composants transverses

🔑 Équivalences rapides :

• App.tsx ≈ app.component.ts + app-routing.module.ts
• hooks/ ≈ services Angular (HttpClient, logique métier)
• stores/ ≈ NgRx ou services partagés avec RxJS
• components/ui/ ≈ librairie de composants Angular

3. Où intervenir dans un projet React existant (quand on vient d’Angular)

3.1 Pour corriger l’UI

Dans un projet Angular, on est habitué à manipuler directement les components d’un module, ou bien à se reposer sur une bibliothèque de composants partagés. En React, on retrouve la même logique mais avec une séparation un peu différente :

1. Composants globaux : src/components/ui/
   • Ce répertoire contient tous les composants réutilisables et transverses (boutons, champs de formulaire, modales, etc.).
   • Équivalent Angular : une bibliothèque partagée (shared/components) ou un Design System.
   • 👉 Cas d’usage : si un bouton doit changer de style dans toute l’application, c’est ici qu’il faut intervenir.
2. Composants métier : src/modules/[module]/components/
   • Ces composants appartiennent à un module précis (par exemple un module « activités » ou « réservations »).
   • Ils portent la logique de présentation spécifique à un cas fonctionnel.
   • Équivalent Angular : un component déclaré directement dans le @NgModule du domaine fonctionnel.
   • 👉 Cas d’usage : pour modifier l’affichage d’une liste ou le comportement d’un formulaire lié à un module précis, c’est dans ce dossier qu’il faut aller.

3.2 Pour ajuster la logique métier

En Angular, la logique métier est externalisée dans des services qui utilisent HttpClient, combinés avec RxJS pour gérer les flux de données. En React, on retrouve la même logique mais encapsulée dans des Hooks personnalisés.

1. Hooks API : src/modules/[module]/hooks/api/

// Angular this.http.get('/api/activities').subscribe(res => this.activities = res); 
// React 
const { data, isLoading } = useActivities();

• Ici, useActivities() est un hook qui encapsule toute la logique de récupération des données.
• Équivalent Angular : un service avec HttpClient et éventuellement un BehaviorSubject pour exposer la donnée.
• 👉 Cas d’usage : si vous devez changer l’endpoint, ajouter une transformation de données ou gérer un état de chargement, c’est dans ces hooks qu’il faut intervenir.

1. Stores : src/modules/[module]/stores/
   • React n’impose pas de solution de state management. Dans beaucoup de projets modernes, on utilise Zustand, parfois Redux.
   • Ces stores servent à centraliser un état global accessible dans tout le module.
   • Équivalent Angular : NgRx Store ou un service singleton avec RxJS.
   • 👉 Cas d’usage : pour gérer des données partagées (par exemple la liste des activités consultée à plusieurs endroits), c’est ici qu’il faut regarder.

3.3 Pour comprendre et modifier le routing

Angular a son app-routing.module.ts avec des routes bien définies. React utilise une approche plus simple, basée sur React Router.

1. Fichier principal : src/App.tsx
   • C’est ici que se configure le routing global (équivalent du app-routing.module.ts).
   • Vous y trouverez les routes principales (publiques, protégées, layouts globaux).
2. Pages : src/modules/[module]/pages/
   • Chaque fichier représente une « page » qui correspond à une route spécifique.
   • Équivalent Angular : un component Angular attaché à une route dans le routing module.
   • 👉 Cas d’usage : pour ajouter une nouvelle page ou ajuster la navigation, c’est dans ce répertoire qu’il faut agir.

3.4 Résumé pratique pour un développeur Angular :

• UI → modifiez components/ui/ pour les éléments globaux, ou modules/[module]/components/ pour les éléments métier.
• Logique métier → allez dans hooks/api/ pour la communication avec l’API, et dans stores/ pour la gestion d’état global.
• Routing → commencez par analyser App.tsx, puis localisez la bonne page/ dans le module concerné.

4. Concepts clés pour un Angulariste

4.1 JSX vs Templates Angular

// Angular
<div *ngIf="activities">{{ activity.name }}</div>

// React
{activities && activities.map(a => (
  <div key={a.id}>{a.name}</div>
))}

4.2 State local vs @Input / @Output

// Angular
@Input() data;  
@Output() dataChange = new EventEmitter();

// React
const [data, setData] = useState(initialValue);

4.3 Context vs Services globaux

// Angular
constructor(private service: MyService) {}

// React
const value = useContext(MyContext);

5. Workflow conseillé pour un correctif

1. Identifier le module concerné dans src/modules/
2. Localiser la page ou container impacté
3. Vérifier les hooks utilisés pour l’API et la logique
4. Contrôler le store du module si l’état global est en jeu
5. Modifier/ajouter le composant UI adapté

6. Bonnes pratiques pour se sentir à l’aise

• Utilisez React DevTools (équivalent Augury pour Angular)
• Analysez le flux de données (du store vers les composants)
• Testez les hooks comme vous testiez les services Angular
• Maîtrisez les hooks de base : useState, useEffect, useContext
• Comprenez l’outillage : React Query (API), Zustand (store), React Router (navigation), React Hook Form (formulaires)

7. Conclusion

Prendre en main un projet React quand on vient d’Angular demande un changement de mentalité :

• Moins de cadre imposé, plus de liberté architecturale
• Des hooks à la place des services
• Un JSX qui fusionne logique et présentation

Commencez par explorer :

1. App.tsx pour comprendre la structure globale
2. Un module complet (par ex. modules/activities) pour voir l’architecture en action
3. La librairie components/ui/ pour les composants réutilisables

Avec ces repères, un développeur Angular peut rapidement devenir opérationnel sur React 🚀.