Maîtrisez React : JSX, ReactDOM et création de composants

hello c'est melvin et tu es dans une vidéo Masterc sur react où on va voir tout ce qu'il faut savoir pour débuter

react ce que j'appelle le module fondamental dans cette vidéo on va s'intéresser au JSX au reacctdom et au

componant mais cette vidéo fait partie d'une série de Masterc que je te propose sur Youtube tu peux retrouver la

playlist juste ici le ripo gitup que tu vois juste ici sur ce lien et tu vois qu'il va y avoir plusieurs vidéos et là

on est que sur la première JSX reactdom et components et tu pourras visionner la deuxième sur ustate tout ça pour

m'assurer que tu deviennes une vraie bête en Ract moi je m'appelle Melvin j'ai formé plus de

1300 élèves pour l'instant sur mes différentes formations et j'ai accumulé plusieurs millions de vues sur Youtube

je t'ai préparé énormément de contenus qui de base sont réservés pour les gens qui me donnent de l'argent mais j'ai

décidé de tout te proposer gratuitement pour te montrer la qualité que je vais te proposer dans la suite pour ces

mastercl j'ai préparé des centaines de schémas et d'explications ce qui vont te permettre de tout comprendre ce que je

vais te partager attention il va falloir te battre contre YouTube regarder cette vidéo jusqu'à la fin pour vraiment

monter en compétence j'ai tout condensé pour que ce soit parfait pour toi bref je te propose tout de suite de commencer

avec le bout de code qu'on voit juste ici qui est pour l'instant totalement banal

mais ce bout de code qui est la base de react et ben il devrait déjà t'interpeller parce que ici on est dans

un fichier JavaScript et pourtant on est en train d'écrire ce que beaucoup de personnes appellent du HTML alors si on

regarde ce que ça fait ici tu vois que je peux écrire une div avec un H1 et par exemple component et qu'ici ça m'écrit

component je vais pouvoir rajouter des classes comme ceci et maintenant on se retrouve avec un component avec avec des

classes ceci devrait t'interpeller ceci tu devrais te dire c'est bizarre que dans un fichier JavaScript ou de base et

ben on peut pas faire ça et ben là je suis capable d'écrire des div surtout que si on s'intéresse en fait à

l'inspecteur d'éléments sur ici ma page beginin react et que j'ouvre la console comme ceci et que à cet endroit j'essaie

tout simplement de créer par exemple component comme ceci et P je dis que c'est égal à une div avec une fin de

div comme ceci et que j'appuie sur ENTER tu vois que ça marche pas alors il va falloir comprendre ce sujet et pour ça

je t'ai préparé une mastercl une présentation c'est quoi le JSX déjà ce n'est pas du HTML ce n'est pas non plus

du HTML dans du javascript il va vraiment falloir t'enlever ça de la tête parce que c'est plutôt du javascript le

JSX qu'on a vu précédemment c'est juste et simplement du javascript mais à ce moment-là tu te demandes peut-être

pourquoi notre navigateur ne le comprend pas et ben on va tout de suite le comprendre ici ce que tu vois écrit

c'est du javascript mais tu le vois sous une forme un peu édulcoré un peu plus sexy un peu plus lisible pour un

développeur le JSX en fait celui-ci il va être transformé comme tu peux le voir ici le JSX qu'on a vu juste avant et ben

il va être trans former en utilisant ici des reactquate elements et autres style que tu vois juste ici alors justement tu

es en train de te dire peut-être que tu as jamais vu ce react.cate element et on va justement s'intéresser à ce que c'est

parce qu'en fait quand on écrit du JSX donc ce qui est écrit ici il va y avoir une phase qui est créée par ce qu'on

appelle Babel qui va transformer ce JSX qu'on a en une syntaxe qui est coméhensible par le navigateur et donc

ici on peut le voir que une fois qu'on a JavaScript cette fois-ci le navigateur Chrome est capable de le comprendre et

c'est exactement notre but mais alors pourquoi est-ce qu'on doit faire ça pourquoi est-ce qu'on a ce react.cate

element à quoi ça sert et pourquoi on n'est pas juste en train d'écrire du HTML ce react.cate element on peut le

voir ici avec l'exemple il prend trois arguments le premier qu'on a juste ici c'est le bouton ce bouton en fait c'est

le type de l'élément qui doit être créé celui-ci il peut soit être de type élément donc comme ici on voit avec une

string c'est-à-dire que ici c'est un élément ou un composant quand on va créer des custom component et ben on va

pouvoir les composer entre eux afin de pouvoir créer des éléments qui sont des composants on va aussi avoir ici des

props avec par exemple oncilick mais tu pourrais avoir on double clic qui est un event tu pourrais avoir des styles qui

seront des propriétés HTML où tu pourrais avoir n'importe quel custom props que tu veux passer à notre

composant et finalement ici on a le slash les child run ce paramètre est un peu spécial parce qu'il peut non

seulement prendre des strings il peut aussi prendre des tableaux mais il peut aussi prendre des objets enfin peut-être

pas des objets mais il peut prendre pas mal de choses notamment aussi d'autres react.cate element donc tu vois que ici

ce qui est intessant c'est qu'on a d'autres react.cate elements qui sont intégrés dans les child

r bref ça c'est pour ces éléments là mais ce qui nous intéresse c'est qu'est-ce que ce react.cate element

vient créer et ben ce react.cate element il vient créer une sorte de JSON ce JSON il s'affiche exactement comme c'est

écrit en dessous il va avoir le type les props laaky la Reff donc cette méthode Create element tout ce qu'elle fait

c'est qu' qu'elle retourne un gisson plus ou moins structuré et donc en fait c'est une sorte de SH hand qui permet de

simplifier la création d'éléments comme ceci et du coup si je te montre mon composant card complexe et ben il va

créer un jisson plus ou moins complexe avec une div des props des child run et ce quiy et ce r qui sont des reséservid

keyword de react qu'on verra ensemble plus tard maintenant qu'on a tout ça et ben on a cette fameuse représentation du

DOM et pourquoi est-ce qu'on fait tout ça c'est parce que ici ce que tu vois c'est le react Dom oui ououi on dirait

pas comme ça mais voici comment se représente le DOM et donc ça ça va être ce qui va être output donc la sortie de

ton code ensuite tout ça on va le passer à reactom qui va venir ensuite se charger de faire la connexion avec le

DOM et donc quand il y a des update il y a une méthode comme ça qui a un code simplifié du virtual DOM et ben il va

venir comparer l'ancienne l'ancien gros jisson que je t'ai montré mais évidemment ça se fait

de manière très récursive comme tu peux le voir ici ça vient récursivement venir faire ça mais ça va venir comparer

l'ancienne et la nouvelle node voir si bah il faut peut-être en créer une nouvelle il faut peut-être en supprimer

une il faut peut-être en modifier une et cetera et cetera donc en clair toi tu écris du code JSX qui représente ton

code react qu'on a juste ici ce code JSX il va être transformé foré en javascript par Babel ce Babel il va être envoyé au

reacdom sous forme d'objet javascript et le rectdom va s'occuper de créer des éléments donc voici vraiment le flux

Ract maintenant que je t'ai fait un petit peu la théorie on va tout de suite vérifier que ma théorie est juste et

