DEV. FRONT-END by CÉDRIC VÉRAUD

Note

Le travail présenté ici est issu d'un module de la formation d'intégrateur web proposée par OpenClassRooms, pour laquelle j'ai obtenu la certification RNCP38145 en octobre 2025. Le client comme le projet sont fictifs mais font l'objet d'un scénario calqué sur les conditions réelles. Les livrables attendus sont jaugés à l'aulne de ce scénario.
⪢ Voir mon évaluation.


Objectifs pédagogiques

✦ Initialiser une application avec Create React App
✦ Configurer la navigation entre les pages de l'application avec React Router
✦ Développer des éléments de l'interface d'un site web grâce à des composants React
✦ Mettre en œuvre des animations CSS
✦ Développer une interface web avec Sass

GitHub


Afin d'assurer un suivi pertinent lors des échanges avec mon mentor et de préparer la soutenance de fin de projet, le code a été versionné sur GitHub via des commits réguliers. Ce code est public et accessible sur mon compte GitHub

Installation de React avec Vite


Vite est un outil de construction qui m'a permis d'installer un pré-template React, auquel j'ai ajouté les dépendances suivantes :

• React-Router pour gérer la navigation entre les différentes pages de l'application
• Es-Lint pour assurer un code lisible et maintenable
• SASS pour structurer les feuilles de style efficacement

React-Router

Avec React Router j'ai pu gérer la navigation entre les différentes pages. Chaque Route correspond à une URL et indique quel composant de page afficher lorsque cette URL est atteinte.

Layout & architecture 7-1

Les routes définies, il fallait mettre en place les éléments de layout en créant les premiers composants.
✦ Le Header contient des liens gérés par 'react-router-dom' dont la navigation, placée dans un composant à part.
✦ Ajout d'un dossier 'style' contenant les règles SASS de base, breakpoints, variables et mixins.
✦ Approche mobile-first.
✦ Utilisation du SCSS modulaire.

Création de composants-fonctions réutilisables


Dans un environnement React, le javascript est modulaire (.jsx) ce qui permet de créer des composants réutilisables qui optimisent le rendu. Au lieu de charger des suites de pages, une application React va appeler les composants javascript souhaités pour construire la page indiquée via une route (React-Router), allégeant ainsi le chargement. Un composant est un contenant qui affiche le contenu, y compris dynamique, qui lui est fourni.

Ci-dessous la page logements type est ainsi construite en appelant différents composants (carousel, infos, collapse, ranking...), alimentés par les données dynamiques que l'on fait redescendre via les props. Comme nous allons le voir dans la suite, l'état de l'application est géré grâce aux hooks fournis par React.

Hooks

Pour gérer les données dynamiques du site j'ai principalement utilisé 3 hooks indispensables :
✦ useState, qui permet de changer et rafraichir les valeurs d'état.
✦ useEffect, pour exécuter les effets de bord dans les fonctions-composants.
✦ useParams, afin de récupérer les valeurs de l'URL.

Les pages et composants vont donc venir se brancher au hook d'état pour récupérer les données et les faire redescendre (voir suite) vers les éléments qui la compose.

Props

Les props (propriétés) sont l'un des concepts fondamentaux de React. Elles permettent de faire redescendre les données d'un élément parent vers ses enfants, ce qui offre plusieurs opportunités :
✦ Réutiliser les composants.
✦ Scinder les fonctions pour plus de lisibilité et de maintenabilité.
✦ Augmenter le niveau de spécificité.

Validations

1. Initialiser une application avec Create React App
✔ Validé
→ L'application a été initialisée avec Vite, comme recommandé.

2. Configurer la navigation entre les pages de l'application avec React Router
✔ Validé
→ La navigation demandée est bien en place et parfaitement fonctionnelle.

3. Développer des éléments de l'interface d'un site web grâce à des composants React
✔ Validé
→ Des composants logiques et bien structurés ont été créés, avec une utilisation optimale des props pour le passage de données entre composants.

4. Mettre en œuvre des animations CSS
✔ Validé
→ En plus des animations demandées, un loader attractif a été mis en place sur la page principale.

5. Développer une interface web avec SASS
✔ Validé
→ Sass a été utilisé efficacement pour la gestion des styles.

Livrable

Points forts :
→ Gestion dynamique du contenu textuel.
→ Logique bien structurée entre les composants.

Axes d'amélioration :
→ Créer un template global pour une intégration plus optimale.

Remarques :
→ Très bonne présentation, avec un bon respect du jeu de rôle et du temps imparti. Aucune remarque négative à formuler concernant le travail de Cédric. Il a largement dépassé les attentes du projet. Ses suggestions pour l'amélioration du design étaient particulièrement pertinentes.