Ela_Back/Translated_Files/ytubes_f0X1Tl8aHtA.txt

3349 lines
125 KiB
Plaintext

FOR https://www.youtube.com/watch?v=f0X1Tl8aHtA
bonjour à tous et bienvenue on se
retrouve aujourd'hui pour faire durer
acte 2 0 qu'est ce qu'on va faire.
ils occupés
elles sont prises
des genoux
aujourd'hui refaire une application une
petite application qui va nous permettre
de parcourir un bon nombre de principes
de ré actes on verra notamment comment
faire une navigation
voyez plutôt une navigation en ré accès
à dire une navigation là il n'y a pas de
chargement ça c'est pas mal qu'est ce
qu'on va faire d'autres et bien on fera
une requête est une api via notre ami
axione et puis on ira affiché est donné
on verra comment on fait ça en ré actes
et puis on fera durant du conditionnel
on dira combien votre pays ou viable
infiltrera par continent éventuellement
et ça nous permettra de voir énormément
de choix de parcourir déjà beaucoup de
choses de radio on verra bien sûr pas
tout dans cette première vidéo rassurez
vous ça serait trop beau si non mais non
on verra quand même énormément de choses
à travers ce petit projet donc voilà je
pense que j'en ai assez dit donc ce
qu'on va faire sans plus attendre c'est
que on va se télécharge et l'impératif
c'est node js dont vous tapez node.js
télécharger ou node js download ça
marche aussi vous tombez sur cette page
et en fait ne deviennent bons ressorts
que jesse c'est javascript mais c'est
juste le moteur de javascript donc qui
peut marcher en dehors d'un navigateur
puisque javascript je pense que vous le
savez il marche d'un navigateur
d'ailleurs si vous ne saviez pas que
javascript fonctionne dans un navigateur
c'est peut-être que vous n'avez pas le
niveau pour faire cette vidéo puisque
cette vidéo s'adresse qu'à des gens qui
ce qu'ils connaissent javascript un
d'accord
sinon ce sera rien de faire du réacteur
sion connaît pas si on connaît pas
encore assez bien javascript croyez dans
ma propre expérience donc du coup
vous prenez sur votre système
d'exploitation le node js qu'il nous
faut puisque à l'intérieur il ya quoi il
y as in cloud npm huit points trois
points voilà c'est ça qui nous intéresse
maintenant la version nous intéresse pas
ce qui m'intéresse surtout que ça inclut
npm notre package manager et donc ça ça
nous permet d'aller chercher un certain
nombre de paquets un certain nombre de
choses qui vont être
très intéressante pour ce projet donc ce
qu'on va faire maintenant pour trait
décrira comme j'imagine que maintenant
vous avez note anna g auche pas cette
étape puisque moi je les note js sur ma
machine d'accord donc une fois que vous
avez node.js qu'est-ce qu'on fait tout
ce qu'on peut contrôler donc moi je vais
utiliser la console lanouf une console
on peut utiliser n'importe quel de
n'importe laquelle de vos consoles c'est
la cas lequel vous a plu plus à l'aise
vous pouvez utiliser guide bâches ça
marche aussi moi je vais carrément
utiliser la console devait s code donc
je vais faire contrôler pourcentage pour
mieux sortir sinon on fait terminal le
terminal
ok donc là j'ai ma place est sur le
bureau comme ça les fichiers que je vais
que je vais aller chercher avec mpm eh
bien ils seront placés sur mon bureau
c'est plutôt pas mal quand on développe
des choses doivent aller dans les
fichiers apporter de maintenant qu'on va
faire c'est des
desktop ok donc là je suis placé sur mon
bureau
alors une fois sur mon bureau c'est
maintenant que ça commence à être un peu
rigolo
qu'est ce qu'on va faire la table déjà
on va contrôler la version de notes
qu'on a et voyez comment il me dit que
j'ai là 16 points 13 points tous donc
c'est le point de s'il n'avait pas la
même qu'au moins c'est pas grave hein
d'accord l'important c'est que ça marche
npm
tirer v et la version lp m c'est là vite
pour un poids de vriller là ils ont déjà
fait ils se sont déjà loin 3.1 c'est là
que j'ai pas la dernière version d'une
pme c'est pas très grave
toujours est il que j'ai prouvé que
j'avais note j'ai prouvé que les mêmes
peinent donc je vais pouvoir aller me
chercher
react
alors la phrase magique la phrase
magique c'est quoi il va falloir dire
nvx
create
v act up ça c'est à chaque fois voulu
commencer un projet d'acte vous commencé
comme ça et de pecixe c'est une forme de
npm et parce qu'on n'a pas alourdir là
on n'a pas senti les package donc ça
permet d'aller chercher directement le
projet criait tu react ap ça c'est été
créés par nos amis de facebook s'est on
veut dire un petit projet enfin et pas
mal de choses qui ont déjà été codé
d'avancé je vais pas rentrer dans les
détails pour ce surcoût sur ce cours là
parce que j'ai pas envie de vous
accablez d'information il ya plein de
choses qu'on apprend au fur à mesure en
fait donc ça c'est pas vraiment
important de le maîtriser ce qu'est le
web pas quelque chose comme ça en
revanche ce qui est important c'est de
savoir enfin sadou codé de mettre les
mains dans le code de coder et donc on
va on va on va appeler ça court
react je vais appeler un parce que c'est
la première partie
est donc là ça va être un tout petit peu
de temps à charger et donc pendant que
pendant que ça va charger ce que je vais
faire c'est que je vous explique et de
trois choses fondamentales serez actes
alors tout d'abord qu'est-ce qu'il faut
savoir un réacteur chose primordiale la
chose la plus importante c'est de savoir
que tout est un composant un réacteur
koodie en anglais composantes vous
montrerez souvent dire comprenant tout
composant peu importe c'est la même
chose
donc ce qu'il faut savoir c'est à quoi
est-ce qu'on reconnaît déjà un composant
par exemple hommes pointent js nous qui
sera là j'ai pris l'exemple de la page
de garde enfin la page d'accueil
home point g est ce sera le composant
qui va englober qui tout une autre série
de composants donc ce sera le composant
le plus aux besoins de la page on va
dire en quelque sorte donc à coup un vox
est un composant up premières lettres
majuscules et ça c'est une convention
tous nos composants rayons tous une
première est majuscule d'accord dans
qu'est ce qu'on a dans un point j'ai
assez bonnes dans podium on appellera le
logo dont qui s'appelle logo point g est
son apparat le composant navigation 3g s
on appellera le composant countries
point g est d'accord le cadre là il se
rappelait plus tard il a rappelé
qu'entre son encontre il donc bien oui
mais à quoi ça sert et bien à quoi ça
c'est arrivé ça sert à part d pété son
code des centaines de fois ça sert à
partitionner aussi son code dans des
petites pages qui sont beaucoup plus
lisible beaucoup plus facile à maintenir
donc dans le cas de logos de navigation
c'est en tout cas dans le cas de logos
et que du rendu graphique n'y a pas
vraiment de logique particulière dans le
cas de navigation où il ya une petite
logique de navigation qu'elle pour aller
à un endroit où un lot du site
mais ces composants la fête on reste les
coder une seule fois on va les mettre
dans un fichier qui s'appelle donc par
exemple logo ps et une fois qu'on l'aura
connaît ce truc là on n'aura plus jamais
besoin leurs côtés on pourra l'appeler
partout sur votre projet et ses
actionnaires un projet avec 50 pages eh
bien on pourrait s'appeler partout où on
veut logo projet assez juste en mettant
une petite ligne en direct en disant
logo point g s est bien ça ira
immédiatement nous chercher toute cette
logique là voilà c'est ça qui est
pratiquant react et pour aller plus loin
mais par exemple là on a un composant
qui est complexe qui s'appelle countries
point g est spécieux il va faire à une
requête à une api il va faire du tri
avec le nombre de pays afficher ou bien
le continent d'accord et bien il y aura
aussi un map pour map est différente car
dont celle là c'est du javascript est
bien
ce qu on trees il va map est un
composant qu'on a codé qui s'appellera
card point js donc on va ce bien sûr ce
codec qu'une seule fois la logique de
nos cartes et on pourra le répercuter
partout on donc voilà pour être encore
un petit peu plus précis le temps que
cet ermite de télécharger
juste là sur la partie de droite on à la
structure d'un composant react d'asic
donc la gauche vous avez la structure
des fichiers mais
en fait on va regarder ça juste après la
course sera finie télécharger là ce qui
m'intéresse c'est de dire que un
composant en fait un conte ponette ça se
présente comme une fonction un composant
c'est une fonction qu est ce qu a fait
cette fonction peut faire beaucoup de
choses dont vous voyez c'est tout ça la
fonction à quoi on voit que c'est une
fonction en balle allait fléchir la
fonction on le voit ici à ces structures
là il ya là un nom égale le paramètre
ensuite une flèche donc c'est une
fonction fléchés
et donc ensuite on peut balancer autant
de maisons on peut déclarer des
variables si on en a besoin on peut
balancer autant de fonctions qu'on veut
et à la toute fin on fait quoi on fait
un rendu en ont fait un return on return
donc venez à quoi ça ressemble sa
ressemble de lâcheté mn alors c'est pas
vraiment le html ça s'appelle du gie et
6 mais bon dites vous que c'est comme
l'actuel mali vraiment les quelques
petites nuances entre la shnpm élégie
les six ne vous inquiétez pas si vous
avez faim d'html vous saurez faire le g6
par exemple la voyez les classe c classe
times bon il ya plein de petites choses
comme ça mais vous inquiétez pas c'est
si vous faites l'erreur react vous le
dira et voudra vous voulez plutôt dire
classe naïma la place de classe enfin
nous allons vous et on va être aidé en
fait tout le tout le long de
notre code on va voir comment ça se
présente immédiatement alors je ferme ça
et il me dit ah pis hacking c'est bien
allez vous amuser à l'écho des donc ce
n'est que l'application et les saumons
bureau maintenant donc si je dis c d
ahmed mois l'application cela plairait
actes
je sais plus court j'y fais tabulation
il va m'aider normalement non s'est
courue acte plutôt je vais appeler
voir la cour et actes
et là on va dire code espace points et
là qu'est ce qui se passe ça nous ouvre
directement
notre espace de travail on est prêt à
travailler avec react alors on va
regarder un petit peu à quoi tout
correspond hommes ont semé comme ça
on va se laisser qu'un petit peu de
place voilà alors comment comment ce
comment sont organisés les fichiers tout
d'abord on a notre module notre beau
succès quoique c'est ce qui prend du
temps à télécharger c'est tous les
paquets dieu qu'il a été chercher c'est
en gros toutes les bibliothèques tout ce
qui est utile pour pour coder haut
c'est ce que criait tu react ap en fait
nous a apporté
c'est en fait un environnement de
travail il faut sort que react c'est une
bibliothèque d'accord c'est là c'était
quelque chose dans lequel on va puiser
les chaussées paf comme warcraft par
contre cris est très actes ap ça se
rapproche de frère mort se dire qu'on a
un environnement de travail qui est pas
complet mais qui est quand même pas mal
donc se ranger par d'après bétique sur
scène chercher rade depuis tout à
l'heure voilà c'est la wii colonnes à la
bibliothèque react et si on se balade un
petit peu mais on a on peut trouver le
code source de réaction peut voir un
petit peu à quoi ça correspond bon
souvent c'est compilé 20 points que la
même pas bon voila si vous allez jeter
un oeil dans le code source de réac
allez-y en tout cas nous régissent
cherché à faire marcher tout ça donc
notre module c'est toutes nos
bibliothèques
ensuite public src je reviendrai plus
longuement dessus donc ensuite je
descend directement sur guy tig nord dit
innoncent et tout ce qu'on a pas bien
sur github dont le nomme module
puisqu'il est très volumineux donc on ne
va pas sans qui tape ça veut dire que si
on n'aurait pas sur github quand vous
récupérez un projet react sur github de
quelqu'un vous allez devoir vous ré
installer votre module va falloir faire
une petite manipulation ça on verra dans
la deuxième partie de secours
ensuite le paquet du lock
on s'en fiche c'est quelque chose qu'il
faut pas toucher c'est lui qui fait sa
petite tambouille effet ce petit
il fait ses petits réglages par contre
attaque est produite soit on peut
toucher on peut dire la version 2 le
projet on a surtout toutes les
dépendances qui ont été ajoutés à notre
projet vous voyez qu'on a réac l'âge et
la version 10 7 actuellement react
d'hommes donc voilà les gouttes vital on
se sait pas très utile c'est pour le
référencement
les pour tester aussi pour faire des
tests en réaction
et on a aussi des scripts alors faut
savoir qu'un script c'est pour éviter
d'avoir à écrire des choses qui sont un
peu longues par exemple si je dis npm
start et bien ça va jouer ce truc là et
donc en fait ça va nous lancer d'autres
projets faut savoir que pour lancer un
projet react vous pouvez pas faire un go
live ça marcherait pas votre parce qu'on
a besoin de compiler toutes nos
bibliothèques toutes les choses qui sont
d'un src on a besoin de les compiler et
donc il faut faire un npm start c'est
comme ça qu'on arrive à coder notre
projet
ensuite le signe qu'on fixe à ce que
nous poser un petit problème en ce
moment un petit bug là dessus donc aussi
ses impôts ce problème on supprimera 6
et vous posera pas problème offensif
chez vous si y'a pas de problème ne
devrait pas le faire mais bon on verra
et voilà à peu près tout et le readme
buzz c'est là qu'on met les informations
pour que l'utilisateur puisse reprendre
notre projet ou un collègue que sais-je
donc un pétard nous explique que c'est
pour lancer le projet en plein test pour
lancer les tests npm run bild ce assez
pour ben tout compiler notre projet à la
toute fin quand on est prêt quand on est
prêt à mettre le neuf sites en ligne on
fait ce qu'on appelle un build et
ensuite ce build on le met on line en
ligne tout simplement donc voilà on
verra dans la deuxième partie de la
deuxième partie comment comment métro et
notre site notre site aurillac tu
gratuitement en plus
voilà est donc maintenant les deux
parties qui m'intéresse c'est un peu
plus donc c'est cette partie là donc les
icônes on va la garder au moins la
fabrique own c'est le l'icône qu'on a
qu'on a ici un ce truc là
l'icône 191 dans le garder pour faire
l'icône du logo par contre la 512 et
dégage donc l'appui son support le
manifesto jissah ça sert à rien c'est
pour faire une progressive web apps est
pas très à la mode quand même donc on
supprime héros beau pointer ses
pourparlers avec les robots de ses
pourparlers avec les robots de google
ok maintenant voilà un peu plus
précisément dans un d'experts html donc
il faut savoir que index pour html c'est
toujours le fichier qui est lui en
premier par le navigateur ça change pas
en reste même si là on va faire une
application qui est quasiment
intégralement en javascript notre
application elle sera tout de même
injecté ici d'en route elle sera
injectée ici et c'est ça qui sera lui en
premier par le navigateur
donc qu'est-ce qui est pas utile avait
déjà tout il tout ce qui est en
commentaire vous pourrez les lire les
commentaires si ça vous intéresse si
vous voulez vous cultivez si vous aimez
lire mais là je vais pas vous dorer le
crâne avec des choses un peu un peu
superflu en tout cas qui sont pas
vitales
le manifeste appletouch ça c'est pour
faire une progressive web apps on s'en
fiche aussi est donc long intellectuelle
on peut se changer le title on peut dire
cours réaffecte un sur deux par exemple
voilà
montlaurais ça vous intéresse pas trop
quand la page rappelé m en français si
on voulait vraiment faire des choses
précisément devant leurs parents s'en
fiche un peu du bestiau offre comme
sarko react est très apprécié par les
robots de google au niveau du
référencement naturel
il faut savoir que
en fait les sites henry l'acte ils sont
extrêmement rapides vous ai montré lors
des présentations qu'on pouvait changer
de page extrêmement rapidement et donc
ce sont des sites qui sont bien conçues
puisque quand on fait un build à la fin
on a on obtient ainsi qui compile et qui
est mini fier au minimum possible et
donc qui est extrêmement performant et
donc ça s'est appréciée par les robots
de google donc sachez que le vos
applications en react en de bonnes
chances d'être les bien référencés voilà
ça sent petite parenthèse alors
maintenant
on a fait ça tiens on va faire ressortir
la console donc je fais contrôler
pourcentage et je vais faire un mpm
start pour lancer le projet donc on fait
pas beau la lv1 d'accord on fait mpm
stade moelleux trois militantes déjà le
port trois villes parce que j'ai bon
modèle dessus le modèle que je vous
montre là donc je vais faire y pour yes
et voilà ça me fait tourner au 3000 1
mais bon c'est pareil c'est la même
chose ok là jeu réduit un peu la console
mais on a besoin de la sortir cette
console puisque voilà c'est là qu'on a
les erreurs c'est là qu'on a plein de
choses d'ailleurs j'ai une erreur voilà
je les avais un petit peu anticipé cette
erreur en ce moment il ya cette erreur
allait elle est là depuis deux trois
mois en réacteur peut-être que quand
vous regardez la vidéo elle n'y sera
plus en tout cas pour dégager pour se
dégager cette erreur et pour pouvoir
bosser tranquillement on va se virer la
config es lynch ici on sait vraiment pas
hyper russie d'avoir vs lite enfin ça
peut être utile vraiment quand un
développeur extrêmement chevronnés qui
avait qui a ses petites habitudes etc
mais là pour débuter on s'en fiche donc
dans paquet du progiciel j'ai viré qu'on
soit bien d'accord je virais toute la
partie configurer slit hockey en ayant
fait ça et bien le miracle d'internet
s'est produit voilà ça fonctionne on est
content donc c'est bien je vais sortir
et consoles pourquoi parce que on en
aura forcément besoin dans ce projet je
vais la mettre sur ce côté là
puisque sur vos habitudes un canton code
en javascript parce que quand on utilise
techno fronde html css ou javascript
console est totalement indispensable ok
donc voilà plus forte chute au rideau un
petit tour d'horizon de ça donc le
public on pourra essayer aussi stocker
des images des icônes enfin plein de
petites choses on vers un petit peu
après après on va reprendre le support
du court mais d'abord je veux quand même
parler de src et puis de constable tous
les bons plugins et après on pourra
commencer à coder pour la partie
installation est un peu lent que c'est
normal il faut quand même présenter les
choses après que tu as l'habitude de ré
axa prend vraiment deux minutes sans la
partie installations donc dans la crcc
là dedans qu'on reconnaît c'est là
dedans que tout va se passer c'est src
pour source et
comment ça se passe en fait sources
m'ont déjà on vous vire est tout sauf à
point js et index pointilleuse voilà je
préfère qu'on parte vraiment de quelque
chose de propre oncle en a plein
d'erreurs
donc j'ai que a.ga syndex j lc 1 à plein
d'erreurs pourquoi il me dit du coup tu
reconnais pas dans à point g est ce tu
appelles logo tu appelles ap et ça
marche pas ok je sais quoi dans hop on
va aussi tous supprimés
voilà il ya 3 0 seul dans un index
d'un index où il faut dire que happy le
reconnaît pas mais on va on va se créer
un composant après d'abord jeunes gens
vivent vraiment qu'on soit le plus pur
possible relève le plus de choses
possibles pour vous compris un peu le
principe donc là les web vital ça c'est
pas utile dans un index pointilleuse
s'en dégage
et
qu'est ce que je vais enlever d'autres
voilà un d'explorer cette voie là là on
est plutôt clean mon public est encore
une erreur
a dit ed slint il dit encore le premier
slicks alors ça c'est parce que j'ai pas
relancer les stars veulent eux
le
mpf star toi donc là je sors je fais
contrôler c'est pour quitter le terminal
mais ça c'est seulement si vous avez le
même problème que moi un accord ce que
tu veux être que vous l'avez pas ce
problème et je fais npm start que je
relance
est logiquement si les dieux du code
sont avec moi je devrais ne pas avoir ce
problème là en tout cas je rate d'autres
problèmes enfin voilà prudence en fait
ça nous pousse à nous produire feuille
blanche choqué tant bien je préfère
avant ça qu'un problème voilà
alors
ok donc à point g est ce là dedans et
index j'ai vidé tout ça d'accord donc la
src gelé vraiment j'ai détaillé pas mal
de choses donc qu'est ce qu'on fait en
un portrait acte on importe rédac
d'hommes et qu'est ce qu'on dira en fait
on fait un vendeur enfin rendue donc on
se ment strictes au mode saas et pour
avoir des choses un peu plus fort
crippen un peu plus strictes on peut
moins se permettre deux choses en
stricte mode comme déclaré des variables
en bas enfin au déclarent des variables
fin bref faire des appels un peu
bizarres ou quoi on peut rester en
stricte mode c'est pas grave forcément
ça sûr ça change rien et en fait on voit
que ont dit ok tu vas me rendre ce qui
est dans entre les balises du strict
mois d'octobre rendre à la balise ap
donc en fait ap c'est le composant le
plus haut qu'on va avoir dans notre
application et de zap veuve a découlé
tout lattre applications et ensuite on a
un document getelementbyid route ça veut
dire quoi ça veut dire des écoutes tu as
tu vas faire un rendu tu vas me prends
tout ce qu'il ya dans ap donc sachant
que ap va faire d'écouler tous les
composants de lui d'accord on avait vu
de notre architecture de composants
qu'on avait un homme point gscb
au-dessus de 1 point g sont doha un
appoint js mais bon ça va vous avez
facilement le comprendre dès qu'on va
faire le décompte à faire leurs auteurs
et donc on dit tout notre application le
jeu la passe à document.getelementbyid
route ça si vous vous rappelez laïdi
route il est ici voilà ce que ça veut
dire et donc on importe tout on met tout
dans cette année des routes et apprendra
donc toute autre application là dedans
donc index a rien à faire de plus que ça
on va aller dans la presse que le
premier composant à la main et après je
vous montrer comment on peut faire ça
plus rapidement elle faisant référence
en 1 à la main pour nous entraîner donc
on va dire constants
ap c'est égal à tak tak et ensuite on
dit x-force default
up donc la junte de créer un composant
le composant sais quoi je voulais 10 est
une fonction clef un dépôt plus
d'appelés react forcément ressort que
après on va utiliser des raccourcis pour
appeler les composants un usap aileron
automatiquement réac mais là c'est plus
vraiment obligatoire m'attendre avec les
nouvelles mises à jour de réac mais peu
importe sachez juste que d'autres
composants c'est une fonction et que à
chaque fois une fonction hautement
l'export ça veut dire quoi sûr que
maintenant n'importe où dans le projet
je vais pouvoir importer cette fonction
pour la pour l'appeler pour en faire ce
que je veux par exemple dans l'index on
importe ap et bien se mettre ici voilà
c'est ça que ça veut dire et donc on
peut lui dire que notre fonction elle va
avoir un rôle elle va retourner elle va
retourner bien un achat par exemple
alors regardez moi si j'écris h1 je suis
aidé pour taper d'accord ça c'est ainsi
un petit plugin qui ont installé après
les jeux le faire je vais faire comme
vous je vais écrire à chiens à la mano
comme ça je vais dire hello react et je
vais refermer le h1 à la main nous aussi
voilà
j'enregistre et c'est tout alors oui vu
qu alger qu'une seule ligne le return
hippel on le met directement qu il peut
le mettre directement comme ça avec moi
m'ont prêté leur hymne à voir une amie
directement comme ça
ok regardons ce que ça fait et lauréate
voilà on a réussi on a réussi à appeler
le composant ap ici et à l'injecter dans
route c'est ça qui s'est passé bon là
c'est extrêmement simpliste ans que je
vous présente d'accord on l'a ici
d'autres composants et regarder si on se
balade on voit qu'il ya beau dit il a un
enfant ces routes et route il a un
enfant ch 1 en fait lui a appris à la
fin il fait toute sa tambouille et il
nous ressort tout comme si c'était une
page html classique en fait on n'y voit
que du feu
on aurait pu rajouter une classe on
aurait pu bien sûr mettre tout le style
qu'on veut y a aucun problème d'accord
on l'avait vu souvent très ce principe
là maintenant on va passer à la partie
mécanique on va aller un petit peu se
mettre des plugins
comme il faut et puis puis voilà comme
ça on va qu'elle connaît un peu plus
vite
alors vous avez juste en dessous la
vidéo le support du court pourquoi parce
qu'on ne va pas faire le style ou en
tout cas bon le style je vais en
reparler mais on va pas c'est pas un
projet enfin c'est pas c'est pas le
sujet par contre donc dans ce support
qu'est ce que vous avez vous avez
d'autres petites choses qui sont assez
intéressantes st-gelais je l'aimais
clara site du projet comme ça vous les
aurez aussi dans le projet finit donc il
ya un screen de installé react donc je
vous dis jusque dans la console se
placer sur le dossier qu'on veut ou le
bureau mpx qui a trait à taper le nom de
mon projet ensuite on fait céder mon
projet code et après on verra qu'à
quelques bibliothèques zut il a
téléchargé est ici vous est précisé
que pour lancer le projet cnpm start
pour reprendre un projet de quinquas
donne sur github donc il y aura pas les
bibliothèques va faire une pmi et quand
votre projet il est prêt à être mis sur
internet ça c'est ce qu'on verra dans la
deuxième partie on verra comment le
mettre en ligne gratuitement ce site de
deux d'ailleurs une ancienne de façon de
mettre une date je pense qu'on peut
aussi le faire sur github remettra
gratuitement soi qui est over citant
react c'est possible mais on diffusera
plus tôt avec les failles et donc
mon beau compiler un projet mais çà et
là les bibliothèques qui vont être
utiles les bibliothèques qu'on utilise
très souvent
quand on code en ré actes donc on va
avoir besoin de réacteurs hauteur
d'homme ça c'est indispensable
et si vous codé en saas ce que je vous
recommande très chaudement et aux
fraudeurs à prendre s'associent on
s'installera ça on s'installe grâce à la
très très vite faut qu'elle que je parle
de tout ce qu'il ya dans ce support ont
consulté les plugins c'est ce qu'on va
faire en suivant donc jésus même
expliquer ce qu'il fallait mettre dans
settings point-g ça c'est ce petit bout
de ce type de texte
donc en gros les plugins installés cessa
simpl react snippets d'accord moi j'ai
déjà ses plugins d'accord que le plugin
c'est ici j'espère vous savez comment
installer des plugins sinon je pense que
je pas sûr que j'ai le niveau pour faire
durer actes
donc si poehl react snippets
parce que quand je dis je pense que j'ai
le niveau c'est à dire que pour faire du
rapt il faut au moins 1 1 ou 2 watts
javascript derrière soit d'accord faut
être à l'aise il faut être capable de la
par soi même de créer des jeunes en
javascript d'accord
ensuite réacteurs jsk snippets ça vous
prenez et mithril et mettent d'accord
vous prenez ces trois le guide que moi
j'ai déjà
et dans 7 6 points jason
rajouter ce bout de code donc là vous
vous reprenez ce bout de code contrôle
c'est
cet exploit du seul comment est-ce qu'on
peut y avoir accès eh bien on va dans
settings on tape settings là par exemple
elle ne propose pas s'il est dit il
c'est six points ji sun il vous propose
ici je crois qu'il ya une méthode plus
rapide pour y aller
j'ai un trou de mémoire je sais que là
où il ya une méthode je ne sais plus
simple est dans nos vignes ou non bon
tuto tels que l'avs ou si vous tapez
c'est x par exemple les vous re edit
insightix projet sonne
et donc ses tics positionne en fait
c'est le résumé de tous vos réglages
vous devez ce code oui moi par exemple
une fonte un peu particulière enfin pas
plus très différentes on peut choisir la
grosseur de sa faute on peut choisir
notre thème etc donc tout est résumé
dans ce fichier points jason est ce
qu'il faut rajouter densifier point du
sun et bien c'est ce et mettre la ce
truc là je vais l'enlever je vais vous
montrer
donc on se place ici à la suite d'un
fichier point-g seuls ont fait 2,2 on
sort pas des accolades là les accolades
qui sont ici hockey et on fait un
contrôle v tac tac tac tac et on se
copient donc c'est le truc donc on a
aimé include langouet javascript ça en
fait ça va nous aider à dés qu'on va
faire h1 et b dans le gie sx donc vous
savez le g6 et le la sorte d'acheter ml
ça nous fera les raccourcis en fait donc
c'est quand même très utile d'avoir les
raccourcis croyez moi sinon c'est
beaucoup trop fuyant à te paie donc au
lancement ça on enregistre et la baie
normalement que vous aidant ap ici
donc attendait parce que là c'est
présenté comment ceux ci passent bleu
vous faites h1 entrée voilà là il est
humain il est allé me chercher les
balises si je fais une classe title par
exemple il maclean il va créer une diva
avec la classe title d'accord donc il
faut soit que ces classes naïm quand on
utilise du g16 assez classe times mais
il faut aussi savoir que si jamais je
vous montre quand même si jamais je dit
claes d'accord là je fais un titre
coucou eh bien regardez ce que samedi
dans la console savoir une erreur et ça
veut dit il valide pas partie classe did
you mean classe name est ce que vous
voulez dire classe name is music maceo
que les dix arabe ce qu'aubry que l'on
n'a pas la ligne et ou bien vous et que
vous n'êtes pas juste dire ok classe
parce que j'étais appelé classe de mon
projet dont je vais sur la loupe et je
vois que j'ai tapé classe ici ça c'est
dans le cas où on a plein plein plein de
fichiers d'accord c'est pour pouvoir
rechercher plus rapidement les erreurs
ok
donc effectivement c'est que la fnaim et
grands s'en fiche parce que ce composant
on va pas vous le faire comme ça pour
voir si vous avez bien télécharger les
plugins aussi vous allez faire rsc ça
veut dire react style est ce qu'on peut
n'être ses terres c'est la façon la plus
moderne de faire du rect avant on
faisait des composants est un state ses
dires des classes compo note bon bref
c'était un bordel j'ai même pas envie
d'en parler ça vous envoyer peut-être
que vous tomberez sur du vieux réac
scandale et sortent à cover flow ça vous
échapperez pas donc vous comprendre un
peu un petit peu de quoi je veux parler
en tout cas le meilleur react le réactif
au savoir l'europe moderne c'est le
réacteur laisse comprenant cela déclare
que des fonctions donc si je dis rsc que
je fais entrer et bien voilà la magie
d'internet jeu j'ai donc mon composants
qui est prêt qui est exportée hors week
on a importé react sa chance et plus
vraiment obligatoire maintenant le bon
il le fait on va pas le vexer on le
laissait et voilà l'élan n'est prêt à
taper d'autres composants
regardez là je peux faire un champ donc
on m'a aidé à taper h1 et là je refais
l'aurait actes et voilà c'est cool on
est content voilà on à l eau
encore un truc tant que j'y pense si
vous allez si vous voulez faire d
enregistrement automatique et bien
formaté votre code là par exemple oui
mon chéri là je place mal si je fais
clic-droit formats de documents with je
choisis pretty young configure des
formateurs pretty heures
et donc si je dis formats de documents
et paf ça me formate automatiquement les
annotations et où je peux même aller
plus loin je peu formaté quand
j'enregistre ça je le dis rapidement ce
que c'est un truc que je dis souvent
mais bon c'est quand même ultra pratique
donc on va danser tic j'en fais une
molette
c'est higgs
formate
bonne c'est évident ça s'appelle louis
formate conseil voilà vous cochez
formateur save vous avez rien à faire
d'autre vous fermez settings et là ce
qui est génial c'est que bd vous
enregistrez
frétillant vous entendre votre code
voilà ça c'était la petite parenthèse
maintenant et bien qu'il va faire il va
quand même falloir qu'on fasse des
choses un peu plus consistante c'est à
dire qu'on commence à se faire notre
application
alors
qu'est ce que j'avais mis dans le screen
installations points psg j'ai mis les
bibliothèques zut il sait les deux seuls
dans vos sites usa axios mais pour
l'instant resté chargé ces deux là parce
que c'est 2-2 quelqu'un doit commencer
donc lp m yport ennstal tirer s react
routeur d'hommes et saas donc là il faut
se prendre une nouvelle console ou
fermer le live ça cela ne vous met pas
le faire mais ce truc là donc on va se
prendre une nouvelle console voilà j'ai
écrite cliqué sur plus et je vais dire
lpn epour install tirer s e dans son tir
est ça veut dire cei mais c'est même
plus obligatoire maintenant dans une pme
je ne me rende compte en revanche vous
pouvez vouloir vous l'installer
directement dans vos fichiers npm sur
votre ordinateur c'est de ces deux
paquets de là pour installer directement
ces deux paquets sur votre ordinateur
est comme ça vous aurez plus besoin d re
télécharger à chaque fois aux frais du
ray l'acte vous pouvez faire tirer j'ai
pour global
et donc c'est react routeur d'hommes
enfin moi j'ai déjà en global mais bon
je leur téléchargent et saas et vouloir
que vu que les indiens en global ils
vont télécharger extrêmement vite encore
vrai ça ça prend un petit peu de temps
je crois vous et où elle j'ai déjà fini
puisqu'ils sont déjà sur un machine en
fait c'est de ces fichiers là et donc il
est partie les chercher et donc là vous
voyez que si on va
dans pas quelquefois dû ce nom on ne le
voit pas du coup ce que j'ai installé
globalement
ce qu'un problématique ouakam se les
prendre mpm y
donc react routeur d'hommes et sas
j'aimerais quand même les avoir là dans
mes dépendances
voilà donc celle là ça a été très vite
parce que je vous avais déjà sur une
machine voilà c'est mieux c'est mieux
expliquer comme ça donc j'ai d'abord
celle et globalement effectivement ça a
été vite puisque j'avais déjà et
maintenant je faisais incorporé à mon
projet donc gérer at routeur d'hommes
qui est ici et j'ai ça ce qui est ici
c'est bon on est content
donc ça c'est bien on va pouvoir se
créer une navigation
mais avant de secret navigation wacogne
en terminer que le support du cours donc
je vous avais dit qu'il y avait tout ça
tout seul ça et une partie style style
donc c'est tout le style de notre projet
qui là dedans d'accord donc ce stylo la
dent src on se le prend et on colle dans
un sens c'est comme ça paf voilà c'est
bon comme ça je peux fermer le support
on aura pu revenir dessus et le style je
reviendrai
dessus quand on va créer notre premier
composant qui sera la navigation non pas
la délégation le logo quand on va créer
le logo je reviendrai beaucoup plus
profondément sur le style d'accord pour
expliquer comment ça marche à laquelle
des petites spécificités qu'il faut
savoir
alors
maintenant la toute première chose qu'on
fait en tout cas si on a besoin d'une
navigation dans un site si on a besoin
d'un routeur c'est de se créer le
routeur dans app engine est ce donc
c'est ce qu'on va faire donc je
cherchais pas vraiment à comprendre
c'est quand même bien de comprendre mais
en fait
faire un moteur je vais vous montrer
comment on fait après ça sera juste tout
le temps pareil il y aura pas besoin de
se prendre la tête
voilà ça sera juste comme ça donc ce
qu'on va faire c'est que dans la serre
c'est donc je me place sur un sas et je
vais faire un nouveau dossier
il va faire un dossier pages tien vaut 6
charles sur le dossier composants non
composantes sonangol
combo ne vois là oui c'est les trois
fichiers principaux l'emploi dans tous
nos composants individuels ensuite on
aura toutes nos pages donc les pages qui
vont regrouper beaucoup de composants
qui rend la logique de chaque page la
page ob la page à propos et enfin on
aura
on aura notre style bien sûr qu'ils
aient toute la partie style mais je
reviendrai encore une fois un peu plus
tard dessus
donc dans ap quand j s c'est là que ça
se déroule je peux faire mais ça ça ça
en a plus besoin je vais réduire encore
un petit peu la console aussi c'est là
qu'ils les messages d'erreur jeu réduit
un petit peu comme ça alors
donc notre routeur aura besoin de la
librairie réacteurs routeur donc ça
c'est ce qu'on a téléchargé et on va
importer depuis cette librairie des
composants on va importer brothers
auteurs on va importer broots au pluriel
et route au singulier d'accord et ses
composants mais on va les utiliser pour
créer une navigation à vue en train de
penser qu'on n'a pas encore créé nos
pages donc on va se faire deux pages
dont page là on va se créer notre
premier composant réellement que ce sens
que appoint ges est un composant mais il
est déjà créé tout le fichier des
diacres et donc pour créer un composant
surtout n'oubliez pas ça c'est le la
première lettre majuscule
donc on va dire un point g est celle en
affaires à rsc react steak composantes
paf ok qu'est ce que ça va composer
qu'est ce que ça va comporter le home
point j s
pour l'instant on va juste écrire a que
comme ça parce qu'après la logique on va
rajouter le logo le composant logo le
composant navigation le composant
countries etc on le fera après
ensuite
deuxième page c'est un site à deux pages
est donc j'essaie de faire le plus
simple possible
mais bon si vous avez vous envie de
faire cinq pages bref c'est la même
logique je pense que j'ai compris on va
dire une page about donc la page à
propos
la page à propos on va faire h un
à-propos voit sara est pas je sais que
c'est pour vous montrer comment comment
faire donc on va faire un paix avec 1 1
lors m400 où là c'est beaucoup le 24 ça
on sait pas
ça va un peu choquer en faire à leur
avis en voilà
et en refaire un break surfer alors rp
lorraine 200
ok notre page l effet donc bon c'est
vraiment ça c'est une page pour eux à
titre d'exemple c'est juste pour vous
montrer comment ça va marcher la
navigation
alors
on va se placer sur un point g est ce
ça on peut l'enlever et non pas dedans
on va appeler nos petits composants
qu'on a qu'on a mis ici qu'on a importé
il faut juste savoir que la navigation
l'avait le plus haut possible dans notre
projet mais parce que c'est elle qui va
nous dire où est ce qu'on va à celle qui
va gérer les routes de notre projet donc
on va dire brothers routeur
comme ceci donc brothers routeur c'est
lui qui va englober toute l'application
à l'intérieur est encore un composant à
mettre ces routes au pluriel hockey est
là maintenant il va voir qu'on déclare
nos routes et donc c'est cette logique
la f1 c'est ça qui fait que notre
application englober là-dedans va nous
emmener à toutes les pages qu'on veut
donc par exemple on va dire route
si jamais ton chemin donc le pape en
anglais c'est cela c'est à dire c'est
l'accueil du site se lâche et l'accueil
et bien tu vas vous fournir le composant
suivant
donc là c'est element égal et là on va
se chercher un composant voilà comment
ça marche comment est ce qu'on va
chercher un composant donc là le
composant n'a créé que deux composantes
non sans ces hommes - gs et aubade point
g est d'accord
comment est-ce qu'on va se fier se
cherche et pardon hommes - js ont fait
chou blanc aux ouvrants
h majuscule au et la regarder il me le
propose sa ces natifs avait skoda
d'accord nous propose des chemins comme
savez ce code donc vous embêtez pas à
aller chercher à chaque fois les
composants parce qu'en fait regard déjà
publiques et là il nous il va nous
chercher l'import parce qu'en fait tous
les composants qu'on appelle où que ce
soit qu'on les appelle il faut à chaque
fois les importer donc il va falloir
utiliser au maximum loto un port devait
s code comme ça on n'aura pas besoin de
les apporter à la main et on évitera un
grand nombre d'erreurs donc j'enregistre
voulons voir voilà là ça dit je suis sur
l'accueil mais pourquoi mais parce que
ce qu on correspond bien à slash par
contre si dans le loiret là j'écris
n'importe quoi ben là il m'emmène à il
sait pas ou parce qu'en fait lui il
cherche par rapport au paf par rapport
au chemin là le paf on les x tessin
d'accord donc ensuite j'aurai je répète
cette ligne ces chiffres halte flèche du
bas paf je récupère je répète cette
ligne et là je vais dire ben tiens je te
faire une page je te faire un chemin
about
et quand tu verras le chemin about dans
l'ue à rennes d'accord ça faut bien faut
bien comprendre que passé ce qu'il ya
dans l'url quand tu verras le chemin
about dans l'ue reste c'est ça
conviendrait acte est bien là tu vas
aller me chercher le composant about
donc là il faut le écrire à bay hill à
il me propose about ici donc je fais
entrer ou tu peux même faire
la tabulation et ça fonctionne ce qui
compte c'est qui est l'auto rapport là
où en fait c'est ça qui compte d'accord
hop j'enregistre qu'est ce que ça veut
dire ça eh bien ça veut dire que là
quand je vais dans no doubt comme ceux
ci
ça fonctionne voilà il ya écrit à propos
tatatata et ça nous produit ce qu'on
veut donc ça fonctionne
ok et donc vous pouvez créer une
infinité de page comme ça lui dire si
j'avais le chemin c'est ça tu m'emmènes
là si j'avais le chemin c'est ça tu
m'emmènes là lorsqu'on peut se faire
aussi c'est qu'on peut dire que si
j'avais le chemin
si jamais le chemin
c'est n'importe quoi donc si t'as pas
trouvé de deux pages référente on peut
pas renvoyer le
renvoyer à l'accueil on peut dire aux
hommes mais on peut aussi mettre une
erreur 404 faire une page d'erreur donc
là je vais juste commenté cette partie
là je veux dire
donc le paf
étoiles
fonctionne si jamais
lurel ne correspond à rien
de connu ou de déclarer je veux dire
rien de déclarer au dessus voilà donc je
fais contrôler slash pour
contrôler slash pour commenter et ça
commence comme ça en direct en fait ça
rajoute des keys accolade n'y fait pas
attention avant de commencer un peu
commenté moi j'écris toujours le tout le
texte que je veux et après je fais
contrôler slash c'est tout faux pas ce
point il faut pas plus se prendre la
tête que ça d'accord donc le seul le
précise puisque pour le hall des fois on
peut avoir envie de mettre une erreur
404 donc en vous qu'est ce que ça veut
dire le hall b ça veut dire que si l' on
écrit n'importe quoi dans l'url ses
utilisateurs de faire le petit malin et
bien ça l'emmène à l'accueil d'accord il
ya plein de sites qui font ça
ok
donc c'est bien on a réussi
on a réussi à analyser
c'est bien voilà c'est ça donc si on a
vu beaucoup plus de pages il l'aurait
fallu vous avez bien compris le principe
du nord a ajouté nos pages ici faire des
nouvelles routes tiens je veux faire une
nouvelle route
boutique une nouvelle route blog donc
j'écris blog et j'appelle mon composants
blog et voilà et ça et ça fonctionne en
fait vous voyez que ça va très vraiment
très très vite là je vous j'ai pris mon
temps à vous expliquer en réalité quand
vous reprenez un projet vous faites ça
vous fait contrôler ses comptes relevé
et boum c'est parti on enchaîne donc
maintenant vous dites ok la navigation
c'est bien cool
mais elle a quand même un petit défaut
cette navigation c'est que l'utilisateur
va pas s'amuser à taper about comme ça
avec ses petits doigts pour dire à tien
an men mois sur à propos là il faut lui
mettre des liens il faut le dire déclic
là pour afficher telles choses ou telle
chose d'accord donc ça nous amène à quoi
ça vous amène à la création de notre
tout premier composant notre tout
premier composant le compo nes on va
aller et on va créer
navigation
point j s
alors navigation - js et bien c'est une
composante navigation qu'ensuite on vint
a appelé dans toutes nos pages le
concept on va seul à coder qu'une seule
fois de navigation alors est ce logique
qui sera codée qu'une seule fois et elle
sera rappelé par tous voilà c'est ça qui
est fort en react donc on va faire quoi
on va faire un
rsc react steak les compos note et on va
avoir besoin pour se balader sur le site
henri acte
fait sur un site normal devrait créer
une encre on leur dit href emmène moi là
bas on a créé un âge médian est bien là
en react ce à ça s'appelle nav link
donc on va dire un porte-monnaie blink
from la bibliothèque c'est react routeur
donne
est donc là
je veux dire points
navigation ce sera le la classe pour
démarrer et donc de navigation sera
annuel donc il y aura que deux éléments
pour l'instant mais pourquoi pas à
prendre un jour en rejeter d'autres on
va dire courir bénavent link to c'est
comme ça que ça s'appelle se dit tout
est donc en gros ça veut dire navx nique
on va là on va englober notre accueil
par exemple notre lit accueille
donc comment comment est-ce qu'on va s'y
prendre forme que je leur fais d'un flic
voilà comme ça et là dedans mais un lit
et on n'a qu'à dire que ça c'est
l'accueil
2e 2e d'avic
donc là c'est tout about ne sais pas si
vous voyez en fait on lui dit tous et
l'url qui va taper donc quand l'url va
correspondre à ce qu'on a mis dans notre
routeur et bien il a fait chaud il
affichera le composant en question
il a on va dire à propos
c'est tout pour l'instant c'est tout
donc en ayant fait ça
où est-ce qu'on est non et pour
l'instant on peut pas l'avoir délégation
puisque bien sûr on vient de se créer un
composant mais nous la fiche du par
donc il faut appeler ce composant est
seule chose qu'ont affiché c'est nos
pages puisque nos pages correspondent à
l'url qui est tapé ici
donc dans nos pages dans le bas ou tu
qu'est ce qu'on va faire avant à propos
on va dire ben à v et regarder les bleus
proposent ici d'accord il faut vraiment
voir le chemin là qu'ils proposent c'est
lui donc j'appelle navigation
j'enregistre je vais dans home
j'appelle navigation
et voilà
donc faites bien attention à ce qu'ils
soient importés la hauteur sans ciller
pas importer regard des jeunes importe
pas j'enregistre et là il va veut dire
quoi si on va sur la page d'accueil
patatrac ça marche pas on remonte le
message d'erreur il nous dit navigation
is not be found hommes ligne 5 ok donc
là c'est quand même assez clair comme
message on va sur home ligne 5 oui bon
lieu à lille conserve sa ligne de sacs
ce que tout est sur une seule ligne vu
que ça commence par des parenthèses les
parenthèses c'est à dire que tout sur le
mignon c'est les accolades faire l'amour
sur plusieurs lignes toujours est il que
lui il le connaît pas
effectivement par contre si on l'appelle
oui il le connaît forcément et regardez
plutôt à quoi ça correspond à de
navigation accueil à propos si on fait
un clip de inspectés
qu'est-ce qui vous injectez bilecik td a
donc neuf link sont devenus des encres
sont devenus des as mais bon c'est comme
ça que ça marche un réac qu'il faut dire
neuf licques et donc au regard des
données sur accueilli là je clique sur à
propos et voilà on va sur un propos on
va sur accueil à propos accueil à propos
accueil à propos que je pense que j'ai
compris le principe mais ce qui est cool
c'est clair aucun chargement ya rien
tout est déjà prêt chargé ça s'appelle
une sigl paige applications c'est comme
ça qu'on dit en anglais et donc en fait
c'est comme si tout le site était pré
chargées de base et donc ensuite quand
utilisateur clique en fait le navigateur
il a déjà toutes les informations il est
déjà tout donc il peut envoyer et un
navigateur c'est extrêmement puissant
donc voilà vous avez la logique de la
navigation
en fait on l'a appelé dans les deux
projets dans les deux pages on l'a
appelée et voilà le composant il
souhaite mais alors là le composant une
un style
dégueulasse qu'est ce qu'il faut faire
et bien il faut faire un peu de style
donc je vais faire parler un petit peu
du style donc le style est là il est
fait en saas donc si vous voulez être un
développeur react c'est-à-dire
développeurs fronte
a minima il faut quand même s'y
connaître un petit peu hostile il faut a
minima travaillant react et à minima que
ce que je vous montre là vous soit pas
complètement étranger d'accord
donc la structure du style vous ai fait
un exemple parce que la tempe agit rien
n'y a pas de mouvements de l'eau
utilisée les pages mais il ya des fois
il ya besoin d'un gros projet c'est pour
une autre et à quoi ça peut ressembler
d'accord l'achitecture on a un index
point css qui regroupe
tous les autres fichiers donc en fait on
a juste à importer l'index pointé as le
plus haut possible notre application et
tous les autres fichiers vont seront
appelés vu que c'est des emplois à
chaque fois qu'on fait donc d'abord on
importe c'est ixe c'est xbc les réglages
généraux d'accord
je suis en train de me rends compte que
l'âge importe une police mais qu'on ne
l'a pas on n'a pas dans le projet je
vais la prendre je vais la prendre vite
fait 7,7 police joséphine sens sauf ceux
des cours n'a pas besoin je vous laisse
juste pour l'exemple la faune de faith
comme ça d'accord et vous me la prendre
comme ça si ça marche pas il écrit sans
serif le voilà le site le projet ils
seront sans serif je voulais juste pour
l'exemple cela parce que bon j'ai pas
non plus m'embêter aller chercher des
polices
donc aux sites ont pu avoir ne variable
on peut avoir nomix in et après on
balance tous les réglages généraux notre
projet une fois qu'on a fait toute la
bière généraux donc ça fout la danse aux
arts premiers ses tigres puisqu'il ya
des variables etc ces variables on va
les réutiliser dans ses pages là donc il
faut forcément que cette idée soit dans
son premier comme ça les variables sont
connus et non de navigation ce qui
m'intéresse maintenant
voilà navigation ce qui m'intéresse
c'est qu'on pourrait faire ce qu'on
appelle une nav active c'est-à-dire
qu'on pourrait injecter une classe quand
on est sur la bonne page on va voir
comment on fait ça donc d'abord j'aime
brûler le style donc on va aller au plus
haut possible au cédant index point j s
ici on va dire importe
va me chercher
point se loge style enfin sachez pour
d'habitude par de là où tu es
composants non pas composant
ces styles et ses index point scs il ne
propose pas
mais je sais que c'est celui-là
et on regarde on a beau nier une erreur
il ya une erreur il me dit quoi
il me dit 4 isolement ah oui une
horrible afonso et forcément si on n'a
pas bon vous savez quoi je vais la
chercher du coup donc on va je vais
couper je veux la route est plutôt ses
répliques
donc il faut la justifie 10 ans médium
j'étais sur google phone vous épargner
ça donc je vous ai fini sans ce médium
extraire vers cours et actes et d'en
exercer ce qu'il nous faudrait ce serait
un nouveau dossier qui s'appellerait à
cette voie là laurens est tombée des
images on me défendre des icônes
d'accord donc la dent à cet effet on va
refaire un nouveau dossier fonce voilà
ce sera comme ça dans une belle
cohérence ok donc j'ai été chercher
cette fonte ou est-elle voilà à cette
fatwa josy finissent en ce moment là
c'était ça un détail en fait c'est pas
un cours c'est pas en course et à ses
sous sas non plus donc donc voilà j'ai
preuve le père trop tendue alors
qu'est ce qui m'intéresse ou de relier
notre notre sas le plus haut possible
donc dans un deck ce projet est ce un
10.26 lequel plus haut possible puisque
c'est lui qui rend toute l'application
et qu'il injecte dans route d'accord
donc à quoi ça ressemble maintenant
est-ce qu'on a du style
j'actualise
non il me dit encore compiled
oui ce problème il a pas réussi à aller
chercher men iem jaoui l'image on n'a
pas été c'est prendre
effectivement
ok donc ce que j'ai fait c'est que j'ai
rajouté un dossier à cette d'accord
comme ça vous aurez aussi la faune toile
comme ça on s'en bat rappaz donc ce
qu'on va faire c'est que enfin je veux
dire dans le support du cours sont là
vous vous dites mais pourquoi il parle
tout seul alors que vous vous l'avez
déjà le dossier à ses astuces que
j'enregistre forcément dans le passé
donc du coup d'un ascète on aura les
fentes et on a un petit fichier image
voilà comme ça maintenant glycémie
d'enfants tu vois qu'il ait mes dents
n'ont toujours pas
voilà là j'ai bien fait image et il m'a
fait un image copie donc ça on supprime
voilà donc la petite image c'est quoi
oui c'est l'image du logo l'image de
fond du logo la scène j'ai oublié mais
dans les supports enfin vous vous lavez
du cru de récits parts d'un fonds géré
de dire ça ok on est bon
est ce qu'on a encore un message
d'erreur donc vous voyez qu'à chaque
fois on a des messages d'erreur qui sont
quand même assez car nul ne la renvoie
déjà que la police a pris et on voit
effectivement
on peut cliquer sur les éléments qu'on
veut donc qu'est-ce que j'ai qu'est-ce
que j'ai préparé dans les stades dans le
style j'ai préparé
donc donc en poudre en composant
navigation une native 7,9 active a fait
quoi et révèle un after donc l'after en
fait ici une barre qui va souligner
l'élément donc quand on va injecter
cette classe on aura une barre qui
viendra là comme ça et donc on sera sur
quelle page en est d'accord donc on peut
rajouter le style qu'on veut en activant
fait donc pour indiquer l'utilisateur
sur quoi et sauf en fait il va juste
falloir que ça ça corresponde il faudra
juste que ce schéma-là correspondent
elana d'activ s'appliquera donc comment
est ce qu'on fait ça comment est ce
qu'on fait savoir ça ça a un peu changé
avant c'était plus facile en ré l'acte
et je sais pas pourquoi maintenant ça
l'est moins forcément enfin non pas
forcément malheureusement ça l'est moins
donc ce qu'on va faire c'est comment se
placer dans navigation point j s et là
dans la balise on va dire battant je te
mettre une classe name mais cette classe
je voudrais que tu me la met que si tu
es active tb regarder comment dit sa
part sur une fonction fléché donc et
anonyme on va dire nav
is active et ont fait une ternaire si
oui alors tu me mets la classe d'actifs
ça c'est la classe qu'on a créé non un
css ou en saas pour pouvoir injecter le
style qu'on veut d'accord et si non
bitumée rien voilà comment se présente
la ternaire donc ça avant c'était plus
facile à faire maintenant c'est comme ça
bon écoutez on va pas
bataillé on récupère cette logique là et
on l'a mais aussi à son copain de la
soucoupe homs où il enregistre voilà la
pretty heures eva vomissent à la ligne
je sais pas pourquoi il a fait pour l'un
comme pour l'autre
c'est pas très grave en soi on a fait ça
comme ça comme ça et n'ont même pas eu
la miss a aussi admis comme ça pourquoi
pas ça change pas grand chose ah non là
il veut pas le faire poursuit la banque
peu importe ok et donc là en faisant ça
qu'est ce qu'on vient de faire eh bien
on vient de créer une navigation ou en
indique à l'utilisateur sur quoi ils
servent
regardez-la ci fixera propos on voit
très bien que là il ya une classe
d'actifs qui intersecté cette classe est
bien l'injectent une barbe bleue en bas
alors c'est tout ce qu'elle fait voilà
c'est comme ça vous indiquez votre corps
vous posez pas obligé de faire une barbe
bleue 1 vous pouvez changer la couleur
de fond ou écrire plus gros la page sur
laquelle on etc il ya plein là c'est à
vous de le voir ce que voulait faire en
termes de style en tout cas là vous
voyez qu'on a toute cette logique
magnifique de navigation
et c'est bien parce que du coup ça c'est
fini ok alors ensuite qu'est ce qu'on va
vouloir qu'est-ce qu'on va vouloir faire
je fais un petit peu au fur et à mesure
ça leur apprendra plus besoin parce
qu'en fait quand on creuse dans red act
fin là vous le voyez déjà là sur le côté
là on a une on a une arborescence de
fichiers qui devient vite énorme en fait
donc il faut moi je prend l'habitude de
fermer pour pas trop embrouillé en fait
alors maintenant le logo deuxième partie
il ya une chose qui m'intéresse dans le
logo ça a l'air facile comme ça le logo
que je vous montre il est comme ça il
ressent la salle logo donc ce coin fable
c'est qu'on va se créer un composant
logo qu'on va incorporer une image avec
une balise img
h2 et une image de fond eh bien ça ça
vous paraît anodin et bien quand on
débute moi je sais que de beaux débuts
j'ai un petit peu buggé là dessus parce
que selon si vous déclarez votre image
avec une balise iem v ou si vous la
prenez
depuis depuis sas en mettant background
et bien c'est pas pareil il faut les
ranger ailleurs les images il faut il
faut les ranger à différents endroits
donc qu'on soit bien clair
je vous mettra prend note comme ça dans
les dents le projet en fait vous aurez
tout pour démarrer après un site vitrine
ou fin vous démarrez d un truc assez
assez clean donc si je dis logo
point j s on va faire un rsc react steak
est ce qu'on peut note
je vais dire pour le gone ok ça démarre
comme ça donc d'abord on a une image
et là
on ira la chercher après on va juste
appeler sa logorrhée actes ok
on va faire un âge de
react world ok c'est tout d'ailleurs ce
que je vais faire un jeu trois peut-être
que c'est un peu mieux au niveau du
style se fera par tranches ok
donc déjà j'ai envie de faire simple on
vient de se créer le composant
maintenant j'ai envie de vous montrer
comment ça marche enfin j'ai envie déjà
qu'on se la fiche le composent donc on
va le logo moi ce que vous le faire
apparaître des partout et en plus il
apparaît avant la navigation de logo il
doit être au plus haut de l'application
donc on va dans nos pages
about
et là on dit l eau et la regarder d'une
propose
et donc ça nous fait l'auto import là
haut c'est indispensable à sion si c'est
encore une fois si ça marche pas vous
aurez des indices dans les messages
d'erreur fins non pas des indices avec
vous diront que c'est le problème est là
j'appelle logo des voiliers qu'on n'a
pas su qu des 50 fois logo on la connaît
une seule fois et toute sa logique
après on peut l'importer n'importe où et
voyons là le logo à eux ne s'en est
jamais une image de fond ce que j'ai
fait le style est effectivement
donc on a des yeux l'image de fond
on se passerait à vous montrer comment
on fait pour l'image de fond ce qui
m'intéresse c'est que pour les images en
fait que vous allez avoir incorporé en
bas les img donc ça je vais vous le
commenter je vais l'écrire commenté le
vous aussi si vous voulez donc
les images
inclus enfin non
je viens les images importées
depuis la balise img
sont accessibles dans
public qu'est ce que ça veut dire ça
mais ça veut dire claque j'enregistre
voilà comme ça ça veut dire quoi se dire
que quand notre site vous voyez oui
comment comment il fait la réac la
cantine ou quand ils nous compile tous
là on a l'impression d'avoir un html
tout à fait classique oui comment ça se
présente
et bien fait notre belle image là est là
et elle prend sa source elle prend sa
src dans public donc là dedans on peut
cas on peut imaginer qu'on se fait un
dossier un dossier images bon là pour le
pour le pour l'exemple on veut juste
prendre là le logo 192 le celui ci
mais en gros c'est comme si bien
d'autres balises elles étaient importés
directement ici comme si dans route
on a des images tata et donc ça veut
dire quoi c'est sûr que là pour avoir
l'image si je vais les chercher l'image
du logo 192 j'ai juste à faire points se
lâche legault 192 points png d'accord et
bien la denrée l'acte on va pas être
aidé pour taper
puisque effectivement un peloton et
jouer comme ça effectivement il va
falloir qu'on fasse comme si on était
dans public pour taper donc là dans
public eh bien il faut des jeux 10
points slash et la wei qui me propose
rien
et je lui dis va me chercher logo
192 points png
ils veulent trouver hilal trouver leurs
corps et des chemins quand on est dans
le logo il faudrait faire deux fois deux
points sortir de là ensuite sortir du
hrc ensuite allé dans public et ensuite
elle est là et non là vous vous dire
juste les balisiers mg c'est comme si
j'étais dans public voilà ça c'est un
truc primordial à seurre donc regardons
voilà ça a fonctionné
bon c'est précis est primordial mais bon
une fois vous le savez vous savez je ne
faut pas non plus trop s'en faire une
montagne par contre d'un composant donc
ça s'appelle logo
si vous avez besoin d'inclure un bag ont
donc l'envoi de notre image notre logo
il est l'image de baghran clairement je
voulais refaire au ralenti hop je
supprime
voilà là ya pas de background ok on va
aller se chercher et bien en fait c'est
le principe que vous connaissez donc on
dit
url
dans ses pas points soit donc là du coup
on fait deux points se lâchant sort
ensuite on ressort à nouveau ensuite on
va dans la set ensuite on voit dans
l'image et ensuite on va dormir et on
dit center covers assez pour que ce soit
parfaitement bien voilà
bon là pour le coup l'image en
background faut presque rien que je vous
dise parce que ben c'est comme si vous
allez chercher l'image normalement en
fait c'est le bon chemin donc dites vous
juste que c'est pour la balise ing que
c'est particulier pour l'image en bas
quand vous allez chercher l'image et
puis si vous la voyez c'est que ça a
marché si vous l'avez pas par contre dès
fois je n'ai pas dit ça actualisé des
fois parce que quand on enregistre ça
fait une mise à jour mais des fois en
react eelv et des choses en cash ou quoi
et on a besoin d'actualiser moi je sais
pas c'est pas le cas mais je vous le dis
pour pour l'avenir
et donc voilà on a réussi à enfin je me
suis en tout cas vous expliquer cette
petite particularité les images et sons
a surtout réussi à ce qu d un composant
corps utilise un compose encore utilisé
puis des pages complètes qu'on appelle
quant à lui à elle correspond donc on a
déjà là on vient de se faire la logique
d'un site vitrine à vous pouvez déjà
faire un site vitrine il a vécu
navigation hyper dynamique et en
utilisant des composants donc maintenant
bon bien sûr on va aller quand même un
petit peu plus dans ce projet puisque on
va aller se chercher les pays ce lait
stocké seul est listé
bien on va se connaît donc la partie
avec tous nos pays qui sont là là la
petite partir chercher à ce truc là on
le fera à la fin c'est ce qui est plus
complexe d'abord on va aller se chercher
les données dans une api on va se les
stocker ses données et après on va faire
un map d'accord c'est parti alors le
lien de l'apei peut-être en train de
penser ce qu'il nous faudrait ce lien
reste
countries as pays
si je taperai ce countries as pays est
ce que je trouve quelque chose
je sais plus bon écoutez moi le mien je
vous le passé celui ci s'appelle reste
contre is.com
et cela chevet 3.1 slash all
wheel la pays a changé récemment la ce
que j'avais fait des vidéos précédentes
mais là pays a changé récemment
et maintenant c'est ça le bon lien le
maintien de la paix y donc avant de
travailler que d'appeler la première
chose qu'on doit faire c'est de mettre
le lien dans l'url est de contrôler que
ça fonctionne parce que sinon ça sert à
rien de faire une requête à la pays là
ça fonctionne donc on va pouvoir faire
une requête effectivement alors
nouveau composant le composant de tous
les pays j'ai dit qu'il allait s'appeler
countries donc les pays au pluriel les
coaches with
fsc est donc
là dedans qu'est ce qu'on va faire et
bien on va chercher vos déjà savez quoi
en acajou se mettre à h 1
au moins pour voir si notre composants
fonctionnent donc j'écris juste
countries ça c'est quelque chose qui se
fait souvent que vous créez un composant
vous vous mettez des jaloux que vous
comptez le m donc nous on compte le
mettre dans home on compte dire logo
accueille même accueil on peut le virer
et on va dire j'appelle countries ok
j'enregistre
voyons voir ce que ça donne
voilà rokia countries ok le composant et
bien naples est donc maintenant on peut
travailler dans cette zone là de notre
site il ya aucun problème
concernant le style d'ailleurs en 32e de
juin d'utilité là si vous voulez faire
du style que vous êtes un ancien mais
comment comment on fait pour faire du
style en fait j'ai juste à vous y
prendre comme si vous faisiez votre
style habituel fait clic droit sur le
devant que vous voulez vous inspecté
whitta ok mon l'ipad il n'ya pas de
classe mais bon pour abattre une classe
on pourrait dire countries containers
adsea country de containers il ya 1 h
accès peuvent contribuer à vous
sélectionnez ça en saas et vous mettez
vos styles c'est tout il n'y a rien de
plus à faire que ça c'est faux faux fait
fonctionner avec la console ici si vous
les maîtres du style vous dites tiens
comment ça a été injecté voilà vous
récupérez les non français comme ça
qu'on fait du style en général on n'a
pas besoin d'aller dans les fichiers
voir comment appeler les choses vont
mieux se balade dans la console comme ça
on voit exactement comment le navigateur
interprète bon cette parenthèse étant
dit voilà on revient là est donc là où
on aurait pu être une petite classe en
cours et dirk claes name
countries ok donc là c'est là qu'on aura
nos pays
très bien on voit que ces centres est
maintenant
parce qu'il y avait du style sur cette
classe de countries
alors on va aller chercher nous donner
pour aller chercher à donner avoir
besoin de mpm hypo install axios axios
est une technologie qui nous permet de
faire des fêtes
qui nous permet de faire défection club
georges de contrôle et qu'il est bien
installée voilà l'ag axios
axios ça permet de faire des fêtes ch un
peu plus rapide et où sont ses conseils
pour faire que son conseil en vue
anguilard ou un réac mais on peut le
faire vania javascript axios vous pouvez
utiliser partout
donc comment on va faire
on va pas ici s'appelait axios à l'air
libre d'accord je pourrais faire axios
pointe guette c'est comme ça qu'on va
essayer de donner
mais si on faisait ça on aurait des
soucis dans notre composants en fait il
faut jamais a déclaré dr libre il faut
lui dire plutôt on peut les déclarer des
fonctions toutes celles qu'on voudra
plus tôt ça dans l'ain dans la deuxième
partie mais si on veut qu'ils fassent
quelque chose quand le composant est
appelé quand le composant est monté
c'est comme ça qu'on dit et bien ce
qu'il faut lui dire c'est qu'il faut
faire un use effect
et use effect en fait c'est
en gros y'a on va là tout le bout de
code qu'on veut à l'intérieur et ça se
joue quand le composant est monté
voilà comment ça se présente comme ça ça
s'appelle un call back le petit crochet
je vais me contenter quand même je vais
dire donc le use effect
se joue
lorsque le composant
et monte donc c'est que quand on arrive
dessus c'est comme ça qu'on dit ou le
monde il est monté le commente le
composant quand on l'appelle là il est
mis en place
d'accord mais il faut quand même savoir
que ce bout de code l'a peut-être
rappeler si jamais
quelque chose se passe là dedans
mais
sachez juste que ça c'est le colback on
va pas l'utiliser pour pour ce cas
concret parce que l'on fait on va juste
aller chercher les données une fois de
nos pays et approuvé les stocker ses
données mais bien sûr on verra on verra
tout au long des prochaines vidéos
les cas concret dans lesquels on peut
utiliser sa ont toujours est il que
l'art lui dit bond quand le composant
aimante et je veux que tu me joue et là
on peut le dire axios non non c'est une
bonne pratique de faire ça on dit axios
point guette va me chercher sans
donc bien sûr si on appelle axios il
faut l'appeler là où aussi oui que moi
j'ai fait un appel automatique
j'ai été un peu vite mais je vous le dis
donc ça fait une porte axios axios à
vous pouvez taper la main sinon pensez à
ces cours à taper
et nos colis va me chercher ça
zen non classés aux habitudes du fait ch
c'est un peu la même chose bazaine le
résultat que tu as été chercher notre le
moi je vais faire un console blog
donc qu'est-ce que ça dit la console
sadique ont été chercher un heureux avec
de la data
donc il faut dire res point date à mon
avis on va dire reste point data et là
effectivement on est à l'entrée d'un
arrêt de deux cent cinquante pays ok on
a réussi à les chercher à donner donc
voyez on n'utilise pas le fait chaud 10
axios et si vous avez l'habitude du fesh
pas sûr d'avoir marqué mais il ya des
tabliers tapas - l'étape du reste pointe
qui sonne qu'elle disparaît avec axione
se dire qu'ils transforment directement
le fichier ji sun en un objet java
script exploitables
donc c'est plutôt pas mal
maintenant
ce qui va falloir faire baisser ceux
stockés ou le faire un console blog bien
sûr de se mettre cette donnée cette date
à aures la mettre dans une variable et
donc on pourrait être tenté de dire
const data égale un tableau puis après
on te passe on te passera des choses
suivantes
mais non c'est pas comme ça qu'on ferait
acte enfin on peut en réalité faire son
break mais c'est pas comme ça qu'on fait
en reste qu'on fait c'est qu'on utilise
le state vous allez mieux comprendre
petit à petit le c'est en fait à force
de faire des choses enfin en tout cette
première partie ensuite en faisant la
seconde partie donc je vais pas trop
m'étendre dessus pour expliquer je vais
plutôt comprend le faisant donc on va
dire je crée une variable datant ma
seule chance
seule opportunité de pouvoir modifier
cette date assez de passer par cette
date a donc fait on modifie jamais la
variable directement on passe par un set
data c'est elle qui va nous permettre de
modifier cette date à ce que cette date
est en fait c'est comme si enfin cette
variable data c'est comme si elles
étaient stockées dans l'état de notre
compose en fait il ya un état au dessus
et on peut stocker toutes sortes de
choses mais je vous montrais avec un
petit plugin comment est-ce qu'on peut
regarder ça et donc on va dire que c'est
un lieu aux states voilà et on peut dire
bon on a on attend à décrocher les
crochets vide comme ça on part sur un
tableau donc on a data la seule façon de
pouvoir modifier cette date assez de
passer par cette date a et on déclare
que c'est et rieuse state donc il faut
le déclarer aussi lahoud alors j'ai pas
dit pour nous effect il faut aussi que
ce soit déclaré non sur des composants
de réaction qu'il faut les appeler ici
d'accord mais en vrai si vous commencez
à taper use il vous propose en fait le
yoyo state donc
donc voilà faut princier qui vous
proposer ça fais le toi rapport labeaume
et sinon vous avez toute façon un
message d'erreur il vous aurait dit yu
state is not diffa new state je sais pas
quoi faire dans tous les cas il n'aura
pas qu'il n'aurait pas connu enfin il
connaissait pas ce que c'était ok
donc on a déclaré une autre variable ici
eh bien il ya un outil qui s'appelle le
réacteur tous sans mot stupide que ça en
fait on n'a quasiment jamais besoin de
votre console blog
donc vous prenez les grecs developer
tools ça existe sur firefox ça existe
sur
sur chrome évidemment ce qu'on a
embauché son brave mais bon ce soir que
breivik robe c'est la même chose on sait
le même le code en tout cas
de fond c'est le même c'est ce que bref
c'est beaucoup plus ça respecte beaucoup
plus la vie privée donc voilà
donc vous prenez ce petit toolkit là ce
petit developer tools
et
vous allez peut-être devoir recharger
votre navigateur refermez relancer ou
sinon vous allez directement l'avoir ici
donc s'appelle profilers son smartphone
profilers mais ça s'appelle copenhague
l'autre en vrai vous allez l'avoir enfin
bien sûr quoi la voilà vous avez sur
copenhague est donc ce truc là qui
s'appelle components donc là où il ya
éléments qu'on soit les tout ça c'est un
plugin qu'on s'est téléchargé et bien ça
nous regroupe tous les composants de
notre application et là vous voyez
comment ils sont fichus et quand vous
allez sur twitter ou sur facebook est
bien avec cet outil composantes vous
pouvez voir exactement tout
l'application que mal était fait puisque
le code en fronte guy libre vous avez
enfin le code que votre navigateur
interprète vous y avez accès vous bien
sûr donc vous pouvez voir les
vous pouvez voir les
différents éléments
les différents éléments de la structure
du site est donc là ce qui intéresse
tous et countries il a appelé ici il est
dans l'eau chlorée d'en route donc au
début on part du browser auteurs
tatatata on descend des 100 ap homme
qu'est ce qu'il ya des hommes blancs
omya logo ya navigation il ya les links
les na'vi qui sont bien navigation c'est
comme si c'est des composants ne sont
pas des composants qu'on a créé mais
c'est des composants et navigue et
bien sûr la country et là d'un country
un truc intéressant c'est que oui il
nous dit qu'on amuse effect bon on s'en
fiche
et il ya un oeil aux states il mixe et
décroché il ya un style tout court ibis
et décrocher évident et bien fait c'est
là qu'on voit notre style a évolué la
wec il est vide notre state
mais dont je vous ai dit que la seule
façon de pouvoir modifier date à se dire
cette date a donc s'il a la place du con
sol log jeudi mais cette date à je te
passe c'est comme ça que ça marche entre
parenthèses on lui passe les valeurs
qu'on veut donc cette date à je te passe
le responsable a not to be de 150 pays
j'enregistrais bien à regarder
vous avez vu si vous n'avez pas vu je
voulais refaire approuvera lentilles
hop on a notre state on a donc fort que
le 1 c'est la première soit faite ils
s'appellent tous state les différentes
variables qu'on va créer en faisant le
yo-yo state mais le un ben là c'est la
première qu'on a déclaré
et elle abrite absolument les deux cent
cinquante pays donc on a toutes les
données qu'ils souhaitaient passer à
l'état d'autres composants et maintenant
on va pouvoir exploiter cet état mais ce
qui est bien c'est que prix peut être
exploité en temps réel cet état c'est ça
qui est bien on va voir un petit peu
comment ça fonctionne et
oui vous le voulez comme vous remonterez
regarder quand je recharge la page
c'était qui va être vide il aurait juste
décroché lui dit vous allez voir c'est
le temps de réponse du serveur le temps
qu'on mette les choses là des lacets
vide et c'est bon là on a la data
ok vous voyez que les consoler on n'a
pas besoin de les faire on se positionne
sur le composant qu'on veut et on peut
savoir voir en vrai défaut on peut avoir
envie d'en faire des consoles mais on va
dire que pour ces cas là on a plus
besoin d'en faire des consoles blog on a
tous directement on a l'état tel qu'il
est actuellement devant nous quoi
ok donc ça vous inquiétez pas on va le
revoir plusieurs fois façon c'est comme
ça qu'on fait les variables la plupart
des variables en
react donc c'est une preuve ont été
reçus une première couche que je vous
fais tout comme muse effect chaque
composant quand on le crée si on a envie
qui joue quelque chose dès qu on le crée
on fait ce qu'on n'a pas les réflexes et
dès que le composant est monté tu me
joue ça ça que ça veut dire les effects
mais il faut tout cloisonné parce que
vous allez me dire mais pourquoi si on
veut que ce soit je vous noterez
pourquoi ce qu'on n'est pas comme ça à
klaus parce que là en fait il serait
tenté le composant react d'euros de
rejouer sa de le rejouer de rejouer à
l'infini en fait c'est pour ça qu'il
faut plus raisonner les choses il faut
les mettre voilà comme ceci dans un user
fee act par exemple donc ça s'appelle d
où qu use effect use the state c'est dur
et actes moderne c'est des choses qui
n'existaient pas il ya 3 4 ans d'accord
donc vous pouvez encore tombés sur des
vieux projet de gens qui ont fait durer
actes et qu'ils n'utilisent pas ces
choses là c'est tout à fait plausible
mais moi ma toute première vidéo que
j'ai fait sur youtube il ya deux ans un
peu plus de deux ans froid jeu
j'utilisais palais où j'utilisais des
classes composantes voilà du coup j'ai
un peu connu l'ancien reato si je peux
vous dire que leur actuelle est beaucoup
beaucoup mieux alors maintenant qu'on a
notre data bien exploitons la date data
comment est ce qu'on fait pour exploiter
un noir et un aurait dans lequel il ya
plein d'objets bas il ya une méthode
pour ça en javascript je pense je
suppose que vous la connaissez
vous pouvez pas me répondre je veux
répondre pour vous c'est la méthode la
méthode qui ont recréé une je vais créer
un nul c'est pas très
bon je vais créer annuel on va rester
sur un néant fait savoir que quand on
liste des cartes il ya plus il ya plus
de deux éléments dans les lits il faut
pas faire des 10 mais bon là je vais
quand même faire des livres parce que
j'ai envie de rester sur le même style
que j'ai envie de rester sur le même
style qui a été fait et ne parlent pas
le reprendre restez sur un truc simple
donc on va faire des uli là-dedans va
solliciter nos pays mais bon faut savoir
que c'est pas non plus une archive
howett pratique de lister les choses
dans un duel et dans un lit mais c'est
juste comme ils y vont être un peu gros
par rapport à ce qu'elle accepte et on
va dire
donc on va dire quoi on va dire data
point map je te ma
oui je n'ai pas précisé mais pour écrire
dans nos dans nos composants là on peut
écrire n'importe quoi tant défaut quand
même que je vous montre si j'avais des
constats
et l'eau sept lots non va faire juste un
petit texte qui dit elle au
youth states on va dire bah tiens toi tu
dis hello n'ont guère aidé les amis sera
un peu plus parlant est bien fait henri
acte dès qu'on veut parler d'eux dès
qu'on veut faire durer at on nous les
accolades ont fait pas de dollars
accolade commun javascript on fait juste
accolades des par exemple on dit l eau
et là regardez ce que ça fait et ça me
dit elle les a mis d'accord donc on a eu
ce brin de citer la variable comme ça
mais on peut aussi faire une ternaire et
on peut mais aussi balancé tout
javascript pouvait en fait en quelque
sorte un bon ça c'est pour vous montrer
qu'on peut afficher les choses comme ça
et donc là pour lancer mon map eh ben
j'ouvre des guides et des accolades
et jeudi data
point bas peut partir de là je lui
disais comment je vais appeler chaque
élément du helmand on va dire en un
contre un
et qu'est ce que tu vas faire de chacun
de ces éléments vas tu vas me faire
tu vas me faire un lit par exemple
et on va on va dire tu vas me faire
country point n'est maintenant c'est
papy sable pas comme ça patrick
c'est country
preneur countries donc c'est là qu'on a
notre notre state on peut le consulter
en temps réel
et non mais là plus c'est un nom il ya
un nom particulier parce que
ça s'appelle oui parce qu'en fait il ya
une sorte de traduction
s'est construit
point name points
annoncés sans traduction suit la vaccine
on avait transmission peut faire
contrepoint transmisssion ce
qu on three points transmisssion ce
point fr à point common
c'est rapide
bon vocable de faire mon cou three
points trans et ssions et fera common
est ce qu'on a réussi à se booster nos
deux cent cinquante pays le suspense non
alors j'ai du mal à écrire un truc
là il me dit que chaque élément d'un
d'une liste doit avoir une clé unique ça
c'est pour pouvoir après dé manipuler
ces éléments en ré l'acte mais c'est pas
ça le
ça ça pose pas enfin c'est pas bloquant
en soit
je vais vous montrer comment il faut
faire dans quel fait il faudrait se
placer dans le lit il faut dire bête
attends je vais te donne une clé
est la clé c'est country par exemple
donc toujours égale accolade vous
pourrez dire
country point name chacun chaque pays a
un nom différent donc vu qu'il faut
qu'ils aient tous une clé unique je
pense que country point n'aime ça
fonctionnerait
dans la poterie point n'est que tout
court ça marcherait pas parce que
ça suffit pas il faut dire qu'au matin
pour accéder à sa dans la base de
données
ah non mais il ya des pays et depuis qu
il est piquant même nom forcément il
fallait que il fallait que ça arrive
alors si on trouve pas d'aller dit comme
ça ce qu'on peut faire on peut lui
donner enfin ce qu'il faut c'est donne
une clé qui soit unique à chaque élément
qui va lister nos le map en fait si on
n'a pas d'éléments comme ça parce qu'on
fait c'est qu'on fait un index oui le
deuxième paramètre index est donc
évidemment le premier élément ce sera le
02 03 et donc il ya eu le le 10e ce sera
le 1 le troisième ce sera le 2e etc
et donc on va lui dire bellac laisser
l'index on vend aux index ai vus pour
compte et il va compter de 0 à 250 mais
c'était pas ça le problème j'actualise
il en a plus problème de clefs
cependant il veut quand même pas nous
afficher nos lits
mais je crois que c'est parce que j'ai
mis un s la regardons
ouais c'est mieux ok bon ils sont en
flex ils sont tous scotchés recrutant
flex ils sont en fait ce drapeau est ce
pour ça qu'ils reviennent à la ligne
voilà réussi à lister nos deux cent
cinquante pays oui d'accord j'ai fait
une faute de frappe mais ça que moi dans
mon modèle final j'avais pas utiliser
des mots et noms français monsieur dans
la pays propose de nous en france elle
en cotant autant profiter par contient
pas le nom de capital n'est pas en
français c'est un peu particulier mais
on n'a qu'à dire qu'on fait comme ça
toujours est il que
toujours utile que
je vous ai quand même dit que
on allait faire des composants un coût
des composants particulier et juteuse
expliqué qu'un schéma
alors qu'on comprenne bien comment ça se
présente l'arborescence décompose en a
le composant le plus haut possible notre
application on sait bien le ap
ensuite dans about on a bien appelé de
composants ok bon tout ça c'est facile
vous êtes un peu compris que ça marchait
comme ça donc appuyé l'appel homme comme
lui l'intérieur il ya trois composants
la navigation logo countries
aidant countries ce qu'on va faire
baisser qu'on va lui aussi on va lui
aussi lui faire lui appelé un composant
c'est un peu comme un composant en
france leurs composants qu'on appelle à
l'intérieur de l'anneau de composants et
on recommence on va se liste est la
logique de toutes nos cartes on va
solliciter une seule fois la logique de
nos cartes et bien sûr le map va les
multiplier
sauf que il y a un problème et c'est ce
qui va nous emmener à une notion qui est
très importante aussi en ré accélère ses
les props c'est à dire que le le
countries notre compte risque y est
enfin lui le cart plus tôt eh bien il va
falloir qu'ils connaissent les données
de pays diouf a reconduit parce qu'on
passe à carde les données du pays et car
il va pas les connaître de base eh bien
ça en fait ça s'appelle une propre en
react en fait un élément un un composant
parent peut passer ces données les
données qu'il veut à un composant
enfants d'accord voyez c'est pour ça que
j'ai mis des flèches comme ça ne sont
pas anodines ces flèches ça veut dire
quoi ça veut dire que tant qu'il ya deux
parents enfants on peut passer les
données par contre un enfant qui a des
données il peut pas les redonner à son
parent d'accord et ça ça peut donner des
blocages alors bien sûr nous dit c'est
bien qu'ils aient des solutions mais là
on est dans du rac qui est bien plus
évoluée ce sera se sera vu beaucoup plus
tard ce sera même pas vu dans la partie
ii se sera vu encore plus loin que la
partie 2
donc pour bien comprendre ça il va
falloir que countries donne ces données
aux cartes qu'on va lister ok donc je
peux refaire mais mon petit truc
alors ce qu'on va faire ses courses crie
un composant card
on va dire card points
jsr s c est donc lui il aura la logique
d'affichage d'une carte donc on va dire
c'est un lit qui a la classe card
d'accord et puis oui aura le drapeau
d'un côté or le drapeau on va par repas
encore sera parcours se remplir tout ça
on va juste essayer de faire apparaître
les choses donc j'ai tout bien une div
info les données des pays et ce sera d
age 2
dans lequel on mettra le nom du pays
d'accord on va juste faire ça comme ça
le but d'abord de faire apparaître ce
composant est de lister 250 fois c'est
ça la première étape donc notre map au
lieu de dire l'image un chouette non on
va pas faire un lit
et un défaut quand même que je récupère
non mélodique sur son fou on va faire
comme ça on va dire ok eh bien tu vas me
lis tes
gardes donc oui on va prendre ces
données et il va jouer mais autant de
fois qu'il faut par contre le tabac en
fait c'est ça que ça fait un map 1 absa
parcours autant de fois que vous voulez
un tableau là il ya 250
énumération b va te faire 250 fois il va
le chercher ce composant 250 faut
il me dit que j'ai toujours pas la clé
ah bin là j'ai réussi à lister oui oui
parce que il faut quand même savoir que
au début un accueil et drapeaux et
éventuellement la les infos over
d'accord c'est comme ça que ça tu
affiches c'est over qui s'affichent les
infos c'est à dire que la partie
la partie que j'ai nommé
cette partie là info en fait aidé en
display en opacity 0 et quand on survole
la carte elle passe en opacity 1 voilà
c'est tout c'est juste ça le petit truc
css
donc c'est pour ça que l'on voit rien
mais on a bien non du pays dont du pays
non du pays donc bon c'est pas dynamique
il a écrit rendu renom du pays à chaque
fois donc il me dit déjà que ichaï d'une
liste shoots avant l'unique kiprop ok si
tu veux le clé unique
si tu veux une pièce unique mon ami mais
tu vas prendre l'index
enfin ce soir qu'on peut aussi passer
une clé vraiment unique si jamais on est
sur une base de données
d'utilisateurs ou d'articles et que par
exemple on a un truc cette belle
'article point heidi un édile unique à
chaque fois mais là on n'a pas le mandat
il dit donc on va faire un index
d'ailleurs je vois pas de chez caissier
en haïti mais c'est bien nous apprendre
aussi qu'on peut faire un index
ok donc la map le message d'erreur
maintenant je vous ai dit qu'on a un
composant enfants qui est card qui est
dans countries ce composant enfants
les composants entre eux ils ne
connaissent pas les données d autres par
contre il peut se dépasser entre le
parent peut lui passer un enfant donc si
on veut passer les données on va faire
ce qu'on appelle une propre on va dire
je vais appeler
les de la donne et que je te passe je
l'appelle country et qu'est ce que ça va
être cette donnée là eh bien ça va être
ce country là c'est en gros le country
c'est un nom générique un qu'on donne à
chaque tour de maps dont je me rends
compte que c'est un peu compliqué quand
j'explique mais c'est la pratique en
gros country qu'on soit bien d'accord
c'est voyez là vous pouvez les laisser
les clés la convainc qu'on a à chaque
fois bon c'est pas ça je vais vous
montrer ce que je veux montrer steak
country
est dans countries as il me dit encore
rudik kiprop donc soir ça c'est bon faut
que tu as lease est peut-être un groupe
country c'est chaque tour de boucles
country beau tour de bouc numéro zéro
basse et c'est ce pays là autour de bouc
numéro un c'est ce pays là donc en gros
nous lui passe vraiment toutes les
données de chaque pays individuellement
des deux des deux cent cinquante pays
mais c'est à chaque tour c'est ça que ça
fait le maps va lister 250 x card c'est
ce qu'il a fait là là il a listé 250 x
card sauf qu'à chaque fois on peut lui
passer b donner à chaque fois du pays où
il en est donc on va dire que je te
passe country
ok donc on lui dit composants card tu as
une clé unique bien sûr pour chaque pays
donc attendez cij actualisé ce qu'on a
tous le message d'erreur non la plus le
message d'erreur d'envoyer des fois faut
actualiser on a bien la clé unique pour
chaque élément ça ça peut être utile
pour mettre à jour ou pour supprimer des
éléments réac il a besoin d'avoir un
heidi unique pour chaque élément ok mais
surtout ce qu'on veut c'est récupérer
construit ici et ça on peut se récupérer
ça on peut se récupérer regardez plutôt
sillage des props
alors propre c'est le terme générique en
vrai elle a pris un moyen d'aller plus
vite mais je vous montre au moins à quoi
ça correspond donc je lui log the log
props
et donc il va bloquer 250 fois
chaque tour de boucles voilà oui il m'a
fait 250 console log
deux hommes
de chaque pays
sauf qu est le propre on n'est pas
directement à l'entrée des données en
fait si vous voulez être à l'entrée des
données du pays lassés république c'est
quoi ce soit public trinidad et tobago
et bien
il faudrait faire preuve ce point
country la wii là effectivement on
aurait on serait à l'entrée des deux
cent cinquante pays voyez là on a à
l'entrée de 150 pays donc bien sûr à
chaque fois on passe une donne est
différente et donc le console og ils
jouent les deux fins à chaque
énumération du map l'oncle et 250 fois
que le map et du maire ça ne voit
console longue et donc si vous
connaissez un petit peu javascript vous
n'êtes pas sans savoir qu'il y a
il ya une façon de déstructurer sens on
pourrait juste dire country et en disant
juste contre yb 1 on accède regardez là
si je blogue country
on accède directement à preuve ce point
country en fait en faisant comme ça donc
il faut mettre les accolades ici pour
déstructurer
en déstructurant comme ça là on accède à
la donne et qu'on veut et c'est comme ça
que un composant parent en transmet ces
données un composant enfants là je
voulais montrer l'exemple pour le map
mais il y en a vraiment une envie énorme
en cas d'usagé d'accord
et donc voilà ça nous liste chaque fois
des données de chaque pays donc
maintenant les photos ici on dit country
point flag ça nous donne le drapeau
sylla etc bon là si on revient du
javascript assez classique dire que
maintenant l'un et dans chaque tour de
map donc on va faire une balise img ici
jusqu'au début on ne voit que le drapeau
du pays et lee mg ça s'appelle country
point flags point svg c'est le drapeau
on peut réécrire drapeau et le nom du
pays
je fais chier ce qu'on veut vraiment se
faire ça
donc si on veut s'écrire drapeau
et le nom du pays il faudrait se mettre
comme ça
on pourrait la drapeau plus c'est quoi
le nom du pays c'est
country
point
j'aimais je m en anglais le vent tourner
et on va le faire bien parce que
c'est country points 37 chaînes ce point
fr a point comme anne voilà c'est
beaucoup plus court ok ok donc l'affiché
drapeau est par contre si jamais cela
sources étaient pas bonnes
regardons
regardons l'alternative voyons un
drapeau cubain drapeau guadeloupe
drapeau grèce donc là pour les non
voyants on a vraiment un truc très
accessible et même pour les robots de
google bien sûr qui référence les images
c'est que c'est grâce à la lutte qui
référence les images et donc là on a une
acte qui est dynamique d'accord ok bon
ça c'est grave ça reste javascript
classique mais bon ça fait quand même
pas de mal d'en parler ok on a réussi à
afficher tous nos drapeaux
et maintenant il faut mettre les données
dynamiques du pays donc j'avais dit quoi
joli capital donc il faut payer d'abord
donc non du pays bas il est l'âme du
pays c'est tout ce truc là
ok j'enregistre voir si on a dynamic man
le nom du pays martinique grèce où elle
loupe ok c'est bon ça fonctionne
bermudes danemark on est content
ensuite on avait le la capitale donc
c'est country point capital la capitale
dans le tableau
ça fonctionne
et enfin pour finir on avait
la population vous avec les pop comme ça
et là il nous faut donc la donne et
dynamique de la population
country point population donc vous voyez
que
on est dans du de l'html en quelque
sorte un même si c'est du vieil 6 et
qu'on peut intégrer extrêmement
facilement et rapidement
des données dynamiques des données donc
qui sont vénérés comme ça et
dynamiquement là on a la logique de 250
cartes elle était codé une seule fois et
le composant il a rappelé 250 fois
regardons voilà ça marche par contre les
le chiffre là n'est pas optimisé on va
faire un séparateur de milliers pour
faire ça on va dire points to look elle
string tout simplement
hélas hélas voilà ça fonctionne on a un
séparateur de milliers
ok
bon ça c'est du javascript mais non
enfin si vous avez souvent figuré script
surtout avec moi vous avez quand même
déjà vu cette cette façon de faire quand
on fait des maps quand oif et chez les
choses ensuite on fait des maps ben là
c'est la version react c'est une version
un peu sous stéroïdes un petit peu
améliorée mais bien sûr ça permet aussi
de faire beaucoup beaucoup beaucoup
d'autres choses à l'interface de
réacteurs comme ça maintenant on va voir
comment trier comment trier les choses
n'en voit on peut vraiment faire
beaucoup de choses particulières on
verra aussi dans la partie numéro 2 donc
par exemple la le h1 et dégagent pop et
maintenant on va donc ce qu 17,7 grande
barre pour trier là
donc c'est un duel
c'est un duel
qui a la classe radio
conteneur
à l'intérieur il ya une poutre de type
range donc on va d'abord faire ça en
premier d'accord on va pas s'occuper des
continents pour l'instant on n'a pas
besoin de name
notre une poule et qui pointe on n'a pas
besoin d'aller dit spécialement non plus
faut juste dire qu'il démarre au minimum
à un link ou de type range
et que au max il va à 250
c'est à peu près tout genre j des genres
un peu ce que ça donne
ok il est là il va de 1 à 250
et donc moi ce que j'aimerais bc affiché
que le nombre de pays
de pays déterminés
et donc pour faire ça pour ce faire
je sais pas si vous connaissez cette
méthode très pratique la fameuse méthode
slice
pourriez un truc qui s'appelle il avait
dû importer un truc sans faire exprès
hop je l'enlève
du cool en amap et si on veut limiter le
nombre d'affichages à un certain nombre
est bien on à la méthode slice donc
avant le map on peut se mettre comme ça
si on que sur les espaces ne compte pas
c'est tout est compilé quand tout est
compilé tous très rapprochés donc
messieurs mais qu'elle banalise c'est
mieux représenté 6 pas d'un fusil slice
tu coupes à partir de zéro dans le
tableau à partir d'éléments 0 et tu me
garde que cinq éléments bien regarder
il m'a gardé que cinq pays
ok si je lui dis abder quand
j'enregistrais oui que le seul schéma
puis nous envient côte à côte mais vous
inquiétez pas quand on va rajouter
d'autres trucs pretty or je sais qu'à
priver le mettra lui sera plus
présentable si je lui dis tiens 0,15 eh
bien il me met 15 pays donc le slice on
voit comment ça fonctionnait bien ce
chiffre là qui nous dit le nombre de
pays qu'on veut
on pourrait
essayer match une valeur dynamique comme
par exemple ce qui est tapé dans l'oeil
tout
comme la range value par exemple on
pourrait appeler ça comme ça donc là il
connaît pas à la rendre value l'on voit
screen variable ici on va dire qu'on se
range value donc la seule façon de
pouvoir changer la valeur de ce chiffre
donc on va se lie c'est qu'on va couper
c'est de faire un cette rage value donc
bien sûr c'est un use state c'est comme
ça que lui il s'occupe de les gérer dans
son état et on lui dit tiens tu vas
partir à 36 on veut 36 pays au début
pourquoi 36 puisque c'est un multiple de
12 etc et multi l'eau douce est beaucoup
plus pratique quand on veut afficher
beaucoup de choses c'est un truc que
j'explique c'est souvent parce que 12
est un multiple de 1 2 3 4 6 donc voilà
c'est assez pratique
c'est juste pour qu'en fait dans les
pays tombe en bas là ici défaut appuyé
pas que ça tombe pas n'importe comment
encore que là ça va il ya des cas où on
peut vite tomber sur les sur n'importe
quoi donc
on a créé à voir le value
c'est ça et donc on dit maintenant tu
slice entre 0 et rendent value donc là
j'ai mis 36 où il va s'il a 36 pays
j'imagine que oui voilà bon il ya à peu
près 36 on va pas compter aussi la cise
par la cie la cid de côté et si de web
os x 6 par six
donc maintenant y'a plus qu'à modifier
rendre value via cette rente value et ça
modifiera instantanément ici parce que
c'est ça qui est fort et crée acte c'est
qu'ils surveillent en fait en permanence
l'évolution des variables donc s'ils
rentrent value évolué vu que c'est dans
l'état du composant eh bien il va
réussir à tout faire bonne à tout faire
évoluer sans qu'on lui dise pas grand
chose au final
donc notre niveau de type frange on peut
lui dire que par défaut
donc ça s'appelle default value faut pas
maître valliot tout court ce qu'on va
lui tout court en fait ça nous
empêcherait de modifier il faut mettre
default va lui aussi tout démarre à bas
s'est rendu van houten valeur par défaut
est maintenant sous les roues d'un
événement il faut dire input quand tu
changes unchanged on peut dire eh bien
le all-in tout ça marche aussi mais
c'est correct c'est plus dû au challenge
eh bien tu me modifie tu me modifie la
valeur dur la valeur de range valliot et
cette valeur-là en évoluant eh bien ça
fait que les pays vont être seul c'est
plus ou moins donc regarder plutôt à
quoi ça ressemble comment avez-vous un
événement react et bien on se place dans
la balise on bouge pas on bouge pas de
la balise en fait tout se passe là on
est bonne chez ge
wang chen mettant savez c'est un
événement cidre à chaque changement
jamais tu fais quelque chose
je récupère le e le lives et je vais le
log est
ce que l'on peut pas faire une poutre
enfin le nom mondine coup-de-poing value
ça marcherait pas ça marche pas en reste
c'est un truc que vous êtes beaucoup à
apprendre javascript en réa qu'il faut
récupérer l'événement d'accord john shen
g dans ce blog l'événement au caire on
voit ce qui se passe à l'intérieur alors
dans une vie de la console donc je bouge
d'input up et ça crée un événement
ok donc si on a event point target je
pense que vous connaissez si on veut
savoir ce qu est la pèlerine toute fin
la valeur en tout cas qu'il a c'est
yvette - target point ta ta ta ta ta on
se croit dans ce chrono scroll pour un
vent
doux nom acide au dessus lavalloise
number dans une section fait que pour
être à 4 moins values ont là aussi mais
je vois pas valu à m
non mais c'est bizarre beau jeu c'est
que ça marche le matin des points
maillot vert en tout cas c'est comme ça
qu'on fait donc du coup si on lui dit
l'aude - e point target pour value c'est
du grand classique
des jeux nettoyer la console et là il me
log à chaque fois qu'est vainement
déclenché il me log la valeur de ce
qu'ils appellent à une poutre en moi et
je suis tout en bas j'ai un tout en haut
j'ai 250
hockey et donc
et donc qu'est-ce qu'on a besoin de lui
dire maintenant à la place de consoles
blog on va juste dire
cette range value
comme ceux ci et ou lui passe le point
target pouvait se dire que rand value va
évoluer va passer de 36 à 12 par exemple
est donc ici le slice au lieu d'avoir
0,36 yvan à 0,12 par exemple et voilà et
là on a réussi à créer cette petite
interface à la réalité ça prend ça prend
vraiment deux minutes à faire une fois
qu'on a l'habitude et voilà on a notre
interface voyez là j'ai un pays
et on peut citer tous les le nombre de
pays creux de façon instantanée bien sûr
n'a jamais besoin de repasser par un
serveur c'est nous qui coupons les
choses c'est nous qui en feront en fait
on demande une fois les données aux
serveurs après en fronton on peut faire
absolument tout ce qu'on veut que les
données on peut les manipuler comme on
veut et donc voilà
allez on va finir cette première partie
avec encore un truc un poil plus
technique enfin même bien plus technique
mais bon vous vous présentez ces choses
là après une fois qu'on laissait ces
choses là et c'est pas beaucoup plus dur
là je vous avoue que les inputs de type
radio ça va vous paraître un petit peu
barbare comme façon de faire
mais c'est comme ça qu'on fait donc je
vais vous montrer quand même alors tout
d'abord vous féliciter nos une politique
radio donc là on annuel avec d'abord une
politique prendre j'ai ensuite là on va
créer des va se créer on va d'abord se
créer une base de données avec nos
impôts de cette radio colvin pour vous
compreniez en fait donc si je mets une
poutre de type radio
et donc avec son label avec son label
voilà vous dire html fort par exemple
afrique parce que c'est ça qu'on va
chercher à faire c'est à lister les
continents et laon mais heidi
afrique ok
si on fait ça il va falloir qu'on se
liste cinq fois il put label input label
il boucla belle sauf que l'interface de
leurs actes elle nous permet
d'automatiser tout ça vous voyez les
poutres radio il est là c'est écrit en
noir soir noire à mon avis c'est pour ça
c'est pour ça qu'on ne voit pas le label
met toi bien qu'il est il est par là
donc c'est pas comme ça qu'on veut faire
on veut pas se répéter cinq fois ça pour
lister tous les continents
ce qu'on va faire il faut savoir que la
litté continent elle est dispo tient sur
deux composantes
si on va dans ce composant
countries
fameux mode à monter dans les cars de là
donc les continents il faut savoir
qu'ils sont là mais c'est un tableau
c'est un peu un peu bizarre parce qu'il
ya peut-être des pics sont considérés
comme ceux sur deux continents j'imagine
que la turquie pourrait peut-être
considéré comme sur deux continents donc
toujours est il que
quand il est comme ça avec un s donc il
va falloir accéder toujours au alors et
numéro zéro pour après avoir accès aux
bons trucs comme ça c'est plus tard que
je vous le dis en tout cas nous reste
liste est donc le nom des pays avec la
première est majuscule comme ça n'aura
pas de problèmes de casse et on sera
tranquille donc d'abord en référé une
base de données petite base de données
donc là on n'est pas obligé d'utiliser
le yoo state on peut utiliser
tout simplement une variable en
javascript classique
on va faire un tableau donc on va dire
premier continent c'est afrique à ce que
ses écrits en anglais après ces
américains ont les deux amériques eux
seront ensemble
asia et le dernier non c'est d'abord
europe après océaniens
océaniens
donc on a un tableau avec cinq éléments
qui sont les chaînes de caractères
jusque là rien qui vous paraît fou ce
qu'on va faire c'est que ce radio on va
le map et on a l'habitude amap et ce
truc là premier élément bain ce sera
africa fin ce sera un map de à chaque
fois de ce trade mais au moins on n'aura
pas d'autre de se copier les inputs et
toute logique en fait un retour on va
tous codé qu'une seule fois que je vous
montre ans mais ici on dit attention je
prépare à faire du javascript donc je
sens les accolades et là je veux dire
mais radio ça c'est la classe ou
hystériques à ce
point map donc chaque élément individuel
je vais appeler ça un continent
d'accord c'est roux un nom bien sûr qui
parle
et là qu'est ce que tu vas me faire tu
vas me retourner un lit
un lit dans lequel il y aura quoi il y
aura un hymne foot est un label sauf qui
va le map et il va le map et cinq fois
ce truc là donc il faut juste dire que
dans la wii dans la balle on voyait pas
ce que je vais pas écrire intérieur tout
à l'heure donc là par exemple
désolé donc là par exemple on va écrire
continent
on referme comme ça
donc dans l'aï dit
c'est pareil on va écrire continent sont
la seule donnée qu'on a ces continents
il a besoin faire continent point
quelque chose puisque c'est une chaîne
de caractère qu'on a donc juste en
disant continent ça va nous lister tous
les éléments
et la continent
regardez ce qu'on vient de produire la
henriade tendance à
regarder bien et bien envers ceux listés
5
input connecter avec leur label ils sont
bien connectés
ont par contre faut qu'ils aient tous le
même temps ce que l'input de type radio
l'on peut tous les coachs et parce
qu'ils sont pas tous liés par leur part
leurs bâillements fait donc si par
exemple on leur dit que tous les inputs
ils ont le même nom
on va l'appeler pardon continuant radio
c'est ça le nom de le nom d une petite
radio mais là on ne peut de plus qu'en
cochet qu'un vu qu'ils sont ils sont
liés voilà voiliers qui sont liés tous
ensemble à logoualé ce navet mille
éléments brève le code n'a pas été plus
long que ça sorte c'est toujours le même
truc donc vous voyez un petit peu le la
logique de react on peut balancer
enfin si oui qu'est du code qui se
répète en fait vous pouvez lister les
choses la seule de la seule différence
qu'ils avaient saisi une poutre c'était
le label qui changeait de nom on met
tout dans un tableau et puis comme ça on
connecte lydie l'aï dit avec lâcheté ml
fort donc html fort c'est juste pour
dire fort d'accord qu'on se met d'accord
c'est le fort en html sauf qu'en react
il faut dire html forte comme on dit
claes name d'accord ceux des petites
différences
et donc on s'est dit et deux continents
donc maintenant et bien
faudrait
faudrait éventuellement se stocker
qu'est-ce qu'il faudrait se stocker b
quand l'utilisateur clique sur océanie
par exemple et de conte se mettre dans
une boîte la valeur de océanie d'accord
donc on peut se créer une variable tout
là-haut dans le dans l'état qu'on va
dire
selected radio donc la radio sélectionné
toutefois cette trouée des noms qui
parlent même si c'est long à écrire et
bien votre code il sera beaucoup plus
simple à comprendre et c'est comme ça
qu'on veut donc on part sur un new state
par exemple de guillemets vide pour
l'instant erignac est sélectionné en
selected radio
maintenant mais il faudrait ajouter un
événement sont les inputs et donc la vue
qu'on les listes cinq fois bon on peut
ajouter cinq fois le même événement ici
sac est trop bien c'est que là je peux
dire bête au challenge à chaque
changement
tu vas me récupérer le eu
est ce que tu vas faire c'est que tu vas
passer à 7
selected
radio
qu'est-ce qu'on va passer mais la valeur
de la i10 vu qu'ils ont tous un heidi
qui est le nom du continent c'est à dire
que là dedans
oui dans luz dans ce lieu où state on va
passer soit africa soit america soit
asia soit europe soit enseignant et donc
comment ça s'appelle ça ça s'appelle e
point target
points et dix éléments clic et je vais
tourner dit voile et là ça m'a tout bien
la ligne pour ce soit mieux représenté
donc maintenant allons dans compo note
on se place sur countries c'est ce
composant la voyez qu'il a le state
d'abord de tous nos pays et ensuite il a
un state du nombre de trucs qu'on veut
afficher regardez là si je monte et
démonte à 135 le state et enfin un
dernier state qui est belle si on clique
sur africa
ça marche pas
et america non plus ok bon ça fonctionne
pas notre événement ici puisqu'on a pas
à dire en fait on a juste passé la
valeur ah non non la passe à glg m'y
attendais ah oui j'ai mis sélectif value
l'accès radio c'est ça quand on parle en
même temps qu'on écrit c'est un peu on
s'embrouille vite voilà sept selected
radio
alors vous voyez comme je vais remarqué
ça je le remarque et parce que mon
élément il était grise et donc oui quand
vous utilisez des variables mais que
voulez que c'est grise et ça veut dire
qu'on les utilise pas ailleurs dans le
document et donc si on utilise par
ailleurs c'est qu'il ya un problème
parce que j'ai fait en sorte qu'on
utilise d'ailleurs donc comme ça on peut
se rendre compte aussi
on peut se rendre compte de
des problèmes qu'on a commencé des
choses qu on développe aussi avec
l'habitude ça croyez pas que ça vient ça
vient comme ça en claquant des doigts
bien sûr c'est beaucoup beaucoup
beaucoup de pratique aucun secret que la
pratique donc du coup je me replace /
countries ici donc je rappelle que fut
dans kung fu nantes saint leu le fameux
plug in direct des blues
et là si je clique sur africa voilà j'ai
africa qui s'affiche l'ag américain l'ag
asia europe au sérieux ça fonctionne
voyons comment la logique de nos labels
ont la paramétrer avec ce bout de code
donc la prochaine fois que vous aurez à
faire si peu cheap radio que vous aurez
juste vous aurez juste à venir c'est
tout vous avez rien d'autre à faire
y'a rien à faire de plus
d'accord
moi même j'ai appris que j'avais appris
ça on regarde une vidéo d'un mec très
longtemps et b après je le bund que je
l'avais chez moi et dès que j'avais
besoin de réutiliser des radios en ré
actes eh bien je m'en sers aller
chercher pas inventer quelque chose
maintenant je pense que je pourrais le
faire de tête mais on sait jamais ce
qu'on aime bien faire des copier coller
d'utiliser du code captcha marché cédées
c'est pas mal ok donc on a réussi à ceux
stockés dans cette selected radio on a
réussi à se stocker
le nom du continent que l'utilisateur
veut voir
donc
et bien avant le bape
après le service on pourrait dire mais
attends tu vas faire un filtre
au nom même avant on peut maintenant
faut même le faire avant le slice
avant de couper 1 on va le faire le truc
on va le faire à ce niveau là
donc attendez la torre à la ligne
automatiquement parce que là c'est un
peu le bordel donc on va faire un filter
avril à chaque élément individuellement
j'appelle ça un country
est pour l'instant offert nul ça c'est
juste voilà loin comme ça on est bien
implanté donc d'abord en filtre à prions
couple ce qu'on veut garder et après on
affiche
c'est ça la logique défavorable
franchement si vous êtes allé dans un
vaste crypte ça vous est pas totalement
étranger ce que je montre donc le filter
comment il va marcher eh bien
on va dire on va dire quoi on va dire
qu'est-ce qu'on va dire
il faut dire est-ce que country point
continue donc là vous dit qu il fallait
que saidal éléments 0 de continence donc
accroché 0
est-ce-qu'il includes basse que
l'utilisateur veut voir donc selected
radio est donc là ça veut dire quoi le
fils très bien il va filtrer tous les
éléments qui correspondent à ça dans
tous les pays qui auront comme continent
africain et bien sûr ils vont passer le
fils tripp ils se retrouveront au niveau
du slice
c'est ça que ça va faire a battu vous
voyez on était déjà sur africa et donc
on a immédiatement vous n'auriez pas
tous les pays africains voilà tous les
pays africains si on voir tous les pays
d'océanie b c'est pareil la brique à la
dpi de 2300 personnes 1400 personnes qui
dit mieux voilà
et l'europe nos principes laulan à tous
les pays d'europe on peut réduire
et voilà on a réussi à coder cette
logique d'affichage deux continents vous
voyez un peu les interfaces la puissance
qu'on peut faire comment on peut coder
des choses avec react comment on peut
avoir un site ultra dynamique avec une
navigation tout aussi dynamique
en ce sens que quand on change de page
le composant se démonte la le composant
countries in ait pu monter d'accord donc
là je reviens il va devoir refaire une
recherche quand même malgré tout faux
comme qu'il fasse une recherche si
jamais on change de page par contre tant
qu'on reste dans cette page là c'est bon
le les données dont les arrêts ont été
stockés il n'y a pas de souci on peut
exploiter
et voilà ça fonctionne ça fonctionne on
est content
qu'est ce qui nous manquait troisième un
truc qui me faisait dit ah oui on
pourrait classer les pays quand même du
plus peuplé au moins peuplé parce que là
c'est un petit peu arbitraire
donc ce qu'on pourrait faire on pourrait
faire en sorte avant le filtre avant ou
après d'ailleurs ans c'est la même chose
on peut lui dire dans d'ailleurs cette
lumière pratique de le faire après le
sorte parce que si on mettait avant le
sorte il fera un sorte de 150 pays alors
que si on lui dit après par exemple s'il
tombe sur un continent comme le sony eh
bien il fait un sortent plus que sur 20
pays donc c'est en sorte qu'ils aient
plus rapide à faire donc ses meilleures
pratiques de le mettre ici d'abord ils
filtrent après itri après ils coupent
d'accord parce que si coupet avant le
filtre ils sont un peu faussés et a pris
la fiche il voit l'un vraiment tout ce
qu'on peut faire doué d'un tableau
comment on peut manipuler un tableau
donc sorte ça prend deux paramètres
c'est a et b
et donc si on lui dit b - à sa tri en
décroissant le problème c'est que c'est
des objets donc b - ah ça suffit pas
folle rb point population
- appoint
population
la wii là ça fonctionne
donc le nigeria voilà c'est bien le pays
le plus peuplé d'afrique et ainsi de
suite par contre j'ai vu qu'il y avait
un bug dernière fois je sais pas
pourquoi sans l'algérie
et ce qu'il dit toujours ce blog il ya
toujours un blog sur l'algérie à cinq
cent dix mille personnes
bon après c'est la base de données qui
fournit donc nous n'y est pour rien en
tout cas bon la donne et la base de
données si on l'est plutôt plutôt fiable
en tout cas j'ai rien remarqué à part ça
et donc voilà on a pris un dernier
dernier truc qu'on pourrait faire et
après c'est fini vous promet pour cette
première partie il ya un dernier truc
qu'on pourrait faire c'est arrêter le
le l'input de type radio l'a arrêté le
filtre
parce que là vous voyez que on peut plus
revenir à tous les pays du monde
d'accord donc si on voulait revient à
tous les pays du monde il faudrait faire
quoi
eh bien regardez comment on pourrait
créer une interface très très facilement
react alors après l'hypothétique filter
il est où une politique tout ça on va se
mettre là il en reste créé une petite
interface on va dire est-ce que selected
radio
il est roux c'est à dire est-ce qu'il ya
quelque chose à l'intérieur
est ce que quelqu'un a cliqué sur africa
sur au cnrs de base des guillemets vide
sans renvoi falls d'accord donc en gros
en javascript je situe sous le nom comme
ça ça veut dire est-ce que ça c'est roux
d'accord
et alors ça veut dire que tu ma fiche ce
que je vais te mettre non
je vais faire comme ça c'est pas nous
embêter alors là tu vas me crée un
bouton pour annuler la recherche
regardons annulé la recherche vous voyez
je clique willin forcément espace rien
n'a pas encore quelle est la logique
mais par contre regarder si notre page
on est et on partait de rien regarder à
lui la recherche on l'a pas dès qu'on
commence à taper sur europe paf annulé
la recherche il apparaît pourquoi parce
que c'est l'équipe de radio il est
devenu trop est tous assez surveillé par
le state tous assez surveillé en haut
lieu du composant il ya rien à faire de
plus que ça il surveille en temps réel
en fait ce qui se passe sur la page il
n'y a pas de relancer des fonctions le
faire si faire ça non il surveille donc
ça veut dire quoi c'est dire si ces
liquides radio être ou alors tu affiches
d'automne c'est comme ça qu'on dit henri
acte mais vous verrez dans la seconde
partie qu'on fait des trucs encore plus
encore plus techniques qu'ils ont à dire
sur le sur le dom des choses qu'on peut
afficher sur le dom et donc
on va faire
bottone
onclick on va lui ajoute un événement
quand on te cliquer dessus le bouton
qu'est ce que j'ai vécu face au ballon
on peut balancer une fanfare fléché
comme ceux ci
bien tu vas mettre selected
7 selected pardon
tu aimais peur ils mettent pas de taper
cette sélection de radio monsieur les
poches des guillemets vide et salue la
recherche et du coup ça rxh sarr cache
le bouton puisque le bouton est
conditionné à ce que ça se trouve
c'est fou
c'est fou sans react sa merveille rien
que d'en parler chez marie regarder hop
hop et là paf c'est fini hop paf a par
contre le 1 le truc il encore cochet là
ça je l'avais pas je n'ai pas vu donc on
va devoir se corriger ça en fait le lean
tous deux titres en jeu restent cochet
c'est le décroche pas donc il va faire
conditionner quand est ce qu'ils les
tchèque cz et input d'accord team
franches dans le type radio pardon il va
falloir conditionné quand est ce qu'ils
les petits actes
et après c'est fini vous premier donc
quand est ce qu'ils les tchèques tu ta
ta ta ta ta donc on a radio continent
donc ici
on va dire bah checked en gros on peut
dire trou ou fausses si on dit trou
normand ils sont tous cochés fait voit
donc que ça va faire un bug aussi le
dernier coach est en fait vu qu'ils sont
tous liés c'est forcément le dernier qui
raque iran retrouve c'est lui qui gagne
à la fin mais c'est pas ça qu'il faut
faire ce sens il faut juste dire
est ce que enfin ces check est en fait
l'or va tester une condition vous dirai
ce que continent il est égal à selected
radio
si oui va envoyer trou
sinon il va renvoyer falls et de cette
façon là
de cette façon là les jeux de chèques là
je fais à nu leurs recherches et voilà
il n'y a plus rien qui est factice y
voilà bon ça c'était la petite partie
quand même un petit peu plus technique
pour finir mais en tout cas dans la
première heure où la première bonheur
vous avez vu quand même comment faire un
site vitrine comme encoder des
composants un briquet des composants met
du style on n'a pas encore vu le style
conditionnel c'est un truc qu'on va voir
après mais on a déjà vu pas mal de
bonnes petites choses en direct je pense
que vous prenez conscience de delà de la
force du truc après bon c'est sûr qu'il
va falloir il va falloir forcément
beaucoup de beaucoup de pratiques
etc lefranc crash du futur qui vous
parle pour vous dire que la deuxième
partie de ce cours est malheureusement
payante sur j'ai beaucoup beaucoup de
contenus gratuits sur ma chaîne là j'ai
décidé de faire de cette formation react
aka deuxième partie qui était payant de
fabien partie du cours plus ensuite
beaucoup d'application beaucoup
d'exercices pratiques que l'on va que
l'on va développer ensemble enfin voyez
plutôt il ya plus de plus de 15 heures
de cours qui sont qui ont été prévus
qu'est ce qu'on va faire pendant ces
quinze heures de courbes déjà il y aura
la deuxième partie de ce cours là
donc ça va comprendre comment faire un
creux denrées axa va comprendre comment
manipuler le dom de façon extrêmement
complexe et de façon extrêmement
intéressante surtout très rapide quand
on maîtrise des choses ensuite vous
allez codé par vous même cette petite
application pour mettre en pratique tout
ce que vous expliquez donc ça c'est un
truc que j'ai déjà fort javascript que
je souhaite mes élèves eh bien il va
falloir l'adapter il va falloir
l'adapter en ré accès d'application à la
sueur des recettes ensuite qu'est ce
qu'on a on va coder un mail on reconnaît
une logique d'un email alors oui vous
allez me dire mais c'est très moche ce
projet effectivement c'est très moche
mais c'est pas ça le but le but c'est
d'envoyer un mail et que ça fonctionne
regarder lassadi messages envoyés
trouver pourquoi mais ça veut dire
qu'après une fois qu'on a collé un
template d'e-mails on peut l'ajouter à
n'importe lequel de nos sites vitrines
par exemple ce site vitrine que nous
allons coller ensemble nous verrons la
façon de coder plein plein plein plein
plein plein d'effets en reactor convenu
qu elle d'hommes à peu près avec moment
toutes sortes d'effets voyez plutôt des
transitions entre les pages bien sûr on
verra comment faire ça en réalité un
site qui ne rechargent jamais un site
vitrine parfait j'ai envie de dire à ce
titre une très belle très performant que
le robot de google adore et là regardez
là on peut effectivement la vie des
auteurs bloqués l'album ex un peu plus
joli et oui et c'est fonctionnel on peut
envoyer des emails messages envoyés et
voilà c'est parti
on ne louera également une application
où on va manipuler énormément data donc
c'est une application là qui va étudier
enfin qu'il va surveiller le marché les
crypto monnaie mais bien sûr c'est un
prétexte pour manipuler la data pour
créer ce type de graphique pour aller se
chercher énormément de données qu'on
peut trier dans tous les sens on peut se
classer les choses etc te ment comme on
veut on peut
avoir seulement un token soit
une infinité fin 250 on va pouvoir bien
sûr s'ajouter des favoris avoir une
liste avec des favoris voilà pour faire
énormément de choses aussi où ils oublié
une partie qui était sympa ce type de
graphique en survolant comme ça ça c'est
géré en react magnifiquement voilà on
vers un petit peu ouvert un petit peu
comment obtenir toute cette date à et
comment faire c'est très intéressant
qu'est ce qu'on verra d'autres on verra
bien sûr réduction un petit peu de
risque de cette partie mais on verra
regus il ya un cours de réduc mais le
court vous doutez bien que bay ça va
être un projet on va co d une sorte de
blog comme seul comme celui ci on va
pouvoir donner des like un article bien
sûr tous les composants qu'ils vont
communiquer ensemble je n'ai pas
commencé expliqué redux mais voilà qu
est-ce qui aura d'autres sur un fire
bays il y aura n'exigeait ce
voile a beaucoup beaucoup d'éléments
beaucoup de librairies fremaa motion
axios bien sûr sans plein plein de
choses donc voilà si si ça vous dit eh
bien écoutez rejoignez moi dans ce court
et puis vous montre tout simple allez
ciao