donc on va venir ici et au lieu de faire ça et ben devine ce qu'on peut faire déjà on peut analyser ce qu'on reçoit

donc là si je vais dans la console network on peut aller analyser les fichiers javascript qui sont ont reçu et

donc dans les fichiers javascript qu'on reçoit on peut voir ici le component component.jsx et celui-ci il utilise ici

jsxd mais c'est un peu près comme rea.cate elements qui va passer une div et qui va passer les child run avec ici

plein d'autres paramètres parce que c'est webpack qui fait encore c'est des siennes mais ici on peut voir qu'il y a

toute cette création qui se fait maintenant qu'on a vu ça ce qui nous intéresse c'est de venir te prouver tout

ce que je dis donc ici on va venir importer react et on va faire create elements de div avec comme props ici on

va pouvoir mettre class name par exemple card BG ici je vais mettre neutral on va mettre Shadow xel donc c'est des classes

tawind rien de très spécifique et ici en deuxième argument on va faire hello et donc là quand je sauvegarde tu peux voir

qu'on a notre hello évidemment donc ici on a le type ici on a les props et ici ici on va avoir les child run pourquoi

je dis les child run parce que je peux passer un autre child run en mettant ici une virgule et ici je peux écrire Word

et donc là on a bien un et deux child run et on peut le voir que react les différenci de manière très distincte si

je t'affiche ici le react tu peux voir qu'on a hello Word qui sont séparés et qui sont deux text node parce que react

va créer des text node donc ici on a notre Hello World et on peut même ajouter un nouvel ate element avec ici

par exemple un span et cette span elle va contenir aucune props et comme enfant elle va contenir yes comme ceci et donc

là on a la span et on peut faire ça encore mieux parce que ici je peux faire react create element de div qui prend

comme props class name card body et qui prend comme autre enfant donc là je refais un create elements de un

2 qui prend comme class name ici card title donc ça c'est tout des classes Daisy ui si tu te poses la question et

ici je vais faire card title et donc là ce que je viens de créer c'est un arbre avec ici comme tu le vois card puis BG

neutral puis card body et donc on a bien tous les éléments qu'on a fait et c'est pour te montrer que cet output et B il

est possible de le créer avec react.cate element le problème c'est que tout ça c'est très

peu lisible et c'est pour ça que react nous propose de faire ça mais quand même j'ai envie de te montrer un truc encore

plus fou donc ici je vais te montrer le JSX je retourne le JSX donc là ça change rien c'est juste que au lieu de

retourner directement ça et ben je viens le stocker dans une variable et là je vais faire console. log de JSX et comme

ça on va pouvoir aller dans la console et ici en faisant un petit clear pour ne pas être trop perdu et euh pouvoir voir

le rendu JSX ici et ben tu peux voir qu'on a ce fameux type div props dans les props on a les class name que j'ai

mis ici child run à l'intérieur des child run on a des props des types et cetera et

cetera donc on se retrouve exactement avec la structure que je t'ai donné juste avant et c'est cette structure que

le ragdom utilise pour créer le DOM alors je vais maintenant te faire la deuxième présentation donc là on était

que sur la première on va aller sur la deuxième juste ici qui est encore plus dingue et qui est totalement

exceptionnel pour cette vidéo et avant de la commencer je tiens quand même à te préciser que tout ce que je te je

t'offre ici c'est du contenu qui va te permettre de comprendre react mais le mieux c'est de pratiquer et donc ici

j'ai pas mal d'exercices gratuit que tu vas pouvoir retrouver sur mlv.sh/react où tu vas avoir des dessins

des pratiques de la pratique pardon directement sur la plateforme tu vas pouvoir avoir des quiz et des vidéos

courtes comme ça tu vas vraiment pouvoir passer au next niveau c'est totalement gratuit sur le lien

mlv.sh/react maintenant il va falloir qu'on parle du DOM et du react Dom parce que si c'est des concepts que tu n'as

pas encore compris et bah il va falloir vite te mettre à la page parce que react ça reste un framework Web qui utilise

toutes ces technologies alors le DOM qu'est-ce que c'est et ben ça représente comme ceci du

HTML que tu vas pouvoir retrouver partout donc document c'est une sorte de structure qui permet de définir à quoi

ressemble HTML et qui la page Youtube où tu es si tu es pas sur téléphone et ben c'est un Dom qui affiche ça donc nous on

écrit du code HTML et le browser va utiliser ce code pour créer la structure de l'arbre donc on écrit notre HTML

comme ceci notre HTML il est passé à Google Chrome et chrome il va construire le DOM qu'on dessine souvent de cette

manière avec une sorte de structure en arbre comme je t'ai fait juste ici et donc ici on peut voir qu'on a deux types

d'éléments on a des éléments qui sont des body main foour article H1 P et on a des text node et donc le texte c'est

souvent ce qui est très présent sur un site web comme je te l'ai marqué juste ici donc les éléments les éléments

nodees et ben ils vont contenir plein de propriétés qu'on voit juste ici avec tous les éléments que tu vois juste ici

et encore plein de propriétés et cetera et cetera le truc c'est que ces propriétés sont pas mal lourdes et donc

voici qu'est-ce qui se passe avec react sans reactom on va avoir un arbre comme ceci avec Chac tac tac tac tac un titre

et notre rendu ici avec des datas parce que souvent une application contient des données et donc là on a un USERNAME un

title un content Melvin supertitle mon article et quand on vient faire update username

Alex et ben le DOM ou toi avec ton code tu vas devoir définir bah où est-ce que était utilisé username donc tu vas

devoir garder la trace de ceci ou parcourir tout ton élément pour trouver ceci et donc là tu vas rechercher le P

le sauvegarder dans une variable puis ensuite tu vas modifier update username Alex et donc le rendu va ensuite se

mettre à jour de manière assez intuitive et maintenant le title devient test et donc là tu dois refaire la même chose

chercher le H1 le modifier et cetera afin de pouvoir mettre et d'avoir le rendu qui est modifié et

là d'un seul coup tu as plein d'update update title is not test title is not test title is not test ça vient te spam

d'update donc heureusement tuas déjà le Hain mais le DOM il arrive pas trop à comprendre si c'est une mise à jour

qu'il doit faire ou pas et donc dans le doute il va la faire tout le temps et donc pour un framework c'est assez

compliqué de garder la trace de tout ça parce que les éléments les nodes sont très lourdes dû au fait que il y a plein

de propriétés en plus et que bah c'est plus difficile de garder la trace alors c'est pour ça que le DOM il est très

doué pour paint c'est-à-dire pour afficher les données pour les pour t'afficher la page web sur laquelle tu

vois mais il est moins doué pour gérer les updates et traquer les éléments à modifi c'est pour ça qu'on a salué le

react Dom alors le react Dom c'est une présentation JavaScript du DOM tu te rappelles ce qu'on a fait avec le JSX et

ben on retrouve exactement la même chose juste ici type props child run type props child run type props child run et

cetera et ça va nous représenter ce Dom mais de manière ultra légère au lieu d'avoir des milliers de propriétés comme

je t'ai montré avant on se retrouve qu'avec des dizaines de propriétés même pas ici on a zéro propriété parce que

j'ai pas mis de propriété mais on pourrait évidemment avoir des propriétés ici et là et donc euh cette

