Top 70 des questions et réponses d'entretien avec React JS

Questions et réponses d'entretien de réaction

Voici les questions et réponses d'entretien avec ReactJs pour les candidats débutants et expérimentés pour obtenir l'emploi de leurs rêves.

1) Qu'est-ce que Reactjs ?

React est une bibliothèque JavaScript qui facilite la création d'interfaces utilisateur. Il a été développé par Facebook.


2) React utilise-t-il Html?

Non, il utilise JSX, qui est similaire à HTML.

Téléchargement PDF gratuit : questions et réponses pour l'entretien React


3) Quand React a-t-il été publié pour la première fois ?

React a été publié pour la première fois en mars 2013.


4) Donnez-moi deux inconvénients les plus importants de React

  • L'intégration de React au framework MVC comme Rails nécessite une configuration complexe.
  • React exige que les utilisateurs aient des connaissances sur l'intégration de l'interface utilisateur dans le framework MVC.

5) Indiquez la différence entre Real DOM et Virtual DOM

DOM réel DOM virtuel
Il est mis à jour lentement. Il se met à jour plus rapidement.
Il permet une mise à jour directe depuis HTML. Il ne peut pas être utilisé pour mettre à jour HTML directement.
Cela gaspille trop de mémoire. La consommation de mémoire est moindre
Questions d'entretiens chez React JS
Questions d'entretiens chez React JS

6) Qu'est-ce que Flux Concept In React ?

Facebook utilise largement le concept d'architecture de flux pour développer des applications Web côté client. Ce n'est pas un framework ou une bibliothèque. Il s'agit simplement d'un nouveau type d'architecture qui complète React et le concept de flux de données unidirectionnel.


7) Définir le terme Redux dans React

Redux est une bibliothèque utilisée pour le développement front-end. Il s'agit d'un conteneur d'état pour les applications JavaScript qui doit être utilisé pour la gestion de l'état des applications. Vous pouvez tester et exécuter une application développée avec Redux dans différents environnements.


8) Qu'est-ce que la fonctionnalité « Store » dans Redux ?

Redux dispose d'une fonctionnalité appelée « Store » qui vous permet de sauvegarder l'intégralité de l'état de l'application en un seul endroit. Par conséquent, tous les états de ses composants sont stockés dans le Store afin que vous receviez des mises à jour régulières directement depuis le Store. L'arborescence d'état unique vous aide à suivre les modifications au fil du temps et à déboguer ou inspecter l'application.


9) Qu'est-ce qu'une action dans Redux ?

C'est une fonction qui renvoie un objet action. Le type d'action et les données d'action sont toujours stockés dans l'objet d'action. Les actions peuvent envoyer des données entre le Store et l'application logicielle. Toutes les informations récupérées par le Store sont produites par les actions.


10) Nommez les fonctionnalités importantes de React

Voici les fonctionnalités importantes de React.

  • Vous permet d'utiliser des bibliothèques tierces
  • Un gain de temps
  • Développement plus rapide
  • Simplicité et Composable
  • Entièrement pris en charge par Facebook.
  • Stabilité du code avec liaison de données unidirectionnelle
  • Composants React

11) Expliquez le terme composants apatrides

Les composants sans état sont des fonctions pures qui s'affichent en DOM uniquement en fonction des propriétés qui leur sont fournies.


12) Expliquer le routeur React

React Router est une bibliothèque de routage qui vous permet d'ajouter de nouveaux flux d'écran à votre application, et il maintient également l'URL synchronisée avec ce qui est affiché sur la page.


13) Quels sont les packages d'animation populaires dans l'écosystème React ?

Les packages d'animation populaires dans l'écosystème React sont

  • Réagir au mouvement
  • Groupe de transition React

14) Qu'est-ce que la plaisanterie ?

Jest est un framework de tests unitaires JavaScript créé par Facebook basé sur Jasmine. Il propose une création automatisée de simulations et un environnement jsdom. Il est également utilisé comme composant de test.


15) Qu'est-ce qu'un répartiteur ?

Un répartiteur est une plate-forme centrale d'application où vous recevrez des actions et diffuserez la charge utile aux rappels enregistrés.


16) Qu'entend-on par fonction de rappel ? Quel est son but?

Une fonction de rappel doit être appelée lorsque setState est terminé et le composant est restitué. Comme setState est asynchrone, c’est pourquoi il utilise une deuxième fonction de rappel.


