Comment évaluer les compétences d'un développeur React 

Pour toute organisation cherchant à améliorer sa présence en ligne, un développeur front-end est sans doute l'un des recrutements les plus importants. Son code, sa sensibilité UX et sa capacité à travailler avec vos équipes techniques et de conception peuvent déterminer la façon dont les gens interpréteront votre marque. L'une des technologies les plus utilisées pour la programmation côté client est la bibliothèque JavaScript React.

Avec une augmentation de la demande pour React - il est en tête de la liste d'enquête annuelle de Stack Overflow pour le les "frameworks" web les plus recherchés année après année (et les nôtres aussi, pour faire bonne mesure), il y a par conséquent une énorme demande pour des compétences de développeur React. Les recruteurs techniques se retrouvent souvent dans l'embarras lorsqu'ils ne reçoivent pas de CV présentant une solide expérience et un ensemble de compétences connexes. Le plus gros problème est qu'ils ne savent pas quelles compétences spécifiques rechercher.

Le recrutement d'un développeur React implique de nombreux processus complexes et longs. Alors, comment embaucher le meilleur développeur React pour votre entreprise ? Lisez notre guide complet pour recruter un spécialiste React compétent qui correspondra à votre équipe.

1. Qu'est-ce que React ?

React (également écrit React.js ou ReactJS) est une bibliothèque JavaScript open-source utilisée pour construire des interfaces utilisateurs (IU) interactives. En termes de sites web et d'applications web, Les interfaces utilisateur sont l'ensemble des menus affichés à l'écran.Il s'agit de l'interface de navigation, des barres de recherche, des boutons et de tout ce avec quoi une personne interagit pour utiliser un site web ou une application. Il a été créé par Facebook en 2013 et sert de base à une page web unique ou à des applications mobiles (avec React Native).

React aide les développeurs à construire des interfaces utilisateur sous la forme d'une arborescence de petites pièces appelées composants. Un composant est un mélange de HTML et de JavaScript qui capture toute la logique nécessaire à l'affichage d'une petite section d'une interface utilisateur plus large. Chacun de ces composants peut être construit pour former des parties de plus en plus complexes d'une application.

Une distinction importante entre les bibliothèques comme React et les frameworks comme Ember.js et Angular est que React se préoccupe uniquement du rendu de l'interface utilisateur et laisse beaucoup de choses à la discrétion de chaque projet. React est considéré comme ayant des opinions bien arrêtées.

React s'est imposé comme l'une des bibliothèques les plus utilisées par les développeurs. Selon le site Enquête 2020 sur l'état de l'écosystème des développeursReact est facilement la plateforme la plus utilisée avec 63% des répondants déclarant l'utiliser, soit une augmentation de 10% par rapport à l'année dernière. De plus, React arrive en première position si l'on considère les données brutes et l'utilisation massive des téléchargements, de loin.

1.1. À quoi sert React et quels sont les problèmes qu'il résout ?

Avant React, les développeurs devaient construire des interfaces utilisateur manuellement avec des "JavaScript à la vanille"(les développeurs parlent du langage JavaScript brut sans aucun cadre de soutien) ou avec des prédécesseurs de React moins axés sur l'interface utilisateur, comme jQuery. Ce processus a entraîné de longs délais de développement et une plus grande marge de manœuvre pour les irrégularités et les bogues. La prééminence de React a rapidement résolu ce type de problèmes.

Il existe des centaines de milliers de sites web construits sur React. Il est extrêmement populaire en raison de sa vitesse de fonctionnalité et de sa capacité à s'adapter à des projets de différentes tailles . Quelques exemples de sites populaires utilisant React sont Facebook, Instagram, Netflix, Reddit, Airbnb et Uber.

React facilite l'élaboration de cas de test de l'interface utilisateur, la construction de sites adaptés au référencement, la réutilisation de composants sur de nombreuses plateformes, la mise en œuvre du code existant d'un site web sur une application mobile, l'accélération des performances sur les applications web gourmandes en ressources, et il peut être utilisé partout où JavaScript est nécessaire.

1.2. Est-il similaire à d'autres langages ou frameworks ?

La conception et les fonctionnalités de React ne sont pas très similaires à celles d'autres frameworks JavaScript.

