Idées dojos React

Idees.md

Deux idées de dojos

Dojo Props / State

• un composant Character sous forme de classe avec deux props (name, avatarUrl) et un state sous la forme { isTired: false, food: 200 }.

• dans le render, trois boutons:

  • "eat burger" censé augmenter de 100 le niveau de food dans le state,
  • "go sleep" censé passer isTired à false,
  • "go running" censé diminuer de 200 la food et passer isTired à true

L'idée était de montrer qu'on pouvait modifier juste une valeur dans le state, ou plusieurs, et qu'on peut aussi faire des vérifications (empêcher de courir si food < 200)

Dojo Router / API / Lifecycle

Mes élèves avaient pas mal de questions sur react router et le cycle de vie. J'ai fait un genre de dojo en 1/2 groupe (6 élèves au lieu de 4 d'habitude), basée sur une API de photos de voyages (je donnerai des accès à tout le monde pour pouvoir y ajouter des données): https://travelapi.jsx.fr/photos

• pour ne pas perdre trop de temps j'ai fourni le composant SinglePhoto pour afficher une photo de cette API: https://gist.github.com/bhubr/d1d7312360994ce37102084dabb95317. Ce composant comporte une erreur (involontaire) mais que je laisse telle quelle, c'est qu'il y a les liens images relatifs et qu'il faut concaténer ça avec l'URL du serveur (pour bosser la concaténation de string avec la template string)
• je leur fais faire un composant PhotoList qui charge la liste des photos de l'API et qui affiche la liste de photos (je rappelle ou introduis le passage de props par spread operator dont ils n'ont pas encore l'habitude).
• je leur fait mettre deux Routes dans App, avec les paths / et /page/:pageNum respectivement, toutes deux avec PhotoList comme component et deux <Link> pour accéder à ces routes (/ et /page/2).
• l'idée est d'utiliser le paramètre pageNum pour charger une nouvelle page de l'API
• Ensuite, de montrer que si le fetch est fait uniquement dans componentDidMount, le contenu n'est pas rechargé (le composant n'étant pas "démonté" quand on switch de la route / à /page/2, ce qui amène à montrer componentDidUpdate permettant de détecter le changement de this.props.match.params.pageNum (je leur fait trouver ce paramètre dans les outils de dev React).
• On en profite pour mettre toute la logique du fetch/axios puis setState dans une méthode fetchPhotos ou loadPhotos qui est appelée depuis componentDidMount et componentDidUpdate