représentation simplifiée du DOM en Javascript et ben c'est ce que le reactob Dom va utiliser en gros le RCT

Dom quand il a sa représentation JavaScript du DOM et ben il va venir donner des instructions au

Dom au lieu que le DOM bah enfin c'est toi qui doit donner des instructions au Dom qu'on soit d'accord quand tu fais du

javascript mais au lieu que le DOM fasse ses instructions peut-être pas forcément aussi bien et aussi facilement et benah

RAC Dom il va être une sorte de surcouche qui stock un objet JavaScript et lors du euh l dans lors de la de la

la première affichage de ton application le la première fois qu'elle est rendue et bah il va venir créer toutes les

nodes qui correspondent au JSX et donc ici au sorte d'objet JavaScript que tu auras créé maintenant imagine-toi qu'il

y a une update title change en test et ben à ce moment-là alors ce graphique est un peu plus compliqué que les autres

on va avoir l'update du du title change en test et donc là react il va garder deux Dom en mémoire il va garder le

premier qui était celui d'avant et le deuxième qui est celui d'après qui est juste ici une fois qu'il a ses deux

domes en mémoire il va avoir un processus de difffing qui peut être de manière assez vulgaire le fait de

superposer les deux domes l'un audessus de l'autre et de regarder le seul élément ici qui a changé tu peux voir

qu'on voit que test est devenu super tile moi j'ai changé entre deux et donc ici react il va se dire ok j'ai changé

cette DME cette DME a été modifiée et donc suivi de ça il va donner les instructions au Dom tu dois récupérer

l'élément H1 j'ai évidemment super simplifié tout ça et modifie le inner text en mettant test juste ici et donc

cette instruction unique va être envoyée au Dom elle va être modifié et ce sera optimisé donc ensuite on envoie ça au

DOM et le DOM est maintenant mise à jour et synchronisé avec la dernière version du reactdom tu comprendras maintenant

que si par hasard on fait title change ici à la place de test on le on lui dit que ce title va changer tout simplement

en title à ce moment-là bah il va se dire il y a pas de changement et donc ici il va pas voir ce changement qui est

juste là il va pas non plus voir euh il va pas non plus donner d'instruction et donc le DOM n'aura pas changé on

s'arrête ici c'est la dernière étape on va juste rien faire si tu veux et donc voici comment on gère tout ça évidemment

euh le Virtual Dom update que ce qui a changé si aucun changement il n'y a aucune update le butit du virtual Dom

c'est pas forcément d'être plus performant c'est de mieux tracker et mettre à jour le wiom pour venir garder

les updates en mémoire comme ceci le but du virtualdom c'est de faire en sorte que toi en tant que développeur tu

puisses facilement décrire ce que tu veux et que le virtualdom fasse en sorte de toujours s'assurer que ceci soit bien

respecté le concept de diffing c'est le fait de comparer deux versions du virtual dum pour définir ce qu'il faut

mettre à jour en sachant que dans ma démo je te donne l'impression qu'il y a tout le Virtual Dom ici qui est vérifié

mais en vrai il va que faire ça au niveau des composants donc de manière beaucoup plus optimisée hein encore plus

optimisée que ce que je te montre ici le batch update on pourra en parler c'est le fait d'attendre plusieurs mises à

jour avant de mettre à jour le DOM c'est-à-dire que avant ce qui se passait avec le wiom vu qu'on pouvait pas trop

gérer les updates et ben si tu modifiais plein d'éléments en même temps et ben il allait chaque milliseconde faire les

modifications alors que reacdom il va attendre d'avoir pas mal de modifications à faire dans un court

lapse de temps de 1 seconde évidemment ça c'est même moins d'une seconde avant de pouvoir les mettre à jour donc on va

quand même analyser ces deux sandbox ensemble sans Radom qu'on a juste ici juste pour te montrer un petit peu le le

le un petit peu des trucs fun c'est pas super factuel ce que je te montre mais c'est là donc ici tu peux voir que

souvent tu vas pas avoir de text node et donc là on update constamment le P ce que tu peux voir avec react en

l'occurrence avec le code que j'ai fait tout dépend le code que tu fais évidemment mais on va dire tu vois que

ici le P est mise à jour et le contenu du P est aussi mis à jour donc on a tout à peu près qui se met à jour je sais pas

si j'ai pu te montrer oui j'ai ma caméra un peu mal placée on sait jamais où la placer cette caméra et maintenant quand

je clique sur le bouton tu peux voir que ça vient changer le style qu'on a juste ici le style il est changé et ici le

contenu de la classe se modifie et on a le span qui se modifie tout ça c'est fait à la main avec du Javascript

évidemment avec mon code maintenant si on s'intéresse au deuxième code qui est cette fois fait avec react et qu'on

ouvre ce petit lien dans un nouvel onglet comme ceci donc j'ai un peu changé le style mais il y a rien de

frustrant qui change mais ce qui est marrant c'est qu'ici le P ne ne change plus enfin avant il changeait pas non

plus vraiment mais mais on a juste le 12 qui change donc react vient déjà traquer les text noodes carrément pour venir

mettre à jour ici que la bonne text node donc je trouvais ça déjà marrant dans la construction par défaut de react et ici

tu peux voir que ça change encore une fois la même chose et on a aussi cette text node qui est modifié ici alors en

réalité le react node ou du javascript statique ça change pas grand-chose sur des minis exemples aussi peu coûteux que

ça mais sur des grosses applications et ben ça peut changer des petites choses et je peux remettre MRE ma caméra ici

parce que je pense que pour la suite de la vidéo c'est le meilleur emplacement on a pas mal de de de de documentation

super cool comme cette cet article de Marcelo lazero lazaroni qui vient du Portugal qui nous explique comment tu

peux recréer le Virtual DOM et j'aime beaucoup ce code donc ça c'est un virtual Dom fait en seulement çaut pas

s'enlever ça fait en seulement 200 lignes de JavaScript comme tu peux le voir ici et en fait tu te retrouves que

il est assez simple on a a ici différentes props on a des properties des listonur bref c'est pas ça qui nous

intéresse ce qui nous intéresse c'est DIF to virtual node tu vois que ici on vient regarder ce qui a changé entre

deux virtuel node on vient voir si c'est un texte si c'est un texte et que c'est pas égal et ben je viens remplacer

uniquement le texte ensuite je viens voir si il y a le tag qui a changé si le tag a changé je remplace la node et

ensuite je viens regarder les nodes à remove et à modifier et donc là tu viens regarder toutes les properties TR c'est

quoi ça tu viens regarder toutes les properties et tu viens dire bah si l'ancienne prop éit égale à une define

et ben il faut que je la supprime tu viens regarder ensuite toutes les properties et tu vois que bah si

l'ancienne props elle est pas égale à la même et ben tu viens la 7 et ensuite tu vas regarder

les child run tu vas regarder s'il faut enlever des child run les rajouter et tu vas ensuite retourner tout ça et après

il y a une truc récursif qui se fait juste ici tu peux voir que ça vient récursivement modifier ses éléments et

là c'est la méthode pour créer des notes pour modifier des notes pour apply des nodes et ensuite et ben tu peux voir que