Cependant, le framework Vue partage des similitudes avec React. Il s'agit notamment de la capacité à utiliser un DOM virtuel, à fournir des composants de vue réactifs et composables, et à se concentrer sur la bibliothèque principale, les préoccupations telles que le routage et la gestion globale de l'état étant gérées par des bibliothèques complémentaires.

Mais il y a une autre caractéristique : React construit du HTML en utilisant la syntaxe JSX qui ressemble beaucoup au HTML original. D'une certaine manière, les connaissances en HTML peuvent donc s'appliquer à React.

1.3. Quels sont ses principaux avantages ou caractéristiques ?

L'un des avantages évidents de React est qu'il utilise un style de programmation fonctionnel. La programmation fonctionnelle est le processus de construction de logiciels par la composition de fonctions pures, en évitant les états partagés, les données mutables et les effets secondaires. La programmation fonctionnelle est déclaratif plutôt qu'impératif et, par conséquent, React utilise très peu de code "boilerplate". Cela signifie que l'on peut faire beaucoup avec peu de code. L'apprentissage du processus peut prendre un certain temps, mais à long terme, il permet de réduire le temps de développement et le risque d'erreurs de codage.

React est livré avec deux fonctionnalités clés qui ajoutent à son attrait pour les développeurs JavaScript, JSX et Virtual DOM.

JSX (abréviation de JavaScript eXtension) est une extension syntaxique spéciale de React qui permet effectivement aux développeurs web de mélanger la syntaxe HTML avec la syntaxe JavaScript. D'ordinaire, le JavaScript natif ne permet pas cette fonction, de sorte que JSX réduit considérablement la quantité de code nécessaire. Et comme la prise en charge du navigateur React s'étend à tous les navigateurs web modernes, JSX est compatible avec toutes les plates-formes de navigation disponibles.

Si un développeur utilise JSX pour manipuler et mettre à jour son DOM, React crée ce que l'on appelle un DOM virtuel. Le DOM virtuel est une copie artificielle du DOM du site, et React utilise cette copie pour voir quelles parties du DOM réel doivent être modifiées lorsqu'un événement se produit (comme un utilisateur qui clique sur un bouton). Ce type de mise à jour sélective nécessite moins de puissance de calcul et moins de temps pour rafraîchir la page. Globalement, cela rend l'expérience beaucoup plus agréable pour les programmeurs.

2. Qu'est-ce qu'il est important pour un recruteur informatique de savoir sur React ?

Que doit savoir un développeur React ? Une chose importante à retenir pour un recruteur informatique est que React est une bibliothèque de vues/framework, qui ne détermine pas la façon dont nous gérons l'état (données) dans nos applications. Pour contrer cela, une bibliothèque populaire pour la gestion des états nommée Redux a été publiée en 2015 et est restée utilisée jusqu'en 2019.

De nos jours, Redux a perdu de la traction et React Hooks a pris sa place en tant qu'outil principal pour gérer l'état d'une application. Aujourd'hui, les gens n'écrivent pas très souvent de nouvelles applications avec Redux. Mais de nombreux projets, produits et entreprises existants s'appuient sur Redux et devront le maintenir activement pendant de nombreuses années.

2.1. À quelle fréquence la pile technologique change-t-elle ?

C'est difficile à dire car nous ne pouvons pas prédire l'avenir. Tous les 2 ou 3 ans environ, il y a un grand changement, comme le remplacement des mixins par des composants d'ordre supérieur ou l'abandon des composants de classe au profit de composants fonctionnels basés sur des crochets.

2.2. Existe-t-il de nombreuses ressources/outils/technologies disponibles ?

Une énorme quantité de matériel est disponible pour React, y compris de nombreux tutoriels gratuits sur la façon de l'utiliser. La facilité d'utilisation de la bibliothèque n'est pas aussi compliquée que celle d'Angular par exemple, c'est pourquoi elle est populaire auprès des programmeurs amateurs et vétérans.

En ce qui concerne les outils, il existe également des tonnes de plugins et de bibliothèques à utiliser avec React. Comme le cadre a été synthétisé par Facebook, l'écosystème de soutien est vraiment puissant. Il existe de nombreuses bibliothèques JS qui ont leurs bindings React correspondants. Un grand nombre d'outils sont encore activement maintenus pour React et sont populaires auprès de ses utilisateurs (il est important de choisir un outil qui ne semble pas abandonné ni mis à jour).

