Vous avez confiance en vos connaissances de React ? Mettez-les à l’épreuve !
J’ai sélectionné toutes les questions majeures que vous devez connaître en tant que développeur React en 2022, que vous passiez un entretien pour un poste embauché ou non.
Ces questions couvrent tout, des concepts fondamentaux de React à la compréhension pratiquent du moment où vous devez utiliser certaines fonctionnalités.
Pour obtenir les meilleurs résultats de ce guide, assurez-vous d’essayer de répondre vous-même à chaque question avant de consulter les réponses.
C’est parti !
1. Qu’est-ce que React ? Pourquoi l’utiliser ?
React est une bibliothèque JavaScript, pas un framework.
Nous utilisons React parce qu’il nous donne toute la puissance de JavaScript, mais avec des fonctionnalités intégrées qui améliorent la façon dont nous construisons et pensons à construire des applications.
- Il nous permet de créer facilement des interfaces utilisateur avec des outils comme JSX.
- Il nous donne des composants pour partager facilement des parties de notre interface utilisateur (UI), ce que le HTML statique lui-même ne peut pas faire.
- Il nous permet de créer un comportement réutilisable à travers n’importe lequel de nos composants avec les hooks React.
- React se charge de mettre à jour notre interface utilisateur lorsque nos données changent, sans avoir à mettre à jour le DOM manuellement.
Crédit supplémentaire : Il y a des frameworks dans React qui vous donnent tout ce dont vous avez besoin pour construire une application (avec peu ou pas de bibliothèques tierces), comme Next.js et Gatsby.
React a été créé pour construire des applications à page unique en particulier, mais vous pouvez tout faire, des sites statiques aux applications mobiles, avec les mêmes concepts React.
2. Qu’est-ce que JSX ?
JSX est une façon de construire des interfaces utilisateur React qui utilise la syntaxe simple de HTML, mais ajoute la fonctionnalité et la nature dynamique de JavaScript.
En bref, il s’agit de HTML + JavaScript pour structurer nos applications React.
Bien que JSX ressemble à du HTML, il s’agit en fait d’appels de fonctions JavaScript.
Si vous écrivez un div en JSX, c’est en fait l’équivalent d’un appel à React.createElement().
Nous pouvons construire nos interfaces utilisateur en appelant manuellement React.createElement, mais à mesure que nous ajoutons des éléments, il devient de plus en plus difficile de lire la structure que nous avons construite.
Le navigateur ne peut pas comprendre le JSX lui-même, nous utilisons donc souvent un compilateur JavaScript appelé Babel pour convertir ce qui ressemble à du HTML en appels de fonctions JavaScript que le navigateur peut comprendre.
3. Comment passer des données aux composants React ?
Il y a 2 façons principales de passer des données aux composants React :
- Props
- API contextuelle
Les props sont des données transmises par le parent immédiat d’un composant. Les props sont déclarés sur le composant enfant, peuvent être nommés n’importe comment, et peuvent accepter n’importe quelle valeur valide.
function Blog() {
const post = { title: "My Blog Post!" };
return <BlogPost post={post} />;
}
Les props sont utilisées dans le composant enfant. Les props sont toujours disponibles dans le composant enfant en tant que propriétés d’un objet.
function BlogPost(props) {
return <h1>{props.post.title}</h1>
}
Comme les props sont des propriétés d’objets ordinaires, ils peuvent être déstructurés pour un accès plus immédiat.
function BlogPost({ post }) {
return <h1>{post.title}</h1>
}
Le contexte est une donnée transmise par un fournisseur de contexte à tout composant qui consomme le contexte.
Le contexte nous permet d’accéder aux données n’importe où dans notre application (si le fournisseur est transmis à l’ensemble de l’arbre des composants), sans utiliser de props.
Les données du contexte sont transmises sur la valeur prop à l’aide du composant Context.Provider. Elles peuvent être consommées à l’aide du composant Context.Consumer ou du hook useContext.
import { createContext, useContext } from 'react';
const PostContext = createContext()
function App() {
const post = { title: "My Blog Post!" };
return (
<PostContext.Provider value={post}>
<Blog />
</PostContext.Provider>
);
}
function Blog() {
return <BlogPost />
}
function BlogPost() {
const post = useContext(PostContext)
return <h1>{post.title}</h1>
}
4. Quelle est la différence entre state et props ?
Les états (states) sont des valeurs que nous pouvons lire et mettre à jour dans nos composants React.
Les props sont des valeurs qui sont transmises aux composants React et qui sont en lecture seule (elles ne doivent pas être mises à jour).
Les props sont similaires aux arguments d’une fonction qui existent en dehors de nos composants, tandis que les états sont des valeurs qui changent dans le temps, mais qui existent et sont déclarées à l’intérieur de nos composants.
Les états (states) et les props sont similaires en ce sens que leur modification entraîne un nouveau rendu des composants dans lesquels ils existent.
5. À quoi servent les fragments React ?
Les fragments React sont une fonctionnalité spéciale de React qui vous permet d’écrire des éléments ou des composants enfants de groupe sans créer un nœud réel dans le DOM.
La syntaxe du fragment ressemble à un ensemble vide de balises <> ou à des balises étiquetées React.Fragment.
En termes plus simples, nous avons parfois besoin de placer plusieurs éléments React sous un seul parent, mais nous ne voulons pas utiliser un élément HTML générique comme un div.
Si vous écrivez un tableau, par exemple, ce serait du HTML invalide :
function Table() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
function Columns() {
return (
<div>
<td>Column 1</td>
<td>Column 2</td>
</div>
);
}
Nous pourrions éviter ce problème en utilisant un fragment au lieu d’un élément div dans notre composant Columns.
function Columns() {
return (
<>
<td>Column 1</td>
<td>Column 2</td>
</>
);
}
Une autre raison de choisir un fragment est que, parfois, l’ajout d’un élément HTML supplémentaire peut modifier la manière dont nos styles CSS sont appliqués.
6. Pourquoi avons-nous besoin de clés pour les listes React ?
Les clés sont une valeur unique que nous devons passer à la key prop lorsque nous utilisons la fonction .map() pour boucler sur un élément ou un composant.
Si nous mappons sur un élément, cela ressemblerait à ceci :
posts.map(post => <li key={post.id}>{post.title}</li>)
Ou comme ceci si nous faisons un mapping sur un composant :
posts.map(post => <SinglePost key={post.id}>{post.title}</SinglePost>)
Et dans les deux cas, nous devons ajouter une clé qui est une valeur unique, sinon React nous préviendra.
Pourquoi ? Parce que les clés indiquent à React quel élément ou composant est dans une liste.
Sinon, si nous devions essayer de modifier les éléments de cette liste en en insérant d’autres ou en les modifiant d’une manière ou d’une autre, React ne saurait pas dans quel ordre les mettre.
En effet, React se charge de mettre à jour le DOM à notre place (en utilisant un DOM virtuel), mais les clés sont nécessaires pour que React puisse le mettre à jour correctement.
7. Qu’est-ce qu’un ref ? Comment l’utiliser ?
Un ref est une référence à un élément DOM dans React.
Les ref sont créés à l’aide du hook useRef et peuvent être immédiatement placés dans une variable.
Cette variable est ensuite passée à un élément React donné (pas un composant) pour obtenir une référence à l’élément DOM sous-jacent (c’est-à-dire div, span, etc.).
L’élément lui-même et ses propriétés sont maintenant disponibles sur la propriété .current de la référence.
import { useRef } from 'react'
function MyComponent() {
const ref = useRef();
useEffect(() => {
console.log(ref.current) // reference to div element
}, [])
return <div ref={ref} />
}
Les références sont souvent considérées comme une « porte de sortie » pour pouvoir travailler directement avec un élément DOM. Ils nous permettent de faire certaines opérations qui ne peuvent pas être faites par React autrement, comme effacer ou focaliser une entrée.
8. À quoi sert le hook useEffect ?
Le hook useEffect est utilisé pour effectuer des effets secondaires dans nos composants React.
Les effets secondaires sont des opérations qui sont effectuées avec le « monde extérieur » ou quelque chose qui existe en dehors du contexte de notre application React.
Parmi les exemples d’effets secondaires, citons l’envoi d’une requête GET ou POST à un point de terminaison API externe ou l’utilisation d’une API de navigateur comme window.navigator ou document.getElementById().
Nous ne pouvons pas effectuer de telles opérations directement dans le corps de notre composant React. useEffect nous donne une fonction dans laquelle nous pouvons effectuer des effets secondaires et un tableau de dépendances qui liste toutes les valeurs externes sur lesquelles la fonction repose.
Si une valeur du tableau de dépendances change, la fonction effect s’exécute à nouveau.
9. Quand utiliser React Context vs Redux ?
Redux est probablement la bibliothèque d’état global tierce la plus utilisée pour React, mais vous pouvez remplacer le mot « Redux » par n’importe quelle bibliothèque d’état global pour React.
React context est un moyen de fournir et de consommer des données à travers notre application sans utiliser de props.
React context nous aide à éviter le problème du « props drilling », qui consiste à faire passer des données avec des props dans des composants qui n’en ont pas besoin.
Au lieu de cela, avec le contexte, nous pouvons consommer les données exactement dans le composant qui en a besoin.
Alors que nous n’utilisons Context que pour obtenir ou « lire » des valeurs globalement dans notre application, Redux et d’autres bibliothèques d’état tierces nous permettent à la fois de lire et de mettre à jour l’état.
Context ne remplace pas une bibliothèque d’état tierce comme Redux, car il n’est pas conçu pour les mises à jour d’état. En effet, chaque fois que la valeur fournie par Context change, tous ses enfants sont rendus à nouveau, ce qui peut nuire aux performances.
10. À quoi servent les hooks useCallback et useMemo ?
Les hooks useCallback et useMemo existent pour améliorer les performances de nos composants.
useCallback permet d’éviter que les fonctions déclarées dans le corps des composants fonctionnels soient recréées à chaque rendu.
Cela peut entraîner des problèmes de performances inutiles, en particulier pour les fonctions de rappel qui sont transmises aux composants enfants.
useMemo, quant à lui, mémorise une opération coûteuse que nous lui donnons.
La mémorisation est un terme technique pour les fonctions qui sont capables de « se souvenir » des valeurs passées qu’elles ont calculé si leurs arguments n’ont pas changées. Si tel est le cas, la fonction renvoie la valeur « mémorisée ».
En d’autres termes, il se peut qu’un calcul nécessite une quantité importante de ressources informatiques et que nous souhaitions qu’il soit effectué le moins souvent possible.
Dans ce cas, nous utilisons le hook useMemo, qui diffère du hook useCallback en ce qu’il renvoie une valeur et non une fonction.
Conclusion
Et puis est-ce que vous avez appris quelque chose dans les points mentionnés? Pour moi, cela à bien été utile et cela m’a permet de faire une véritable survole des connaissances que j’avais. C’est toujours pratique d’avoir un petit guide sous la main lors de nos entretiens d’embauches. Bon codage et bonne recherche d’emplois si jamais c’est votre cas.