ici c'est une petite méthode pour créer avec tag property et child run la même chose qu'on a vit ensemble ici c'est

pour créer une text node donc ici c'est une virtual node de texte et ici lors de l'initialisation de l'application et bah

on vient euh initier tout ça bref c'est juste du code qui est assez sympa où tu te dis en fait le Virtual Dom c'est pas

de la magie noire il est pas derrière en train de mettre à jour par incroyable magie tout ce qui vient de se passer

mais c'est du très très concret parce que le virtuel virtuel DOM et ben il vient faire des actions comme toi et moi

create update delete avec mon magnifique accent English bref c'est comme ça qu'on a vu la première partie de cette vidéo

évidemment je t'ai pas que préparé ça parce que c'est des vidéos super complètes encore encore une fois

pratique pratiquer pratiquz c'est le plus important mlv.s/react cependant on va continuer à

s'amuser avec les composant parce que j'ai encore une longue liste de choses à faire figure-toi que si je me retrouve

sur Arc et ben on va maintenant pouvoir s'amuser avec vraiment react et arrêter de faire les gigolo comme on l'a fait

jusqu'à maintenant alors je me suis setup et comme ceci on va pouvoir supprimer tout ça donc là tu vois que je

suis dans un composant RCT qui est affiché dans une application react et pour commencer à tester en même temps

que moi et bah tu peux aller sur vidjs.dev et sur vidgs.dev dans get started tu vas pouvoir scroller juste

ici pour créer NPM create vit latest donc tu peux aussi utiliser pnpm ce que personnellement je préfère faire donc on

va choisir pnpm et ensuite dans le terminal de commande préférée que tu peux voir tu vois que je l'ai fait juste

avant tu fais create vite ensuite ici tu fais tu nommes ton projet donc ici pegin ou melvinx vidéo YouTube par exemple tu

appuies sur ENTER là tu choisis react ensuite tu choisis JavaScript je te laisse le temps de faire en même temps

ensuite tu fais CD melvinx videoéo YouTube et tu peux faire code point ou chercher dans Visual Studio code

l'endroit où faut le faire une fois que tu as fait tout ça tu peux voir que tu as le projet ici tu peux ouvrir le

terminal et faire pnpm rundev ou NPM rundev pour ouvrir le terminal au cas où c'est ici dans je

sais pas tropù View et ici on a sûrement terminal ici donc mon raccourci clavier à moi c'est commande j que j'utilise et

en faisant pnpm rundev et ben faut déjà installer les dépendances pour ça on peut faire pnpm install ça vient

installer les dépendances et une fois que tu as fait ça tu peux faire NPM rev et à ce moment-là on voit qu'on a la

application qui est ouverte et donc si tu as envie de te simplifier la vie tu peux installer Tailwind en cherchant ici

install Tailwind CSS with vite ici tu suis le tutoriel et tu enas vite et puis moi dans mon application j'utilise aussi

Daisy ui afin d'avoir une librairie très simple à utiliser pour mon application pourquoi est-ce que j'utilise Daisy ui

parce que ça va me permettre de pouvoir te faire des démonstrations comme je vais le faire juste ici tu vois que dans

mon composant je peux retourner ici un bouton j'ai qu'à lui mettre une class name Btn et ça fait un bouton et comme

ça ça m'évite de perdre du temps à faire des styles compliqués alors que ici je peux faire des styles rapides et simples

donc voici normalement avec toutes ces explications tu devrais pouvoir stopper la vidéo te mettre à la page setup ton

application vite et comme ça on est bon une fois que tu as fait tout ça on peut voir qu'on a notre premier composant et

justement on va quand même s'intéresser à la création d'un composant pour créer un composant alors à part celui par

défaut qui sera créé dans vite donc si ici je te montre dans source et dans app toi tu vas avoir ce code là avec déjà

des States ce que je te propose de faire c'est de tout supprimer et ici de Return juste une div avec à l'intérieur où tu

écris test comme ceci et comme ça on se prend pas la tête et tu commences avec un code clean et efficace et nous on est

à peu près à cette étape là je peux fermer ce navigateur et me concentrer sur ma euh un sur mon code qui est juste

ici ici pour créer notre premier composant tu as deux moyens de faire la première méthode c'est de créer une

fonction et donc ici je peux l'appeler par exemple bouton ensuite on va prendre des parenthèses et à l'intérieur ici on

va pouvoir faire return et à l'intérieur de ce return je vais pouvoir écrire du JSX et donc là class name Btn Btn

primary comme ceci et je je vais pouvoir écrire n'importe quoi à l'intérieur à l'intérieur comme Melvin ou click me

donc une fois que tu as créé ce bouton et ben ici tu le devines on va pouvoir l'utiliser et donc il y a un concept

très important Ract c'est la différence entre un élément qui a une majuscule ou une minuscule si j'utilise une minuscule

à ma méthode tu peux voir qu'elle est pas utilisée et que ici c'est bien mon Btn success ici qui est utilisé il faut

à tout prix mettre une majuscule à tes composants custom pour que react détecte ce qui doit te retourner donc siil juste

on vient vraperer cette div ce bouton plutôt à l'intérieur de div comme ceci que je viens copiercoller ça et je viens

mettre ça ici donc juste pour te démontrer un peu ce qui se passe ici ça c'est sur

babeljs.io/repl/pin de paramètres on peut voir ici ce que ça retourne et donc ici quand j'utilise un bouton minuscule

comme je le fais ici Chac tu peux voir que le create element ici il s'appelle avec une string et

cette string et ben elle référence pas le le le la la fonction que je viens de créer juste ici c'est que si j'utilise

une majuscule et à ce moment-là quand tu utilises une majuscule pour créer ton bouton comme je le fais juste ici à ce

moment-là tu peux voir qu'il référence correctement donc là on a bouton il référence correctement mon bouton qui

est juste ici et donc on est bien en train de faire la bonne action c'est-à-dire de référencer notre bouton

comme je le fais juste ici c'est pour ça qu'il faut toujours utiliser une majuscule pour nos composants custom

afin que Babel puisse le reconnaître une fois qu'on a vu ça et ben on va pouvoir venir juste ici ajouter notre majuscule

et à ce moment-là on peut voir que c'est toujours pas utilisé et que pour faire en sorte que ce soit utilisé je dois

venir sélectionner mon bouton et remplacer ça par bouton et à l'instant où je sauvegarde cette fois le success

disparaît et le click me apparaît toutes les class name ici ne servent plus à rien parce que je ne passe pas de

propriétés donc ici on va supprimer ça et on va juste utiliser notre bouton comme ça et à ce moment-là l'avantage

d'un composant c'est qu'après je suis capable de le réutiliser plusieurs fois et donc ici je vais juste rajouter des

classes Tailwind afin d'avoir une sorte de bouton ici avec ici item start comme ça on a la bonne taille maintenant

généralement tu vas pas vouloir toujours utiliser le même nom de bouton ici clic mi clic mi clic mi clic

cl voilà tu as compris le problème et généralement on va vouloir modifier ce nom de bouton et pour modifier ce nom de

bouton tu vas pouvoir venir rajouter une prop très spéciale qui s'appelle run cette props child run déjà on va

juste prendre les props et les consoles log pour aller dans dans l'ordre et je vais supprimer mes mes exponentiels

