Top 50 des questions et réponses d'entrevue React à connaître absolument

Les développeurs ReactJS sont très recherchés et il y a une bonne raison à cela. Mais vous devrez prouver votre maîtrise du cadre pour obtenir le poste.

Voici les questions fréquemment posées sur le développement de React et leurs réponses que vous devez connaître. Il comprend tout, des bases aux sujets plus avancés.

1. Qu'est-ce que Réagir ?

React est une bibliothèque JavaScript gratuite et open-source pour le développement d'interface utilisateur, qui utilise des composants pour créer une sortie pour des applications d'une seule page. React a été développé par Facebook (Meta) et est maintenu par une communauté de développeurs.

2. Lister les fonctionnalités importantes de React

Les fonctionnalités les plus importantes de React incluent :

1. Facilité d’utilisation
2. Développement rapide
3. L'utilisation de composants
4. Jsx
5. Le DOM virtuel
6. Haute performance
7. Liaison de données unidirectionnelle

3. Où se trouve le référentiel de projets de React ?

React est un mono-référentiel qui vit à https://github.com/facebook/react. Être un dépôt unique signifie que tout son code et d'autres sources sont stockés au même endroit pour un développement et une gestion plus faciles.

4. Quelle est la version stable actuelle de React ?

La version stable la plus récente de React du 14 juin 2022 est la 18.2.0.

5. Indiquez les différences entre React Native et ReactJS

React et ReactJS sont identiques, tandis que React Native est construit sur React. Pour leurs différences, React est utilisé pour créer des interfaces utilisateur dynamiques et réactives pour les applications Web, tandis que React Native est conçu pour créer des applications en tant qu'applications mobiles.

6. Quelle est la différence entre un élément et un composant ?

Un élément React est un objet simple et immuable créé pour représenter un nœud DOM. Être immuable signifie qu'il ne peut pas être modifié une fois qu'il a été créé, comme il le rend au DOM. Un composant React, en revanche, est modifiable et produit une sortie JSX une fois rendu.

7. Comment créez-vous un composant ?

Il existe deux façons de créer un composant dans React : 1.) Composants de fonction et 2.) Composants de classe. Comme son nom l'indique, un composant de fonction est créé à l'aide d'une déclaration de fonction, tandis qu'un composant de classe est créé à l'aide d'une déclaration de classe.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Lister les 4 étapes d'un React Component

Un composant React passe par les 4 étapes suivantes dans son cycle de vie :

1. Stade initial – Construction du composant dans l'état par défaut avec les accessoires initiaux
2. Phase de montage – Rendu JSX du composant
3. Phase de mise à jour - Changements d'état des composants et redessin de l'application
4. Phase de démontage – Suppression de composants du DOM

9. Expliquez ce que signifie un composant d'ordre supérieur

Un composant d'ordre supérieur (HOC) est une méthodologie React pour créer des composants. Il utilise un composant existant pour en créer un nouveau avec des fonctionnalités supplémentaires. En d'autres termes, un HOC est une fonction qui prend un composant comme argument et renvoie un nouveau composant avec des fonctionnalités supplémentaires.

10. Que sont les composants contrôlés et non contrôlés ?

Un composant contrôlé est un composant React qui prend sa valeur via des props et notifie le système de tout changement via des rappels. Il est contrôlé par un composant parent qui gère ses Etat et transmet les valeurs en tant qu'accessoires au composant contrôlé. Un composant non maîtrisé, en revanche, gère son état, et vous devrez interroger le DOM en utilisant ref pour obtenir sa valeur.

11. Que sont les Props dans React ?

Props in React est juste une façon simple de dire des propriétés, et par là, vous faites référence aux propriétés d'un composant. Les accessoires sont utilisés pour transmettre des données d'un composant parent à un ou plusieurs composants enfants, et ils sont en lecture seule pour le composant enfant.

12. Que sont les props.children ?

L'attribut Props.children contient des informations sur tout le contenu d'un composant qui a une ouverture et une balise de fermeture. Ces enfants font référence à tous les éléments définis dans le composant actuel et peuvent être un, plusieurs ou aucun.

13. Pouvez-vous mettre à jour les accessoires dans React ?