17) Expliquez le terme composant d'ordre élevé

Un composant d'ordre supérieur, également connu sous le nom de HOC, est une technique avancée de réutilisation de la logique des composants. Cela ne fait pas partie de React API, mais il s'agit d'un modèle qui émerge de la nature compositionnelle de React.


18) Expliquez le segment de présentation

Une partie présentation est un segment qui vous permet de restituer du HTML. La capacité du segment est présentationnelle en termes de balisage.


19) Que sont les accessoires dans React Js ?

Les accessoires signifient des propriétés, qui sont un moyen de transmettre des données du parent à l'enfant. On peut dire que les accessoires ne sont qu'un canal de communication entre les composants. Il passe toujours du composant parent au composant enfant.


20) A quoi sert un super mot-clé dans React ?

Le super mot-clé vous aide à accéder et à appeler des fonctions sur le parent d'un objet.


21) Expliquez le slogan de rendement en JavaScript

Le slogan de rendement est utilisé pour retarder et CV un travail de générateur, connu sous le nom de slogan de rendement.


22) Nommez deux types de composants React

Il existe deux types de composants React :

  • Composant fonctionnel
  • Composant de classe

23) Expliquez l'événement synthétique dans React js

L'événement synthétique est une sorte d'objet qui agit comme un wrapper multi-navigateur autour de l'événement natif du navigateur. Cela nous aide également à combiner les comportements de différents navigateurs dans l'API de signal.


24) Qu'est-ce que l'état de réaction ?

C'est un objet qui décide du rendu d'un composant spécifique et de son comportement. L'état stocke les informations qui peuvent être modifiées au cours de la durée de vie d'un composant React.


25) Comment pouvez-vous mettre à jour l'état dans react js ?

Un état peut être mis à jour sur le composant directement ou indirectement.


26) Expliquer l'utilisation de la fonction flèche dans React

La fonction flèche vous aide à prédire le comportement des bogues lorsqu'ils sont transmis en rappel. Par conséquent, cela évite les bugs causés par tout cela.


27) Quelles sont les étapes du cycle de vie de React ?

Les étapes importantes du cycle de vie de React js sont :

  • Initialisation
  • Mises à jour de l'état/de la propriété
  • La destruction est le cycle de vie de React

28) Énoncez la principale différence entre les pros et l’État

La principale différence entre les deux est que l’État est mutable et les Pros sont immuables.


29) Expliquez les composants purs dans React js

Les composants purs sont les composants les plus rapides qui peuvent remplacer n'importe quel composant avec seulement un render(). Il vous aide à améliorer la simplicité du code et les performances de l'application.


30) Quel type d'informations contrôle un segment dans React ?

Il existe principalement deux types d'informations qui contrôlent un segment : l'état et les accessoires.

  • État : les informations d'État qui vont changer, nous devons utiliser l'État.
  • Accessoires : les accessoires sont définis par le parent et sont réglés tout au long de la durée de vie d'une pièce.

31) Qu'est-ce que 'create-react-app' ?

'create-react-app' est un outil de ligne de commande qui vous permet de créer une application de réaction de base.


32) Expliquez l'utilisation de « clé » dans la liste de réactions

Les clés vous permettent de fournir à chaque élément de la liste une identité stable. Les clés doivent être uniques.


33) Que sont les accessoires pour enfants ?

Les accessoires enfants sont utilisés pour transmettre un composant à d'autres composants en tant que propriétés. Vous pouvez y accéder en utilisant

{props.children}

34) Expliquez les limites d'erreur ?

Les limites d'erreur vous aident à détecter les erreurs Javascript n'importe où dans les composants enfants. Ils sont les plus utilisés pour enregistrer l’erreur et afficher une interface utilisateur de secours.


35) A quoi servent les balises vides <> ?

Les balises vides sont utilisées dans React pour déclarer des fragments.


36) Expliquer le mode strict

StrictMode vous permet d'exécuter des vérifications et des avertissements pour les composants de réaction. Il fonctionne uniquement sur la version de développement. Il vous aide à mettre en évidence les problèmes sans afficher aucune interface utilisateur visible.


37) Que sont les portails à réaction ?

Portal vous permet de restituer les enfants dans un nœud DOM.  Méthode CreatePortal est utilisé pour cela.


