Vous êtes sur la page 1sur 18

Mohamed Yassine (myassine@consult-itech.

com)
Campagne : React - Senior Langage(s) de programmation : React Langage : Français Date : 19/03/2019

SCORE RANG DURÉE MEILLEUR QUE

42% 1 0H08 48%


280 / 660 pts /1 / 0H21 des développeurs

React

Connaissance du langage

1 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 1: [Redux] Reducer
React 00:24 / 03:00 20 / 20 pts

Question
On considère le reducer suivant :

Quel serait l'état de ce reducer après l'envoi des actions suivantes :

dispatch({ type: 'SET_FOO', foo: [1, 2] });


dispatch({ type: 'PUSH_FOO', foo: 3 });
dispatch({ type: 'PUSH_FOO', foo: 6 });

Réponse
{ foo: [1, 1, 2, 3, 6], switch: false }
{ foo: [1, 2, 3, 6], switch: true }
{ foo: [6, 3, 1, 2], switch: true }
{ foo: 6, switch: false }

2 / 18
Mohamed Yassine (myassine@consult-itech.com)
Résultat
Réponse correcte
Connaissance du langage +20pts

3 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 2: Affichage conditionnel n°2
React 00:12 / 02:00 40 / 40 pts

Question
Qu'affiche le composant <Hello ... /> ?

Réponse
Hello World foo = 4
Hello World foo = 4 val = null
Hello World foo = 4 val =
Hello World

Résultat
Réponse correcte
Connaissance du langage +40pts

4 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 3: Affichage propriété
React 00:06 / 01:00 40 / 40 pts

Question
Dans le code ci-dessous, à la ligne 7, quel code devrait remplacer XXX pour afficher la valeur de
l'attribut  initialCount ?

Réponse
initialCount
{{ props.initialCount }}
{props.initialCount}
[[props.initialCount]]

Résultat
Réponse correcte
Connaissance du langage +40pts

5 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 4: Affichage d'une liste
React 00:55 / 02:00 40 / 40 pts

Question
Par quel code remplacer XXX à la ligne 7 :

pour obtenir ce résultat ?

6 / 18
Mohamed Yassine (myassine@consult-itech.com)
Réponse
<li key={fruit.foo}>{fruit.value}</li>
<li>{fruit.value}</li>
<li key={fruit.bar}>{fruit.value}</li>
<li key={fruit.value}>{fruit.foo}</li>

Résultat
Réponse correcte
Connaissance du langage +40pts

Question 5: props
React 00:18 / 00:40 40 / 40 pts

Question
En React, quel est l'objet utilisé pour passer des données d'un composant parent vers un composant
fils ?

Réponse
props

Résultat
Réponse correcte
Connaissance du langage +40pts

Réponse(s) correcte(s)
props
prop

7 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 6: Attribut "Key" d'un tableau
React 00:40 / 00:40 0 / 40 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
À la création d'un tableau d'éléments en React, un attribut spécifique aide React à identifier quels
éléments ont changé dans ce tableau.

Quel est cet attribut qui doit être assigné à chaque élément React d'un tableau ou d'un iterator ?

Réponse
ama

Résultat
Réponse correcte
Connaissance du langage +40pts

Réponse(s) correcte(s)
key
keys

8 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 7: JSX personnalisé
React 00:29 / 00:40 0 / 40 pts

Question
Comment fait-on pour affecter les props par défaut à un composant React ?

Réponse
En utilisant defaultProps défini en tant que propriété du composant
En utilisant la fonction this.setDefaultProps()
En utilisant la fonction this.setInitialProps()
Les props sont obtenues du parent, les props par défaut ne peuvent pas être
assignées

Résultat
Réponse incorrecte
Connaissance du langage +40pts

9 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 8: Rendu de booléens en React
React 00:35 / 02:00 0 / 40 pts

Question
On considère le code suivant :

Par quoi remplacer XXX à la ligne 6 pour obtenir :


---
Value of foo is true
---
 

Réponse
Value of foo is {String(props.foo)}
Value of foo is {props.foo}
Value of foo is {foo}
Value of foo is {String(foo)}

Résultat
Réponse incorrecte
Connaissance du langage +40pts

10 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 9: Connaissance sur les props
React 00:53 / 01:30 0 / 40 pts

Question
Qu'est-ce qui est vrai à propos des props en React ?

Plusieurs réponses attendues.

Réponse
Les props sont passés du composant parent vers ses fils
Les props peuvent être modifiées par les composants fils
Les composants fils sont re-rendus quand les props changent
Il est possible de définir des props par défaut au niveau des composants
fils

Résultat
Réponse incorrecte
Connaissance du langage +40pts