Non, les accessoires dans React sont descendants et immuables. Cela signifie qu'un composant peut envoyer toutes les propriétés qu'il souhaite à ses enfants, mais il ne peut pas mettre à jour ses accessoires. Seul son parent peut mettre à jour ses props.

14. Qu'est-ce que JSX ?

JSX signifie JavaScript XML. Il s'agit d'une extension de syntaxe JavaScript qui permet d'écrire du HTML à l'intérieur du code de réaction. De toute façon, le navigateur ne comprend pas JSX, donc React doit le rendre en code HTML lisible.

15. Quelle est la différence entre un composant et un élément

Un élément est une définition sans état et immuable d'un nœud DOM virtuel. Il contient à la fois un type et une propriété, mais pas de méthodes comme un composant. Ce manque de méthodes le rend rapide.

16. Qu'est-ce qu'un état dans React ?

Un état dans React fait référence à un objet intégré dans un composant qui est utilisé pour contenir et gérer des informations sur ce composant. Un état peut changer au fil du temps et déclenchera ainsi un nouveau rendu de ce composant. Vous devez définir l'état dans la méthode constructeur du composant, sinon le composant devient sans état.

17. Qu'est-ce qu'un composant sans état ?

Un composant React sans état n'a pas d'état. Cela signifie que vous ne pouvez ni définir son état avec this.setState () méthode ni ne l'ont rendu. Un composant sans état peut cependant avoir des props.

18. Comment mettre à jour un état dans React

Vous mettez à jour l'état d'un composant en appelant son this.setState () méthode.

19. Expliquez le mode strict de React

Le mode strict de React est un outil qui aide le développeur à découvrir les problèmes potentiels dans l'application en activant des vérifications plus approfondies sur les composants et en mettant en évidence davantage d'avertissements. Le mode strict n'est disponible qu'en mode développement.

20. Que signifie l'augmentation de l'état de levage dans React ?

Cela signifie laisser les composants enfants partager un état commun à partir de leur parent, car cela rend les choses plus faciles à gérer que pour chaque composant enfant pour gérer individuellement l'état commun.

21. Comment transmettez-vous des données dans React ?

Vous transmettez des données dans React à l'aide d'accessoires et de rappels. Les accessoires de React sont unidirectionnels, permettant aux propriétés de passer uniquement des composants parents à leurs enfants. Pour transmettre des données d'un composant enfant à un parent, vous devez utiliser une fonction de rappel.

22. Définir Flux dans Réagir

Flux est un concept unidirectionnel pour diriger le flux de données dans une application. Être unidirectionnel signifie que les données ne peuvent passer que des composants parent aux composants enfants. Flux peut également inclure plusieurs magasins de données par application.

23. Définir Redux dans Réagir

Redux est une bibliothèque JavaScript open source utile pour gérer des états complexes dans une application. Il est indépendant et peut être utilisé dans d'autres frameworks tels que Angular. Contrairement à Flux, Redux centralise la gestion de l'état d'une application, facilitant ainsi la création d'interfaces utilisateur complexes.

24. Quand devriez-vous utiliser Redux ?

Toutes les applications n'ont pas besoin de Redux. Mais il est utile dans les conditions suivantes :

1. Lorsque vous avez de grandes quantités d'états d'application dans votre application
2. Lorsque la logique de votre application est complexe
3. Lorsque votre application a une grande base de code
4. Lorsque vous devez fréquemment mettre à jour l'application
5. Lorsque de nombreuses personnes travaillent sur l'application

25. Quelle est la principale différence entre Redux et Flux ?

La principale différence entre les deux est que Redux gère toutes les données d'application à partir d'un seul magasin, alors que vous pouvez avoir plusieurs magasins sous Flux.

26. Lister les composants de Redux

Il y a 4 parties principales de Redux :

1. Boutique – C'est ici que vous stockez l'état de l'application.
2. Action - Ce sont des événements qui amènent l'application à envoyer des données au magasin Redux.
3. Moulure de Réduction - Il s'agit d'une fonction qui accepte l'état actuel de l'application et une action comme arguments, puis renvoie un nouvel état comme résultat.
4. Middleware - Cette fonctionnalité permet à un développeur de capturer toutes les actions d'un composant avant qu'elles n'atteignent la fonction de réduction.

