Dans ce test votre but sera de créer un jeu Memory en utilisant le plus de concept possible de React, tout en gardant une cohérence dans l'utilisation de ces concepts.
Ce test est séparé en 5 sections, vous n'êtes pas obligé de toutes les réalisées, mais il est fortement conseillé de réaliser au minimum les sections 1, 2 et la dernière section "Remarques".
Tous les fichiers de configuration ont déjà été créés pour vous permettre de vous concentrer sur le code, si vous avez des problèmes veuillez vous référer à la documentation de create-react-app.
Pour lancer le test dans votre navigateur il vous suffit de lancer yarn start ou npm start dans votre terminal. Voir la documentation create-react-app.
En bonne pratique nous vous conseillons de créer un commit ou tag à chaque fin de section.
- Clonner le dépôt git
- Créer une branche pour votre test comme suit
test/{votre-nom} - Une fois terminé, créer une PR sur la branche
master - Nous reviendrons vers vous pour les remarques dans un entretien individuel
Tester vos connaissances d'intégration (sémantique HTML, accéssibilité, css) et les concepts de bases de React.
Aucunes libraire de composants tiers n'est autorisée pour cette section, tel que Bootstrap ou Material UI, vous devrez créer les composants et leurs styles "from scratch".
En interne nous utilisons styled-components, il est donc recommendé d'utiliser cette librairie pour le style des composants. Cependant vous pouvez aussi utiliser une autre librairie ou un autre language (css, sass, postcss, emotion, ...), nous voulons surtout connaitre votre niveau en CSS à travers cet exercice.
Cet exercice est un test d'intégration sans gestion des états, à la fin de l'exercice le jeu ne devrait pas fonctionner. Cette étape est importante pour placer les éléments et se concentrer sur la sémantique HTML et le style des composants.
Vous êtes libre de créer autant des dossiers et fichiers que vous considérez nécessaires.
Voici l'intégration finale à réaliser:
Tester vos connaissances sur les concepts d'états (state) d'un composant. Avec l'utilisation d'outils tels que les Context, hooks ou même Redux.
Les cartes ont trois états :
-
idle: La carte n'a pas été cliquée, un background uni blanc est visible.
-
active: La carte a été cliquée, on affiche l'image du fruit.
-
found: La carte et sa paire ont été trouvées, il n'est plus possible de cliquer sur la carte.
Lorsque deux cartes sont retournées le compteur de coups doit augmenté de 1.
Trois états du jeu sont disponibles:
-
new: tous les états sont réinitialisés, le timer doit afficher:00:00, le compteur de coups:0et toutes les cartes doivent êtreidle.Au clique du bouton
réinitialiser, l'état du jeu doit passer ànew. -
running: le timer doit être lancé, les coups doivent être comptabilisés.Au clique d'une carte
idle, l'état du jeu doit passer àrunning. -
finish: le timer est arrété et les coups sur les cartes ne sont plus comptabilisés.Lorsque toutes les cartes ont un état
found, l'état du jeu doit passer àfinish.
Le timer commence lorsque l'on clique sur une carte idle et que l'état du jeu est new.
Il s'arrête une fois que l'état du jeu est à finish.
Voici un exemple de jeu en cours:
Cet exercice nous permet de connaitre votre niveau sur Typescript.
Vous devez installer typescript, soit manuellement, soit grâce à create-react-app.
Une fois typescript installé, vous devez modifier vos fichiers en .ts ou .tsx, pour ensuite créer et utiliser les types dans vos composants.
🚨 Il est possible que la version de typescript installé localement, rentre en conflit avec celle installée sur votre IDE par défaut;
Sur vscode par exemple il vous faudra changer la version pour utiliser celle de votre
workspace. Pour ce faire il faut aller dans un fichier.tsou.tsx, ensuite faire la combinaise claviercmd+shfit+p, puis taperTypeScript: Select TypeScript Version..., et enfin sélectionner la versionWorkspaceou une version supérieure à4.1.x.
L'exercice est considéré comme réalisé, une fois qu'il n'y a plus d'erreur typescript sur votre IDE et/ou lors de la compilation de développement.
Cet exercice nous permet de connaitre votre niveau sur les tests unitaires.
Vous devez créer au moins un test pour un composant, de préférence le composant principal de votre application.
Si vous n'avez jamais créé ou utilisé de tests, nous vous recommendons de regarder la documentation de create-react-app.
Pour lancer un test il suffit de lancer yarn test dans votre terminal.
Cette section n'est pas un exercice, si vous avez des remarques sur le tests ou sur le code que vous avez écrit, nous vous recommandons de les ajouter lors de votre pull request.
Si vous n'avez pas eu le temps de faire toutes les sections ou juste en parties, nous vous conseillons d'ajouter quelques lignes pour nous expliquer pourquoi.
En espérant que l'exercice vous aura plut, avec un peu de chance appris de nouveaux concepts.