Published on

Apprendre React.js en 2022, les formations, livres et ressources à connaitre

Voici notre sélection pour apprendre React.js, une librairie Javascript qui est très à la mode actuellement. Un atout majeur si vous souhaitez comment à apprendre le développement ou si vous cherchez à vous perfectionnez à travers des vidéos en ligne. Le problème est qu'il existe beaucoup de ressources, payantes et gratuites, ainsi qu'un certain nombre de formateurs qu'il est difficile de juger avant d'avoir accès au cours dans sa totalité.

Nous vous présentons ici uniquement des formateurs ou des plateformes en ligne que nous avons testés personnellement avant de les présenter. Il est également possible d'apprendre différemment React.js, vous trouverez les plateformes d'apprentissage de langage dans notre article dédié aux sites proposant l'apprentissage du code via des exemples guidés autres que des vidéos en ligne.

Pourquoi apprendre React en 2022 ?

Comme évoqué précédemment ReactJs est la librairie à connaître dans l'environnement du développement front-end. Tout simplement, car elle répond à une problématique réelle qui est de gérer des états complexes dans votre navigateur. C'est en partant de ce problème que Facebook, maintenant le groupe Meta a développé en interne une librairie, qu'ils utilisent encore, pour réaliser Facebook.

Meilleures formations React en vidéo, Anglais et Français

Voici notre top 10 des cours et formations React.js à suivre si vous souhaitez monter en compétences sur cette librairie. Si vous êtes à l'aise en anglais ou que vous activez la fonction sous-titre, je vous conseille de suivre les formations en anglais. Les meilleures formations restent en anglais même si vous pouvez très bien apprendre uniquement avec du contenu en français.

C'est pour moi aujourd’hui les meilleures ressources vidéos pour apprendre React en 2022, il va certainement en avoir des nouvelles, je mettrais à jour régulièrement les formations vidéos que je découvre ou que l'on me conseille. Sachant que je regarde le contenu des vidéos ainsi que les exemples de code avant de vous les proposer sur Make With JS.

Les bases de React.js

Le principe de composant React

L'une des forces de React est d'avoir un système basé sur les composants. Une notion élémentaire quand vous avez envie de vous lancer sur React est de comprendre la logique de réutilisation des composants et leurs imbrications. L'objectif d'avoir une logique de composant est de pouvoir réusiliser à souhait un composant ou un bloc de composant partout dans votre application.

L'exemple le plus simple est une Button, il est possible de l'utiliser sur plusieurs pages de votre site. Vous allez faire référence à chaque appel à votre bouton. Un seul endroit pour maintenir votre bouton est quand vous allez modifier ce même bouton, c'est toute votre application qui va prendre en compte le changement.

Les props entre les composants

Comme évoqué précédemment le principe des composants permet de créer des fonctions réutilisables à souhait dans toute l'application. Pour rendre ce système dynamique, vous pouvez utiliser le principe des prop. L'objectif est de contextualiser le rendu de votre composant avec des variables en entrée. Si vous vouliez un bouton rouge, il suffit de faire passer une props color avec la valeur red.

Valable pour un changement de couleur, mais également à l'infini en fonction des besoins.

Les states des composants

Une des composantes élémentaires de React est d'avoir une notion d'état pour un compensant, il est possible par exemple d'avoir un composant bouton qui va posséder son propre état par rapport à une autre instance de ce même bouton. Cet état interne permet de répondre aux différents besoins de button dans l'application sans avoir à créer plusieurs types de boutons et donc de centraliser la logique directement dans ce composant.

La syntaxe JSX

Le JSX est une extension syntaxique de Javascript, c'est une façon d'écrire du code pour réaliser les rendus de nos composants, container ou même plus globalement de page. C'est un mélange d'HTML et de Javascript modernes, la puissance du JSX permet de définir la structure de rendu mais également de prendre en compte des éléments dynamique.

En effet le JSX n'est pas forcément statique, il est possible d'implémenter une logique conditionnelle ou d'avoir une itération sur plusieurs compensant à partir d'un tableau par exemple.

Les libraires à connaitre

Voici une liste non exhaustive des libraires à connaitre pour utiliser React de façon professionnelle, la librairie principale n'est pas très compliquée en soi, c'est au moment d'ajouter d'autres outils qu'il est possible que cela se complique, mais que vous allez sentir toute la puissance de React.

Redux

La librairie Redux est ce que l'on appelle un state manager, son but est de centraliser un état globale de votre application qu'il est possible de modifier partout à travers votre application. Cela permet d'avoir l'information à tout les niveaux de vos composants sans forcément devoir passer des props partout et garder une architecture parent / enfant dans votre code.