Il existe des dizaines de ressources pour jumeler ou apprendre React à un autre niveau et les meilleures peuvent être trouvées sur des sites web tels que Hongkiat.

2.3. Quels sont les outils et les techniques qu'un développeur React doit connaître ?

L'un des moyens les plus efficaces de se familiariser avec React est d'utiliser ses outils pour créer des applications web dans le cadre de projets réels. Il est donc fort probable que le développeur ait acquis une grande expérience dans ce domaine. La connaissance de React Hooks, de React Context API et de Redux est essentielle pour un développeur React.

• Pour la création d'éléments visuels, un développeur React doit avoir une compréhension approfondie de HTML, CSS, SASS/LESS/Stylus. Des connaissances en SVG seraient un plus.
• Une bonne connaissance de JavaScript est fondamentale, ainsi que de Typescript.
• Ils doivent avoir une connaissance pratique des bibliothèques suivantes : jQuery, MomentJS, Underscore et Lodash.
• Un développeur React expert sait utiliser ces outils JavaScript : npm, Yarn, la plateforme Node.js (dans son ensemble) - et au moins un des outils pour automatiser la construction de l'application : Webpack, Parcel ou Rollup (Grunt, Gulp, et Browserify étaient populaires il y a longtemps, ils ne sont plus très utilisés de nos jours).
• Pour les tests, ils doivent connaître TDD, BDD, Unit Tests et être capables d'utiliser ces outils de test comme Jest ou Enzyme avec confiance. Jasmine, Karma, Mocha, et Selenium seraient également utiles.
• Une bonne expérience de la gestion de plateformes en nuage telles que SaaS, Amazon AWS, Google Cloud ou Microsoft Azure est appréciable.
• Recherchez une personne ayant des compétences dans ces plates-formes d'application logicielle :
  • les outils de gestion de projet : Jira
  • serveurs : NGINX, Apache
  • outils de collaboration en ligne Slack, Miro, Figma, et les documents en nuage tels que Google ou Microsoft, etc.

2.4. Quel type d'expérience faut-il rechercher chez un développeur React ?

L'expérience scientifique et académique pour React n'est presque pas pertinente. L'expérience commerciale est en revanche très importante. L'expérience dans le domaine de l'open source est un atout, mais n'est absolument pas obligatoire. Si un développeur maintient une bibliothèque OS populaire, ce serait un très grand avantage.

En général, l'exécution de tâches simples dans React n'est pas compliquée, de sorte que de nombreux aspirants développeurs essaient de commencer leur carrière dans le développement front-end, souvent dans React. Par conséquent, il y a beaucoup de diplômés de boot-camp qui veulent obtenir leur premier emploi en React. C'est un très grand avantage d'avoir une expérience commerciale, par rapport aux personnes qui ont participé à des boot-camps et qui ont souvent créé un ou deux projets à côté. C'est bien de donner une chance aux débutants, mais leur expérience n'équivaut pas vraiment à des connaissances éprouvées.

3. Comment vérifier les compétences du développeur React lors de la phase de sélection ?

Les compétences techniques sont compétences spécifiques à l'emploi qui sont nécessaires à l'exercice d'un emploi. Ces compétences sont acquises et développées par le biais de l'éducation, de séminaires, de formations et de certifications.

D'autre part, les compétences non techniques concernent les capacités interpersonnelles d'une personne. Par nature, elles sont assez difficiles à mesurer ou à quantifier. Les compétences non techniques nous aident à définir comment un employé interagit avec les autres et s'il possède les qualités qui s'intègrent à la culture de l'entreprise. Parmi les compétences non techniques les plus importantes pour un développeur React, citons :

• Excellentes compétences en matière de communication
• Travail d'équipe
• Créativité
• La capacité à faire face à la critique

3.1. Que faut-il prendre en compte lors de la sélection d'un CV ?

La première chose à rechercher dans un CV est certainement une expérience commerciale dans le développement de projets frontaux. Toujours expérience privilégiée sur une longue liste d'outils divers. Pourquoi ?