27. Que sont les React Hooks ?

Les crochets React sont une fonctionnalité des composants fonctionnels qui vous permettent d'accéder à différentes fonctionnalités React, telles que les données d'état et les mises à jour de rendu. Il a été introduit dans React 16.8.

28. Lister le type de Hooks dans React

Il y a plus de 15 crochets dans React, à partir des crochets de base comme useState, useEffect et useContext jusqu'aux crochets supplémentaires comme useCallback, useReducer, useMemo, useRef, etc.

29. Que sont les fragments ?

Un fragment React est un moyen pratique de regrouper plusieurs éléments enfants dans un composant, sans les ajouter au DOM. Vous définissez simplement la balise en utilisant :

<>

or

et chargez tous les éléments enfants que vous voulez à l'intérieur. La seule différence est que la version abrégée <> n'accepte pas les clés et les attributs, contrairement à la version longue.

30. Lister les principales méthodes du package react-dom

Il s'agit de createPortal() pour le rendu des enfants dans un DOM externe et de flushSync() pour le vidage des mises à jour. Il existe également les méthodes render() et hydrate(), qui ont été remplacées par createRoot() et hydrateRoot() depuis React 18.

31. Que sont les clés React ?

Les clés sont des identifiants uniques qui sont mieux utilisés pour gérer les listes. Les clés permettent d'identifier facilement les éléments individuels d'une liste et de savoir quand chaque élément a été mis à jour, supprimé ou modifié de quelque manière que ce soit.

32. Pourquoi les clés React sont-elles importantes ?

Les clés sont importantes dans React car elles contribuent au rendu efficace du vrai DOM. React est bon car il essaie de minimiser les composants qu'il restitue après un événement, et l'utilisation de clés sur une liste empêche React d'avoir à restituer des listes entières, ce qui peut être un problème avec les grandes listes.

33. Qu'est-ce qu'un événement dans React ?

Un événement est toute action dans une application qui provient soit de l'utilisateur, soit du système. Un événement peut aller d'un clic de souris ou d'un appui sur des appareils mobiles à un redimensionnement de fenêtre, une pression sur une touche, un glissement, une mise au point, etc.

34. Expliquez ce que Événement synthétique Veux dire

Un événement synthétique est un wrapper autour des événements natifs d'un navigateur, le problème étant que différents navigateurs nomment leurs événements différemment. React utilise des événements synthétiques pour éviter le problème d'avoir à créer plusieurs implémentations et méthodes pour tous les différents navigateurs. De cette façon, React conserve des noms communs pour tous les différents événements du navigateur en tant qu'API unifiée.

35. Qu'est-ce que Webpack ?

Webpack est un système de regroupement de modules utilisé pour combiner et réduire les fichiers JavaScript et CSS. Il est construit sur Node.js et est utile lorsque vous travaillez avec un grand nombre de fichiers ou de ressources non codées telles que des images et des polices.

36. Qu'est-ce que l'application create-react ?

Create-react-app est un outil qui vous aide à créer une application React d'une seule page dans votre environnement Node.js. Il génère tous les fichiers et dossiers dont vous avez besoin pour démarrer une application de base et vous la prenez à partir de là. Il nécessite Node version 14.0.0 vers le haut et npm à partir de la ver. 5.6.

L'utilisation est simple :

npx créer-réagir-app myNewApp

cd maNouvelleApp

npm début

37. Pouvez-vous rendre le côté serveur avec React ?

Oui, vous pouvez, même si cela peut nécessiter beaucoup de ressources pour les grands projets. Le rendu côté serveur est utile car il améliore l'expérience utilisateur et le référencement. Vous aurez besoin d'un environnement Node.js, d'un bundler comme Webpack et d'un framework comme Next.js et Remix pour rendre les applications React au moment de l'exécution. Une solution à l'utilisation intensive des ressources consiste à utiliser un générateur de site statique, tel que le Next.js-based Gatsby.

38. Expliquez ce que fait une fonction fléchée

Une fonction fléchée est simplement une manière plus courte de définir des fonctions. Il s'agit d'un raccourci ES6 qui remplace :

= fonction() avec ()=>.

Par exemple:

test = fonction(){

return "Ceci est un test" ;

}

devient alors :

