Guide de recrutement pour les développeurs React.js en 2022

À propos de React

React.js est un framework JavaScript open-source focalisé sur la création d'interfaces utilisateur. C'est l'un des meilleurs frameworks de développement front-end car il permet aux développeurs de créer des produits robustes et complexes tout en étant simple à intégrer à des applications existantes.

Les développeurs utilisent React pour créer des applications web à grande échelle capables de modifier es données sans recharger la page. L'objectif principal de React est d'être rapide, évolutif et convivial.

De plus, React est compatible avec diverses bibliothèques et frameworks JavaScript et est utilisé par un certain nombre d'entreprises célèbres, telles que Meta (anciennement Facebook), Netflix et bien d'autres. Cependant, il ne faut pas le confondre avec React Native, qui est surtout utilisé pour développer des applications mobiles multiplateformes.

L'ensemble du développement et de la maintenance des composants UI sont pris en charge par des développeurs React.js. Ils créent des applications et des designs front-end, des composants d'application et des interfaces utilisateur. Et comme tout professionnel du développement logiciel, les meilleurs ne sont pas si faciles à trouver !

Statistiques développeurs React.js

Si vous pensez que React.js est la bonne solution logicielle pour votre projet, il n'est pas inutile de prendre connaissance de certaines données générales sur les développeurs qui maîtrisent ce framework et d'autres langages de programmation compatibles.

Selon le rapport 2021 de Stack Overflow, React.js est désormais le framework web le plus populaire, dépassant de près de 6 % le second, jQuery. Et ces données sont basées sur les réponses de 49941 développeurs professionnels, parmi lesquels 19864 choisissent React comme leur framework de programmation favori.

Le volume des réponses vous démontre à lui seul le grand nombre de développeurs qui maîtrisent ce framework, même s'il est difficile de déterminer combien de développeurs React il existe au niveau global. Mais cela ne signifie pas qu'il y a un surplus de bons développeurs React : en fait, plus de 8700 professionnels dans le monde l'utilisent pour leurs projets de développement web.

Et lorsqu'il s'agit du coût d'embauche d'un développeur React, les taux horaires seuls peuvent atteindre jusqu'à 60 dollars. Sans compter le coût des annonces d'emploi, du recrutement, du processus d’accueil, de l’évaluation des compétences et du coût des perturbations dans votre équipe de développeurs jusqu'à ce que vous trouviez la meilleure personne pour le poste.

Comment interviewer un développeur React.js

Conseils pour votre présélection

Le processus de recrutement d'un excellent développeur à temps plein débute par un appel de présélection. Cet appel est moins axé sur les compétences techniques que sur l'élimination des candidats que vous jugez non professionnels ou qui ne correspondent tout simplement pas à la culture de l'entreprise.

Notre Directrice du Recrutement, Nadya Pokhyla, utilise une approche pratique pour noter les candidats lors des présélections à l'aide d'une grille d’évaluation pratique.

"J'accorde une grande attention à leur professionnalisme, à leur présentation de soi et à leurs compétences en matière de communication ; ainsi qu'à leur motivation, leur enthousiasme, leurs compétences en anglais et bien d'autres points importants que nous évaluons lors de la présélection. J'aime me poser la question suivante : "Est-ce que je travaillerais avec cette personne en tant que collègue ?"."

Nadya Pokhyla

Evgenia Kashchuk, spécialiste de l'acquisition de talents, ajoute :

"Après avoir mené de nombreux entretiens, je peux dire que les principales compétences non techniques sont la présentabilité (tout commence par un appel avec un recruteur), l'ouverture, la sociabilité, l'honnêteté, la curiosité, la flexibilité."

Evgenia Kaschuk

Principales compétences techniques à rechercher chez les développeurs React.js

Étant donné que trouver les meilleurs développeurs React.js peut s'avérer une tâche assez laborieuse (et coûteuse aussi!), nous avons demandé à nos recruteurs et à nos responsables d'entretiens techniques de nous aider à déterminer les compétences les plus importantes qu'ils devraient posséder, en dehors d'une maîtrise de React.js et de leurs années d'expérience.

Selon Terri Prifti, ingénieur React en charge des entretiens techniques, les trois compétences techniques les plus importantes à rechercher chez un développeur React.js sont :

"Un développeur React.js doit être capable d'écrire du HTML + CSS et être au courant des principes du web responsive. Il doit également être familier avec la syntaxe JSX et comprendre les principes fondamentaux du langage JavaScript (par exemple les types de données, la manipulation du DOM, le mot-clé "this", les fonctions de rappel)."

Terri Prifti

Il ajoute qu'un bon développeur React devrait être familier avec :

• Composants d'ordre supérieur (HOCs) ;
• Composants de rendu peu profonds (Shallow rendering) ;
• Être capable d'éviter le prop drilling ;
• Écrire des tests.

Catherine Fialkova, spécialiste de l'acquisition talents, souligne qu'"un bon développeur React.js doit travailler avec des balises HTML, écrire des sélecteurs CSS, comprendre le box model et comment réinitialiser le border-box, et avoir une compréhension de la flexbox."

"Tout développeur React devrait également comprendre comment le fonctionnement de Git et disposer d’un profil sur GitHub ou GitLab. JSX est une abstraction de React. Il est crucial pour un développeur d'avoir des connaissances sur cette extension du HTML."

Catherine Fialkova

Principales compétences non techniques des développeurs React.js

Selon Fialkova, voici d'autres qualités à prendre en compte lors du tout premier entretien avec un candidat :