Le développement moderne de l'interface utilisateur a introduit des centaines d'outils, qui résolvent des problèmes similaires de différentes manières, et qui font parfois la même chose. Il y a beaucoup de tendances, certains outils peuvent être populaires et deux ans plus tard ils sont déjà obsolètes, le paysage change très rapidement.

Le fait que quelqu'un ait mentionné l'outil X dans son CV signifie qu'il pourrait construire quelque chose avec. Mais cela ne signifie pas qu'il a une solide compréhension de la raison pour laquelle il l'a fait de cette manière, ou des avantages et inconvénients des autres solutions possibles. La capacité à s'adapter à des situations inconnues est la véritable clé ici, sans cette expérience fondamentale dans la résolution de différents problèmes, un développeur ne peut connaître que ce qu'il a l'habitude de faire ou ce qu'on lui a enseigné.

Dans l'ensemble, il est donc assez simple d'énumérer des dizaines d'outils familiers dans un CV, mais il est beaucoup plus important de résoudre des problèmes. Si quelqu'un devait inclure "concevoir des solutions" ou "fournir une architecture", il serait préférable de le faire plutôt que de simplement citer des noms d'outils.

3.2. Quels sont les termes du glossaire qu'il est important de connaître dans React (y compris les frameworks, les bibliothèques et les versions de langage) ?

Ce sont les mots-clés qui méritent d'être compris :

L'architecture	Composants de la classe Fonction(s) Composants Crochets React
Gestion de l'État	API contextuelle React Redux MobX
Stylisme	Composants stylisés Émotion CSS dans JS Modules CSS
Typage statique ou vérificateurs de type	TypeScript Débit
Écosystème	npm Node.js NVM
Bundler (faisceau de câbles)	webpack

Les développeurs React utilisent également React Native, qui permet de créer des applications mobiles natives. React, associé à React Native, permet aux développeurs d'utiliser le même code pour le navigateur et les appareils mobiles, ce qui est un grand avantage. Cependant, il reste encore du code important spécifique à chaque plateforme qui ne peut pas être dupliqué.

3.3. Quelles sont les versions complètement différentes ? Quelles sont les versions qui se ressemblent ?

Le nombre de versions n'est pas très important car les gens ne les apprennent pas par cœur, mais il y a bien eu quelques "ères" dans l'évolution de React.

N'oubliez pas que ce n'est pas comme Python v2 et v3 qui ne sont pas compatibles l'un avec l'autre. Ce qui est plus important, ce sont les architectures que les gens ont compilées. De nouvelles versions ont naturellement été ajoutées, mais React v16.8.3 ne dit rien à beaucoup de développeurs.

Les architectures que l'on peut connaître (par ordre chronologique) sont les suivantes :

• React basé sur des composants de classe
  • Mixins - une approche très ancienne. De nos jours, elle est essentiellement héritée et devrait être évitée. Cependant, il existe d'anciens projets où elle est encore utilisée.
  • HOCs (Higher-Order Components) - l'idée de cette approche est qu'un HOC ajoute un comportement unique à un composant (ajoute une fonctionnalité). De nombreux projets l'utilisent encore, mais elle est considérée comme un héritage.
  • Rendu des accessoires - certains composants non standard qui n'ont pas d'interface utilisateur mais uniquement une logique et un comportement. Et ils acceptent ce "render prop" pour définir ce qu'est la vue. Ainsi, par la force des choses, nous séparons la logique de l'interface utilisateur. Certains projets peuvent l'avoir, mais c'est considéré comme un héritage.
• React basé sur des composants fonctionnels
  • Crochets React - introduite fin 2018 et est rapidement devenue l'approche dominante. Il s'agit d'un must absolu de nos jours. Basée sur la programmation fonctionnelle et complètement différente des composants de classe. Une fois qu'on l'a apprise, elle est plus sûre et moins sujette aux erreurs. Mais il faut généralement plus d'efforts pour l'apprendre, par rapport aux composants de classe.

Toutes les approches ci-dessus tentent d'atteindre le même objectif, bien que de différentes manières. Il s'agit principalement de composer des composants, de combiner plusieurs composants plus petits en une seule pièce plus grande, d'améliorer la réutilisabilité et d'améliorer la composition.

3.4. Quelles autres lignes d'un CV peuvent montrer les compétences d'un développeur React ?

Il est également important pour les développeurs React d'avoir une connaissance approfondie des compétences agnostiques du cadre, y compris :

