---
title: 'Adieu React, bonjour Symfony UX Twig Components'
description: 'Créer des composants Twig réutilisables avec Symfony UX, sans React ni Vue. Installation, configuration et démonstration en live avec PHP et PhpStorm.'
pubDate: 2025-04-03
family: 'javascript-frontend'
tags: []
heroImage: /images/adieu-react-bonjour-symfony-ux-twig-components.webp
videoUrl: 'https://youtu.be/p2AP3_PhrJg'
---

Symfony UX Twig Components apporte une approche moderne de la modularisation des templates Twig, en permettant de créer des composants réutilisables directement en PHP — sans avoir recours à React ou Vue.js.

## Qu'est-ce que Symfony UX Twig Components ?

Symfony UX Twig Components est une bibliothèque du projet Symfony UX qui permet de créer des composants Twig associés à une classe PHP. Chaque composant est constitué de deux éléments : une classe PHP portant l'attribut `#[AsTwigComponent]` et un template Twig correspondant. Les propriétés publiques de la classe deviennent automatiquement accessibles dans le template.

## Installation et configuration

Pour installer la bibliothèque :

```bash
composer require symfony/ux-twig-component
```

Une fois installée, un fichier de configuration apparaît dans `config/packages/twig_component.yaml`. Pour vérifier les composants enregistrés :

```bash
php bin/console debug:twig-component
```

## Créer son premier composant

Pour créer un composant `NotificationBanner` :

1. Créer un dossier `templates/components/`
2. Y ajouter un fichier `notification_banner.html.twig`
3. Créer une classe PHP avec l'attribut `#[AsTwigComponent]`

Les attributs du composant se définissent comme des propriétés publiques. La méthode `mount()` est appelée automatiquement au rendu — idéale pour injecter des services via l'injection de dépendances, comme le service `Security` pour vérifier l'utilisateur connecté.

## Utilisation dans Twig

```twig
<twig:NotificationBanner message="Connexion réussie" type="success" />
```

Le rendu produit un bloc HTML avec le message et l'icône correspondant au type. La syntaxe rappelle celle des composants React ou Vue, mais entièrement côté serveur avec PHP.

## Types de notification disponibles

- `success` (par défaut) — confirmation d'action
- `info` — message informatif
- `danger` — avertissement ou erreur

## Pour aller plus loin

Symfony UX Twig Components s'intègre parfaitement avec Symfony UX Turbo pour créer des interfaces dynamiques sans JavaScript complexe. Retrouvez la démonstration complète sur [YouTube](https://youtu.be/p2AP3_PhrJg) avec PhpStorm.