REACT Flashcards
Qu’est-ce que React et quelle est sa principale utilité dans le développement web ?
React est une bibliothèque JavaScript open source développée par Facebook pour créer des interfaces utilisateur. Sa principale utilité est de faciliter la création d’applications web interactives, en utilisant une approche par composants qui permet de construire des interfaces complexes à partir d’éléments plus simples et réutilisables. React utilise un DOM virtuel pour optimiser les performances en minimisant les manipulations du DOM réel.
Quelle est la différence entre une bibliothèque et un framework ? Dans quelle catégorie se situe React ?
Une bibliothèque est un ensemble
Une bibliothèque est un ensemble de fonctions que le développeur peut utiliser quand il le souhaite dans son code, tandis qu’un framework impose une structure et un flux d’exécution où c’est le framework qui appelle le code du développeur (inversion de contrôle). React est une bibliothèque et non un framework, car il se concentre uniquement sur la couche vue et laisse au développeur la liberté d’organiser son application et d’intégrer d’autres bibliothèques.
Comment créer un nouveau projet React ? Expliquez les différentes approches possibles.
Il existe plusieurs façons de créer un projet React :
* Avec Create React App (CRA) : npx create-react-app mon-projet
* Avec ViteJS : npm create vite@latest mon-projet – –template react
* Manuellement en configurant Webpack et Babel
Create React App offre une configuration par défaut qui simplifie le démarrage, tandis que ViteJS propose une alternative plus rapide en phase de développement. La configuration manuelle donne plus de flexibilité mais est plus complexe à mettre en place.
Expliquez ce qu’est le JSX et son rôle dans React.
JSX (JavaScript XML) est une extension syntaxique de JavaScript utilisée dans React qui permet d’écrire des structures similaires à du HTML directement dans le code JavaScript. Il facilite la description de l’interface utilisateur en combinant la logique (JavaScript) et le rendu (HTML-like) dans un même fichier. JSX n’est pas directement interprété par les navigateurs mais est transformé en JavaScript standard par des outils comme Babel.
Quelles sont les deux façons de créer un composant React et quelles sont leurs différences ?
Les deux façons de créer un composant React sont :
1. Les composants fonction : Une simple fonction JavaScript qui reçoit des props et retourne du JSX.
2. Les composants classe : Une classe JavaScript qui étend React.Component et implémente la méthode render().
Les composants fonction sont plus simples, plus concis et, avec l’introduction des Hooks, peuvent désormais gérer un état interne et des effets secondaires, ce qui n’était auparavant possible qu’avec les composants classe. Les composants fonction sont aujourd’hui recommandés par la documentation officielle.
Comment s’organise la hiérarchie des composants dans une application React ? Illustrez avec un exemple.
Dans React, les applications sont construites comme un arbre de composants, où un composant parent peut contenir plusieurs composants enfants. Par exemple, un composant App pourrait contenir un Header, un MainContent et un Footer. À son tour, le MainContent pourrait contenir une Sidebar et un ContentArea. Cette organisation hiérarchique permet de décomposer l’interface en éléments plus petits et plus faciles à gérer, suivant le principe de responsabilité unique.
Quelle est la différence entre les props et le state dans React ?
- Les props (propriétés) sont passées d’un composant parent à un composant
- enfant et sont en lecture seule dans le composant enfant.
- Le state (état) est géré à l’intérieur d’un composant et peut être modifié par ce composant lui-même.
En résumé, les props sont utilisées pour la communication entre composants (descendante), tandis que le state gère les données internes d’un composant qui peuvent changer au fil du temps.
Comment adapteriez-vous une application React pour qu’elle soit accessible aux personnes en situation de handicap ?
Pour rendre une application React accessible :
1. Utiliser des éléments HTML sémantiques appropriés
2. Ajouter des attributs ARIA quand nécessaire
3. Gérer la navigation au clavier et les focus
4. Assurer un contraste de couleur suffisant
5. Fournir des textes alternatifs pour les images
6. Structurer logiquement les titres et le contenu
7. Tester avec des lecteurs d’écran
8. Suivre les recommandations RGAA (Référentiel Général d’Amélioration de l’Accessibilité)
9. S’assurer que les formulaires sont correctement étiquetés
10. Implémenter des messages d’erreur clairs et accessibles
Comment utiliseriez-vous le hook useState pour créer un compteur simple ?
import { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Cliquez ici
</button>
</div>
);
}
Le hook useState est utilisé pour déclarer une variable d’état avec une valeur initiale (ici 0). Il retourne un tableau contenant la valeur actuelle de l’état et une fonction pour le mettre à jour. Lorsque l’utilisateur clique sur le bouton, la fonction setCount est appelée, ce qui déclenche un nouveau rendu du composant avec la valeur mise à jour.
Qu’est-ce qu’un composant contrôlé et pourquoi est-il utile ?
Un composant contrôlé est un composant de formulaire HTML (comme input, select, textarea) dont la valeur est contrôlée par React via le state. Chaque modification de la valeur déclenche un handler qui met à jour le state, et ce state sert ensuite à définir la valeur affichée.
Exemple :
function ControlledInput() {
const [value, setValue] = useState(‘’);
return (
<input
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
Cette approche est utile car elle permet à React de contrôler complètement le formulaire, facilitant la validation, la modification conditionnelle des valeurs et la soumission synchronisée.
Comment structureriez-vous un projet React pour une application de commerce en ligne ?
Une structure possible pour une application e-commerce pourrait être :/src
/components
/common # Composants réutilisables (Button, Card, etc.)
/layout # Composants de mise en page (Header, Footer, etc.)
/product # Composants liés aux produits
/cart # Composants liés au panier
/checkout # Composants liés au processus de paiement
/hooks # Hooks personnalisés
/contexts # Contexts API pour le partage d’état global
/services # Services d’API, utilitaires
/utils # Fonctions utilitaires
/assets # Images, styles globaux, etc.
/pages # Composants de page
App.js # Composant racine
index.js # Point d’entrée
Cette structure favorise la séparation
Comment assurez-vous la sécurité dans une application React, notamment contre les attaques XSS ?
Pour assurer la sécurité dans une application React :
1. Utiliser l’échappement automatique de React pour le JSX (protection contre les XSS)
2. Valider et assainir les entrées utilisateur côté serveur et client
3. Utiliser des bibliothèques comme DOMPurify pour nettoyer le HTML dynamique
4. Implémenter une politique de sécurité du contenu (CSP)
5. Utiliser HTTPS pour toutes les communications
6. Éviter l’utilisation de dangerouslySetInnerHTML sans nettoyage préalable
7. Garder React et ses dépendances à jour pour bénéficier des correctifs de sécurité
