Créer un programme de festival avec React

Créer un programme de festival avec React est un projet pratique pour les personnes qui connaissent déjà les bases de React. Vous transformerez un catalogue de festival préparé en programme personnel d’une journée : filtrer les événements, conserver vos choix et expliquer pourquoi un nouvel événement entre en conflit avec un événement déjà sélectionné.

Deux laboratoires guidés commencent par deux choix normaux sans chevauchement, avant d’introduire un événement incompatible. Vous relierez ensuite les données dérivées du programme, les vérifications horaires et la persistance locale. Un défi autonome applique les mêmes mécanismes à une autre journée de festival, avec d’autres événements, scènes et ID. Chaque laboratoire fournit son propre projet et ses données de départ.

Ce que vous apprendrez

À la fin du cours, vous saurez :

• conserver les ID des événements sélectionnés comme seule source de vérité et déduire du catalogue actuel leurs données, le nombre de choix et la durée totale ;
• filtrer le catalogue visible sans supprimer les choix existants et distinguer les événements de même titre par des ID stables ;
• comparer des intervalles temporels semi-ouverts pour autoriser deux événements exactement consécutifs, refuser un véritable chevauchement en nommant l’événement concerné et pouvoir réajouter un choix après l’avoir retiré ;
• enregistrer uniquement une liste d’ID sous une clé localStorage propre au cours, restaurer les choix encore valides et signaler les anciens ID absents sans perdre les choix valides ;
• récupérer après un JSON mal formé et utiliser le minimum nécessaire de logique useEffect pour retrouver les choix après rechargement, dans le même navigateur et la même origine tant que le laboratoire reste disponible.

À qui s’adresse ce cours

Ce cours s’adresse aux personnes souhaitant coordonner des composants React autour d’un programme personnel utile, plutôt que gérer des listes indépendantes.

Prérequis : Utilisation élémentaire du terminal et des chemins, modification de fichiers, HTML/CSS, tableaux, objets et fonctions JavaScript ; composants React, JSX, props, state avec useState, événements, rendu conditionnel, map/filter, clés de liste stables et formulaires contrôlés. Les laboratoires guidés enseignent l’état dérivé, la sélection par ID, les comparaisons simples d’intervalles et les notions nécessaires de useEffect et localStorage avant le défi. Ce n’est pas une première initiation à React.

Environnement d’apprentissage : LabEx fournit un projet React préparé dans le navigateur, ses dépendances, un aperçu et des données synthétiques de festival. Vous travaillez sur le frontend. Les libellés du site et les sorties d’exécution restent en anglais ; les leçons traduites ne signifient pas que l’interface est traduite.

Questions fréquentes

Qu’est-ce qu’un conflit horaire ?

Tous les événements utilisent les minutes locales d’une même date. L’un peut commencer exactement à la fin d’un autre ; un véritable chevauchement est refusé. Le cours ne traite pas les horaires passant minuit ou plusieurs fuseaux horaires et ne calcule pas les trajets entre scènes.

Mon programme me suivra-t-il sur un autre appareil ou laboratoire ?

Non. La restauration se limite au même navigateur, à la même origine réelle et au laboratoire encore disponible, à condition que le navigateur autorise le stockage. Si sa politique refuse le stockage, les choix restent utilisables uniquement en mémoire pendant cette visite ; leur restauration après rechargement n’est pas garantie. localStorage n’est ni un compte, ni une sauvegarde serveur, ni une garantie de stockage permanent ou entre VM.

Vais-je créer un service complet de réservation pour festivals ?

Non. Vous créez un programme personnel à partir de données synthétiques préparées. Les services backend, les comptes, les cartes, le glisser-déposer, l’optimisation d’itinéraire et la synchronisation dynamique avec un serveur sortent du cadre du cours.