11 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 10: Lifecycle : shoudComponentUpdate
React 00:23 / 01:30 40 / 40 pts

Question
Quel est le comportement attendu vis-à-vis de la fonction shouldComponentUpdate du lifecycle telle
qu'implémentée dans le code ci-dessous ?

Réponse
Le composant n'affichera rien
Le composant ne se mettra pas à jour que ce soit au changement des
props ou du state
Le composant se mettra à jour au changement du state mais pas au
changement des props
Le composant se mettra à jour au changement des props mais pas au
changement du state

12 / 18
Mohamed Yassine (myassine@consult-itech.com)
Résultat
Réponse correcte
Connaissance du langage +40pts

Question 11: [Redux] Actions


React 00:29 / 00:45 0 / 40 pts

Question
Quel est le nom des objets utilisés pour envoyer des données aux stores Redux afin de les mettre à
jour ?

Réponse
dispatch

Résultat
Réponse correcte
Connaissance du langage +40pts

Réponse(s) correcte(s)
action
actions

13 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 12: [Redux] mapStateToProps
React 00:14 / 02:30 60 / 60 pts

Question
Qu'est-ce qui est vrai vis-à-vis du code ci-dessous ?

Plusieurs réponses attendues.

Réponse
L'appel à la fonction connect retourne un composant de plus haut niveau
(HOC) englobant le composant TodoApp
state.todos du store est rendu disponible en tant que props.todos dans
TodoApp
props.todos de TodoApp est rendu disponible au niveau du store par la
fonction mapStateToProps
mapStateToProps effectue un mapping du state du composant vers les props
du composant

Résultat
Réponse correcte
Connaissance du langage +60pts

14 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 13: Contexte React
React 00:30 / 00:40 0 / 60 pts

Question
Quel objet utiliseriez-vous pour passer des données à travers tout l'arbre des composants sans avoir à
passer manuellement les props à chaque niveau ?

Réponse
store

Résultat
Réponse correcte
Connaissance du langage +60pts

Réponse(s) correcte(s)
context
this.context

15 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 14: Lifecycle : componentDidUpdate
React 00:50 / 00:50 0 / 60 pts

Le temps alloué à cette question s'est écoulé. La réponse du


candidat a été automatiquement récupérée à la fin du décompte.

Question
Quelle fonction du lifecycle est appelée juste après la mise à jour d'un composant React ?

Réponse
componentWillRec

Résultat
Réponse correcte
Connaissance du langage +60pts

Réponse(s) correcte(s)
componentDidUpdate
componentDidUpdate()
componentDidUpdate(prevProps, prevState)
componentDidUpdate(prevProps)
componentDidUpdate(prevProps,prevState)

16 / 18
Mohamed Yassine (myassine@consult-itech.com)
Question 15: React lifecycle events
React 00:35 / 00:45 0 / 60 pts

Question
Quel hook du lifecycle est appelé juste avant render() pour un composant React ?

Réponse
componentWillMount()
componentWillReceiveProps()
componentWillUpdate()
shouldComponentUpdate()

Résultat
Réponse incorrecte
Connaissance du langage +60pts

17 / 18
Mohamed Yassine (myassine@consult-itech.com)
Glossaire

Connaissance du langage

La mesure de cette compétence permet de déterminer l'expérience du candidat dans la pratique d'un langage de
programmation. Privilégiez cette compétence si, par exemple, vous recherchez un développeur qui devra être
rapidement opérationnel.

Design

Cette mesure fournit une indication sur la capacité du candidat à appliquer des solutions standard pour résoudre des
problèmes récurrents. Un développeur ayant un bon niveau dans cette compétence augmentera la qualité
(maintenabilité, évolutivité) de vos applications. Cette compétence ne dépend pas spécifiquement d'une technologie.
Privilégiez cette compétence si, par exemple, vous recherchez un développeur qui sera amené à travailler sur les
briques qui structurent vos applications, à anticiper les besoins de demain pour développer des solutions pérennes.

Résolution de problèmes

Cette compétence correspond aux aptitudes du candidat à comprendre et à structurer son raisonnement pour trouver
des solutions à des problèmes complexes. Cette compétence ne dépend pas spécifiquement d'une technologie.
Privilégiez cette compétence si, par exemple, vos applications ont une composante technique importante (R&D,
innovation).

Fiabilité

La fiabilité caractérise la capacité du candidat à réaliser des solutions qui prennent en compte les cas particuliers. Plus
cette compétence est élevée, plus vos applications sont robustes (moins de bugs).

18 / 18
Mohamed Yassine (myassine@consult-itech.com)

Vous aimerez peut-être aussi