guess doggos v.0.1 - reactjs

the road to learn React

Après divers tutoriels pour comprendre la logique React, c’est ce livre qui m’a offert une approche suffisamment complète et didactique de la chose : The Road to Learn React de Robin Wieruch.
C’est un e-book extrêmement didactique qui a le mérite d’évoquer à la fois le framework frontend de Facebook, mais aussi une partie de la syntaxe ES6 associée : let, const, arrow functions, classes etc. J’avais eu l’occasion d’utiliser cette syntaxe dans un autre de mes projets, un générateur de blindtest appelé fluffy discos dont je reparlerai prochainement, mais un rappel m’a permis de formaliser ces connaissances.
The Road to Learn React nous guide dans la création d’un clone de Hacker News. Pour simplifier la configuration liée à la création d’une application React (quiconque s’est essayé à webpack voit de quoi je veux parler), l’auteur se base sur l’outil create-react-app qui s’occupe de tout pour nous. L’idée est de se concentrer sur la logique de React et non sur son écosystème. C’est à mon sens une bonne idée puisqu’en tant que débutant cela m’a permis d’éviter, ou plutôt de reporter, cette étape qui peut être assez fastidieuse et qui peut être vraiment décourageante. Mais create-react-app possède une commande qui permet “d’éjecter” la configuration et ainsi d’avoir accès aux sources totales pour bien comprendre ce qui se passe en sous-main.

the road to learn anything

En construisant un clone de Hacker News on aborde un plusieurs de concepts nécessaires à la création d’une application frontend : afficher des éléments, les filtrer, appeler une API, faire une recherche sur cette dernière… Une des forces de cet e-book est de faire évoluer constamment le code qu’il nous fait écrire et nous montre plusieurs possibilités à chaque fois, une syntaxe ES5, puis comment plusieurs options d’ES6 permettent d’améliorer la lisibilité, le choix de la solution étant laissé au lecteur en fonction de ce qu’il comprend le mieux. Les concepts de React sont abordés les uns après les autres et chacun est approfondi au fur et à mesure.

Pour être tout à fait honnête, je n’ai pas encore effectué l’intégralité de ce que le livre propose. En fait j’ai fait une pause à la moitié pour tenter de voir si je pouvais créer à mon tour une application, bien évidemment basée sur ce que j’avais déjà appris !

Méthodologie

Il est parfois frustrant de suivre un tutoriel, je me suis donc donné un objectif de parvenir à un prototype fonctionnel d’une application simple. Le concept était le suivant : un chien nous est proposé et à nous de deviner la race de ce dernier. Et ceci en deux heures. La limite de temps est très importante puisqu’elle permet de ne pas s’éparpiller et de se poser la question de ce qu’on est capable de faire réellement. Grâce à the road to learn react je savais appeler une api, utiliser des promesses pour gérer mes callback, permettre des interactions avec des composants, afficher des informations en fonction de l’état de mon application.
Heureusement il existe une API qui renvoie des chiens au hasard : dog.ceo !

C’est bien sûr pour le moment très rudimentaire, il faudrait ajouter une gestion des utilisateurs, un score, les races en français, une interface plus poussée etc…

Deschiens

Pour tester c’est ici : guess-doggos.

Les sources sont sur mon Github.