essai = () => {

retour "Ceci est un test" ;

}

ou pour les instructions sur une seule ligne :

test = () => "Ceci est un test" ;

39. Qu'est ce qu'un Routeur React?

Le routeur React est une bibliothèque qui fournit des fonctionnalités de routage dans une application React. Il facilite l'inclusion et l'utilisation de composants de navigation riches, ce qui peut être très utile pour les projets volumineux ou complexes.

40. Quels sont les principaux avantages de l'utilisation de React Router ?

Il crée différents chemins d'URL pour votre application et fournit des valeurs window.location et un objet d'historique.

41. Qu'est-ce que ComponentWillUnmount() ?

Il s'agit d'une méthode de composant qui est appelée chaque fois que React est sur le point de détruire le composant. C'est un endroit agréable pour nettoyer des éléments, effacer des minuteries, annuler des requêtes réseau et gérer d'autres problèmes de désinitialisation importants.

42. Qu'est-ce que le Constructeur() ?

Le constructeur est la méthode du composant qui est appelée lors de l'initialisation du composant. Il est généralement utilisé pour initialiser des états locaux et pour lier des méthodes de gestionnaire d'événements.

43. Qu'est-ce que le DOM virtuel ?

Le DOM virtuel de React est une copie allégée du DOM du document HTML réel. Il est utilisé pour une gestion et une mise à jour efficaces des modifications sur le DOM réel.

44. Quels sont les avantages du DOM virtuel par rapport au DOM réel ?

Le DOM virtuel est léger et plus rapide à rendre que le DOM réel, ce qui rend plus efficace le rendu au DOM virtuel en premier et n'apporte des modifications au DOM réel qu'en cas de besoin. Chaque nœud sur le DOM réel a un composant correspondant sur le DOM virtuel, et une fois qu'il y a des modifications apportées à un composant virtuel après le rendu, React sait alors exactement quel nœud HTML réel mettre à jour ou supprimer.

45. Expliquez le terme Réconciliation dans Réagir

La réconciliation est la méthode de React consistant à mettre à jour le DOM réel uniquement lorsque cela est nécessaire, en vérifiant les versions mises à jour du DOM virtuel par différenciation et en ne mettant à jour que les nœuds exacts qui ont changé sur le DOM réel.

46. Expliquez le terme Profiler dans Réagir

Profiler est un outil React qui permet d'optimiser une application en mesurant le nombre de rendus d'une application et le temps nécessaire à chaque composant pour s'afficher. Cela aide le développeur à identifier les parties de l'application qui peuvent nécessiter une optimisation.

47. Expliquez le terme Comportementale dans Réagir

Le contexte est une méthode de transmission de données entre les composants React à plusieurs niveaux sans avoir à transmettre les données à chaque niveau d'imbrication à l'aide d'accessoires. Il est préférable de l'utiliser pour partager facilement des données avec de nombreux composants qui n'ont pas besoin de mises à jour constantes, telles que les informations sur le thème et les données utilisateur. Son inconvénient est qu'il peut rendre difficile la réutilisation des composants.

48. Expliquez le terme Montage dans Réagir

Le montage dans React est le processus d'attachement d'un composant en tant que nœud au DOM. Le démontage est le contraire.

49. Expliquez le terme interprétation dans Réagir

Le rendu est le processus de dessin d'un composant. Cela se produit généralement lorsque l'état du composant change et que React doit redessiner l'interface utilisateur. Si un composant est redessiné pendant le rendu, ses composants enfants sont également redessinés.

50. Expliquez le terme Limite d'erreur dans Réagir

La limite d'erreur fait référence à un composant React qui intercepte les erreurs JavaScript de ses composants enfants, enregistre les erreurs et affiche une interface utilisateur de secours à la place des nœuds qui se sont écrasés. Les limites d'erreur ont été introduites dans React 16.

Conclusion

Nous avons atteint la fin de cette liste des 50 principales questions d'entretien React à connaître et vous devriez, espérons-le, avoir une bonne idée de ce à quoi vous pouvez vous attendre maintenant.

Vous devez également noter que rien ne reste le même et que votre entretien peut prendre n'importe quelle direction. Par conséquent, vous devez continuer à étudier et à vous tenir au courant.