Apprendre et comprendre React - le tutoriel pratique

Ici sont présentés les sujets qui seront abordés par la suite, et la motivation derrière ce cours est expliquée.

Il existe désormais d'innombrables frameworks UI pour JavaScript - pourquoi devrait-il s'agir de React? Outre la popularité indéniable de cette bibliothèque, il existe également quelques raisons plus profondes qui plaident en faveur de React.

Nous mettons en place l'environnement de développement dans cette leçon et créons en un rien de temps notre première application React avec npm create vite.

Après avoir créé une application React "fraîche" dans la dernière leçon, il s'agit ici de comprendre la structure de cette application et d'expliquer comment React peut être intégré dans une page web.

Un petit rappel sur la différence entre var et let/const.

La déstructuration permet d'extraire de manière ciblée des éléments d'objets et d'arrays.
De plus près, de nombreuses possibilités d'application émergent, rendant le code JS plus élégant et plus compact.

Fonctions sont essentielles en JS et été jusqu'à présent déclarées et définies uniquement via le mot-clé function. ES6 introduit une syntaxe élégante et concise qui rend le code plus lisible et offre une solution à un problème persistant avec this.

En NodeJs, les modules sont utilisés depuis le début, mais initialement, ils utilisaient exclusivement le format de module CommonJs avec require. Depuis ES6, il existe une définition de module standard, et donc les nouveaux mots-clés import/export. À présent, ce format est pris en charge par presque toutes les bibliothèques JS (nouvelles) et NodeJs peut également gérer cela dans les versions les plus récentes.

Avec JSX, vous décrivez l'interface utilisateur d'un composant et intégrez des expressions JS en elle. Le fichier de projet pour la vidéo contient le code final de cette section de tutoriel.

Des composants React personnalisés peuvent être facilement écrits à l'aide de fonctions qui renvoient du JSX.

Cette leçon explique comment intégrer des données et des expressions JavaScript dans JSX.

Sans un état qui peut changer, il est difficile d'implémenter une application significative. En React, on utilise généralement useState à cette fin. Cette leçon présente ce Hook et explique son utilisation.

Props servent à transmettre des données aux composants enfants. Ici, on explique comment cela se fait exactement et à quoi il faut faire attention.

Lorsque les props changent dynamiquement, la fonction de rendu de composant correspondante est appelée à nouveau.

Ici, il est expliqué comment l'application To-do sera structurée. La vidéo est accompagnée d'un fichier de projet contenant le code final de cette section du tutoriel.

Lorsqu'un composant enfant souhaite communiquer avec un composant parent, cela se fait via une prop de rappel.

Les tâches à faire devraient être complétées à un moment donné. Ici, nous discutons de comment cela fonctionne dans le code.

L'apparence d'une IU est sans aucun doute importante. C'est pourquoi je vais expliquer ici comment cela fonctionne avec la bibliothèque Emotion et comment utiliser la Propriété className. De plus, nous allons aborder l'attribut style, qui permet de styler chaque élément séparément en détail.

En filtrant le tableau des tâches à faire, les tâches à faire peuvent être réparties en deux groupes.

Bien sûr, il faut aussi pouvoir supprimer les tâches à faire. Voici comment cela fonctionne en filtrant le tableau.

Jusqu'à présent, nous avons toujours « enveloppé » les composants dans des DIVs. Cependant, dans certains cas, cela peut aussi être évité.

Maintenant, ça devient intéressant : les tâches à faire peuvent être facilement stockées de manière persistante dans la mémoire du navigateur et bien sûr être chargées à nouveau, de sorte qu'elles survivent au rechargement de la page.

Avec useEffect, vous pouvez intégrer des effets secondaires. Le montage d'un composant peut également être géré avec cette fonction.

Bref résumé de notre application de liste de tâches et dernières améliorations.

L'application du lecteur vidéo est créée avec créer vite et il est expliqué comment l'application doit être structurée. Le fichier de projet joint à la vidéo contient le code final pour le lecteur vidéo.

Avec l'attribut ref, vous pouvez référencer les éléments du DOM et y accéder avec useRef. Ici, nous le faisons avec l'élément vidéo.

Nous créons le lecteur vidéo proprement dit, qui comporte déjà des boutons pour Lecture, Pause et Arrêt.

Comme on n'a jamais besoin de Play et Pause simultanément, nous les combinons dans un seul bouton.

Les contrôles vidéo personnalisés contrôlent également la vidéo, mais cela a pour conséquence que notre état du bouton Lecture/Pause n'est pas ajusté en conséquence. Nous corrigeons cela en utilisant des gestionnaires d'événements sur l'élément vidéo.

Nous pouvons également modifier le volume à l'aide d'un curseur dédié.

Il est étonnamment facile de sauter à n'importe quelle position de la vidéo (recherche) en définissant la propriété currentTime.

La durée de la vidéo n'est connue qu'après le chargement des métadonnées vidéo, il est donc nécessaire d'attendre le bon événement.

La playlist est mise en œuvre par une liste qui peut être implémentée avec l'élément HTML select.

Nous utilisons useEffect ici pour réagir aux changements de la propriété src- et réinitialiser l'état du lecteur vidéo.

La playlist est transformée d'entrées fixes en un tableau.

Maintenant, nous entrons dans l'édition de la liste de vidéos: nous ajoutons l'ajout d'entrées vidéo.

Ce qu'on ajoute, on doit aussi pouvoir le supprimer. Nous le faisons de manière similaire à l'application de liste de tâches en utilisant des filtres.

La playlist ne doit pas servir uniquement de "liste de signets", mais doit aussi lire automatiquement les vidéos les unes après les autres. Cela sera réalisé dans cette leçon.

Pour les impatients : boutons pour la vidéo suivante et précédente.

Un traitement spécial est mis en place pour la première et la dernière vidéo : les boutons Suivant et Précédent devraient être désactivés en conséquence.

Maintenant, nous enregistrons et chargeons notre playlist. Cela se fait de manière analogue à l'application To-Do dans le stockage local du navigateur.

Vous pouvez regarder les vidéos utilisées à titre d'exemple dans l'application Lecteur vidéo (toutes sous licence CC Attribution, voir les sites web correspondants) :

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

À travers l'exemple du Hook useJsonFetch-, il est expliqué comment écrire ses propres fonctions de Hook.

Changer l'état avec le setter de useState peut être délicat. Avec useImmer, ce n'est plus un problème.

L'interface utilisateur se construit plus rapidement et répond plus rapidement aux interactions des utilisateurs lorsqu'il n'y a pas d'appels inutiles aux fonctions de rendu. Avec mémo, il est possible d'éviter que les composants soient rendus lorsqu'ils ne changent pas leurs propriétés.

Avec useCallback, vous pouvez éviter le rendu inutile des composants enfants lors de l'utilisation de props de callback.

Les calculs complexes à l'intérieur des fonctions de rendu ne doivent être exécutés que si nécessaire. Avec useMemo, les résultats de ces calculs peuvent être mis en cache en tenant compte des dépendances.

Je résume ici les résultats du cours et je donne des indications sur ce que les participants devraient regarder après le cours.