• Langage : JavaScript, ES6
• JavaScript asynchrone (promesses, événements, async await et rxjs)
• HTTP - le protocole utilisé par des milliards d'appareils de nos jours, qui permet la communication entre les clients et les serveurs.
• Typescript et/ou Flow (typage statique des applications React)
• Les bibliothèques d'interface utilisateur telles que Material UI
• Généralement, l'architecture et les modèles de conception.

3.5. Quelles sont les certifications disponibles et respectées ? Sont-elles utiles pour déterminer les compétences ?

Dans le domaine des applications frontales, il n'y a pas de certifications respectées qui valent la peine d'être suivies. S'il existe des certifications, elles ne sont pas très connues. C'est complètement à l'opposé de ce qu'était Java auparavant (avec de nombreuses certifications disponibles).

4. Sélection technique des compétences du développeur React lors d'un entretien téléphonique/vidéo.

Que vous soyez recruteur informatique ou chef de projet, vous savez que la réussite de votre projet dépend de votre capacité à trouver les meilleurs développeurs.

Vous trouverez ci-dessous des exemples de questions d'entretien auxquelles vous pouvez vous référer lorsque vous cherchez un nouveau développeur React pour créer vos applications web.

4.1. Les questions que vous devriez poser sur les compétences d'un développeur React expérience. Pourquoi poser chacune de ces questions ?

• Prêtez-vous attention aux tests automatisés ?
  • Les développeurs qui n'ont pas l'habitude d'écrire des tests unitaires/e2e peuvent être optimistes quant à la qualité de leur code, mais en réalité le processus de test est vital.
• Avez-vous soutenu l'accessibilité (a11y) dans vos projets récents ?
  • Il est important de créer des sites web accessibles, en particulier pour les institutions gouvernementales et financières, afin que les personnes handicapées puissent tirer le meilleur parti des applications.
• Préférez-vous coder la logique commerciale ou la couche visuelle ?
  • Le candidat doit dire quels sont ses points forts et quelles sont les tâches qu'il préfère accomplir dans son travail quotidien.
• Comment optimiseriez-vous votre base de code React ?
  • Les réponses à cette question témoignent d'une certaine expérience. Une bonne réponse devrait inclure diverses techniques telles que : memo, useMemo, PureComponent, la suppression des calculs inutiles et la division des composants en morceaux plus petits (de sorte que, à chaque changement, moins de balises soient re-rendues).

4.2. Questions à poser sur les compétences d'un développeur React connaissances et opinions. Pourquoi poser chacune de ces questions ?

