Apprendre REACT en juste 5 minutes (2024)

Summary

Cette 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

00:00

😀 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.

05:00

🛠️ 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.

Keywords

💡React

React est un framework de développement d'applications web très populaire depuis 2015, utilisé par les développeurs pour créer des interfaces utilisateur dynamiques. Dans la vidéo, il est présenté comme une librairie JavaScript qui ajoute de nouvelles méthodes et outils à JavaScript, permettant ainsi de construire des applications plus efficacement.

💡Libraire JavaScript

Une librairie JavaScript est un ensemble de fonctions et de classes prédéfinies qui facilite le développement de logiciels. React est décrit comme une librairie car elle fournit des fonctionnalités supplémentaires à JavaScript, permettant de créer des applications web de manière plus modulaire et réutilisable.

💡JSX

JSX est une syntaxe utilisée avec React qui permet d'écrire du code JavaScript avec une structure similaire au HTML. Cela permet aux développeurs de décrire la structure de l'interface utilisateur de manière plus intuitive. Dans le script, JSX est mentionné comme un moyen de déclarer des éléments de l'interface utilisateur de manière lisible.

💡Déclaratif

La programmation déclarative est un paradigme où le développeur déclare ce qu'il souhaite faire sans spécifier comment il doit être effectué. React est décrit comme une librairie déclarative, ce qui signifie que les développeurs peuvent décrire les composants de l'interface utilisateur sans se soucier de la manière dont ils sont rendus.

💡Composants

Dans React, un composant est une fonction qui retourne du JSX et représente un élément de l'interface utilisateur. Les composants sont utilisés pour structurer l'application en morceaux réutilisables. Dans la vidéo, l'avantage de la réutilisabilité des composants est souligné, montrant comment un même composant peut être utilisé plusieurs fois avec des propriétés différentes.

💡Réutilisabilité

La réutilisabilité fait référence à la capacité d'un composant à être utilisé à plusieurs reprises dans une application avec des configurations différentes. Dans le script, cela est illustré par l'utilisation répétée du même composant 'myButton' avec des noms différents, montrant comment les composants peuvent être personnalisés à l'aide de props.

💡Props

Les props (abréviation de 'properties') sont des objets JavaScript qui sont passés aux composants pour les personnaliser. Dans le script, les props sont utilisées pour passer des informations telles que le nom d'un bouton, permettant ainsi à un même composant d'afficher différents éléments en fonction des props reçues.

💡State

Le state en React est une sorte de mémoire interne d'un composant qui permet de stocker des données qui peuvent changer au fil du temps. Dans la vidéo, l'utilisation du state est expliquée comme une méthode pour maintenir et modifier des données, ce qui déclenche un rendu (re-rendering) du composant pour refléter les changements.

💡Render

Le rendu en React est le processus par lequel un composant est transformé en code HTML qui peut être affiché dans un navigateur. Lorsqu'un state change, cela déclenche un nouveau rendu du composant. Dans le script, l'importance de comprendre que le rendu est une action qui met à jour l'interface utilisateur est soulignée.

💡Hooks

Les hooks sont une fonctionnalité de React qui permet aux fonctions de composants d'accéder à des fonctionnalités de classe, comme le state et les effets de bord. Dans le script, les hooks tels que 'useState' et 'useEffect' sont mentionnés comme des outils permettant de gérer le state et de synchroniser les composants avec des événements externes.

💡useEffect

Le hook 'useEffect' permet de gérer les effets de bord dans les composants fonctionnels de React, tels que l'initialisation et la désinitialisation de comportements. Dans le script, 'useEffect' est utilisé pour synchroniser la position de la souris avec un state, illustrant comment les hooks peuvent interagir avec les événements du DOM.

💡Custom Hooks

Les custom hooks sont des fonctions personnalisées qui commencent par 'use' et permettent de réutiliser une logique de hook dans plusieurs composants. Dans le script, l'idée de déplacer une logique de hook dans une fonction personnalisée est abordée, montrant comment créer des hooks réutilisables pour l'ensemble de l'application.

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]