CodinGame - React - Senior - Mohamed - Yassine [PDF]

Zitiervorschau

---

Mohamed Yassine ([email protected]) Campagne : React - Senior

Langage(s) de programmation : React

Langage : Français

SCORE

RANG

DURÉE

MEILLEUR QUE

280 / 660 pts

/1

/ 0H21

des développeurs

42%

1

0H08

Date : 19/03/2019

48%

React Connaissance du langage

1 / 18

Mohamed Yassine ([email protected])

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 ([email protected])

Résultat Réponse correcte

Connaissance du langage +20pts

3 / 18

Mohamed Yassine ([email protected])

Question 2: Affichage conditionnel n°2 React

00:12 / 02:00

40 / 40 pts

Question Qu'affiche le composant  ?

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 ([email protected])

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 ([email protected])

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 ([email protected])

Réponse

{fruit.value}

{fruit.value}

{fruit.value}

{fruit.foo}

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])

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 ([email protected])