ReactJS est une bibliothèque JavaScript très populaire qui permet de créer des interfaces dynamiques, et elle est maintenant incluse dans le cœur de WordPress. Le nouvel éditeur est en réalité une grosse application ReactJS et WordPress mets à notre disposition plein d’outils JavaScript et d’abstractions qui sont des surcouches de React.

Dans le nouvel éditeur, tout est en JavaScript, et développer des blocs est en fait un peu comme si on développait des composants React utilisant les nouveaux outils disponibles au final. Même si une connaissance de React n’est pas 100% obligatoire pour développer des blocs pour le nouvel éditeur, je pense que c’est toujours positif de comprendre un peu ce qui se passe « sous le capot » quand on utilise une bibliothèque ou un package.

Dans cette vidéo, on va développer votre première application ReactJS. Ce sera une petite application de panier. Rien de très compliqué : une liste de produits, un panier, des boutons d’achats qui mettent automatiquement les produits dans le panier et des boutons quantités qui mettent à jour le contenu du panier.

L’application est simple, l’idée étant de bien comprendre les mécanismes de base de React. Vous apprendrez :

  • Comment créer une application avec create-react-app
  • Les concepts clés de React : composants, props et state.
  • Comment créer vos propres composants.
  • Ce qu’est le JSX,
  • Comment circulent les données dans une application React.
  • Gérer l’état et les props de vos composants
  • Gérer les événements DOM

On ne parlera pas de concepts plus avancés, comme les hooks ou d’autres façons de gérer l’état, mais une fois ces concepts de bases intégrés, le reste est bien plus simple !

Cette vidéo est le replay d’un atelier Twitch de Décembre 2021. Merci à tous les participants et à vous pour votre soutien !

La prochaine étape, c’est d’essayer de construire une petite application React sur votre site WordPress. Vous êtes de taille pour le challenge ?

Voici les différents liens utiles :

Enjoy !