boutons pour garder que un le temps de la démonstration tu peux voir que ici on a des logs vides mais si je passe une

props par exemple class name Btn LG parce que j'ai envie qu'il soit très gros mon bouton et ben à ce momentl on

voit qu'on a Btn LG qui est passé en paramètres mais vu que c'est pro j'en fais rien et ben le bouton change pas

mais évidemment ici je peux modifier ça pour venir faire comme ceci plus props.c nameame à ce moment-là bom mon bouton

devient grand et si je fais Btn sm le bouton devient petit et tu peux voir que ici dans les classes du bouton on a bien

le btnsm qui apparaît dans l'ordre que je l'ai mis juste ici et donc ça c'est la manière de passer des propriétés d'un

composant bouton àfin d'un composant component à un composant bouton donc ces props là vont

se transformer en prop qui vont être passés juste ici et cette syntaxe ici va être transformé en un objet qui contient

class name mais encore mieux on va pouvoir utiliser une prop spéciale pour pouvoir l'utiliser làdedans qu'est-ce

que tu ferais naturellement tu dirais je veux mettre un texte custom et par exemple mon texte c'est je suis super

voilà parce qu'on est tous super et on l'oublie jamais ici je viens faire props Tex à l'intérieur et là je suis on va

mettre btnlg comme ça tu vois bien le bouton et là tu te dis bah c'est super je suis super donc c'est super j'arrête

j'arrête j'arrête la blague tout de suite et donc on a ce btnlg je suis super et tu dis je suis super c'est

super et donc à ce moment-là on se dit que c'est pas sympa ce serait peut-être plus sympa de pouvoir l'utiliser comme

un composant Ract quand j'écris un bouton et que je veux mettre je suis super à l'intérieur je le mets pas dans

une propriété texte en HTML en html aussi hein si ici je viens mettre un bouton juste ici tu vas voir qu'il va

apparaître ici si je fais test et ben il disparaît parce que react le dégage mais quand je fais test et ben tu peux voir

que j'ajoute le texte à l'intérieur et pour ajouter le texte à l'intérieur on a un nom de propriété spéciale qui

s'appelle child run et donc là tu peux voir que quand je passe à l'intérieur le texte tu peux voir que dans les props je

reçois une props child run ici qui contti ti je suis super super génial et donc ce super je suis super on va

évidemment pouvoir supprimer cette props texte et on va pouvoir remplacer ici la prop child run et à ce moment-là on peut

voir qu'on a toujours le je suis super mais on utilise la syntaxe de Child run si on prend notre code d'ailleurs ce

react on peut le supprimer c'est pour les anciennes versions de react il fallait toujours avoir ça c'est fini

maintenant et donc ici tu peux voir que react create element de bouton ON passe en props donc l'objet des props contient

ici class name et ensuite on passe en child run je suis super et ce child run je suis super il va se retrouver tac

Chac Chac Chac Chac dans les probs de notre composant et ces probs de notre composant ils vont se retrouver ensuite

dans le props point child run juste ici donc c'est magique c'est fantastique et ça fonctionne bien quels sont les

avantages de ce props pointchildrun et ben c'est que je pourrais par exemple ajouter un lapin zze 16 et donc là si tu

as envie de faire la même chose que moi au moment où je suis en train de le faire il faudra faire attention d'aller

dans le terminal que tu ne vois pas mais que tu vas très vite voir comme ceci donc dans le terminal qui est juste ici

tu vas pouvoir faire pnpm install donc NPM install lucide react comme ceci afin d'avoir la librairie lucide react et de

pouvoir intégrer des icônes que je vais utiliser dans cette démonstration pour un souci de de beauté donc ici je peux

mettre par exemple un icône en 24 et cliquer rabbit click et tu vois que maintenant on peut passer en icône

qu'est-ce qui se passe quand j'ai fait ça bah encore une fois on va venir dans notre playground pour voir que dans mon

react.cate element qu'on a juste ici on va avoir la le premier paramètre qui est react.cate elementabit qu'on a juste ici

qui va jusque là oh là là je ne peut pas le faire les amis euh donc notre euh premier élément

tou il fait à peu près tout ça comme ceci ça c'est notre premier child run et ensuite tu vois qu'ici on en passe un

deuxième à cet endroit et donc on va pouvoir enchaîner les child run comme je le fais ici là ici on passe plusieurs

child run avec les tableaux on peut même passer des euh objets donc ici il va y avoir un concept qu'on va très vite

parler que je crois pas en avoir déjà parlé donc ici si on s'intéresse au JSX il y a un concept important c'est

les braquettes tu vois que ici on est dans du JSX et que si ici

j'ajoute par exemple ici si par exemple je veux ajouter alerte de Melvin et ben ce alert il fonctionne pas il fonctionne

pas tout simplement parce que il est considéré comme une string on n pas l'impression comme ça que c'est une

string mais tu peux voir que le alert ici il est bien considéré comme une string quand on le transforme ici pour

écrire du javascript il faut utiliser une ACOLAD les acolades permettent de rentrer dans le monde JavaScript tu peux

un peu le voir comme une sorte de porte dans l'entrée JavaScript une porte de Narnia dans la l'entrée JavaScript et

donc à ce moment-là quand j'écris 10 + 10 et que je Cie ça juste ici alors c'est dommage qu'on puisse pas formater

cette histoire mais là le 10 + 10 il est pas écrit dans une string donc là si après ça j'écris 10 + 10 comme ça on va

vite se rendre compte de la différence tu peux voir que le premier 10 + 10 il est écrit de manière normale et le

deuxième il est écrit dans une string donc dans le deuxième je l'affiche ici et le premier j'affiche 20 la même chose

avec mon alerte si je l'affiche comme ceci et ben là tu peux voir que j'ai l'alerte qui s'affiche alors évidemment

c'est une très mauvaise pratique parce qu'on a pas envie d'avoir d'alerte dans le JSX mais c'est pour te dire qu'à ce

moment-là on ouvre une porte donc ici rabbit click on ouvre une porte dans JavaScript et c'est pour ça que ici dans

class name on peut aussi ouvrir des portes là j'ouvre une porte de 24 ici j'ouvre une porte avec le nom des

classes je pourrais ouvrir des portes ici dans le child run directement et dire ah j'ai envie de customiser mon

JavaScript et de passer c'est un tableau en paramètre par exemple ici avec Melvin et avec Patrick comme ceci donc là tu

vois qu'on a Melvin Patrick parce que une dernière particularité du child run comme ça je t'aurais tout montré et tu

seras vraiment un expert c'est que ici en child run tu peux voir que ici on a le premier argument bouton ensuite on a

le deuxième argument qui commence ici et qui finit juste ici qui contient un objet et ensuite on a le troisième

argument qui est juste ici qui est un table et donc justement c'est génial parce que

on peut aussi render des tableaux dans ses propres child run et donc c'est comme ça qu'on pourra dans la suite du

cours qui est très bientôt là si je regarde t on a encore un sujet avant ça mais dans la suite du cours on va

pouvoir render des tableaux donc au moins maintenant tu comprends vraiment ce concept

de élément comme ceci et hésite pas évidemment je te l'ai déjà dit mais je suis obligé de te le répéter d'aller