Cela est assez perturbant à première vue, mais dès que vous allez comprendre le principe, il est difficile de faire marche arrière sur des projets conséquents. Il vous faudra un peu de temps pour avoir les bonnes pratiques, mais une fois que vous les avez cela se répète, avec un principe d'action, de reducer et de state.

Redux Saga

Impossible de passer à côté également, Redux Saga vient se greffer à Redux pour aller encore plus loin dans la réflexion et déporter la logique métier dans des fonctions que l'on appelle pour le coup des sagas, qui sont réutilisables. Avec saga vous allez pour faire du synchrone dans de l'asynchrone, envoyer plusieurs requêtes en parallèle tout en gérant les retours.

Avec Redux Saga il est possible de gérer le click bombing et plus globalement le bombing des utilisateurs. Vous savez le fameux stress test en cliquant des dizaines de fois sur un bouton pour ajouter un produit ou déclencher une fonction dans votre application. Avec Redux Saga vous allez pouvoir gérer ces appels soit en ayant un capping des clics soit en prenant en compte l'ensemble des clics.

Les Sagas viennent se déclencher à l'écoute de certaines de vos actions Redux, idéal pour gérer des logs et envoyer des informations en parallèle pour mieux comprendre vos utilisateurs et détecter les problèmes.

À travers une saga vous avez accès à l'ensemble de votre state, et vous pouvez déclencher n'importe quelle action. Très pratique pour avoir un code métier optimisé, que l'on peut consommer dans les composants React du projet. Avec Redux Saga, votre code métier ce trouve dans les sagas, vos compensant écoutent le states globale et tout est plus simple.

React Query

Au moment de lancer un projet, il est toujours difficile de se projeter sur l'évolution du projet, savoir si cela-cui va devenir gros à terme et surtout bien évaluer la quantité de travail à effectuer pour structure le projet, créer les mécanismes dans l'équipe et produire assez par rapport aux ambitions du projet.

React Query apporte une solution plus simple à base de hooks pour gérer ses données récupérer depuis le ou les webservices, d'ajouter facilement du cache en front, de le valider et de l'invalider en fonction de la typologie de donnée et d'avoir une couche d'abstraction assez forte pour ne pas s'enfermer dans une solution limitée.

Got

Pour effectuer des appels simples sur des APIs ou webservices, je vous conseille d'utiliser une librairie qui va vous offrir des fonctions essentielles à requêtage d'API, il est possible d'utiliser fetch, une function par défaut, mais qui manque de simplicité surtout au moment de vouloir jouer des headers et de formater les valeurs de retour, ça fonctionne, mais ce n'est pas très développeur friendly.

Axios est une des librairies très utilisées pour pallier à ce problème, mais celle-ci manque de modernité et s'apparente un peu aux problématiques de fetch. Je vous conseille donc d'utiliser got une librairie développeur friendly qui permet d'avoir une syntaxe plus facile à comprendre au premier regard et d'effectuer l'ensemble des besoins que vous pouvez nécessiter dans un projet React.

Le Framwork Next.js

Historiquement React est géré d'une façon dite SAP (single page application), pour faire simple vous allez arriver sur une page très ligth et la librairie va charger les composants une fois que vous êtes sur cette même page de façon asynchrone. Une technique qui permet de réduire la sensation d'attente au moment du chargement de la page et d'avoir des effets de type placeholder.

Cette technique est très intéressante pour l'utilisateur final, mais pour des moteurs de recherches tels que Google cela augmente le temps d'attente pour récupérer le contenu de la page et surtout il est incapable de déterminer si la page est vraiment chargée totalement.

Une solution idéale pour SEO

C'est l'un des arguments pour passer sur Next.js, la visibilité dans les moteurs de recherche comme Google. Comme évoqué en introduction, si vous ne charger pas votre contenu dans le code source au chargement de la page, Google et compères vont s'arrêter au strict minimum. Pour cela Next.js introduit le SSR, le fameu server side rendering pour répondre aux exigences des moteurs.

On ne va pas se cacher que cela est assez différent d'une SPA pour la partie chargement de la page, mais sur le reste il n'y a pas grand-chose à rajouter pour être compatible.

Architecture simplifiée

Ce qui est très plaisant avec Next.js c'est d'avoir une gestion simplifiée de vos routes en front, vous allez bénéficier d'un dossier nommé pages avec l'ensemble de vos pages et de la descendance si vous en avez besoin.

Ajouter des API en NodeJS sans webservice

Next.js nécessite un runtime Node.js, ce qui lui permet de proposer une version monothique moderne avec un dossier pages/api ou vous allez pouvoir créer des API en Node, dans la même veine que pour créer des pages, mais ici se seront des API exécutés avec Node.js.

Si vous utilisez le service d'hébergement dédié Vercel, vos API seront exécutés via des fonctions headless, que vous ayez 10 ou 100.000 utilisateurs sur votre site, cela sera transparent.