Frontend (Angular or React) Flashcards
Pouvez-vous expliquer la différence entre Angular et React ?
Angular est un framework complet développé par Google pour construire des applications web, offrant des outils intégrés comme le routing, la gestion de l’état et les formulaires. React, développé par Facebook, est une bibliothèque pour construire des interfaces utilisateur, se concentrant sur le rendu de composants réutilisables et la gestion de l’état via des bibliothèques externes comme Redux.
Qu’est-ce qu’un composant en Angular/React et comment le crée-t-on ?
En Angular, un composant est créé avec le décorateur @Component. En React, un composant est une fonction ou une classe qui retourne des éléments React.
Comment gérez-vous l’état dans une application Angular/React ?
En Angular, l’état peut être géré au niveau du composant avec @Input et @Output, ou globalement avec des services injectables et des bibliothèques comme NgRx. En React, l’état peut être géré avec le hook useState, le contexte React (useContext), ou globalement avec des bibliothèques comme Redux.
Comment faites-vous des appels HTTP dans Angular/React ?
En Angular, les appels HTTP sont effectués avec le service HttpClient fourni par le module HttpClientModule. En React, les appels HTTP peuvent être effectués avec fetch ou des bibliothèques comme Axios.
Pouvez-vous expliquer ce qu’est un service dans Angular et son équivalent dans React ?
En Angular, un service est une classe injectable marquée par le décorateur @Injectable qui encapsule la logique de l’application, comme les appels HTTP. En React, il n’y a pas de concept de service, mais des hooks personnalisés ou des modules séparés peuvent être utilisés pour encapsuler la logique.
Comment gérez-vous les erreurs lors des appels HTTP ?
En Angular, vous pouvez gérer les erreurs avec l’opérateur catchError de RxJS. En React, vous pouvez utiliser des blocs try-catch ou les méthodes catch des Promesses.
Qu’est-ce que NgRx dans Angular et Redux dans React ?
NgRx et Redux sont des bibliothèques de gestion de l’état global qui suivent le modèle de flux unidirectionnel. Ils utilisent un store centralisé pour gérer l’état de l’application et des actions pour déclencher des mises à jour de l’état.
Comment utilisez-vous NgRx/Redux pour gérer l’état global de l’application ?
Vous configurez un store pour maintenir l’état de l’application, définissez des actions pour décrire les changements possibles, et créez des reducers pour gérer les mises à jour de l’état en réponse aux actions.
Pouvez-vous expliquer un cas d’utilisation où la gestion de l’état global est nécessaire ?
La gestion de l’état global est nécessaire lorsque plusieurs composants de l’application ont besoin d’accéder ou de mettre à jour le même état. Par exemple, dans une application de commerce électronique, l’état du panier doit être accessible à partir de différentes pages et composants, comme la page des produits, la page de paiement, et le composant de l’en-tête affichant le nombre d’articles dans le panier.
Comment configurez-vous le routing dans Angular/React ?
En Angular, le routing est configuré dans un module de routing en utilisant le module RouterModule. En React, le routing est configuré avec la bibliothèque react-router-dom.
Comment gérez-vous les routes protégées par authentification dans Angular/React ?
En Angular, vous pouvez utiliser des guards comme AuthGuard pour protéger les routes. En React, vous pouvez créer des composants de route protégée qui vérifient l’authentification avant de rendre le composant.
Pouvez-vous expliquer la différence entre routing dynamique et statique ?
Le routing statique est défini lors de la configuration initiale de l’application et ne change pas à l’exécution. Le routing dynamique permet de modifier les routes en fonction de certaines conditions à l’exécution, comme les permissions de l’utilisateur ou des données chargées dynamiquement.
Quelles sont les principales différences entre les tests unitaires et les tests de bout en bout (end-to-end) ?
Les tests unitaires testent des composants individuels en isolation pour s’assurer qu’ils fonctionnent correctement. Les tests de bout en bout testent l’application entière du point de vue de l’utilisateur pour s’assurer que toutes les parties de l’application fonctionnent ensemble comme prévu.
Comment testez-vous des composants Angular avec Jasmine/Karma ?
Utilisez Jasmine pour écrire des spécifications de test et Karma comme test runner pour exécuter les tests. Angular CLI génère des fichiers de test avec des configurations de base pour Jasmine et Karma.
Comment testez-vous des composants React avec Jest ?
Utilisez Jest comme framework de test pour écrire des tests unitaires pour les composants React. Vous pouvez également utiliser la bibliothèque @testing-library/react pour faciliter le rendu et l’interaction avec les composants.