• Pourquoi la communauté a-t-elle rejeté Redux (ou du moins, affirmé que ce n'était pas la voie à suivre pour React) ?
• Énoncez les avantages et les inconvénients de Redux et de React Context API. Où utiliseriez-vous l'une plutôt que l'autre ?
• Quels sont les avantages de React Hooks ?
• Indiquer quelques techniques de programmation fonctionnelle fréquemment utilisées dans les applications React.

Les questions ci-dessus sont de haut niveau et permettent au candidat de se positionner lors de l'entretien. Si le candidat n'a pas d'expérience, vous le saurez rapidement.

Une mauvaise réponse à la question 'Pourquoi Redux a-t-il été rejeté ??" serait "...Parce que React Hooks est meilleur'. Une réponse plus éclairée serait que, bien que Redux offre de nombreux avantages tels que la gestion prévisible de l'état, l'explicitation, le voyage dans le temps et le remplacement de modules à chaud, beaucoup de code répétitif est ajouté dans Redux et l'accessibilité financière est devenue un problème pour beaucoup de ses utilisateurs.

Voici d'autres questions relatives aux connaissances et aux opinions :

• Pourquoi React a-t-il introduit le DOM virtuel ?
  • Répondre non pas à ce qu'il est, mais pourquoi cela prouve qu'un développeur comprend la conception et l'architecture internes de React. Une réponse courte est à cause de la performance, de la flexibilité et de la facilité à changer la structure HTML
• Quels problèmes les modules CSS permettent-ils de résoudre ?
  • Il est important de comprendre les défis liés à la gestion du CSS dans les applications React. Certains styles fuient à l'extérieur, et certains styles de l'extérieur fuient à votre place. Les modules CSS émulent les styles locaux.
• Pourquoi les refs (abréviation de références) sont-ils déconseillés ?
  • C'est important car cela prouve que l'on comprend la philosophie derrière React. En bref, l'approche typique pour programmer les choses est impérative. React suit une approche déclarative. Les Refs sont une échappatoire au monde impératif, existant en dehors de la philosophie de React. Ils ne devraient être utilisés qu'en dernier recours.

4.3. Comportementale questions que vous devriez poser à un développeur React. Pourquoi poser chacune de ces questions ?

• Quelle a été la tâche React la plus difficile que vous ayez eu à mettre en œuvre ? Comment l'avez-vous résolue ?
  • La réponse à cette question montrera les tâches inhabituelles auxquelles le développeur a été confronté. Il peut s'agir de l'apprentissage de nouvelles compétences, du travail en équipe ou de la coopération avec une entreprise.
• Si vous découvriez qu'il existe une nouvelle bibliothèque de gestion des états pour React qui gagne en popularité - l'ajouteriez-vous à votre projet, sachant que vous avez déjà deux façons différentes de gérer la gestion des états ?
  • Comme nous l'avons déjà mentionné, les tendances en constante évolution sont un problème dans le paysage du front-end. Les outils changent, mais certaines personnes perdent de vue leur objectif et considèrent les outils comme le but en soi, au lieu de les considérer comme un moyen d'atteindre un objectif commercial. Privilégiez toujours les développeurs qui ont les yeux rivés sur le résultat et non sur la direction à prendre pour y parvenir.
• S'il existait une nouvelle approche pour gérer React, souhaiteriez-vous être un adopteur précoce ?
  • Même chose que précédemment - ne pas privilégier les nouveaux outils au détriment des objectifs commerciaux. La réécriture de la base de code coûte du temps et de l'argent et les développeurs doivent en être conscients.

5. Sélection technique des compétences du développeur React à l'aide d'un test de codage en ligne.

Embaucher un excellent développeur React peut représenter un défi important, surtout si vous faites tout le sale boulot vous-même. Il ne fait aucun doute que le processus nécessite généralement des tonnes de patience pour gérer toute la paperasse et les entretiens.

Ces sites d'offres d'emploi et ces places de marché en ligne sont un bon point de départ si vous recrutez sur la base d'un projet. Mais pour les projets de grande envergure qui nécessitent un engagement et un budget à long terme, vous avez besoin d'une société de développement de logiciels dotée d'un processus de recrutement solide.

5.1. Quel test en ligne pour les compétences de développeur React devriez-vous choisir ?

Lors de la recherche de la bonne Test de compétences pour développeur React vous devez vous assurer qu'il répond aux critères suivants :

• Le test reflète la qualité du travail professionnel effectué
• La durée n'est pas trop longue, une à deux heures maximum
• Le test peut être envoyé automatiquement et est de nature simple
• Le niveau de difficulté correspond aux capacités du candidat
• Le test ne se limite pas à vérifier si la solution fonctionne - il vérifie la qualité du code et son fonctionnement dans les cas extrêmes
• Il est aussi proche que possible de l'environnement de programmation naturel et permet au candidat d'accéder aux ressources pertinentes.
• Il donne au candidat l'occasion d'utiliser toutes les bibliothèques, tous les cadres et tous les autres outils qu'il rencontre régulièrement.

5.2. DevSkiller tests de compétences en ligne pour développeurs React prêts à l'emploi.

Les tests de codage DevSkiller utilisent notre méthodologie RealLifeTesting™ pour refléter l'environnement de codage réel dans lequel votre candidat travaille. Plutôt que d'utiliser d'obscurs algorithmes, les tests DevSkiller demandent aux candidats de construire des applications ou des fonctionnalités. Ils sont notés de manière entièrement automatique et peuvent être passés n'importe où dans le monde. En même temps, le candidat a accès à toutes les ressources qu'il utiliserait normalement, y compris les bibliothèques, les frameworks, StackOverflow et même Google.

Les entreprises utilisent DevSkiller pour tester les candidats en utilisant leur propre base de code depuis n'importe où dans le monde. Pour faciliter la tâche, DevSkiller propose également un certain nombre de tests de compétences en science des données, comme ceux présentés ici :