Résumé du module Développement Front-end (React.
js)
Principaux concepts de [Link]
Composants
Les blocs de construction de toute application React, permettant de diviser l'interface utilisateur en
éléments réutilisables et indépendants.
JSX (JavaScript Syntax Extension)
Une extension de syntaxe qui permet d'écrire du HTML directement dans le code JavaScript,
facilitant ainsi la création de composants React.
État (State) et Props (Properties)
Les 'props' sont des données passées d'un composant parent à un composant enfant, tandis que
l''état' est une donnée propre à un composant qui peut évoluer au cours du temps.
Cycle de vie des composants
Les différentes phases par lesquelles un composant passe, de sa création à sa destruction,
permettant d'exécuter du code à des moments spécifiques.
Gestion des événements
La manière dont React gère les interactions de l'utilisateur, comme les clics ou les saisies au
clavier, via des gestionnaires d'événements.
Exemples de questions potentielles pour l'évaluation du module :
1. Qu'est-ce qu'un composant en [Link] ?
Un composant est une fonction ou une classe JavaScript qui peut accepter des entrées (props) et
retourner un élément React décrivant une partie de l'interface utilisateur.
2. Expliquez la différence entre 'state' et 'props' dans un composant React.
Les 'props' sont des données immuables transmises d'un parent à un enfant, tandis que le 'state' est
mutable et géré au sein du composant lui-même.
3. Qu'est-ce que JSX et pourquoi est-il utilisé dans React ?
JSX est une extension de syntaxe qui permet d'écrire du HTML dans du JavaScript. Il rend le code
plus lisible et facilite la création de structures d'interface utilisateur complexes.
4. Décrivez le cycle de vie d'un composant React basé sur une classe.
Les principales phases sont : montage (componentDidMount), mise à jour (componentDidUpdate) et
démontage (componentWillUnmount).
5. Comment gérez-vous les événements utilisateur dans React ?
En attachant des gestionnaires d'événements aux éléments JSX, par exemple, en utilisant onClick
pour gérer un clic, et en définissant la fonction correspondante dans le composant.
6. Qu'est-ce que le 'Virtual DOM' et quel est son rôle dans React ?
Le 'Virtual DOM' est une représentation en mémoire de l'interface utilisateur. React l'utilise pour
optimiser les mises à jour en ne modifiant que les éléments du DOM réel qui ont changé.
7. Comment pouvez-vous conditionnellement afficher un élément en React ?
En utilisant des expressions conditionnelles JavaScript, telles que l'opérateur ternaire, directement
dans le JSX pour rendre ou non un élément.
8. Quelle est la différence entre un composant fonctionnel et un composant basé sur une
classe en React ?
Les composants fonctionnels sont des fonctions simples sans état, tandis que les composants
basés sur des classes peuvent gérer un état interne et utiliser des méthodes du cycle de vie.
9. Qu'est-ce que le 'lifting state up' en React et quand l'utiliseriez-vous ?
C'est le processus de déplacer l'état partagé vers le composant parent le plus proche afin que
plusieurs composants enfants puissent accéder aux mêmes données.
10. Comment pouvez-vous optimiser les performances d'une application React ?
En utilisant [Link] pour mémoriser les composants fonctionnels, en implémentant
shouldComponentUpdate dans les composants de classe, et en évitant les rendus inutiles.