Apprendre REACT en juste 5 minutes (2024)
Summary
TLDRCette vidéo propose d'apprendre les bases de React, la librairie JavaScript la plus populaire, en seulement 5 minutes en français. Elle explique que React est déclarative, utilise JSX pour combiner HTML et JavaScript, et se concentre sur la création de composants réutilisables avec des props pour la personnalisation. Elle introduit également les concepts de State, useEffect et useRef, illustrant comment ces hooks React permettent de gérer l'état et les interactions avec le DOM. Le script invite à un cours en ligne suivi par des milliers de développeurs pour approfondir la compréhension de React.
Takeaways
- 😀 React est le framework le plus utilisé par les développeurs depuis 2015.
- 🔍 React est en fait une bibliothèque JavaScript qui ajoute de nouvelles méthodes et outils à JavaScript.
- 📝 React utilise le JSX, un moyen d'écrire du JavaScript avec une syntaxe HTML, qui sera compilé en JavaScript par Babel.
- 🧩 Les composants en React sont des fonctions qui retournent du JSX, favorisant la réutilisabilité et la séparation des préoccupations.
- 🔑 Les props sont des objets JavaScript passés aux composants, permettant de les rendre personnalisables.
- 📦 Les hooks sont une fonctionnalité clé de React, permettant d'ajouter des fonctionnalités de composants fonctionnels.
- 🔄 Le hook `useState` permet de gérer une mémoire interne pour les composants, avec des getters et des setters pour la modification.
- 🖱️ Le hook `useEffect` synchronise les composants avec des éléments externes, comme les événements ou les WebSockets, et doit être nettoyé si nécessaire.
- 🔗 Le hook `useRef` permet de stocker des références d'éléments DOM ou des valeurs qui n'influencent pas le rendu.
- 🛠️ Les custom hooks permettent de déplacer n'importe quelle logique de composant dans une fonction réutilisable.
- 🔗 Un cours en ligne est mentionné pour approfondir la compréhension de React, avec plus de 3400 développeurs formés.
Q & A
Quel est le framework le plus utilisé par les développeurs depuis 2015 ?
-React est le framework le plus utilisé par les développeurs depuis 2015.
Pourquoi React est-il considéré comme une librairie plutôt qu'un framework ?
-React est considérée comme une librairie car elle vient ajouter de nouvelles méthodes et outils à JavaScript, au lieu de fournir une solution complète comme un framework le ferait.
Qu'est-ce que le JSX et comment est-il utilisé dans React ?
-Le JSX est une syntaxe qui permet d'écrire du JavaScript avec une syntaxe HTML. Il est utilisé dans React pour décrire de manière lisible ce que l'on souhaite afficher, et il est compilé avec Babel en JavaScript pour être compris par le navigateur.
Quel est le rôle des composants dans React ?
-Les composants en React sont des fonctions qui retournent du JSX. Ils sont utilisés pour créer des éléments réutilisables et séparer les préoccupations, en gérant le HTML, le CSS et le JavaScript ensemble.
Quels sont les avantages de l'utilisation des composants en React ?
-Les avantages incluent la réutilisabilité, où un composant peut être créé une fois et utilisé autant de fois que nécessaire, et la séparation des préoccupations, où un composant gère le HTML, le CSS et le JavaScript ensemble.
Quels sont les props et comment fonctionnent-elles dans React ?
-Les props sont des objets JavaScript qui sont passés en paramètres à un composant et qui contiennent des clés définies lorsqu'on utilise le composant. Elles permettent de rendre les composants personnalisables.
Comment les données peuvent-elles être affichées dans le JSX ?
-Pour afficher des données dans le JSX, on peut utiliser des accolades pour intégrer directement des variables JavaScript dans le JSX, en les plaçant entre accolades.
Quel est le rôle du hook 'useState' en React ?
-Le hook 'useState' permet de gérer une mémoire interne d'un composant, en permettant de définir un state et de le modifier avec un setter, ce qui déclenche un re-render du composant avec les nouvelles valeurs.
Quel est le rôle du hook 'useEffect' et comment est-il utilisé ?
-Le hook 'useEffect' permet de synchroniser les composants avec des éléments extérieurs comme des événements ou des WebSockets. Il est utilisé pour ajouter et supprimer des effets secondaires, comme des écouteurs d'événements, qui s'exécutent à chaque fois que le composant est monté ou mis à jour.
Quel est le rôle du hook 'useRef' en React ?
-Le hook 'useRef' permet de stocker une référence d'un élément dans le DOM, ce qui peut être utilisé pour accéder ou manipuler l'élément, comme le mettre en focus, ou pour stocker des valeurs qui n'influencent pas le rendu du DOM.
Quels sont les custom hooks et comment peuvent-ils être utilisés ?
-Les custom hooks sont des fonctions qui commencent par 'use' et qui encapsulent une logique réutilisable. Elles peuvent être utilisées dans n'importe quel composant React pour apporter la même fonctionnalité, comme le montre l'exemple de la création d'un custom hook pour encapsuler une méthode.
Outlines
😀 Introduction à React et JSX
La première partie du script introduit React en tant que framework utilisé par les développeurs depuis 2015. Il est décrit comme une bibliothèque JavaScript qui ajoute de nouvelles méthodes et outils à JavaScript. La vidéo explique que React est déclaratif, permettant aux développeurs de décrire ce qu'ils veulent faire de manière plus lisible, en utilisant JSX. Le JSX est une syntaxe qui permet d'écrire du HTML dans du JavaScript, qui sera compilé avec Babel en JavaScript compréhensible par le navigateur. L'un des points clés de React est la notion de composants, qui sont des fonctions renvoyant du JSX, favorisant la réutilisabilité et la séparation des préoccupations (HTML, CSS et JS dans un même composant). La vidéo mentionne également les props pour rendre les composants personnalisables et l'utilisation de variables dans le JSX.
🛠️ Les Hooks de React et leur utilisation
La seconde partie du script se concentre sur les hooks de React, qui sont des fonctions permettant d'ajouter des fonctionnalités de composants de classe aux composants fonctionnels. Le 'useState' est expliqué comme une façon de mémoriser un état interne dans un composant, permettant ainsi de maintenir et de modifier des données. L'exemple donné montre comment un composant peut maintenir son propre compteur indépendant. Le 'useEffect' est mentionné pour synchroniser les composants avec des éléments externes, comme les événements ou les WebSockets, et pour nettoyer ces éléments lors de la destruction du composant. Le 'useRef' est utilisé pour stocker des références d'éléments DOM ou des valeurs qui n'affectent pas le rendu. La vidéo conclut en mentionnant les custom hooks, qui permettent de déplacer toute logique dans une fonction commençant par 'use', pour une utilisation réutilisable dans d'autres composants React.
Mindmap
Keywords
💡React
💡Libraire JavaScript
💡JSX
💡Déclaratif
💡Composants
💡Réutilisabilité
💡Props
💡State
💡Render
💡Hooks
💡useEffect
💡Custom Hooks
Highlights
Apprendre React en 5 minutes en français est l'objectif de cette vidéo.
React est le framework le plus utilisé par les développeurs depuis 2015.
React est une librairie JavaScript qui ajoute de nouvelles méthodes et outils.
React est déclaratif, permettant de déclarer des éléments de manière lisible.
Le JSX est utilisé par React pour écrire du JS avec une syntaxe HTML.
Le JSX est compilé avec Babel en JavaScript pour être compris par le navigateur.
Les composants React sont des fonctions qui retournent du JSX.
Les composants offrent la réutilisabilité et la séparation des préoccupations.
Les props sont utilisées pour rendre les composants personnalisables.
Les hooks sont une fonctionnalité clé de React pour la mémoire interne des composants.
Le hook 'useState' permet de définir et de modifier un état.
Les rendus sont déclenchés par l'état et impliquent la réexécution du composant.
Le hook 'useEffect' synchronise les composants avec des éléments externes.
Le hook 'useRef' permet de stocker des références d'éléments DOM.
Les custom hooks permettent de déplacer n'importe quelle logique réutilisable.
Le cours suivi par plus de 3400 développeurs est mentionné pour approfondir React.
La plateforme créée par l'auteur offre des leçons de A à Z sur React.
L'auteur invite à s'abonner et à aimer la vidéo pour plus d'informations.
Transcripts
apprendre react en 5 minutes et en
français c'est ce que je te propose dans
cette vidéo react déjà il faut savoir
que depuis 2015 c'est le framework le
plus utilisé par les développeurs mais
attention car react n'est qu'une
librairie javascript c'est-à-dire qui
vient juste rajouter de nouvelles
méthodes de nouveaux outils à JavaScript
et react est ce qu'on appelle une
librairie déclarative c'est-à-dire qu'au
lieu de devoir déclarer chaque chose
qu'on veut faire comme ici création d'un
bouton ajoute d'un event listener et ben
on va pouvoir juste le déclarer en
déclarant de manière humainement lisible
ce qu'on veut faire donc par exemple ici
je veux créer un bouton je veux ajouter
un on click et cetera et pour faire ça
Ract utilise le JSX le JSX c'est un
moyen d'écrire du JS avec une syntaxe
HTML c'est-à-dire que ce que tu vois ici
c'est du javascript comment ça
fonctionne et ben c'est que le JSX va
être compilé avec Babel en Javascript
donc tu vois que ce code juste ici va se
transformer en celui-ci avec react.cate
qui est bien du javascript
compréhensible par ton navigateur parce
que sous le capot react fait ceci
c'est-à-dire qu'il va utiliser create
elements avec le type les props et le
child run et c'est vraiment comme ça que
le JSX va être transformé un des points
importants de react c'est les components
ceci est un composant un composant en
react c'est juste une fonction qui
retourne du JSX et c'est pour ça que tu
retrouveras souvent ceci ui est égal à F
de state un des avantages des composants
c'est ce qu'on appelle la utilisation la
réutilisabilité on va créer une fois et
ensuite on peut l'utiliser une infinité
de fois par exemple tu vois qu'ici
j'utilise my bouton trois fois un
deuxième avantage c'est ce qu'on appelle
la separation of concern c'est-à-dire
que un bouton il va autant gérer le html
que le CSS que le js et donc quand tu
l'utilises et ben il y a déjà tout qui
fonctionne tout ensemble avec cet
exemple typique tu vois que ici on a le
CSS qui est géré on a le html et on a le
Javascript tout ça dans un seul
composant et afin de pouvoir rendre nos
composants customisables on va pouvoir
passer des props les props c'est tout
simplement un objet JavaScript qu'on
prend en paramètre et qui contient
chaque clé définie lorsqu'on utilise le
composant exactement comme une propriété
HTML tu vois qu'ici que name se retrouve
ici et se retrouve ensuite ici et ceci
va avoir un rendu du même composant mais
avec des noms différents ce que tu as
peut-être remarqué ici c'est que pour
afficher des données dans le JSX on peut
venir ajouter des braquettes pour venir
entre guillemets ouvrir une porte dans
le monde du javascript tu vois que que
ici notre composant user il prend name
en paramètrre et on vient intégrer ce
name directement dans notre GSX via ces
fameuses brackets parce que lorsqu'on
vient transformer ça avec Babel comme on
a vu avant et ben tu vois que quand tu
utilises une braquette au lieu d'avoir
ça comme élément string on vient le
passer directement comme variable il y a
une props très spéciale qui s'appelle
child run que tu peux prendre de la même
manière que ce qu'on a vu avant sauf que
pour la passer on va pouvoir tout
simplement passer le child run entre la
balise ouvrante et la bise balise
fermante d'un composant et tu vois que
quand on transforme ça en Javascript et
ben ça fait qu'on vient passer ce qui
est donné juste ici en paramètrre dans
les childr un élément très important de
react c'est les hook et les hook il y en
a pas mal et on va essayer de tous les
voir le premier c'est le State et il va
permettre d'avoir une sorte de mémoire
interne d'un composant c'est-à-dire que
là on va pouvoir définir un state puis
ensuite ce state retourne ce qu'on
appelle un getter qui va contenir la
valeur et un setter ou quelque chose qui
mute cette donnée qui va nous permettre
de la modifier comme tu vois juste ici
ce qui est intéressant c'est que chaque
composant avec un state à sa propre
mémoire tu vois que ici j'utilise trois
fois mon compteur mais chaque fois
chaque compteur a sa propre mémoire et a
des valeurs différentes ce qu'il faut
bien comprendre avec react c'est que le
ate va provoquer un render et un render
c'est tout simplement l'exécution de
notre composant et le calcul à nouveau
de ce composant donc tu vois qu'ici
quand je clique sur count ce qui va se
passer c'est que react il va entre
guillemets tout supprimer et il va tout
recréer et cette fois avec les nouvelles
valeurs c'est pour ça que notre
composant est toujours synchronisé avec
le State et c'est aussi pour ça que tu
verras que pour avoir les valeurs à jour
il va falloir attendre un render et si
tu vois que ici j'appelle set counts
suivi de set counts et ben ça donne deux
fois la même valeur parce qu'il faut
attendre un render afin d'avoir la
valeur modifiée ensuite on a le use
effect qui va permettre de synchroniser
nos composants avec des éléments
extérieurs comme des events ou des
WebSockets tu vois que ici je vais par
ex exemple synchroniser mon composant
app en synchronisant la position de la
souris en utilisant un event listener
sur document ici avec une méthode qui
vient modifier mon state et ici lors du
cleanup qui s'apparente au moment où en
fait ce use effect va être supprimer on
va dire et ben je viens supprimer mon
event listener afin de synchroniser
comme ceci lors de la création je viens
ajouter l'event et les genre de la
suppression je viens clean cet event on
a tout un react hook flow que je n'ai
pas le temps t'expliquer dans cette
vidéo mais si ça t'intéresse tu
trouveras dans le premier lien dans la
description beaucoup plus sur ce sujet
finalement on a le US ref qui va nous
permettre de stocker la référence d'un
élément dans le DOM par exemple pour
pouvoir le focus comme je le fais ici ou
aussi de stocker une valeur qui
n'influence pas le rendu du DOM donc par
exemple ici je vais stocker est-ce que
l'utilisateur a déjà cliqué sur ce
bouton le mieux là-dedans c'est
d'utiliser ce qu'on appelle des custom
hook c'est-à-dire qu'on va pouvoir
déplacer n'importe quelle logique donc
tu vois qu'ici j'utilise un hook et une
méthode dans une fonction qui commence
par use qui définit un custom hook et
cette fonction et ben je vais pouvoir
l'utiliser exactement comme un hook dans
mes composant react de manière
réutilisable et ça va garder la même
logique évidemment react est très
complexe et en 5 minutes c'est difficile
de tout voir mais dans la description tu
trouveras un cours suivi par plus de
3400 développeurs C leçons sur une
plateforme que j'ai créé de A à Z en
react on se retrouve là-bas merci de
m'avoir suivi hésite pas à t'abonner et
à liker cette vidéo on se dit à bientôt
ciao
ciao
[Musique]
5.0 / 5 (0 votes)