tester tes compéten avec notamment les quiz que tu retrouveras sur mlv.sh/react alors c'est assez important

parce que j'ai envie que tu mémorises tout ce que je te dis sinon ça sert à rien maintenant sur notre bouton euh ce

composant là il est sympa il y a un petit sujet que je t envie de te parler c'est qu'ici j'utilise des styles avec

Tailwind les différentes manières d'ajouter des styles dans T application il y en a pas 36000 et comme ça tu les

auras tous vu rapidement je vais pas te les montrer parce que ça va ça va prendre trop de temps mais la première

méthode c'est d'utiliser la prop style donc tu vois que ici je peux venir utiliser style background Red et ça

vient me mettre mon background red super le problème c'est que c'est pas pas performant pas très maintenable

paséutilisable et simple quoique l'argument pas pas performant les derniers tests ont montré que c'était

très performant mais bon ensuite on a des global class name les global class name c'est assez simple c'est qu'ici on

vient aller dans un fichier CSS tu tu peux créer n'importe quel class name comme mon super bouton background red

euh tac tac tac c'est pas comme ça qu'on écrit padding 24/ 44 pixels et à ce moment-là

tu peux voir que là je peux écrire dans les class name mon super bouton et donc là on a le style diabolique que j'ai

procédé juste ici je peux évidemment supprimer ça ensuite on a les CSS modules parce que le problème des class

name ici c'est que c'est global et donc c'est très dur à maintenir ici on va pouvoir créer des fichiers class name

par Component mais ça on va pas le voir et ensuite on a le CSS INJS avec notamment emotion où tu vas

écrire du javascript qui génère du CSS soit au build time soit au run time avec notamment panda qui le fait au build

time et qui est un peu plus optimisé donc ça a pas mal d'avantage mais le plus simple et le meilleur c'est

Tailwind qui fait ça au build time et qui va transformer les classes en un fichier CSS et c'est celui qu'on utilise

lors de cette vidéo présentation maintenant qu'on a vu ça on va pouvoir créer un premier composant un peu plus

compliqué par exemple ici Sho card et ce composant Sho card il va retourner ici une card alors on va créer une div avec

la classe name card avec à l'intérieur une picture et ici une image source image

props.image alors ici on VI prendre les props et on vient afficher cette image puis ensuite on affiche une div avec

class name card body et ici on va afficher une euh un paragraphe avec une class name card title et à l'intérieur

on va afficher props. title maintenant qu'on a créé ça si je sauvegarde l'application va crash parce que bouton

is not define mais c'est pas grave parce que maintenant on va utiliser shard comme image on va utiliser ici/ash

image/ et donc là tu vois que dans les images j'ai pas mal d'images de chaussures donc ici on va par exemple

utiliser/choose-1/cho-1.png avec comme title ici requin et donc à ce moment-là il faut bien fermer la div et on voit

qu'on a une magnifique card ici alors on va juste limiter un petit peu les dégâts avec ici une de 30 2 une Whiz full et un

object cover ici on va faire un BG neutral un texte neutral content et un Shadow alors si tu es perdu avec le code

que je viens d'écrire juste ici bah tu n'as qu'à aller sur Daisy ui ici tu cherches card et dans card tu peux

copier ce code qui est juste ici et voilà tu comprends un petit peu pourquoi j'avais choisi des chaussures à l'époque

mais c'est pour te montrer comment c'est simple d'écrire du JSX et ici on va évidemment utiliser nos props props

image props title et supprimer tout ça et cette image que j'ai elle est beaucoup trop grande elle me saoule

pourquoi tu es si grande image pourquoi voilà et ici on va lui [ __ ] une class name

8 32 with full object contain j'ai l'impression d'avoir déjà fait ça comme ça on a notre image shard évidemment

maintenant on peut la réutiliser par exemple ici basket et ici je vais utiliser choose 2 et je vais pouvoir

utiliser choose 3 avec ici test maintenant on pourrait avoir un

truc qu'on a envie de faire peut-être parce qu'on s'ennuie et que on a envie de rajouter des trucs fun c'est une

petite un petit badge un petit badge comme quoi c'est une new une new card donc ici on va venir wraperer tout ça

dans une div et là on va faire un span et encore une fois tu peux aller dans Daisy ui chercher badge et là tu peux

aller prendre le deuxè badge le 3ème badge ici il est pas mal on va prendre le troisième badge ça va très bien et

comme ça ici on remplace ce primary par new class name Flex item Center gap 2 donc ici super toutes les

chaussures sont new mais non c'est que la première qui est new et donc là on va rajouter une props is new est égal à

trou et maintenant on a envie d'afficher cette ligne là uniquement si is new est

égal à trou alors déjà on va console log les props juste ici et puis ici on va réouvrir notre terminal on va aller dans

la console on va refresh et on va voir is new est égal à trou pour la premier component je vais aller ici si tu vois

de log dans la console c'est à cause du strict mode qui est juste ici si tu as envie de simplifier la vie

uniquement pour mes vidéos et jamais dans tes applications on va juste l'enlever afin d'avoir qu'une log juste

pour moins être perdu donc ici on a notre choose et tu vois qu'ici a ce is new trou alors petit tips des familles

le is new ici tu peux enlever le trou et juste le fait d'écrire is new passe par défaut la prop sa trou voilà petit tips

des familles comme ça on est tous au clair sur les tips maintenant j'ai envie de l'afficher

conditionnellement alors une première méthode c'est tout simplement de faire ici ifps. is new à ce moment-là je

retourne ou là là je su en train d'afficher tout mon tous mes secrets à ce moment-là je retourne mon JSX avec le

New et sinon je le retourne sans le New donc là on voit que c'est super parce que ça marche donc c'est cool

maisen est un peu crispé là parce que si demain tu sais pas pourquoi j'ai envie de passer la à 40 4 et ben il y a que la

première qu' a la hate 44 et ma 2uxè et ma 3è pas donc je dois tout le temps update ici pas pratique pas une bonne

solution la seule chose qu'on pourrait faire avec cette syntaxe là c'est par exemple on pourrait ici écrire un petit

is invisible ou is visible et donc ici on pourrait dire bah si is visible est à false et ben je peux retourner

un petit icône Ghost hop là et donc là tu peux voir que ça affiche des Ghost si c'est pas

invisible mais dans tous les cas ça nous intéresse pas trop de faire ça nous ce qu'on voudrais faire c'est plutôt

afficher C élément oh j'ai perdu mon badge hop là j'aurais plutôt envie d'afficher C élément de manière

conditionnelle et donc là on va pouvoir mettre des accolades pour rentrer dans le monde du

JavaScript si ces accollades il y a un truc que je t'ai pas dit c'est qu'ils acceptent que des

expressions si je me trompe pas expression vs statement la différence principale c'est que une une un

statement ça va être tout ce qui est fonction et cetera ou l'assignement d'une variable alors que des expressions

ça va plutôt être ce qui se passe dans un statement donc ici ceci est une expression et ceci est un statement un

IF c'est un statement c'est assez problématique parce que vu que c'est if si je fais if props. is new bah

j'affiche le badge bon bah react il est pas fan fan du concept tu vois ce que je veux dire

donc ici ce qu'on pourrait faire de manière assez intelligente c'est première étape première

