Couvrez ces sujets React et vous êtes prêt à partir dans votre prochaine interview

Mar 27 2023
React est connu comme le framework JS le plus utilisé. C'est aussi un meilleur choix que Angular à bien des égards.
Maîtrisez votre entretien React

React est connu comme le framework JS le plus utilisé. C'est aussi un meilleur choix que Angular à bien des égards. J'ai essayé d'inclure le lien CodeSandbox ci-dessous pour quelques exemples auxquels se référer. J'ai essayé de couvrir tous les scénarios possibles pour les questions basées sur React et j'ai inclus les liens ci-dessous, alors vérifiez cela, mais avant tout, assurez-vous d'avoir bien couvert ces sujets JS avant de passer à React Framework :

Toutes les questions pour préparer votre prochain Entretien Frontend

Maintenant que c'est fait, nous pouvons passer aux sujets React. Chaque entretien Frontend aura 80% de chances que vous deviez montrer à l'intervieweur une page React fonctionnelle. Ils pourraient vous demander de faire les choses suivantes :

· Créez un composant React (fonctionnel) et récupérez les données de n'importe quelle API publique. Vous pouvez utiliser n'importe quel IDE en ligne comme CodeSandbox et y ouvrir un nouveau projet React. Leur objectif principal ici est de voir comment vous appelez l'API et comment vous pouvez afficher les données. Consultez le lien ci-dessous pour cet exemple de travail que j'ai créé :

https://codesandbox.io/s/epic-violet-2um6gk

· En plus de ce qui précède, ils peuvent vous demander de manipuler le résultat de l'API et d'afficher uniquement les noms/e-mails, etc. sur l'interface utilisateur. Vous pouvez vous assurer d'ajouter la gestion des erreurs et d'utiliser l'opérateur de repos pour afficher les données.

Réagissez aux sujets importants

· Composants basés sur les classes par rapport aux composants fonctionnels et pourquoi les composants fonctionnels sont les plus utilisés de nos jours.

· Crochets dans React. Certains crochets super imp sont : useState, useEffect, useRef, useCallback

· Problème de Prop Drilling et quelle est sa solution ?

· Bibliothèques de gestion React State comme Context API et Redux et laquelle est préférée quand (structure de base de Redux et comment l'implémenter avec des composants fonctionnels).

· Méthodes de cycle de vie d'état. Vous pouvez commencer par la façon dont les méthodes de cycle de vie étaient dans les composants basés sur les classes et comment elles sont maintenant. Vous devez connaître useEffect en détail pour cela. Pour votre information, useEffect peut être utilisé de 3 manières (pour le premier rendu, pour chaque rendu de changement de dépendance et lors du démontage des composants)

· Composants purs

· React-Router

· Composants d'ordre supérieur

· React Testing Library, Jest, Enzyme, etc. Doit connaître Mock and Spy

Sujets React de haut niveau (mises à jour de React 18)

· Crochets personnalisés

· Fractionnement de code

· Chargement paresseux avec Suspense et Fallback

· Fractionnement de code basé sur l'itinéraire

· Concurrence (priorisation mise à jour de l'état)

· useDeferredValue()

· SSR dans ReactJS (Utilisation de la méthode ReactDOMServer renderToString)

· Middlewares Redux comme Thunk, Saga, Datadog & Sentry (pour la journalisation), etc.

Quelques exemples de travail React pour la pratique

· Application à faire. Consultez mon bac à sable pour la solution :

https://codesandbox.io/s/todo-list-forked-fksrr

· Créez une structure de dossiers dans laquelle vous pouvez ajouter un dossier, puis y ajouter des fichiers. Il doit s'ouvrir et se fermer en cliquant sur le nom du dossier. Les dossiers peuvent également avoir des sous-dossiers. Au clic du dossier racine, il doit fermer tous les sous-dossiers.

· Récupérer les données de l'API et afficher une liste déroulante de tous les noms, en cliquant sur n'importe quel nom, afficher le reste des informations pour cette entrée d'utilisateur

· Organisez le résultat de l'API dans un tableau avec le CSS approprié. Essayez d'utiliser Flexbox ici.

· Créez une zone de recherche sur l'interface utilisateur et chaque valeur de recherche saisie doit appeler une API avec le terme de recherche saisi et afficher le résultat dans une liste déroulante. Consultez mon bac à sable pour la solution :

https://codesandbox.io/s/aged-snowflake-lft7hj?file=/src/components/Search.js

· Mise en page. Tout le contenu est divisé en pages avec une liste de numéros de page dans le pied de page

· Panier

La liste peut sembler plus courte que ma liste de feuille de route JS, mais assurez-vous de prendre votre temps pour bien pratiquer ces sujets. Une entrevue frontale couvrira très probablement tous les sujets mentionnés en détail, alors assurez-vous de les avoir également utilisés dans des applications réelles. Bien sûr, vous pouvez vous plonger dans TypeScript et NextJs après cela, car cela est très utilisé dans l'industrie en ce moment.

Bonne chance!