Tous les projets

Février 2023

Task Manager — Symfony + React

GitHub

Expérimentation de l'intégration React dans Symfony via Webpack Encore — comment faire cohabiter un framework PHP MVC avec un frontend JavaScript moderne sans tout découpler en micro-services.

Symfony PHP React JavaScript Webpack Encore REST API

// niveau de départ

  • Symfony backend maîtrisé, React basique (tutoriels seulement)
  • Webpack Encore : inconnu — habitué au CDN ou Vite
  • Architecture frontend/backend couplée vs découplée : notion floue

// TODO : compléter ce projet.

Contexte

J’ai voulu répondre à une question précise : est-il pertinent d’intégrer React directement dans Symfony avec Webpack Encore ? Versus avoir une API Symfony séparée et un front React autonome ?

Architecture

Le projet utilise Webpack Encore (le bundler officiel de Symfony) pour compiler des composants JSX React. Les composants sont chargés dans les templates Twig via encore_entry_link_tags().

{# templates/tasks/index.html.twig #}
{{ encore_entry_link_tags('app') }}
{{ encore_entry_script_tags('app') }}
<div id="root"></div>  {# Point de montage React #}

Le backend expose des routes Symfony classiques qui retournent du JSON :

#[Route('/api/tasks', methods: ['GET'])]
public function list(): JsonResponse {
    return $this->json($this->taskRepository->findAll());
}

Conclusion personnelle

Cette approche est pratique pour ajouter de l’interactivité React dans une app Symfony existante sans tout réécrire. Mais pour un nouveau projet avec beaucoup d’interactivité, je préfère une séparation nette : API Platform (Symfony) + Nuxt/Next.js — plus propre à maintenir.

// points forts

  • Backend Symfony exposant des endpoints REST (GET, POST, PUT, DELETE)
  • Frontend React rendu dans des templates Twig via Webpack Encore
  • Gestion d'état local des tâches avec les hooks React (useState, useEffect)
  • Communication HTTP entre composants React et controllers Symfony

// ce que j'ai appris

  • Webpack Encore : compiler des assets React/JSX dans un projet Symfony
  • Différence entre couplage Symfony+React (Encore) vs découplage total (API Platform)
  • Gestion des requêtes HTTP asynchrones avec fetch et la gestion des erreurs
  • Limites de l'approche couplée vs architecture SPA + API séparés