solution première solution bien badge ici créer un composant badge qui prend la props is new et si c'est pas is new

il return nul et sinon il return notre badge et à ce moment-là je peux faire badge is new est égal à is new et à ce

moment-là si j'utilise props. is new et ben on voit que évidemment si je dructure les props comme ceci faites

attention la syntaxe de dstructuration ou pas on voit que le is new est là pour le premier mais pas pour les deux autres

ça c'est la première la deuxième méthode qu'on aura c'est de venir ici de faire props isne point

d'interrogation si c'est is new on va afficher le badge sinon on va rien afficher donc ça

c'est une syntaxe JavaScript standard ça s'appelle le ternar opérator mieuxécrit que ce que je fais mais il va nous

permettre avec une question mark d'exécuter une expr uniquement si elle est à gauche et si

elle est F à droite donc si c'est on exécute cette partie là pardon donc si c'est trou on exécute cette partie et si

c'est FSE on exécute cette partie et on peut voir parce que ici je peux rajouter un texte FSE on peut voir qu'ici c'est

fsese et c'est la prière méthode est c'est-à-dire très très recommandé on peut aussi utiliser la deuxième syntaxe

qui est euh donc ici props. isne e e et donc le e il va soit afficher cet élément si c'est un élément positif donc

trou 1 string rempli et cetera soit afficher cet élément si c'est un élément négatif et en l'occurrence quand je

sauvegarde tu peux voir que j'ai toujours le bon résultat la différence c'est que si je mets is new est égal à 1

à ce moment-là il y a toujours pas de problème mais si je mets is new est égal

à 0 et ici is new est égal à 1 et ben on peut voir qu'ici il a un Z0 qui s'est infiltré parce que si on affiche props.

is new et ben en fait ce qu' fait là c'est qu'il dit est-ce que props. isne est négatif 0 oui c'est négatif c'est ce

qu'on appelle une valeur fsy dans ce cas-là j'affiche prop is new et donc bah c'est exactement comme si je faisais

props. is new tu vas voir que ça affiche 0 et 1 ici le truc c'est que quand c'est 1 ça affiche cette partie là quand c'est

zéro çaaffiche cette partie là et donc c'est pour ça qu'on recommande surtout quand tu es à début d'utiliser toujours

cette syntaxe comme ça tu n'as aucune surprise si tu veux vraiment utiliser le e la solution safe c'est de toujours

vrapper ton ta condition comme je le fais ici avec boulet tour comme ça on s'assure à 200 % que

celui-ci est un bouléin et n'est pas un élément comme on a vu à ce moment-là tout fonctionne correctement c'est donc

super maintenant qu'on a vu ça et ben on va pouvoir voir le dernier élément de cette formation c'est les listes et les

clés donc là on a tout vu tout ce que j'avais planifié donc c'est super parce que maintenant on va pouvoir faire

const list choose comme ceci et là on va créer une liste de chaussures donc ici on va venir prendre ce qu'on a fait

juste là et donc là on est des gros flemar les amis on est des gros on est quoi on est des flémars on est des

fléars hello ti j'ai pété peux-tu créer un tableau avec les props mentionnés dans ce JSX stp comme

ceci avec nos trois choses oh là là l'enculé non écrit écrit écris-le oh c'est trop simple

d'écrire avec curseor j'aurais plutôt utilisé curseor mais ici on va utiliser cet élément là donc ici on copie nos

choes comme ceci et ensuite maintenant qu'on a nos Cho on les met en majuscule pour informer que ce n'est pas

modifiable que c'est persistant que c'est bloqué qu'on ne modifie pas tout ça on fait choose et donc là on veut

afficher une liste alors la première solution c'est juste d'afficher ch et là application error object not Val react

child parce que là je passe un object pourtant on avait vu qu'on pouvait passer des tableaux et donc là on est

d'accord que le tableau se passe bien ce qui se passe c'est que l'objet ici n'est pas valide c'est ça le détail qu'il faut

mettre en avant juste ici c'est l'objet qui est pas valide alors que le tableau est valide donc ce qu'on a envie c'est

de retourner un meilleur tableau par exemple en faisant point m donc ici on va l'utiliser point map chou et là ce

chou on va retourner un P avec shou. title et boom requin basket test on a les trois titres qui sont définis juste

ici qui s'affiche ici et donc c'est bien en train de fonctionner maintenant nous on aimerait bien afficher des Sho cards

et donc on va afficher les Shou card sauf que dans image on va utiliser shou. image dans is new on va utiliser SH is

new et dans title on va utiliser SH title on va supprimer tout ça et on a le même résultat qu'on avait avant est-ce

que c'est super oui c'est super on a réussi et donc ça c'est une syntaxe compliqué et simple à

la fois qu'est-ce qu'on fait ici on retourne une fonction qui vient retourner du JSX ce JSX il faut imaginer

que ce qu'on est en train de faire ici c'est comme si on faisait donc ici si on récupère les Shou cardes que j'avais à

l'époque c'est comme si ici j'affichais un tableau avec mes Shou cards tu vois ici c'est exactement ce que je fais avec

par exemple deux Shou card et tu peux voir qu'ici on a le requin et le requin qui sont affichés donc en fait ce que

j'ai fait c'est que j'ai injecté un tableau comme ceci et donc ici ça fonctionne correctement parce qu'on

injecte un tableau comme je t'ai expliqué avant maintenant qu'on a injecté ce tableau comme e je l'ai

expliqué avant on va rajouter une props id id 1

ID 2 et ID3 et on va enlever la props is visible qui sert à rien et donc là on va

rajouter id est ég shou.id et là on doit rajouter ID ici à côté de props.tittle pourquoi pas

props.id donc là on a 1 2 3 parfait le truc c'est que si chaque fois que je rajoute une prop je dois le rajouter là

c'est chiant et donc justement on a une syntaxe c'est cool qui s'appelle le spread opérator et vu que les objets

JavaScript vu que les props sont des objets JavaScript tu te rappelle normalement ça fait pas très longtemps

qu'on était dessus hein donc tu devrais t'en souvenir que ici quand je passe une props c'est un objet JavaScript donc si

ici je crée un objet avec des props comme ID1 title Melvin tout ce que tu veux et ben je peux dans mon bouton

juste ici où on va enlever ce Patrick on va mettre ça comme ça je peux venir faire point point point

objet et à ce moment-là tu peux voir que dans les props ça va faire alors ici ça fait une syntaxe bizarre je suis désolé

parce que ça s'appelle de la rétrocomtabilité pour les anciennes versions de react bref ici ça vient

extendre mon objet avec mon nouvel objet donc ça va venir injecter toutes les props qu'on a ici directement dans mon

objet et donc ici on peut utiliser cette syntaxe en faisant point point point chou et boum ça marche yeah c'est

magnifique maintenant il y a une erreur depuis avant une erreur qui nous dit missing key props for elements in

iterator pas cool qu'est-ce que c'est cette key props cette ki props elle est

essentielle et tu peux mettre juste une string vide super l'erreur est parti on a résolu le

problème pas du tout pas du tout pas du tout pas du tout c'est c'est pas du tout tout ça on n pas résolu le problème les

Kys sont très importantes et il faut toujours passer des Kys uniques pourquoi parce que je t'explique jamais rien sans

