Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
com)
Campagne : React - Senior Langage(s) de programmation : React Langage : Français Date : 19/03/2019
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 :
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 :
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
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 :
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 ?
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
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 ?
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
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)