38) Qu'est-ce que le contexte ?

Le contexte React vous aide à transmettre des données à l'aide de l'arborescence des composants React. Il vous aide à partager des données à l'échelle mondiale entre différents composants de réaction.


39) A quoi sert Webpack ?

Webpack est essentiellement un constructeur de modules. Il s'exécute principalement pendant le processus de développement.


40) Qu'est-ce que Babel dans React js ?

Babel est un compilateur JavaScript qui convertit les derniers JavaScript comme ES6, ES7 en ancien JavaScript ES5 que la plupart des navigateurs comprennent.


41) Comment un navigateur peut-il lire un fichier JSX ?

Si vous souhaitez que le navigateur lise JSX, ce fichier JSX doit être remplacé à l'aide d'un transformateur JSX comme Babel, puis renvoyé au navigateur.


42) Quels sont les principaux problèmes liés à l'utilisation de l'architecture MVC dans React ?

Voici les principaux défis auxquels vous serez confronté lors de la gestion de l'architecture MVC :

  • La gestion du DOM est assez coûteuse
  • La plupart du temps, les applications étaient lentes et inefficaces
  • En raison des fonctions circulaires, un modèle complexe a été créé autour de modèles et d'idées

43) Que peut-on faire lorsqu'il y a plus d'une ligne d'expression ?

À ce stade, une expression JSX multiligne est la seule option qui vous reste.


44) Quelle est la réduction ?

La réduction est une méthode d'application de la gestion de l'État.


45) Expliquez le terme événements synthétiques

Il s'agit en fait d'un wrapper multi-navigateur autour de l'événement natif du navigateur. Ces événements ont les interfaces stopPropagation() et PreventDefault().


46) Quand devez-vous utiliser les éléments de première classe pour l'élément de fonction ?

Si votre élément effectue une étape ou un cycle de vie, nous devons utiliser des éléments de première classe.


47) Comment partager un élément dans l'analyse ?

En utilisant l'État, nous pouvons partager les données.


48) Expliquez le terme réconciliation

Lorsque l'état ou les accessoires d'un composant changent, rest comparera l'élément rendu avec le DOM précédemment rendu et mettra à jour le DOM réel si nécessaire. Ce processus est connu sous le nom de réconciliation.


49) Comment pouvez-vous restituer un composant sans utiliser la fonction setState() ?

Vous pouvez utiliser la fonction forceUpdate() pour restituer n'importe quel composant.


50) Pouvez-vous mettre à jour les accessoires en réaction ?

Vous ne pouvez pas mettre à jour les accessoires dans React js car les accessoires sont en lecture seule. De plus, vous ne pouvez pas modifier les accessoires reçus du parent à l'enfant.


51) Expliquez le terme « Restructuration ».

La restructuration est un processus d'extraction de tableau objets. Une fois le processus terminé, vous pouvez séparer chaque objet dans une variable distincte.


52) Pouvez-vous mettre à jour les valeurs des accessoires ?

Il n'est pas possible de mettre à jour la valeur des accessoires car elle est immuable.


53) Expliquez la signification de Montage et Démontage

  • Le processus de fixation de l'élément au DCOM est appelé montage.
  • Le processus de détachement de l'élément du DCOM est appelé processus de démontage.

54) A quoi sert la librairie 'prop-types' ?

La bibliothèque 'Prop-types' vous permet d'effectuer une vérification de type d'exécution pour les accessoires et objets similaires dans une application récente.


55) Expliquer les crochets de réaction

Les hooks React vous permettent d'utiliser State et d'autres fonctionnalités React sans écrire de classe.


56) Que sont les fragments ?

Vous pouvez utiliser le mot-clé fragment pour regrouper une liste de composants enfants sans utiliser de nœuds supplémentaires dans le DOM. Par exemple :

render() {

return (
);
}

57) Quelle est la principale différence entre createElement et cloneElment ?

  • createElement est utilisé par React pour créer des éléments de réaction.
  • cloneElement est utilisé pour cloner un élément et lui transmettre de nouveaux accessoires.

58) Que sont les composants contrôlés ?

Les composants contrôlés sont des composants qui contrôlent les éléments d'entrée.


59) Pourquoi devez-vous utiliser props.children ?

Ce props.children vous permet de transmettre un composant sous forme de données à d'autres composants.


60) Répertoriez certaines des méthodes dans un package React-Dom