t'expliquer le pourquoi et c'est pour ça qu'il faut que tu te rendes sur mlv.sh/react pour comprendre le pourquoi

de RCT dans les détails dans les profondeurs et surtout dans la pratique parce que c'est la pratique qui forge un

homme bref je t'ai préparé des master class directement tiré de beginin react avec notamment ce qui input demo alors

si je me trompe pas je peux faire component/ash input demmo et je me suis trompé c'est pas cool donc ici c'est

slash cards ici il se passe un truc intéressant et je vais te l'afficher en full screen tu peux voir qu'ici on a des

état et un état c'est beaucoup de choses un état c'est un un state react avec state qu'on verra dans la prochaine

vidéo que je t'incite fortement à all voir mais c'est aussi tout simplement un état du DOM tu

peux voir ici cette checkbox que je peux t'afficher juste ici hein cette checkbox qui est ici

enable non c'est pas cette C checkbx qui est juste ici c'est un state c'est un state que react sauvegarde parce que si

je te montre ici et que je déplace mon def tool juste là et que je viens voir cette valeur tu peux voir que quand je

check bon il y a rien qui change visuellement dans le DOM mais ça change quelque chose sinon ça changerait pas

l'affichage maintenant imagine-toi que j'ajoute dans mon carartte la Blue Yeti et que maintenant je

supprime en désactivant les Ky donc là j'ai aucune key je supprime la Blue Yeti bah maintenant basic fit il est dans mon

card c'est pas bizarre ça c'estàdire que basic fit c'est qui check et si je supprime maintenant c'est dark cpose qui

est sélectionné parce que react il vient préserver le State en fonction de cette plus précisément react il a trois

manières de préserver le State qui sont expliqué dans la documentation de react il a la première manière c'est

l'emplacement où est l'élément dans le DOM c'est-à-dire qu'assez logiquement s'il y a une div qui est là et que tu la

déplaces là react va considérer que son state n'est plus le même il va l'invalider il va justement supprimer

son state le deuxième c'est le type c'est-à-dire que si tu as un composant qui est par exemple ici de type Btn et

que d'un seul coup tu le passes ou par exemple juste un un un un tout simplement une div et d'un seul coup tu

la passes en un article Booum ça change le type et le State ne sera plus préservé et le troisème élément c'est la

qui dans le cas où tu as des éléments qui sont dans un ordre 1 2 3 4 et ben react ici on peut dire que c'est le même

type bah oui c'est tous des chouarde on peut dire qu'une chouarde maintenant c'est Orange donc c'est tous le même

type ensuite ils ont t le même emplacement enfin ils ont pas tous le même emplacement mais ils sont

tous un emplacement maintenant si je déplace cet élément là ici vu que c'est le même type et que B en fait

l'emplacement a pas changé c'est toujours deux éléments du même type deux même emplacement et ben les States ils

vont pas être préservés donc le 2 va hériter du state du 1 et le 2 le 1 va hériter le State du 2 et c'est

ce qu'on voit ici quand je refresche quand je check le Blue Yeti la carte basic fit quand je la supprime elle

vient hériter donc là attention je vais supprimer et on peut voir que le State est resté ce qui s'est passé ici c'est

ça on avait le kart le State du kart il était check le State du cart il était cross check cross cross ensuite je viens

supprimer l'élément numéro 2 donc supprimer ce que ça va faire c'est que ça va déplacer l'élément numéro 3 à la

place de l'élément numéro 2 élément numéro 4 à la place de l'élément numéro 3 et à ce moment-là vu qu'on n pas

utilisé de qui le kartte ici numéro 3 est considéré comme check maintenant dès que j'active les quiy comme tu le vois

ici et que je refresche donc là j'active les quiy et que je sélectionne cet élément et que je le supprime cette fois

avec l'qu react il arrive à comprendre que l'état de l'élément doit être déplacé

donc il va supprimer cet état là et il va déplacer ces deux éléments ici avec les bons

éat deuxième démonstration que je t'ai préparé juste ici avec des inputs qui est vraiment

super c'est ici avec les value key donc avec les valeurs comme k donc avec des Kys valides avec des index et sans si je

te montre le code ici avec value key tu peux voir que là la key c'est le fruit ensuite avec indix ke et ben la ici

c'est l'index donc son emplacement et avec aucune key bah c'est aucuney maintenant je vais focus le premier

élément de value key tu vois que là quand l'élément se déplace toutes les secondes j'ai un random qui déplace tu

peux voir que mon Focus qui est très visible avec la sorte de outline qu'on a juste ici il se déplace avec l'élément

maintenant avec l'index k qu'est-ce qui se passe et ben tu peux le voir ici mon élément mon focus ne se déplace jamais

parce que mon élément est indexé enfin à l'ACQU avec l'index et l'index tu peux voir à côté de Banana la j'ai mis le Z0

là le zé il y a le é0 et ben le Z0 change jamais donc on reste toujours sur le zé et c'est pour ça qu'ici il se

passe rien et finalement sans qui bah c'est la même chose qu'avec l'index c'est pour ça que l'index n'est pas une

qui valide sauf et uniquement sauf dans le cas où tes éléments ne change jamais d'ordre en clair ce qu'on a démontré ici

c'est la même chose qu'avant react arrives que à définir si tu mets les bons indexes et si tu utilises les

indexes donc en fait l'index ici c'est 1 ici c'est de ici c'est 3 ici c'est 4 et ben si je déplace les éléments comme

ceci et ben les index ils ont pas changé et c'est pour ça qu'il faut à tout prix mettre tout le temps des Ky et c'est

pour ça que Slins dans notre application component tchou tchou et ben il nous dit de mettre des Kys et c'est pour ça qu'on

met des Kys afin d'éviter tous ces problèmes malheureusement je peux pas aller plus loin dans ma démo avec le

code qu'on a fait parce qu'il faudra apprendre le State mais c'est l'important qu'on a fait jusqu'ici et je

suis plutôt satisfait du travail proposé là si tu as kiffé bah déjà mets un like abonne-toi à ma chaîne youtube et je

t'invite fortement à regarder l'épilogue de de la vidéo que je te mets juste ici mais surtout de pratiquer sur ce premier

module je vais améliorer les cours gratuits enfin ils seront améliorés déjà mais pour avoir les différentes étapes

que je te montrerai ici afin de s'assurer que tu a compris ce que j'ai fait grâce à des cou quiz ainsi que des

exercices qui te permettent de pratiquer dans des cas concrets et c'est juste essentiel pour avancer rapidement dans

ton apprentissage de react merci beaucoup d'avoir regardé cette vidéo m'a pris énormément de temps de préparation

et cetera donc lâche un like et un commentaire si tu as regardé ici c'est déjà le meilleur truc que tu peux faire

pour YouTube et tu es vraiment le king du King entre tous les King donc merci à toi ça me fait super plaisir j'espère

que tu adores mon décor si tu adors mon décor mais décor dans ton commentaire comme ça je le saurai et si tu adores le

montage tu peux remercier Anna que tu retrouves en description son contenu pour son montage elle a dû se taper plus

d'une heure 12 de tournage donc elle a pas mal travail merci Anna merci Anna allez à bientôt on se dit très bientôt

ciao ciao [Musique]