• Une approche de communication claire et professionnelle ;
• Un niveau d'anglais Intermédiaire-supérieur ou supérieur ;
• Capacité à intégrer n'importe quelle équipe ;
• Des ambitions de leadership ;
• Capacité à appuyer et à encadrer les collègues juniors ;
• Ponctualité lorsqu'il s'agit d'assister aux réunions ou d'accomplir les tâches à temps.

Questions d'entretien à poser

1. Quelles sont les caractéristiques de React ?

Réponse attendue : Les fonctionnalités importantes de ReactJS sont :

• JSX
• Composants
• Liaison de données à sens unique
• DOM virtuel
• Simplicité
• Performance

2. Pourquoi utiliser React plutôt que d'autres frameworks, comme Angular ?

Réponse attendue : React surpasse Angular en raison de son implémentation du DOM virtuel et de ses optimisations de rendu. De plus, le passage d'une version à l'autre de React est simple puisque, contrairement à Angular, il n'est pas nécessaire d'installer les mises à jour une à une. Enfin, diverses solutions prêtes à l'emploi sont à la disposition des développeurs utilisant React.

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

Réponse attendue : Un événement est une action potentielle qui peut être déclenchée par un événement généré par l'utilisateur ou le système. Les événements comprennent les clics de souris, les chargements de pages Web, les pressions sur les touches, le redimensionnement des fenêtres et d'autres interactions.

4. Que sont les événements synthétiques dans React ?

Réponse attendue : Un wrapper inter-navigateur pour l'événement natif du navigateur est un événement synthétique. Il possède la même interface que les événements natifs du navigateur, tels que preventDefault() et stopPropagation(). Cependant, ces événements sont universellement fonctionnels dans tous les navigateurs.

5. Quelle est la différence entre Hooks et Redux ?

Réponse attendue : Les fonctionnalités React Hooks gèrent l'état local des composants tandis que Redux gère l'état global et les actions qui peuvent être distribuées.

6. Comment gérez-vous la structure des dossiers ?

Réponse attendue : React n'a pas de règle sur la façon dont vous mettez les fichiers dans les dossiers, mais certaines approches plus courantes sont le regroupement par fonctionnalités ou routes ou le regroupement par types de fichiers.

7. Qu'est-ce que le cycle de vie des composants React ?

Réponse attendue : Dans React, chaque composant a un cycle de vie que vous pouvez suivre et contrôler tout au long de ses trois phases primaires. Le montage, la mise à jour et le démontage sont les trois étapes.

8. Comment éviter le re-rendu des composants ?

Réponse attendue : Pour éviter le re-rendu de chaque composant, vous devez utiliser le cycle de vie shouldComponentUpdate().

9. Donnez-moi trois avantages de l'utilisation des hooks dans React.

Réponse attendue : L'utilisation de React Hooks présente trois avantages : la réutilisabilité, la lisibilité et la testabilité.

10. À quelle fréquence React useState se met-il à jour, et pourquoi ?

Réponse attendue : React retarde les mises à jour parce que les développeurs utilisent useState pour améliorer la vitesse en construisant des files d'attente. Les candidats doivent savoir que les mises à jour de useState se font de manière asynchrone plutôt que d'implémenter immédiatement les changements de l'objet state.

11. Quel est le plus grand avantage d'utiliser Flux ?

Réponse attendue : Vous pouvez contrôler la façon dont les données circulent dans votre programme en utilisant Flux. Vous pouvez analyser plus efficacement les changements de données et résoudre les problèmes en adoptant un flux de données unidirectionnel avec des responsabilités prédéfinies pour chaque composant (action, store, et vue).

12. Comment créer des refs ?

Réponse attendue : React est utilisé pour construire des Refs. On utilise l'attribut ref pour s'attacher aux éléments React après avoir lancé la fonction createRef(). Lorsqu'un composant est créé, les Refs sont fréquemment définis comme une propriété d'instance afin qu'ils puissent être utilisés comme références dans tout le composant.

13. Comment optimiser les performances d'une application React ?

Réponse attendue :

• En gardant l'état des composants au niveau local, si nécessaire
• En se rappelant que les composants React doivent éviter les re-rendus inutiles
• Par fractionnement de code avec importation dynamique
• Grâce au windowing ou à la virtualisation des listes de React
• Avec le lazy loading des images de React

14. Qu'est-ce que vous éviteriez de lier dans React ?

Réponse attendue : Je peux utiliser les fonctions fléchées dans les propriétés de classe pour éviter le binding dans React. Les propriétés de classe sont une nouvelle fonctionnalité et pour les utiliser, je dois activer transform-class-properties.

15. Parlez-nous des projets antérieurs sur lesquels vous avez travaillé et qui étaient basés sur React.js.

Exemple de réponse : J'ai travaillé sur une application de messagerie/application de chat en temps réel/blog personnel/application mobile de commerce électronique.

Qu'est-ce qui distingue un excellent développeur React.js d'un bon ?

Lorsqu'il s'agit de détails techniques pointus qu'un excellent dev React pourrait avoir, Prifti examine plus profondément les détails du code.

"Je vois toutes les différences dans l'ordre d'importation, la déstructuration des objets, l'usage de composants mémorisés, éviter de définir des fonctions à l'intérieur du rendu, l'usage d’objets littéraux."

Pour Catherine, au-delà de la maîtrise de la pile technologique attendue, le critère le plus important est que le développeur puisse travailler sans supervision et sans qu'on lui rappelle ses tâches :

"Ils doivent être capables de se présenter et de présenter leur travail sans supervision constante. Avec un bonus s'ils assument plus que les seules tâches liées à React, s'ils ont l'autonomie pour prendre leurs propres décisions et s'ils ont envie d'apprendre de nouvelles choses."