Les méthodes importantes pour les packages React-Dom sont :

  • rendre()
  • hydrater()
  • créer un portail()
  • démonterComponentAtNode()
  • trouverDOMNode()

61) Comment pouvons-nous effectuer un rendu côté serveur dans React ?

Nous pouvons utiliser le service de réaction pour effectuer le rendu côté serveur.


62) Indiquez la différence entre getInitialState() et constructor() ?

Si vous souhaitez créer un composant en étendant 'React. Component', le constructeur vous aide à initialiser l'état. Mais si vous souhaitez créer en utilisant « Reat.createClass ». alors vous devez utiliser « genInitiaState ».


63) Qu'est-ce que les références ?

Ref sont un attribut des éléments DOM. Le but principal des références est de trouver facilement les éléments DOM.


64) Qu'est-ce que ComponentWillMount()

composantWillMount() doit effectuer des appels API une fois le composant lancé et configurer les valeurs dans l'état. Pour effectuer un appel API, utilisez un HttpClient tel qu'Axios, ou nous pouvons utiliser fetch() pour déclencher l'appel AJAX.


65) Comment dispatcher les données en magasin ?

Nous pouvons envoyer les données à un autre composant qui doit être basé sur l'action qui stocke le composant parent.


66) Comment serez-vous capable de gérer plus d'actions en utilisant Redux ?

Afin de créer le même composant dans plus de flux d'actions, nous utilisons la même fonctionnalité dans différents modules.


67) Comment renverser les réducteurs ?

Nous pouvons répartir les sauvetages en fonction des actions de l'événement. Cette action doit être divisée en modules distincts.


68) Nommez cinq prototypes prédéfinis utilisés dans React

Les prototypes les plus importants utilisés dans React js sont :

  • nombre
  • un magnifique
  • tableau
  • objet
  • élément

69) Quel est le but d’utiliser bindActionsCreators ?

BindActionCreator vous aide à lier l'événement basé sur le répartiteur d'action à l'élément HTML.


70) Qu'est-ce que REFS dans React

Ref est une référence à l'élément. Il doit être évité dans la plupart des cas. Cependant, il est parfois utilisé lorsque vous devez accéder directement au DOM ou à une instance du composant.


71) L'élément JSX peut-il être attaché à d'autres composants JSX ?

Oui, vous pouvez utiliser l'élément Attach JSX avec d'autres composants JSX, ce qui est très similaire à l'imbrication d'éléments HTML.


72) Quelle est la version stable actuelle de React ?

La version stable actuelle de React est la version 17.5


73) Nommez une fonctionnalité importante des fonctionnalités de flux de travail Redux

Les fonctionnalités importantes du flux de travail Redux sont :

  • Réinitialiser : vous aide à réinitialiser l'état du magasin
  • Revenir : vous permet de revenir au dernier état validé
  • Balayage : toutes les actions de désactivation que vous pourriez déclencher par erreur seront supprimées
  • Commit : vous aide à faire de l'état actuel l'état initial.

74) Énoncer la différence entre React JS et React Native

React JS est une bibliothèque JavaScript open source frontale utilisée pour créer des interfaces utilisateur, tandis que React Native est un framework mobile open source qui permet aux développeurs d'utiliser React sur des plates-formes comme Android et iOS. Ces questions d'entretien vous aideront également dans votre soutenance (orale)

Partager

10 Commentaires

  1. Avatar Valmik Jadhav dit:

    64) Qu'est-ce que ComponentWillMount()

    La réponse est fausse..

  2. faute d'orthographe à la question numéro 74 « Rect Native »,

    1. Alex Silverman Alex Silverman dit:

      Bonjour, merci de l'avoir signalé. C'est corrigé.

  3. Avatar Paul Fleischer-Djoleto dit:

    Bonnes questions. Je n'ai pas vu de questions sur les crochets fonctionnels. Pas un seul.

  4. faute d'orthographe dans la question numéro 62 « getIntialState() »

    1. Merci, le contenu a été mis à jour.

  5. Avatar Atul Ghisali dit:

    Ajouter plus de questions sur React

  6. Avatar Témoignages dit:

    Vous avez mentionné que la restructuration n'est pas une restructuration, mais une destruction. Corrigez cela, s'il-vous-plaît

Soyez sympa! Laissez un commentaire

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *