Ela_Back/Translated_Files/ytubes_K3D2rjAUQ3o.txt

3447 lines
132 KiB
Plaintext

FOR https://www.youtube.com/watch?v=K3D2rjAUQ3o
bonjour à tous et bienvenue aujourd'hui
on se retrouve les amis pour faire durer
acte est dur et actes de zéro c'est à
dire que je vais expliquer tous les
principes fondamentaux de la
bibliothèque magique de javascript créés
par nos amis de facebook
donc qu'est-ce qu'on va faire dans ce
projet parce que bon si vous connaissez
un peu mes vidéos ça dès que l'on va
apprendre en développant quelque chose
de concret même s'il y aura des petites
parties des petites parties théoriques
et ouais j'ai investi il y aura des
petits slider qui passeront à je peux
vous dire qu'il ya du budget dans cette
vidéo
donc au delà de ça on va développer ce
petit tout petit projet donc on fera
quoi ben on verra comment faire des
composants react qu'on peut réutiliser
sur toutes les pages là comme ceux comme
ce logo par exemple on verra comment
naviguer entre les pages regarder sans
aucun chargement de page puisque c'est
ce que permettent les bibliothèques et
les frais man ray script c'est d'avoir
une navigation extrêmement dynamique et
donc on verra comment faire ça ensuite
on travaillera avec une api une api qui
vous fournira des informations sur des
pays sur les pays du monde
donc avec cette api donc on verra
comment faire un appel et les pays en
réacteur verra quel point c'est facile
et c'est génial
et bien sûr on verra on utilisera un
petit peu l'interface ont fait en créant
une interface avec javascript une
interface dynamique voyez on peut
classer des pays
par continent si on veut en mettre plus
bien en plein air plus regardées voilà
europe on peut mettre je crois qu'il ya
deux cent cinquante pays
si on venus et la recherche là on clique
sur annuler sa annuler et on voit que
voilà il peut y avoir au maximum de 150
pays au de cela ils ont zéro habitants
quand même c'est pas énorme
voilà lui la 30 habitants sympa ce pays
vous pourriez être président là bas
enfin bref je m'égare
et donc d'un autre petit projet on va
donc aller chercher avec une api et
d'information on va les traiter
voir comment les afficher en faisant
quoi que en créant une petit carton
reste faire une seule fois le code de
une seule petite carte de pays et avec
ce code l'accord à coder une seule fois
on va pouvoir donner le comportement là
à toutes ces choses là donc faire un
rendu dynamique qui a rendu ou pages
extrêmement dynamique
voilà pour la présentation les annie
j'espère que ça vous a plu et puisque
maintenant on va enchaîner et on va
passer à l'installation bien on va
passer à l'installation de réacteurs je
vous ai fait une petite fiche donc si ça
vous intéresse fait un screen fait une
capture d'écran ça montre juste les
éléments à faire pour installer react de
façon simple il ya plein de façons un
scélérat que nous devons avoir c'est
vraiment pour les débutants de façon
simple c'est comment l'installer donc on
va vérifier déjà sur la note sur notre
machine on va vérifier son âne pm
logique martiaux node sait qu'on a une
bm puisque les deux sont liés ensuite on
va faire une p x km et actes ap
avec le nom du projet derrière on ira
dans le projet donc c'est extrêmement
simple donc fait une capture d'écran si
vous avez peur d'oublier
et puis j'ai mis des petites commandes
aussi con qu'on verra au fil du projet
celles ci sont pas très importantes et
en bas et les bibliothèques utile c'est
ce qu'on va télécharger derrière en
suivant pour pouvoir démarrer des
projets correctement un phare à celle au
routeur le routeur d'hommes et on va
s'installer ça c'est pour le style voilà
ce qu'on va devoir faire
donc sans plus attendre on va on va se
mettre dans google et tapez node.js
download donc si vous n'avez pas
d'autres jsc bien je vous invite les
amis à le télécharger
voilà la dernière version de node.js y
écrit includes npr donc voilà on sait
qu'ils les donnent ensemble
moi j'ai déjà et donc pour l'invité de
commande ce que tout ça bien sûr cd
commande qu'on va donner sur sur une
invite de commande
moi j'utilise commandeur comme d'heure
je sais pas comment on dit voilà ça
s'appelle comme ça qu'a d'ailleurs cndr
et c'est plutôt très pratique
voilà voilà ça se trouve ici donc une
fois que ceci est dit et bien y'a plus
qu'à mettre en place tout ce que j'ai
dit dans le petit dans le petit slide
donc d'abord on va se placer sur le
bureau on peut se placer ou amoureux et
c'est mieux que ce que c'est sur le
bureau en l'occurrence et on va tester
la version de notes moi c'est ce que
j'essaie la 12 points 18 points 3
npm ti rêvée pour tester voilà on voit
qu'on a une pme la version 6 je crois
que c'est la dernière des six points 14
en tout cas au moment où je ris la vidéo
est donc maintenant on va s'installer
react et donc nos amis de facebook
qu'ils ont créé une sorte de bunker
automatique donc je vais pas rentrer
trop dans les détails c'est vraiment un
tuto pour les débutants et après au fur
et à mesure que vous continuez à
d'apprendre et actes vous verrez ce qui
est un bonheur comment organiser les
choses etc
mais toujours est il que si on fait mpx
quite react à peu nous criait tractable
c'est un seul bonne lors c'est ce qui va
nous permettre de passer de notre projet
et voir comment ça marche et derrière on
donne le titre et on n'a qu'à dire moi
je vais l'appeler cours react voilà vous
l'appelez que vous voulez voilà et donc
le ca va s'installer tout seul et
pendant l'installation
eh bien je vais meublé alors pendant que
ça installe je voulais vous montrer un
petit cider pour vous montrer la page
principale de notre de notre projet
qu'on va développer et pour vous dire
quoi mais pour vous présenter des jarres
est acté le principe fondamental le
principe de base de réac
c'est que tout est un composant en
anglais on dit qu'on peut maintenant que
vous entendrez souvent dire sûrement
composantes mais sachez que ceux des
composants
donc qu'est-ce qui est un composant
eh bien on va avoir une page sommes
point j ai donc la page d'accueil eh
bien ça va être un composant il va
renfermé quoi il va refermer plusieurs
composants est vraiment femme et une
navigation point j s et ce composant
qu'on voit ce qu des navigations point
vieillesse eh bien on aura pas leur côté
une seconde fois quand on va sur la page
about sur la page à propos on aura juste
a appelé une seule fois d'autres
composants navigation projet ce pari
pour le logo quand on va le réutiliser
et bien on aura juste à l'appeler ce
logo on ne va pas le côté deux fois donc
ce sont des composants qui sont
réutilisables partout et là en
l'occurrence là ces deux petits
composants qui ne renferme quasiment que
du que de l'html en quelque sorte ce qui
en reste et j ai six ça renferme que du
visuel mais ensuite on peut faire aussi
des composants qui renferme une grosse
logique illogique de de fonction etc
comme par exemple en proposant card
dans lequel on va pouvoir trier on aura
une poutre anges on aura des radios des
inputs radio qui vont nous permettre de
trier et donc ce nom c'est d'ailleurs ce
n'est pas le composant card c'est le
composant country point j s et dans ce
composant country ce point j s il y a
aussi un composant donc en réalité tout
s'imbriquent les uns dans les autres
vous allez voir là c'est vraiment je
dégrossi un petit peu je vous explique
de loin et vous verrez que encodant ça
prendra un petit peu plus de relief et
je peux aussi tiens vous proposer la
structure des fichiers donc ça on y
reviendra quand on aura d'autres
criaient tracts à plat quand il aura
tout installer en revanche les
composants l'eau le composant basique à
quoi ça ressemble un composant henry
actes et bien sachez que tous les
composants se ressemblent je vais pas
rentrer les détails puisqu'il ya
plusieurs types de composants mais là on
va faire du réacteur moderne dans cette
vidéo donc je vais même pas parler de
l'ancien réaxer les choses que vous
verrez après éventuellement en
approfondissant moi je vous demande
juste comment codé en react du réacteur
fonctionnel direct moderne donc leurs
actes moderne ça se présente comme ça ça
se présente avec un apport la
bibliothèque un apport de toutes nos
bibliothèques on va dire ensuite
derrière on a le composant il faut
savoir qu'un composant retenez bien ça
c'est une fonction voilà ça a déjà si
vous avez retenu saveurs obtenu une
grosse partie des actes un composant
égale une fonction donc comment on
prenait une fonction javascript fonction
fléchier javascript moderne construit
card est égal en paramètre donc l'âge
mais propre on verra ce que c'est plus
tard bien plus tard fonction fléché donc
la petite flèche et derrière en déclame
une fonction une fonction qui se
présente comment d'abord on dit no
variable
après avoir déclaré nos variable on
déclare éventuellement de la logique
du javascript quoi des fonctions est
ainsi une fois qu'on a fait savoir que
tous les composants se partagent comme
ça donc on met d'abord des fonctions
pour éventuellement des variables des
fonctions et ensuite on fait un return
d'autres fonctions qu'est ce qu'un
renvoi elf elle renvoie toujours quelque
chose de fonction et elle renvoie
toujours quelque chose qui ressemble au
voyage de l'html eh bien ce n'est pas de
l'html les amis ça s'appelle du g6 mais
bon pour faire simple imaginez que celle
html ça marche aussi
donc voilà comment se présentent les
composants en react donc là vous voyez
qu'on fait un rang du conditionnel ça
sera notre composants card composent
qu'on encadre à la faim et à la fin bien
sûr on exporte mais vous inquiétez pas
que toute la structure de chaque
composant ce n'est pas vraiment la
connaître par coeur ce qu'à force de le
faire à les retenir
mais en plus il ya des raccourcis
d'emblée ce code qui nous permettent de
les faire plus rapidement si on revient
sur commandeur voilà on voit que c'est
terminé ça ne m'est api hacking donc
amusez vous bien les amis voilà donc là
on est sur notre bureau des stops
d'accord regardez si je me décale on
voit que là il n'a installé mon petit
fichier cours react donc si on a ce
fichier cours et actes comment on peut y
accéder plein de consoles et bien on
peut faire c'est des cours par exemple à
prêcher la tabulation il va me proposer
immédiatement un homme j'ai vu moi j'ai
plusieurs dossiers course au monde sur
mon son bureau par contre si tu es cours
tirèrent tabulation il me propose
correct
entré à présent se trouve dans notre
dossier cours react d'accord et bien là
on va faire code sommes tout simplement
on va pas plus téléchargée de choses
depuis commandeur maintenant ça va se
passer dans vs code donc en faisant code
point code espace points eh bien on
ouvre notre on ouvre notre vs code là
comme ceci ok c'est super donc si on
fait contrôler pu faire contrôler
pourcentage l'oeil et le cerveau le
pourcentage entre cammas ma machine ça
ouvre le terminal donc bon après je vais
pas trop m'étendre sur des choses
basiques comme ça parce que j'estime que
si vous commencez avec sait déjà que
c'est un bon niveau en javascript et
d'ailleurs ce n'est pas un bon niveau en
javascript je vous ai mis mon cours sur
javascript juste en dessous
vidéo et vous avez également ma playlist
javascript mais en tout cas sachez que
moi quand j'ai quand j'ai commencé à
prendre direct j'étais pas très bons en
javascript et j'ai un peu payé c'est à
dire que je connais pas grand chose donc
je vous invite vraiment à être bon en
javascript et vous verrez qu'après ça va
être ça va être hyper fluide quand vous
quand vous commencerez actes donc voilà
bon toujours est il que là on s'est
ouverte ça et on va en rester les
charger nos petites bibliothèques utiles
dont coiffeur npn est pourri stoll
thierry hesse port said aimerait prendre
react d'hommes cela celles là sont
obligatoires je sais pas où j'ai
commencé un projet rate quasiment react
d'hommes et react routeur d'hommes vous
les prenez toujours et ensuite pour le
style on va se prendre note tirer sas
donc attention et le n qui est là
attendez je peux pas dormir un peu si
vous voulez me voir
voilà notre sas et on va prendre une
version précise parce que la version 5
alors aujourd'hui cette vidéo elle
déconne régulièrement donc on va faire
notre ca ce machin hâte
@ 4 points 14 points voilà moi je prends
cette version précise puisque la version
de notes de note 6,5 déconne un peu on
fait rentrer et là ça va ça va à nouveau
prendre un petit peu de temps pour
télécharger mais c'est pas très grave
puisque je vais pouvoir vous montrer un
petit peu tout ce qui se cache la danse
est dans ses petits dossiers
donc quand on fait un cri être réac tap
voilà ce que l'on a face à nous donc le
jeu rapidement est là-dessus dit-il nord
on s'en occupe même pas c'est juste pour
pas importer notre module compte enfin
comité et c'est le paquet du point-g
sonorement vous connaissez le package
points de wilson dont celle à qui un peu
tous les scripts un canton va faire npn
start par exemple pour démarrer le
projet est bien s'alliera juste le
script start qui correspond aux frais de
démarrage de projets contrefaire lpm ron
beal construire le projet pour ensuite
en faire une version qu'on pourra le
plot des facs on pourra mettre sur
internet en tout cas donc voilà je vais
pas m'étendre là dessus on va juste on
verra jusque quand
ce que j'ai mis là ça sera installé
voyez là on a déjà react d'hommes qui
s'est installé après coup trois hommes
qui varlet a pris à notre sas donc
toutes les dépendances de notre projet
sont ici d'accord je reviens dans un
petit peu là dessus après quand on va
pour vérifier que tout est bien installé
leur ennemi c'est là que vous mettez à
vos adjoints qui vous partagez le
progebe les informations importantes sur
ce projet voyez que de base qui les
traquent tapie nous fournit quelque
chose on s'en fiche un peu voire pas
s'en occuper dur et demi en tout cas pas
pour un projet de débutants et le garde
de ce concert ça concerne regardez moi
je m'en sors pas trop de yard
donc voilà alors maintenant ce qui est
vraiment important dans la configuration
des fichiers cc3 la nonne module public
et src
alors notre module séquano bulls et
l'ensemble des bibliothèques notre
projet donc réac et une bibliothèque
toutes les bibliothèques ou instituts
les ont utilisés saas etc tout est
stocké là dedans ça c'est une grande
librairie à laquelle on fera appel
régulièrement on ira chercher des
fonctions des objets qui sont à
l'intérieur
d'accord retenez juste que bon c'est là
qu'on va stocker toutes nos librairies
de devenir a pas de d'envoi les deux
autres fichiers par contre oui on va
aller dedans il ya d'abord le public
d'accord qui se compose en fait qui va
se décomposer en fait de stocker du
stockage de nos images en gros il ya du
robot peau texte du manifeste point-g
sonne j'ai même pas envie d'ouvrir ce
que c'est si vous savez pas c'est pas
très grave on va fermer c'est pas le
sujet de la vidéo à faire mais je veux
dire j'ai été supprimée en revanche
qu'est ce qui peut intéresser c'est un
logo am et jamie un logo projet mais
n'en fait fouillis nadja qui est fourni
donc attendez sillage le supprime ok
donc normand il nous reste le favicon
éventuellement voilà c'est un petit logo
très hâte et il nous reste le logo en
version 190 par 192
on va se garder ces deux là et on reste
les met dans un petit fichier qui va
s'appeler img pour image moi j'aime bien
quand les choix sont mieux ranger et la
voilà là sont un petit peu mieux ranger
nos choses donc là le public c'est tout
les choses statique donc c'est là qu'on
pourra éventuellement stocker des images
mettre éventuellement du javascript qui
ne correspond pas vraiment à
l'application etc et on a là dedans un
index point htm et donc ses lacets ce
fichier là qui en quelque sorte lui
d'accord à quoi ça ressemble un expert
html mais écoutez moi je vais juste pour
la visibilité d'une explication je vais
supprimer déjà les commentaires comme ça
où on y verra déjà un petit peu plus
clair voilà les cris noscript machin
chouette samson
donc comment ça se présente l'index pour
html mais tout simplement comme ça comme
vous et seront l'habitude de voir des
pages index fra.html donc là dedans vous
mettez tout vote mais tu as tout un truc
pour le sc you voyez là ça c'est pour le
siao les choses comme ça tout la méthode
qui vous intéressent vous relier tout ce
que vous voulez si vous avez des cdn
part d'entre d'eux des icônes et même
des trucs comme ça à m vous pouvez
mettre là mais vous avez surtout un body
et au milieu il ya un édit route et
c'est en fait c'est là dedans
là dedans la entre ses deux balises que
sera contenue toute notre application
react d'accord faut juste que vous
sachiez ça il faut que vous sachiez que
là dedans à se mettre toute notre
application react et donc après je vous
montrais dans src parce que c'est la
teneur en vrai qu'on va vraiment à coder
tout notre application
je veux montrer comment ça se passe mais
en attendant la le manifeste points
jason vu que j'ai supprimé fichiers
autant sur le supprimer aussi ça on
n'aura pas besoin
qu'est-ce qu'on peut avoir aussi dutil a
le nikon machin chouette je sais pas
trop ce qu'elle fait celle-ci bon tout
cela n'en a pas vraiment besoin
l'injuste changé au maintien react
worlds comment ça parle de ça parle de
pays etc
on peut se mettre une petite icône aussi
mais je crois que j'ai supprimé
l'économie regardez on va faire une
icône comme ça on va faire un link alors
comment on fait une icône en html est
emmené juste shortcut iphone et la href
est bien là je rêve c'est le sait le
chemin de ski à côté leur offre en a
fabriqué un point ici alors ça ça me
fera juste une petite icône nana page à
page web vrai que c'est très long à
télécharger ça c'est pour ça que c'est
bien que je puisse vous montrer tout ça
est donc notre page là en gros elle est
bonne on peut même changer la langue sur
ce qu'on veut être un peu tatillon aux
transports français et là bon en vrai ça
c'est les usa c'est le contenu qu'on
trouve dans google
donc on va dire voyez juste m courrent
réac loi sans vous mettre que son
remplaçant cours en ligne sur un vrai
site
donc voilà sachez que l' index e.html
séduit que m qui est lui en premier et
c'est lui qui détient toute la logique
de notre application hockey est donc
maintenant si on va dans src ce qui nous
intéresse un peu plus on a toute une
série de fichiers on a notamment du css
vous lis d'avancé c'est 100 ans le
retirer on va pas s'embêter avec puisque
nous on va travailler en saas je
montrerai l'organisation du sas
un peu plus tard ensuite les tests on
peut faire des tests unitaires
évidemment pour une application robuste
l'application qui marche c'est des
choses bien sûr qu'on va pas voir là
d'un dieu du rock pour débutants donc je
supprime aussi le fichier test on a un
logo point svg
ça dégage et leurs portes web vital ça
dégage c'est pas utile et même sud en
dessous là le set-up test c'est pour
mettre les tests en place on s'en fiche
voilà là on y voit beaucoup plus clair
dans notre esprit il n'y a que deux
fichiers ok donc qu'est ce que sont ces
deux fichiers et bien on à l'index point
js le app.ps qu'est-ce qui contient d'un
exploit jsk ont dû se retirer le rapport
trop vite a vu que supprimer fichiers je
pense que ça peut faire buggé voilà je
supprime sa là je supprime l'import de
web vital ce et on va supprimer le css
qui est là parce que je les supprimer
moi aussi mon côté paf qu on enregistre
et donc là les amis on à l'index point j
ai ce qui est le fichier par lequel on a
accès à l'application en quelque sorte
puisque ce fichier là donc c'est le
fichier au plus le plus haut qu'on
puisse trouver dans notre application
l'index point g s il a quoi il a un
document getelementbyid aux routes
donc en fait ça vous dit quoi se dit que
là c'est à dire oh tu es bien tout
l'index projet de quelque part tout
notre application
c'est là qu'on lapointe ont la pointe
comme ça et on appelle le composant ap
ici on dit donc on va faire un rect
d'hommes point renders donc là tu me
fais un rendu donc on se marre strictes
au monde
éventuellement ça nous permet d'avoir un
peu moins de bugs on va dire quand on
code on peut rester strictement n'y a
pas de souci et au milieu de salade dans
là on a tout notre application qui va se
dérouler donc dans le app - js le
fichier dans lequel par exemple nous
notre routeur et ensuite ça découlera
sur des pages on va coller ensuite en
suivant donc tout part de cet index
point j s et tout à l'heure quand on
relira le sait le sas on le mettra ici
parce qu'il faut le mettre le plus haut
possible notre application
donc c'est là le plus haut possible
donc ok on a un index là il fait
référence là il appelle c'est comme ça
qu'on appelle denrées acte-là comme ceux
ci il appelle le composant à regarder ce
qu'on à la paf la en arabe est donc là
d'envoyer un petit composant qui a été
fait donc blogo points s2j va pas le
trouver
hop on le supprime l'envol au logo du
label vous dirai ça en poste
on peut vraiment se remplacer on va
juste se faire 1 h 1 et on va dire elle
l'eau react voilà est d'ailleurs là le
appoint css aussi on peut s'en passer
ok j'enregistre est logiquement là
est-ce qu'on ait téléchargé
tout a été téléchargée logiquement voilà
si on veut vérifier que tout a bien été
téléchargée on peut aussi aller dans
notre pays kate hudson et là on voit
qu'on a un réacteur à la version 17.0
propre enfance comme on enregistre
réacteurs des appareils
réac routeur d'hommes y installer réac
script et web vital samhain notes
faciles et là il était au dessus c'est
par ordre alphabétique que c'est rangé
tout simplement
donc on a la version 4 points 14.1 le
petit chapeau la sonic c'est pas la
dénervation qui a été prise je crois que
c'est ça je crois que c'est accessible
je suis même pas sûr mais il me semble
donc voilà ok on est bon on est bon sur
ça donc on a toutes nos dépendances en
tout cas pour commencer à travailler
on a mis elle l'aurait actes dans ce
fichier
on a codé un petit un pharmaco des n'ont
pas grand chose de juste mis un titre et
un petit à petit logo notre page allons
voir à quoi ça ressemble les amis on se
mets la dans la console est en fait npm
start
ça veut dire tu me démarre tu me démarre
le fichier donc voilà starting
développement et l'envoyer ça ouvre sur
le côté en localhost 3000 en général y
sommes et s'y est déjà quelque chose sur
le local aux 3000 au delà il vous
propose éventuellement d'aller sur le
3001 quand on devrait mettre un peu sur
le côté histoire qu'on est un petit peu
d'une vision des dopage même si on veut
qu'elle va rester assez large pour
pouvoir codé proprement et voilà les
amis on a écrit elle l'aurait actes
pourquoi même simplement si on fait clic
droit inspectés regardez on a trahi des
routes
et à l'intérieur c'est à dire où ton ami
quoi on a div class
ap h1 est lauréate tous se retrouvent
derrière voiliers class classe naïm ap
hop comme ça tout seul mais comme ça
donc là vous avez remarqué déjà que les
classes ça se dit que la fnaim donc il
ya plein de petites choses comme ça mais
c'est pas ce pas extrêmement longs à
maîtriser tout ça vous inquiétez pas
en l'occurrence pour les classes faut
dire que la semaine il ya plein de
petites choses comme ça sur lesquelles
on va revenir au fur à mesure qu'on va
codé en tout cas les amis on est prêt à
démarrer
alors pour d'autres projets
l'arborescence des composants va se
présenter comme suit c'est à dire qu'on
a le à point g est ça vous l'avez vu
donc on va en faire en sorte que ils
servent de navigation et pour naviguer
entre nos deux pages donc la page hommes
pointent js et la page about point j s
on voit que ces pages l on est même des
composants donc à l'intérieur pour
savoir qu'à chaque fois qu'il y a un nom
de fichier point j ai ce qui commence
par une majuscule c'est un composant
donc le premier composant notre
application c'est le à point g est donc
après on va se créer deux composants de
pages tout d'abord et à l'inter ces
composants on va se créer un composant
un complot nantes navigation par exemple
eh bien on l'utilisera pour les deux
logos on l'utilisera pour les deux
ensuite en sommes on fera un composant
countries donc les pays au pluriel donc
ça servira d'affichage des pays et de la
recherche
et ensuite pour afficher chacun de ces
pays individuellement il y aura encore
un composant qui héritera en quelque
sorte de country c'est à dire qu on lui
passera des informations donc ça vous
verrez ce sera en toute fin en fin de
projet qu'on verra une grosse partie de
réac c'est à dire passer des données
entre composants via des props mais
avant toute chose on va déjà n'est plus
tant que j'en parlais bien on va se
coder des composants et on va commencer
par les pages alors les pages mois se
met la dent src nouveau dossier
ce dossier on l'appelle page 100 p
majuscule par contre à l'intérieur du
cno pages sont des composants et bien on
va seul m une lettre majuscule dans quoi
faire par exemple hommes pointent js
donc mjs on veut dire quoi ils portent
react from react alors il se trouve
qu'en plus depuis la mise à jour pour la
plupart des composants n'est même plus
obligé de dire un portrait actes parce
que là
par exemple la réac n'a pas été importés
né en quelque sorte sous-entendu il sait
déjà qu'on traite avec la bibliothèque
créat donc en réalité on va s'en passer
ce soit rien que je vous confesse vu que
maintenant ça se fait moins bon vous
avez sûrement retrouvé beaucoup de codes
de ré acte où on fait un peu importe la
bibliothèque real
bon là on va dire qu'on n'a pas besoin
de le faire donc et bien directement
déclame notre fonction const homme avec
un h majuscule fonction fléché donc
c'est un composant qui se présente comme
une fonction et à la toute fin bien sûr
on n'oublie pas de faire quoi et bien de
l'exporter exporte default homme comme
ça en faisant cette export plus tard
notre composants o'neal sera
réutilisable partout et regarder si par
exemple on se disait que notre
composants là il avait juste un retour
il rendait en quelque sorte juste de
l'acheter ml qui rend en l'occurrence
s'appelle du g6 on va lui dire return et
tout ce qui est compris dans les
parenthèses
eh bien c'est ce qui lui c'est ce que ce
composant il est censé rendant donc on
va lui dire tiens tu va nous mettre une
classe pomme
ouais j'ai fait point homme comme on
fait soin d'enlever ce code et sami
directement klein et donc à l'intérieur
de ça on peut se mettre à peu près tout
ce qu'on veut pourquoi parce qu'il faut
savoir que dans react chaque composant
roth est bien sage chaque composant doit
avoir une balise supérieur par exemple
on peut pas faire la une partie hommes
tiens on va écrire par exemple accueille
et bien si derrière on avait voulu
écrire un duel avec avec des nids par
exemple ça marche pas à me regarder mois
déjà il souligne tout peuple la voilà
enfin comme ça par exemple ça marche pas
pourquoi parce que là il ya deux il ya 2
bat nice qui sont au même niveau le
composant non c'est pas ça le composent
envoyées aux personnes se dit où on
verra après pour le pôle express mais
paf n'a si j'enlève ça me saoule in plus
rien pourquoi parce qu'il ya un
il ya une balise supérieure à toutes les
autres il faut même savoir quand react
vous avez peut-être trouvé des fois pour
faire une balise supérieure à toutes les
autres cas des gens qui font ça ça
s'appelle un fragment c'est tout à fait
ça se fait tout à fait bien en react
donc ne soyez pas choqué si vous voyez
ça un jour mais moi je le fais
régulièrement
donc voilà là on a un composant qui
s'appelle accueil super
on est content donc qu'est-ce qu'on va
vouloir faire
eh bien on va vouloir éventuellement se
l'affiché dans notre notre page dans
notre application app ou plus beaux de
l'application donc ouais là est donc là
si on voulait appeler d'autres
composants qui on peut se mettre ici on
ouvre et laon mais j'ai lu m accueil
normes et sommes en appelle aux mais
voyez que là il me propose et ça je
crois que c'est vesco d'un qui propose
automatiquement les autres rapports en
tout cas je crois pas avoir installé le
plugin pour le faire je suis pas sûr bon
au pire si ça vous n'importe pas
automatiquement vous devrez le faire à
la main mais regardez si je clique
dessus regarder au dessus ça fait une
porte
or from machin chouette machin donc
saisir quoi mais là il est parti
chercher le chemin il est parti dans
pages chercher le composantes homme est
donc là on est ici j'ai ouvert eh bien
on fêta qu on referme regardez
j'enregistre et la regarde ce que savent
afficher grande surprise il écrit qu'on
peeling en bas et voyez elle l'aurait
acte accueille donc là on vient de
prendre un bout de code qui était dans
pages ça c'est juste un code visuel
c'est juste n'y a pas de logique
javascript d'ailleurs ça en quelque
sorte sylvie du visuel on se le prend et
donc par tous va écrire accueille dans
notre cible c'est un exemple pas très
pertinent en ce moment avec faire un
chien accueille les vagues ont offert un
composant pour ça mais admettons est
bien partout dans notre site
on reprend juste hommes et regardez on
peut multiplier vous allez voir ce que
ça va faire on peut l'écrire autant de
fois qu'on voit dans la page
il ya aucun souci bon alors c'est écrit
accueille 1 h et 1 h 1 re oui ch et ses
écrits accueillent partout et vous voyez
en bas la salle a écrit partout voilà la
puissance la force de réactifs voilà ce
que ça fait bien sûr vous en doutez ça
va quand même pas se faire des
composants aussi basique
non ce qu'on se trouve à se faire c'est
des composants un peu plus complexe et
avant toute chose lui chara penser au
plugin il ya un plugin notamment qu'il
faut prendre qui va nous permettre de
taper les composants beaucoup plus
rapidement il s'appelle alors joue le
sort je vous le donne en mille react js
code snippets voilà tu l'avais bien il y
en a un autre que j'aime bien aussi
simpl react snippets donc ça c'est des
petites choses
qui vont nous aider à aller un peu plus
vite donc je vous invite à les prendre
c'est dollars moment prendre d'autres
envois je vous invite à laisser pour ça
c'est du rac native ça rien à voir c'est
pour mobiles mais je vous invite après
vous même essayer des plugins et des
plus téléchargées là vous avez le nombre
de téléchargements vous avez
l'appréciation oui c'est à vous de de
paramétrer en vie dans votre
environnement de développement comme ça
vous arrange comme vous aimez le faire
bloc pour apprendre c'est pas hyper
important d'être super rapide 1 voyez
vous si vous voulez mettre à la mince
affaire les imports à la main il n'y a
pas de souci si vous voulez vous taper
tout le si vous tapez le code de du
composantes entièrement aussi y'a pas de
soucis mais là vous allez voir que je
veux montrer comment avec un raccourci
on peut se taper ça plus rapidement donc
là on a notre note ap
mais moi ce bout de code il m'intéresse
pas beaucoup donc on va tous supprimés
et on va faire rsc et en faisant rsc il
propose un style tu laisses composantes
pourquoi state laisse dire qu'il n'a pas
d'état en quelque sorte parce qu'avant
pour où on faisait beaucoup d'éclat ce
qu'on peut donner c'est à dire je m'aime
pas je n'aime pas mais tombe dessus
sachez juste qu'avant on faisait les
classes composantes et si vous avez
plein air act un jour vous tomberez sur
du vieux code qui utilisent des classes
composantes
c'était beaucoup plus verbeux c'était
beaucoup plus chiant maintenant on
n'utilise que des states comprenant
trois oui j'ai fait entrer est vrai que
c'est un portrait acteurs que c'est pas
vraiment obligatoire mais salah comme
importés dans le bon on peut laisser
c'est pas grave ça dérange pas par
contre mais ça nous a créé
automatiquement tout le composantes avec
un export default une balise qui englobe
tout est donc ça bon c'est un détail un
mur au moins ça permet d'aller un peu
plus vite donc faut juste à prs effarant
très bon ok ça c'est fait maintenant
qu'est-ce qu'on va se faire
eh bien on va se faire une navigation
monde pour faire une navigation à la
fois un peu plus de pages landing pages
hommes
eh bien on va se rajouter une page about
donc ce sera la page à propos mais comme
d'habitude on sommes tous en anglais on
fait tout maximum en anglais sauf après
le rendu si on s'adresse à des français
et bien sûr le rendu fonctions en
français mais en général le nom des
pages etc
c'est un anglais donc la page about
il faudrait que je me rappelle à quoi
ressemble donc on regarde et on fait rs
c'est ok donc là on sait importe tout ça
et ensuite dans cette page on va se
mettre à un champ de bataille
d'ailleurs je peux l'écrire en français
jusque là du coup ça en français à
propos donc pour faire le a majuscule
voilà comme ça donc il faut faire halte
contrôle plus la touchette et derrière
majuscule toucha voilà c'est un peu
technique si vous voulez faire comme moi
à propos on va se mettre un break dont
ceux cette page on va là-bas clé parce
que les pas importants c'est juste pour
habiller un peu le projet on va se
mettre alors m 60 rue break et ensuite
on fait un peu et on va se mettre un
lors m 140 un peu importe
aucun enregistre et là les amis main
comprenant ce qui en est fait on exporte
ici donc ici on pourrait l'appeler
partout dans le projet et il a tout de
suite logique se compose en bourse au
froid là en l'occurrence une page pour
ça qu'on a mis dans les pages
après on verra confier un dossier
composantes pour m justement que net des
petites parties qui rentreront après
plus tard dans les pages
donc là on a eu beaucoup ton ap on a un
homme et qu'est ce qui va nous manquer
van roekeghem une page au kazoo on
trouve rien une page que s'appeler not
found
donc on va faire notre fan point le js
on faire et c'est un complot noda qui
s'exporte tout seul et on va dire erreur
erreur 404 voix la pop
ok donc là on a une arborescence on a
des pages maintenant il va falloir faire
une petite navigation donc je ne sais
pas j'ai bien compris le principe du
composant voilà on exporte à partir de
là et là on pourra utiliser partout
maintenant vous allez voir comment faire
de navigation ça s'est passé des choses
qui s'invente pas vous avez dans la doc
il ya tout mais je vais vous montrer moi
donc pour faire une navigation aura
besoin d'un certain nombre d'éléments de
la bibliothèque réacteurs hauteur
d'homme donc ce qu'on à télécharger tout
à l'heure on va avoir besoin de brother
routeur donc soit là on appelle des
appels des compos nantes on voir besoin
de switch et on aura besoin de routes
d'accord donc le fait qu'on mette en
crochet c'est dire qu'on appelle
brothers routeur spécifiquement si on
met pas en crochet l'on appelle touré à
ton appel toute la biotech les actes là
on appelle brozat routeur on appelle
switch on m'appelle route from quoi from
react et là il propose réacteurs hauteur
d'homme ok
donc ces trois choses qu'on sait
importer vous allez voir que ce qu'on va
faire avec on va en faire une navigation
en plus haut point son vote ap
eh bien écoutez vous en ai parlé tout à
l'heure on va mettre des fragments parce
qu'il faut toujours un truc super du
doigt leur nombre à penser on va pas les
mettre et franchement je les ai mis dans
mon modèle mais pas pertinent retour sur
ce que l'avenir on va plutôt se mettre
le browser auteur donc il faut que
brother auteurs il englobe toute notre
application
donc c'est le cas là vu que le apps est
l'élément le plus haut
comme je voulais montrer là dans
l'arborescence et bien lui ont valu
mettre un browser hauteur et donc c'est
lui qui va s'occuper de route et un peu
tout les choses le browser routeur on
lui met un switch vous allez voir
pourquoi savent que ça d'ailleurs qu'il
va tester toutes les routes et si toutes
les routes sont pas bonnes et à la fin
nous amènera sur l'erreur 404
c'est pour ça qu'on est un switch est
donc là on va appeler août nous voyons
les appels ont appris aux routeurs
switchs route ces éléments de rett
routarde sommes simplement
donc quand on me dira pas comme le
chemin est là ton chemin ce sera se
lâche
il faut donc on va lui dire que ça
correspond au complot danois qui
s'appelle hommes et là vous voyez j'ai
un autre nous propose un autre rapport
aux vainqueurs tapant h
j'espère que chez vous c'est pareil moi
je crois que c'est d'escaudain qui me
fait ça sinon je vous invite à voir dans
sur cette couleur fluo à chercher après
c'est bien quand vous débutez aussi de
vous faire vous même les imports pour
comprendre un petit peu l'arborescence
etc toujours est il que la jeu on vient
de faire part c'est un slash et on a dit
qu'on prenantes hommes on enregistre et
l'a logiquement devrait déjà être sur la
page hommes
voilà là on voit écrit accueil pourquoi
parce que ça on est sûr cela cela c'est
qu'il bosse et qui voient ça a bien sûr
donc là on est sûr ce lâche donc il nous
amène le compo nantes qui correspond à
un homme auquel vous comprenez soissons
après vous verrez qu'à chaque fois vous
êtes fan d'éducation rac ce sera l'autre
au point ces éléments rien de plus
toujours est il que celles auxquelles
nous pose un problème que regarder si je
tape n'importe quoi voilà
eh bien ça nous amène aussi à homme et
là on n'est pas d'accord c'est à dire
quoi ça veut dire qu'en fait pour pour
lui vu qui a écrit slash est assez bon
on est sur la bonne page secondes et un
slash je reconnais eh bien non c'est pas
bon il faut lui précise et exacte on
veut que le paf le chemin ils soient
exempts
actuellement le sachet pas plus donc là
voyage à n'importe quoi effectivement il
n'y a pas écrit accueille donc c'est bon
regardons je peux même vous montrer dès
maintenant qu'est ce qu'on ferait si
jamais on trouve une route que lui ne
connaît pas et bien à la fin du switch
on unijus compo note égale et on appelle
la page not found et regarder ce qui va
se passer
donc là j'ai faim de tout un port là où
il faut penser à chaque fois directe
importe et à sang si vous y pensez
paraît actes il est très bien pour ça
d'examen bug ou quoi il y pensera pour
vous il va vous le dire il va vous dire
là il ya un problème là y'a un problème
sans éléments j'ai sûrement faire des
erreurs en cause dans le projet et vous
verrez donc comment réactif un même
moule ce sont vous le verrez donc
regarder les notes ford genre lise
camping donc là erreur 404 parce qu'on
est sur n'importe quoi voilà tout
simplement là je regardais up erreur 404
hockey et là par contre c'est page
d'accueil on est bien à l'accueil ou à
vous et que vous savez faire
d'allégations matin donc pour la page
about
je vous laisse faire de notre côté et
j'aime le faire en même temps que vous
eh bien on reprend donc la ligue duo là
on va dire slash le bas donc on va dire
le chemin faut que ce soit slash about
supporte pas les sens à propos et le
composantes qu'on attali ça peut être
bahout d'ailleurs seront peut être à
propos le chemin on peut mettre ça comme
ça on va écrire à propos de fois j'ai
pas en lien c'est bizarre ce cas mieux
en france est de mettre les liens en
français pour pour l'utilisateur et donc
on va plus le composantes about là ils
le proposent hop voilà et là ça fait un
autre rapport
donc voilà tout est importé oms a porté
toute petite chose et là on a un routeur
qui nous amène sur chacune de nos pages
regardez genre juste contrôler scène et
on va pouvoir les contrôler le à propos
si il fonctionne bien
en plus j'ai on a fait une belle de fait
une belle page avec des bots paragraphe
donc regarder on tape à pro 6 mai à
propres erreurs 404 c'est bon par contre
si on met à propos et bien voilà les
amis nous avons passé un peu moche
n'inquiétait pas qu'on mettra un peu
style un peu plus tard mais toujours est
il que là je vous montre vraiment le
les choses importantes je trouve que la
page de l'ère une beaucoup trop grande
comment ça se fait bon c'est pas très
grave
et voilà vous avez vu la navigation donc
là vous voyez qu'on doit faire à la main
enfin d'ailleurs danse pavon la
navigation enfin c'est plutôt où le
routage vous là faut tout faire à la
main dans l'url ou tech c'est pas ça
qu'on va vouloir faire on va plutôt
vouloir créer des liens sur lesquels on
clique pour aller de page en page
alors pour aller de page en page et bien
on va tout simplement se crée une
navigation et pour se créer une
navigation et bien falloir qu'on fasse
un compound navigation réutilisables
partout donc pour faire ça et bien
remettre sur air forcé et en faire un
nouveau dossier et ce dossier s'appelle
component il faut savoir qu'il ya
souvent trois dossiers majeurs quand
vous travaillez dans la src donc il ya
ap un d'aix qui sont toujours en dehors
ça y'a pas de soucis et les trois
dossiers majeurs c components page et
style ce sont les trois choses au regard
sur lesquels vous agissez petit à petit
au fur et à mesure de votre projet
avance-t-il on verra plus tard
là on est sûr qu'on connaît et on va
mettre na vi gassion point g s est bon
la haine majuscule ça veut dire quoi
cela construit un nouveau conte
connaître réutilisables comme d'habitude
j'ai fait est resté entrées et donc
quelle va être la logique de cette
navigation
déjà on va lui mettre un classe n'est
une classe naïm aux allumettes
navigation ce sera prêt pour le style
envers un peu un peu plus tard comment
on fait pour pour cloisonner le style
lorsqu'on sait que c'est important de
donner des classes lime à chaque à
chaque début en fait de complots nat
comme ça on est sûr que en disant point
navigation après plus tard dans notre
style à prendre pour agir que sur ce
qu'il ya un terreau du comportement je
reviendrai plus tard là dessus en train
de s'égarer
qu'est ce qui va nous falloir la fois
qu'on avait cherché encore un petit truc
un petit comprenant direct hauteur
d'homme
il s'appelle commun ils s'appellent nav
link donc on va lui dire à peine 9 link
from donc réacteurs hauteur d'homme
erenav link en fait c'est lui qui va
nous permettre en cliquant dessus
d'aller de page en page
donc regarder encore une fois là je vous
montre une fois comment on fait puis
après vous allez le savoir jusqu'à la
fin de votre vie c'est à dire que bon
mais c'est comme le routeur c'est des
choses qui qui ne s'invente pas mais qui
sont ils sont hyper facile après à
mettre en place pour chaque nouveau
projet donc on dit nav link exacte tout
donc on l'a tous et l'eurl coordonnées
donc par exemple la page d'accueil on
veut juste lui dire se lâche
hop on se met comme ça et on met
accueille donc ça veut dire que quand on
clique rassure cela vix et lui navigue
en réalité c'est un as et une ancre
savez une encre ans en html quoi donc
sauf que c'est un complot nantes
spéciale de ré actes et donc il va nous
permettre bien d'aller sur l'accueil du
cliquant dessus au caire sans faire un
deuxième dame dink et ça va être pour
aller sur la page about up
donc on va lui dire exacte tout tout à
propos donc on avait mis en urss en fait
comme ceux-ci lahonce écrit à propos
pour notre navigation et voilà
là on a déjà une toute petite navigation
alors là j'ai mis un exemple avec deux
pages mais si vous mettez cinq pages
c'est la même chose
je pense que des compris le principe ce
week-end assez rapide à mettre en place
hélas ce qui est intéressant ce qui est
intéressant donc là dedans
et bien c'est que ce maître que par
cette navigation par exemple dans pages
on va dans about about a besoin d'une
navigation donc au dessus avant le à
propos la relire tient là tu vas nous
appeler le compo nantes navigation il
est là paf auto encore là haut on se le
referme donc là on l'a dans about hockey
j'enregistre et va nous falloir dans
sommes donc même principe dans sommes
d'ailleurs le chat ne sert pas vraiment
à grand chose bon on peut sauvegarder
pour l'instant pour savoir quand et sur
l'accueil et là on dit navigation paf
paf on enregistre donc là notre
composante navigation vient de l'appeler
à deux endroits différents rites le code
on au code une seule fois et ensuite on
seul appel à deux endroits différents ça
c'est quand même cool et donc regardez
là là haut on a accueille à propos d'un
plat si on va sera cueille pouvoir y a
qu'à lire ça
il ya pas de chargement au tout est déjà
prêt charge est préchargé tout le
navigateur déjà toutes les informations
d' avance il n'y a rien eu besoin de
demander après un serveur pour les
entrailles en local mais vous comprenez
le principe et voyez peuvent pas on peut
on peut naviguer donc là vous créer
autant de pages que vous le faites ce
que vous voulez là venait déjà de de
comprendre les principes de base s'ils
voulaient faire des sites vitry denrées
actes ce qui se fait très bien et bien
ça c'est les principes de base une
navigation puis des composants qu'on
réutilise voilà tout simplement
bon bien sûr vous ne tournez en douter
c'est un peu plus complexe que ça arrête
avec ton peu beaucoup plus le pousser
mais en tout cas là on a déjà une partie
on a des choses intéressantes à savoir
mais il ya un petit truc que j'aimerais
faire que j'aimerais te remplacer doit
nous emmener un petit peu sur le style
il ya un petit truc que j'aimerais
mettre en place c'est comment est ce
qu'on fait pour savoir sur quel sort
qu'elle voit là j'arrive pas à trouver
les mots comment on fait pour savoir sur
quelle page on navigue là parce que
lorient ne vois pas du tout est bien en
réalité react il permet d'identifier ça
de façon extrêmement facile
et là ça c'est encore une force de
réacteurs garde et on retourne la
navigation on se met là et on a un truc
qui s'appelle active classe name et hop
on va l'appeler denave active donc pour
l'instant il n'y a pas de style à notre
application
d'accord je récupère la up non je le
mets là comme ça donc ça veut dire quoi
pourquoi il est parti et l'aïd
voilà comme ça un accord avec ce que
j'ai ok donc on se met actifs classe
name en rajoute ça et on lui dit ta
classe times as he and have active
joaillière quoi s'avère que dans le css
maintenant dans le sas plus tôt quand on
va énoncer la classe d'âge actives
ça va donner un style particulier à la
page sur laquelle on est donc soit on
est soit le slash soit on est sûr ça et
on y verra un style particulier mais ça
nous amène donc hostile et donc les amis
un support juste en dessous la vidéo
pour le style ce qu'on n'a pas le codem
est vieux gamin j'ai quand même pas mal
de sud on va pas le quad et bien sûr
pour pas perdre trop de temps que je
pense que demain comme un petit niveau
en css n'y a pas grand chose de
compliqué dans ce style
et donc mais ce qui est important c'est
game de comprendre comment il s'organise
ce style c'est ça qui est très important
dans quoi ce mec se ressourcent nouveau
dossier et on va s'appeler style même
style épuré l'autonomie components page
et c'est mieux de mettre ds partout où
je pense est donc dans ce style donc
vous avez le support juste en dessous de
la vidéo et vous avez déjà un certain
nombre d'éléments dans ce support vous
avez des images qui vont nous être utile
bon celle du logo je crois pas qu'à nous
sera utile finalement parce que j'ai
appris la dent public on appris on a
pris ce logo 192 donc il suffit se
suffit très bien je crois en revanche
seuls à être utile pour la navigation
cette image me remettre à plus tard
là il ya tout le style de notre projet
mais moi je vais aller je vais vous
montrer un peu comme il s'organise ce
sens en tout copié comme ça sauvagement
jeu plutôt le faire petit tout petit à
petit et donc là en l'occurrence on va
se mettre en place le style pour pour la
navigation
donc ce qu'on va faire c'est que déjà ce
qu'il faut savoir pour le pour le sas
c'est qu'on n'a pas besoin de faire un
index points et css et 7,7 feuilles là
en fait on n'a pas besoin de la
convertir ce que j'ai l'habitude de sas
dans d'habitude
enfin en dehors de framework ou de
bibliothèques il faut mettre une sorte
de fichier point map qui convertit le
sas en fichiers css l'aérien besoin de
ferias vers vos besoins il n'y a aucun
besoin de filles de créer un fichier css
ou quoi on va juste aller dans un index
ici on va faire une porte tak tak et là
on va s'implanter dans ce texte le index
point css et donc tout ce qu'il ya dans
l'index princesse ce sera lula au plus
haut point notre application tout
simplement c'est pour ça qu'on se mette
à l'index
là il me dit kent kent resolve parce que
j'ai mis style parce que j'ai mis index
tout court ses index point scss voilà
quand c'est tjs en cas de vol la voyez
s'est passé on n'a pas besoin de le
mettre le point js par contre terminé en
poids csa soit qu'à mieux précisé donc
voilà là normalement il devrait le
connaître
vous voyez quand tu es une erreur fell
to compile et il nous met précisément ce
qui marche pas c'est à dire là il ne 4
isole il n'arrive pas
résoudre ce chemin là tout simplement là
vous voyez la gare ucial résoudre ce que
le fichier existe tout simplement
donc pour revenir sur le style ce qu'on
va se faire c'est qu'on reste faire un
fichier settings alors j'espère que vous
connaissez un petit peu ça sinon c'est
pas grave ce que vous avez quel très
bien comprendre mais vous allez voir un
petit peu l' avantage de sas dans une
structure comme comme réactif plein de
composantes
donc on va se mettre au vert fichiers ou
ma niveau que le stylo remettre un
setting point scss donc le fait de
m'être and under score là c'est une
bonne pratique c'est pour montrer que
c'est pas lui le fichier mettre le
fichier mettre celui-ci index - cs s et
tous les autres fichiers leur mettra à
l'honneur score mais en vrai quand on va
l'appeler ce fichier setting da par
exemple on va lui faire ici on veut
faire ym porte tac tac on veut il dire
tu m'importe setting tout simplement
comme ça hop
j'enregistre mon post rien dans cette
valeur doit mettre des petites choses
dans settings petit à petit on va même
tout mettre un lieu pas très grand
fichier de fichiers setting tac comme ça
et donc là déjà en voir la police qui va
changer un certain nombre de choses qui
vont changer
donc j'ai lancé mon mac world band the
setting c'est bizarre on dirait que ça a
bien marché
alors des fois quand il est un peu
capricieux on peut actualiser
quelquefois le loto enfin quand on
sauvegarde automatiquement sa actualise
mais des fois ça ne prend pas en compte
par exemple chasse comme le style ou pas
toujours donc n'hésitez pas à actualiser
quelquefois donc là vous voyez que la
police a pris le fond aussi n'est pas
tout à fait blanc donc on est bien donc
on a des réglages de base juste pour
rire sur settings setting en fait c'est
là qu'en mettre toutes nos variable
toutes nos couleurs donc et comme ça
partout dans le projet on aura juste à
appeler couleurs 1 et on sait que c'est
cette couleur dans notre projet voyez ce
que je veux dire donc ça c'est des
choses qui sont ici assez utile oui là
on appelle la fonte un la couleur est
partout dans le projet de tournoi besoin
de couleurs est bien vrai nos couleurs
elles sont là et si on a plusieurs fonte
c'est là qu'on est mais bon là pour
l'exemple moi j'ai fait un petit projet
donc donc voilà donc bon voilà dans
settings c'est vraiment des gros
réglages de base pour le body pour tous
les lits du projet pour tous les as du
projet pour tous les avis
id voilà c'était juste des gros réglages
de base un setting et donc au fait
comment ça marche on le met le plus haut
possible de nos importe ce qu'en fait un
exploit c est ce point est celle ci
doivent servir qu'à importer des
fichiers à la suite
sauf que lui l'anneau index il va se
balader comme ça doit faire tac tac tac
et live avoir importe machin chouette
donc là il va partir il valait ici et il
va lire il va lire 7,6 donc qu'il va
dire lui d'abord et ensuite tous les
fichiers en suivant qui vont suivre
il va aller lire et saufs qui connaîtra
il sera qui est color un parce qu'il
aura déjà lu setting ici donc en fait le
à l'index progressé saint-just a
regroupé tous les fichiers du projet et
voilà les mettre ensemble et c'est comme
ça qu'on va réussir à s'organiser
jusque là par exemple on va créer un
dossier comprenant donc là tout le style
de nos compos nws
on va le mettre ici donc là on met
navigation donc ça a beau être un
composantes en saas en mais pas de
majuscule au début et voyez je mets
toujours un interscope records dans ce
fichier c'est pas lui qui coule un tout
sauf que là quand on en compte en fait
l'un pour ici on a un besoin de rappeler
leurs scores regardez on fait une porte
donc là il faut aller dans components et
navigation hop on enregistre et donc là
la navigation qu'on va se dérouler si on
sait à quoi je vous l'accordé moi pas
tout copié en permanence regardez on
commence par point navigation pourquoi
point navigation ce que c'est à dire que
maintenant toutes les choses que je vais
appeler à l'intérieur ça se permet ça en
fait tout va être englobée dans ces
accolades
ce qui fait que maintenant je peux a
plaidé à delhi et d'yves et ça nous ne
le sommes
donnera son style kouao div qui sont
dans navigation ça c'est l'une des
forces incroyable de ça c'est tellement
dommage que css va pas en face pas
encore ça peut-être qu'un jour le font
donc la regarde et on va se stylisé un
peu notre compagnie
tant qu'à faire en même temps on va se
regarder sur le côté comme ça vous allez
voir son évolution
voilà je composais enregistrera au fur
et à mesure
donc regarder comment on va se le faire
on va se mettre une margin en haut et en
bas 20 pixels on va lui mettre un
display flex ok t'as que j'enregistre
voilà ça prend un petit peu plus un
petit peu plus de place dans le fisea le
lissp échec ce n'est pas forcément
obligatoire j'ai l'impression qu'on sait
pas très bien on va pas s'attarder sur
le style là on remettre une margin
partout de 10 pixels elles vont se
détacher un peu les uns des autres
un padding 2 10 pixels aussi hockey et
une position relative
pourquoi une position relative tant que
j'enregistre ok donc là on a notre
navigation des jeunes un peu plus de
gueule mais on voit toujours pas sur
quelle page on est enfin au niveau de la
navigation quoi j'ai pas si vous voulez
vous voyez où je veux en venir c'est que
là on a mis un risque et les notre
navigation maritime le fichier gelé
perdu le fichier d'allégations et là
vous voyez à apprendre rapidement
beaucoup beaucoup de fichiers d'hoover
quand on fait du jour est donc faut être
fort être organisé on a actifs classe
name nav active donc c'est à dire que
quand on est sur cette url c'est cette
classe s'applique cette classe ça vient
se mettre regardez là si je fais
inspectés
si on fait inspecter tac comme ça lors
de navigation regarder accueilli la nav
active et cycliques sera propos d'un
convoi plus je retourne leur accueil
accueil
il a plu l'invectivé c'est à propos qui
est active donc cette classe en fait
elle se balade entre eux entre les deux
fois où elle est donc comment ça
concrètement comment ça se matérialise
eh bien on se met là on lui dit points
navx active et là on donne tout le style
qu'on veut un autre mâle active alors
moi il se trouve que j'ai fait un truc
un petit peu plus farfelues c'est dire
que pour matérialiser la page sur la
cornée j'ai souligné en quelque sorte
j'ai mis un très en dessous en dessous
de chaque élément pour faire ça j'ai
fait un after avec sasson fait et after
comme ça dans tous sens pas encore sûr
ça donc je vais pas non plus trop
m'étendre là dessus mais ça veut juste
dire qu'on fait point avec ti vct 2.2.1
after l'alleud et est donc là quand on
fait un after il faut d'abord un after
before d'ailleurs il faut d'abord
allez un contact bien sûr il faut lui
mettre une louis dasseux à cet élément
on va dire que c'était 85% de son
élément parents united 2 5 px donc pour
l'instant on ne voit toujours pas ce
truc là pourquoi parce qu'il faut une
background une background color
on va lui dire qu alors un d'accord
c'est la couleur dorée acte c'est un
bleu react milliards en quelques sortes
l'agent réduite on ne voit toujours pas
pourquoi parce que quand on fait un
after before il faut si vous avez bien
suivi vos cours de css il faut bien sûr
m 2 absolut et voilà là on la voit elle
est là la barre elle est censée être en
bas donc elle n'est pas encore tout à
fait placer pas de souci si on va la
placer enfin bottom un pixel left 50% et
si enfin l'âge de 50 % vous savez ce
qu'il faut faire il faut faire un
transforme 37 pour leurs maîtres pour le
remettre complètement centre et on veut
dire donc en 35 pts sur l'ex dx de -50%
voilà là on est pas mal voilà là on sait
qu'on est sûr à propos et si on clique
on est sûr accueil
voilà vous comprenez le principe bon
c'est à ce faux je vais codé indue du
style de son épouse de voir s'il ya pas
grand chose un style je copie au fur et
à mesure mais en tout cas vous avez
compris le principe les amis donc voilà
très important de partitionner son style
vous commencer immédiatement par le nom
de la classe 1 le nom du composantes
dans lequel idées et après tout ce qui
va découler
eh bien ça concernera uniquement s'il ya
dans la composante est par contre si
vous voulez donner un style à tous vos
atouts un style à tout vomi et bien vous
les mettez dans settings ce sera des
réglages globale des réglages pour tous
les composantes du projet donc voilà
pour cette partie style et qu'est ce qui
va nous attendre les amis heures suivant
j'ai l'impression qu'on va on va rentrer
dans le dur
ah oui là on va commencer recommencer à
travailler avec la pays alors en réalité
une ouest le logo à faire ça nous permet
de voir comment on traite les images
denrées acte est aussi je voulais vous
dire donc lorsque la châtre indre
démarrer mon projet donc pour démarrer
un projet c'est pareil on fait toujours
à mpm start
en revanche si vous récupérez un projet
parce que vous récupérez vos fichiers
terminer en dessous de la vidéo il faut
que
que vous fassiez que vous installiez en
fait la bibliothèque notre module parce
qu'en réalité là on voit que dans du tig
nord quand moi je commence mon travail
lennon modules ne sont pas importés
gittinger c'est à dire qu'est ce que tu
ignores comme fichiers quand tu quand tu
fais un quand tu vas sur button eh bien
on y va chaque fois on ignore on ignore
nos modules forcément c'est hyper
volumineux donc ce qu'on fait c'est que
on ne n'importe pas donc la personne qui
récupère le fichier doit se réinstaller
dans des fichiers et modules et pour
faire ça faut juste faire
npm ihu npm install mais le hisser le
raccourci de install donc si vous faites
npm y est bien en réalité hop ça va npm
va aller dans des pans d'annecy comme
ceux ci et il va parcourir tout ça et il
va lire tac tac tac tac et il va prendre
exactement cette version-là cette
version-là cette version là il va tout
réinstaller dans des modules et là le
fichier vous pouvez faire une p and
start
et il pourra démarrer donc voilà c'est
une petite parenthèse pour vous
présenter ça donc ok le fichier de les
redémarrer il est là nous vous a dit
qu'avant de se lancer à l'aventuré de
sueur sur le pays
on va d'abord faire un complot nantes
lobo donc on se met là on fait logo
point j s ok on fait rsc hop on va
enlever ça on va faire point logo donc
toujours une classe comme ça pour
déterminer que l'on est dans ce
composant là et on va lui dire quoi on
va lui dire qu'il nous faut une image le
logo
donc on va dire src tu vas nous chercher
img slash l'umq lines est pas du tout à
taper vs code en général et il faut
mettre une alternative on va dire logo
et on se met 1 h 3 où on écrit react
world hockey j'enregistre donc la nôtre
comprenant d'autres composants a été
importé nulle part
toujours est il que là vous voyez que
j'ai fait images et j'ai été directement
à la racine comme si en fait on se
situer en fait quand vous importez une
image depuis le gie et cycles depuis en
quelque sorte html eh bien il faut aller
l'a puisée c'est comme si on partait de
la racine du public
c'est comme si on était dans public donc
là on fait taktak tac tac tac
par contre il ya une nuance c'est que si
jamais on veut utiliser cette image
depuis le css pour la meilleure
performance si on faire une image de
fond par exemple en css là c'est un peu
différent donc j'enregistre ok là j'ai
enregistré on l'a toujours pas notre
machin donc on va dans about
on va dire que là on vint logo il faut
se faire loto un port voilà donc là on a
on aura nos petits logos dans le bail
outs allons allons vérifier
voilà on est là donc là il a écrit e lo
ré at world's donc déjà il n'a pas
réussi à nous d'afficher notre image
pourquoi pourquoi est-ce qu'il a pas
réussi d'un fichier image il s'appelle
pas logo png je crois que je l'avais
appelé différemment à ces logos 192 tac
vérifiant donc là il va puiser
donc quand on quand on fait depuis au
logis sx il va puiser dans le statique
alors dans ce qui est fait dans public
on parle de cette racine la voilà il est
là le logo avec écrit react to world
class n'y a pas de style c'est pas très
grave on va se le mettre et il faut
juste penser à le mettre dans sommes
aussi up
ici ce sont après c'est le logo et en
absolut
il tord ou en absolu de centrer vous
allez voir comment on fait ça et donc là
si on veut accéder au style on va dans
composantes et on se crée un enders core
logo points et css là je vais récupérer
ce que j'avais écrit et c'est comme ça
que j'ai pour vous expliquer aussi donc
on commence toujours par point logo pour
dire qu'on est dans le conte ponente
logo et à partir de là quand on appelle
là je crois c'est que le h3 qui est dans
dans logo donc on impact pas les autres
comme le mg donc voilà ce qu'il faut
savoir tourner j'enregistre c'est que la
wei qui a un background et on va
chercher une image donc l'image j'ai pas
encore apporté mais donc pour les images
qu'on importe depuis le sas il faut pas
les mettre
il faut pas aller chercher comme si on
était dans le public il faut aller les
chercher comme si on partait du fichier
sas donc on sort du fichier on sort la
ans on sort deux composantes
on sort de ce style et là il a écrit à
cette semaine donc pour l'instant on n'a
pas créé donc on va se faire un dossier
à 7 et donc danser dans ce dossier à 7
on va les skopje l'image à mince penser
que la vella d'image du support non
c'est pas très grave de les récupérer et
d'autre part la voilà donc vous vous
l'avez en dessous de la vidéo dans supor
voilà elle est là et donc les images
qu'on va aller chercher deux puis le css
il faut les stocker dans source
vous les mettez vous voulez moi j'aime
effet jamais un truc à 7 c à vous pouvez
mettre un truc un dossier ing et ça
marche aussi chacun organise comme il
veut mais enfin tant que tant que ces
cons principe par les autres infos tout
faut toujours penser pouvoir avoir la
vision de des personnes qui passeront
après vous attendez je commence à fermer
un peu des choses là on s'embête pas
trop voilà on se met comme ça et donc la
bombe et retenez juste que vous partez 2
ce fichier sas donc on sort deux fois et
on va chercher l'image d'accor donc
c'est pas du tout la même démarche que
pour aller que quand on l'a ici langis
sx ou là on quand on a du g6 on est
directement sur la partie on va dire
frontale on est sur le le statique et on
part de public voilà c'est les deux
petites nuances et donc logiquement
notre logo le style n'a pas pris
pourquoi est-ce que ce qui n'a pas pris
s'il est bien suivi mais on a créé notre
fichier là mais l'index ne le connais
pas qu'il faut bien sûr à chaque fois
penser à leur ajouter ici
donc là on est sûr logo est logiquement
voilà on a notre logo qui est bien fait
parce que manger je les connais un petit
peu quand même
julien petit style et donc voyons une
image de fond on a un logo qui importe
est ici ep
et on l'a sur les deux composants
donc là on va l'été on a peut-être pu
faire un composant et d'heure on va dire
qu'il aurait regroupé la navigation plus
le logo mais bon sujet pour vous montrer
des exemples bien distincts voilà des
choses comme ça là où vous comprenez
bien qu'on est sur un exemple jamais on
n'a rarement décident qu'ils sont qui
sont si peu fournie quoi donc voilà je
vous expliquais ça et maintenant on
passe réellement à l'apei et op et à
l'affichage des pays alors inscrit un
composant un compound countries au
pluriel donc c'est les pays point js ce
sera un peu notre gros composants de ce
projet on se fait comme d'habitude un
petit air et c'est ok on a queen size
alors pour être sûr qu'il marche avant
avant de faire quoi que ce soit on écrit
jusqu'aux prises à l'intérieur et non
vol vouloir d'un homme countries donc la
place de accueil par exemple ici on se
met countries voilà il faut penser
toujours à l'importer là-haut évidemment
up contre le s est logiquement voilà
l'aï écrit country c'est à dire que ok
on est bien apporter notre élément il
fonctionne super donc qu'est-ce qu'on va
qu'est ce qu'on va vouloir voir vous
montrer d'abord comment on stocke des
données d'un real comme on utilise le
state via les cook lehouck de réac donc
ils sont nus qui sont arrivés il ya un
an et demi deux ans je crois non non
rien qui sont maintenant enfin ma tante
ou montrer plus qu'avec ça puisque c'est
extrêmement pratique et je peux le
prouver
donc je vous montre immédiatement
comment ça se présente un look déjà on
le sent un peu comme une variable sauf
que le cette variable on lui donne un
nom et on lui donne au moulin va
l'appeler data pour des données et on va
lui donner après la virgule
un deuxième élément c'est on va
l'appeler cette date a donc c'est
toujours une bonne pratique de l'appeler
7 donc mettre en place et le nom de de
la variable qu'on a déclaré ça veut dire
quoi c'est à dire qu'en fait data c'est
là qu'on va être donné et cette date à
c'est l'élément par lequel on passera
pour actualiser cette donnée vous allez
voir c'est un peu c'est un peu flou au
début je peux vous comprendre c'est pour
ça que je vais essayer de vous montrer
assez rapidement après comment est-ce
qu'on peut utiliser cette date
par exemple bon on va juste se pour
l'exemple on va juste use the state of
the string à l'intérieur et on stocke
lots d'accord donc se dire quoi se dire
que dans data on stocke des strings l
eau bien regarder si là dedans
hop on affiche et data comme ceux ci est
rien et ça c'est du réalisme ont misé
juste une accolade data donc à notre
return le j'enregistre et regardez ce
que ça va renvoyer
eh bien ça renvoie l eau ça renvoie la
valeur stockée dans cette variable alors
prendre les valeurs stockées dans dans
le state
enfin dans tout cas n'a parlé ou qu il
ya un petit plugin qui s'appelle react
développeurs tout ce plugin c'est un
plugin chrome qui est magnifique
vous voyez on va s'agrandir un peu
ajouté hop on se la joue tu ajoutes et
l'extension là ils vérifient tak tak
merci s'est ajouté
donc on retourne sur notre projet on va
dans la console ont fait inspecter et il
est pas là peut-être aller ce que je
cherchais le developer tools
où est ce qu'ils peuvent
je pense que je pense qu'il faut
actualiser la page pour que pour qu'il
prenne en compte les plus geeks ont
installé à voilà voyez un plugin
composants et un profilers non étudiées
que le compo net on peut se rapprocher
un peloton en plus le maître par là donc
le camp pénal se regardent et regarder
comment ça se présente
voilà on à l'arborescence tout
simplement de tout notre projet react
weeks et sans briller à chaque fois donc
là d'abord le browser routeurs qui
organise tout ça tac tac tac on descend
on descend ensuite on a le coude en
sommes donc qui contient le logo qui
contient tout voyez là tout ce qui
contient de complaintes sommes donc en
suite on passait à la navigation dans
une bonne petite navigation voyez tout
ce qu'elle a donc en fait ils absolument
tous les composants là dedans il ya le
link encore là qu'ils appellent ça comme
ça classe nav active
donc il ya plein d'éléments hélas que
l'intéressé c'est dans kung choisissent
donc on ressent tout en bas on a le
comprenant tout cas une chose est
regardée queen choisi écrit ou qs state
lots donc dans son état ce composantes
il stocke la valeur de lots et cette
valeur donc on peut l'utiliser après
comme on veut sur notre page de façon
dynamique la wake en fait on peut la
faire évoluer et derrière la n évoluera
de façon dynamique
par exemple on va faire une fonction ou
ailleurs const say goodbye est égal à et
on va lui dire quoi cette date a et on
va lui dire good bye ça veut dire quoi
ça veut dire que là le cette date a en
fait on ne peut faire et voulait que
cette date que cette date à louis que
ces données faire que cette variable on
peut les faire évoluer qu'en utilisant
cette date a bien regardé lâche créer
une fonction pour lui dire cette date a
tu fais ça et donc tu cries goodbye bien
regarder on va se mettre un peu plus bas
et on va faire recevoir par exemple un
bouton bon c'est un peu mal organisés
mais dès que j'ai enregistrés çà va se
mettre bien en reste faire un bouton on
va dire dire au revoir et regardez là on
va dire on clique et on va dire quoi un
clic tu me déclenché say goodbye
et là qu'est ce que ça veut dire ça veut
dire que
à l'événement c'est comme un animal
listener en quelque sorte en juillet ce
classique quand on va te cliquez dessus
le bouton tu me tues tu me tues me
déclenché sa série good bye fait quoi il
va faire cette date avec la good bye
notamment la datar de hockey
j'enregistre regardons ça c'est vraiment
ça ça vraiment valeur d'exemple on va
papa y écrire ça après notre truc voyez
là on a l eau dire au revoir je clique
goodbye et le state goodbye
ok ça c'est une notion importante de
react vous allez voir que bon on va pas
mettre le faire donc voilà pensée de
petites parties vous en doutez on va pas
on va pas faire une fonction say goodbye
on va faire un truc un peu plus complexe
quand même faire un truc un peu plus
complexe que ça c'est à dire que cette
date à y avoir quelle lequel nous stock
tout tout notre appel à la base de
données donc là au lieu de dire l eau on
va juste je retiens qu'on attend un doré
qu'on attend un tableau de courbet
décrocher c'est pas obligatoire qu'on va
être qu'on peut changer en fait ça peut
être ça peut très bien être un homme
beurs voor 25 et on peut changer en lots
donc ya pas vraiment de de typage après
la fonderie cuisez ce texte avec scripts
le monde a joué je m'égare un peu donc
on va s'en tenir à ça
et on va aller travailler que la pays
sans plus attendre
on va les faire un fait ch donc on se
met là je récupère le lien que vous avez
vous éventuellement un projet fini si
vous voulez pas vous le récupériez ou
pas vous tout à palau donc s'appelle
reste countries point nos os lacherest
cela je vais de slash hall est en fait
il faudrait s'en tenir à salalah pays
voyez si on fait ce lâche paul on a tous
on a toute une série d'éléments donc là
moi ça se met en forme parce que j'ai un
plugin qui s'appelle dissone view voyez
c'est joli c'est en forme
si vous n'êtes pas de ghislaine view
vous voir et pas ça comme ça voilà allez
dans google si vous voulez donc voilà là
on a tout ça par contre il ya trop
d'informations est bon plus on va
chercher l'information et plus on est
lent à faire une roquette même si bon là
c'est que des données ça va quand même
assez vite on aime bien en termes de
performances sur des choses précises
donc on rajoute point d'interrogation
fields et on veut que naît une
population région-capitale flight
regarder la pala pays voilà on n'a que
des pays avec le nem capital région
région c'est là le continent et la
population donc voilà pour tester
d'abord si on appelle un tapis est
susceptible de manger copier vous
d'abord le lien dans l'url voir ce
qu'ils renvoient d'accord lier envoie
les données on est bien maintenant il va
falloir que bien qu'on ait se cherchent
et se donner avec react comment va s'y
prendre les amiraux s'ouvre à la console
est à faire mpm epour install tirer et
ce port said
axios là on va s'installer la
bibliothèque axios axios ça va nous
permettre de faire un fait en quelque
sorte du cours d'une aktion c'est
extrêmement rapide performant et il ya
un besoin de convertir angie sonne comme
on le fait avec un fait habituel
donc vous allez voir ce sont tout à fait
ça quand on utiliserait actes même vu
ses actions ce qui faut il que vous
allez voir ok là on l'a écrit faune de
0,8 abilities augurait pourtant on se
met là on va dire une porte
axios from axios ok on enregistre allons
voir si déjà on actionne ce qu'elle par
sécurité voilà
axios 0,21 1 c'est cette version là
qu'on a dû axios ok donc maintenant il
va falloir aller se chercher tout ça hop
on se met là on va lui dire axios points
gates est inquiète
on veut faire on veut récupérer des
données entre guillemets paf on se
reprend le lien mars
du coup j'ai pu tout le lien puisque je
vous ai montré qu'il fallait a fini un
peu pop on se récupère tout ça qu'est-ce
qu'on fait derrière la promesse ne m'a
pas un seul transformer en ji sun on dit
juste zen
donc qu'est-ce qu'on tue qu'on tient le
résultat affiche le nom résultats en
passant dé tu es mon amie on va dire log
deux res ok regardant ce qui s'est passé
donc on enregistre hop on va dans le
console ogg et regarder quand il ya des
log en fait un réac il faut savoir que
que souvent s'afficher en double c'est
pas très grave
d'accord et donc enfin ce n'est pas
grave du tout et donc là on a
effectivement réussi à aller chercher
deux cent cinquante pays on les a on les
a ils sont dans notre rêve par contre il
va falloir faire l'étape en plus il va
faire faire un point data pour aller
juste dans ce data de notre requête
voilà et là on a réellement tous les
pays ok super donc maintenant qu'est-ce
qu'on va vouloir faire
eh bien on va vouloir stockés dans
battle d'atteindre le bassin de résident
et bien voulu le dire mais stoke moiré
ce point d'accord va très bien on a vu
comment ils comment on pouvait faire on
fait comme ceux ci ont fait cette date à
je n'y a que comme ça qu'on peut faire
évoluer notre état là de data on lui dit
cette date a mis en place la datar mon
ami es tu me passes ray ce point data et
voilà et derrière on va faire quoi après
notre notre action eh bien on n'a qu'à
se loguer data et on va tout faire péter
je vous le dis d'avancement la paf on va
se loguer data pour à ce que ça contient
hop là il va se mettre à jour attendue
au ski les nôtres compile inglin srec
est un petit peu long quand j'ai relu ce
nom mais le rythme s'est mis à jour
oui mais voilà il s'est mis à jour à
l'année ce qui se passe en dessous
puisqu'en fait il y est affiché et là il
est en train de nous faire un console
log à l'infini parce qu'en fait le con
ponente là y'a rien qui est qui et
cloisonnée en a rien a mis dans des
fonctions on n'a rien mis dans ce que je
vais vous montrer après c'est à dire
dans un news effect c'est à dire que là
il y à l'infini il lance le console ou
consoloc ont sur leur sol
donc c'est pas du tout une bonne
pratique de laisser en quelque sorte des
fonctionnalités comme ça à l'air libre
il faut jamais faire ça dans un
composant ce sont vous devrez rapidement
en termes de performances ce que ça ce
que ça engendre tout au long terme de
network
là on voit que là il est en train de
faire un
une requête à l'apei en permanence
quasiment plusieurs par seconde et on
est déjà dit mille eric ouest depuis que
j'ai enregistré donc là en terme de
performances des amis devinez quoi
c'est catastrophique voilà complètement
catastrophique donc il ne faut jamais
faire ça il faut grâce aux houches
avant il y avait une méthode qui
s'appelait haendel mount crois je sais
même plus comment s'appelait saison 5 je
vous le dis devant vous allez sûrement
trouvé s'assure du bon code aux
composantes wilmotte & company en moins
de femmes bien plus il y avait plein de
trucs comme ça c'était un bordel
maintenant si on veut cloisonné un petit
peu tout ça si on veut faire en sorte
que la performance soit bonne eh bien il
faut mettre tout ça dans un news effect
tout simplement
retenez juste ça regardez on va faire un
news effect donc c'est encore un look
c'est encore dur et actes moderne et on
va se mettre tous à l'intérieur peuvent
peuvent pas on se met en sommeil là
dedans oui y avait fait qu'il ne connaît
pas donc là haut pareil on lui dit je
veux que tu me que tu m'appelles de cook
muse effect donc tout comme la honda
beyou state virgule news effect 2 réac
de la bibliothèque reste
ok ça veut dire quoi sert que là on
contient tout ça là dedans un youssef
secte
alors pour l'instant s'il enregistre
savent rien faire de très différent
parce qu'en réalité en train de faire du
conflit new york la page avait
complètement buggé on a fait dix mille
roquettes
je me demande si on va la faire exploser
maintenant et la regarder en termes de
performances eh bien on continue on
continue de faire des requêtes
sherbrooke c'est quand même moins rapide
avec lui est fait
bon le rocket continuer de monter à bord
deux façons de façon exponentielle
bon c'est n'importe quoi pourquoi parce
que le musée fait qu'en fait il est pas
complet il faut savoir que lui avait
faite à la fin la fin des crochets il
faut mettre une virgule d'accord et on
met des crochets voilà à la fin de la
cola et en faisant ça en faisant ça est
bien le lieu des faits qui se joue
qu'une seule fois ça ça veut dire en
fait tu quand ton composante est mis en
place tu dis tout ce qui est à
l'intérieur
et tu le joues éventuellement et
derrière tu terme est urgent ou
uniquement ce truc là
soyouz est factuel le rejoue uniquement
que si là dedans il y à un événement qui
a bougé
si par exemple là dedans on mettait data
faut dire qu'à chaque fois que la date a
semé à jour tu mourras joue ça donc là
on sera encore d'une boucle infinie
on va pas lui dire comme ça mais
toujours quelques la regarde et
j'enregistre et là c'est à dire qu'il va
jouer ça une fois il valait fait-il
a-data une fois il va mettre en place le
7 date à et à prix va s'arrêter parce
que il aura rien dans le colback ce
qu'on appelle là le colback n'y aura
aucune raison pour lui de revenir sur sa
bombe pour l'instant vous c'est un peu
le bordel vous inquiétez pas on va
organiser à plumes et autres codes c'est
pour essayer de vous expliquer donc
atteint déjà utilisé la page si elle le
veut bien
dans le bain jeu manceau n'a pas tout
fait péter le proxy alors j'ai dû
recharger la page parce que tout avait
pété donc rage recharges pas de souci on
à rogers ont fait une page et là on voit
bien que les yeux effect avec un call
back la rue mais rien d'un call back se
dire qu'il ne saurons jamais pourquoi
c'est important parce que là on le voit
on voit que ça c'est notre notre
consoloc de coach luigi s14 donc c'est
lui là il a trouvé un aurait 2 0 et
pourquoi il a fait ça mais parce que le
lieu des faits qui s'élançait les
parties fait chez la data
jusque là il a attendu la promesse etc
mais il a continué de pendant que est
allé chercher ça pendant qu'ils
mettaient en place le reste point
d'atteindre dans data est bien là aussi
il a aussi lu ça et donc la data n'a pas
eu le temps de se mettre à l'intérieur
que lui il avait déjà lu le console
logue qui est donc affiché ici comme un
noeud ravey depuis ce comme l'indiquent
là c'était un vrai vide voilà tout
simplement
en revanche il n'a pas eu le temps le
consoloc de nous afficher sa mais la
data a bien été mise
on peut aller voir dans components si on
va tout en bas d'un quiz voilà on voit
là le states will hayes un tableau eh
bien il ya sûrement les deux cent
cinquante pays qui nous attendent
voilà on a donc tout notre data qui est
stocké d'un data alors on peut pas
l'afficher visuellement on pas
s'afficher en or est comme ça
visuellement que vous montrerai comme
l'a fait à l'heure avec la variable
entre crochets par exemple la science et
ça je suis même pas sûr que sa fille sur
un truc non ça fait tout péter on ne
peut pas vraiment pas s'afficher
l'aurait ce qu'on pourrait faire pour
s'afficher en or et en javascript java
script de classiques je pense que vous
le savez ce serait éventuellement de
faire 1 1 ap
pourquoi pas donc ce qu'on va se faire
d'abord c'est que là non on va se mettre
l'enlever des parentés noël ses
meilleures pratiques ont pris comme ça
on va lui dire points kung fu et donc ça
c'est important pour le css comme ça
tous comme à l'intérieur
c'est l'élément supérieur c'est lui qui
englobe qui englobe tout eh bien on va
lui dire map mois data donc comment
est-ce qu'on s'y prendrait on dirait qu
elle on va l'appeler countries nist
sexuelle et à l'intérieur pour mapei
comment est-ce qu'on s'y prend bien
regarder on peut faire du javascript à
même à même le js x sert que l'interdît
avec 6 qu'on lui data point map donc map
moi tout ce que tu as dans cet euro
chaque élément de cette heure et devient
un quiz un country fin country au au
singulier
donc voilà si vous connaissez vous si
vous connaissez pas les marocaines je
vous invite à réviser votre java ce qui
est assez important et on n'a qu'à dire
affichez new country point name tant
qu'à faire il est pas d'accord avec quoi
oui ce que la gemmi il faut jamais
mettre d'accolades après la flèche quand
on ferme appelez moi je serai que j'ai
tendance à le faire assez souvent cette
erreur paf
voilà on fait comme ça il me saoule un
country
il me saoule pourquoi il me sourit
[Musique]
contrit points ne me connaît pas à mon
avis ce qui est pas d'élément supérieur
donc on va faire des lits donc on va
lister donc tous nos éléments de la base
au sommet que j'ai un petit bout et
mettre des balises hop hop comme ceci la
voilà c'est pas souligner c'est bien on
est mieux donc on va faire un match ou
simplement de notre heureux de donc
chaque élément sera country point m et
voilà on vient de s'afficher les amis
tous les éléments tous les pays les deux
cent cinquante pays tout simplement
voilà la méthode simple pour faire un
petit une petite rockette un appétit on
peut selon le res consoglobe il sert pas
à grand chose
on se fait notre petite roquette ont la
stocke dans notre state
on fait donc notre data est derrière
monsieur isla fisher et actes c'est pas
magnifique y regarder on peut
directement incluant moyennant des
accolades là on peut inclure du
javascript directement là comme ça à
l'intérieur et ça vous allez voir que
c'est hyper utile ex hyper pratique on
va le faire quand même pas mal de fois
là jusqu'à la fin du projet et c'est
quelque chose de deux génial alors
maintenant ce qu'on va vouloir faire
c'est au lieu de se donner le
comportement de nos cartes dans
sous-composantes countries ce qu'on va
faire c'est qu'on va se créer un conte
ponote donc card qui va nous afficher le
comportement qu'on vaut donc le nom du
pays sa capitale sa population donc
comme je vous l'avais montré ici là sur
ce petit cette petite image on account
louise et derrière il ya encore un
composantes en dessous qui sera card et
donc carte vous voyez bien avec la
flèche là ça montre qu'on peut passer
les données de haute en bas
le compo nantes le plus haut peut donner
c'est donner aux comptes entre le plus
bas à la verse card ne pourra pas donner
c'est donner à countries donc il faut
bien que le fait ch il se fasse au
niveau de countries donc on va voir ça
de suite et on va se créer ce composant
card
donc on met garde point js ont semé 1er
essai on va dire là on va dire card
voilà ce qu'on peut d'ailleurs on voit
il renvoie card et donc qu'est ce qu'on
va faire au niveau de country ce pur
pour cela plaît bien là pour le dire
qu'on envoie l'image un chouette je suis
dire on a pour chaque élément pour
chaque élément que l'on map
tu va m'appeler le composant card hop on
fait comme ceux-ci mince jacoby le tout
un port décidément hop il est là voilà
faut toujours bien sûr qu'il soit appelé
là haut up on enregistre et là qu'est ce
qui va se passer
eh bien il le map simplement exécuter ce
qu'on lui dit de faire c'est-à-dire
d'afficher le composantes card qu'est-ce
qui contient se comprend dans le carnet
contient tout bêtement le mot card
donc il va nous afficher 250 x card ou
et vous voyez quand même qu'on peut
après derrière ça lui donnait le
comportement que l'on veut mais nous on
veut pas qu'ils jouent car nous on veut
qu'ils qui respecte une certaine logique
c'est à dire qu'ils nous affiche qui
nous affiche de les données qu'on va lui
passer donc comment est-ce qu'on s'y
prend pour lui passer des données en
react pour passer des données un groupe
aux notes bien tout simplement on va lui
dire on va lui dire à carnon va lui
passer son appel une box donc la prop
c'est quoi on va l'appeler country et ça
contient country donc le pays map est au
singulier qui est là et bien il répond
au nom de country dans le composantes
car dans le lit ça c'est selon l' onu
transmet la valeur toujours en
javascript la valeur à droite transmet
sa valeur à gauche donc là ce qu'on
vient de faire c'est qu'on vient de
créer une propriétaire convient
d'envoyer les données de country on
vient de les envoyer à la casse
regardez on va j'enregistre on va dans
card est donc là comment est-ce qu'on
pourrait vérifier ce qui a été passée
bien regarder on l'appelle props c'est
comme ça qu'on fait en ré actes on a
aussi pu l'appeler juste pour info pour
vous dire que ça marche on aurait pu
l'appeler country comme ceci mais moi je
vais vous montrer un truc général c'est
propre donc là si on fait country les
dates à son passé et si on fait
également props et bien qu est ce que ça
contient bien vérifié on va faire props
on va faire log de props alors qu'est ce
que c'est les props et donc là j'ai
enregistré l'envoi dans console log oui
il nous dit un autre truc intéressant là
c est celle d'une liste sud avionique
kiprop
donc ça veut dire que chaque élément
chaque élément de combat aps en réactifs
aux lui donner une clé donc voyez là il
nous est dit nous dit là vous voyez il
ya un problème il faut vous mettiez une
clé unique et à chaque élément qu'on m'a
pas de souci on retourne ici et là on
lui dit qu' un plat qui est égal à
country point neil comme ça ils auront
chacun une plaie unique
donc c'est pas compliqué au final
réactive vous dis à chaque fois quand il
manque des trucs qui vous dit quoi faire
donc ok je l'enregistré logiquement
devrait pleuvoir ce message d'erreur il
a une en train de sortir on va recharger
la page voilà et la voyez ce qui s'est
passé on a donc on a lobé lac dans la
carte
les données qui sont passés en propre
donc on a toujours 250 cartes qui ont
été créés puisqu'on à 2 150 pays donc on
a deux cent cinquante log ici puisque
chaque carte est longue et une fois et
là on regarde on clique dessus et on
voit que le premier savent gagner ce
temps et qu'ensuite laon log quoi on la
grenade ont log
voilà des pays comme ça india donc on a
réussi par contre il faut entrer dans
country pour voir la valeur qu'il faut
faire un point country et donc ça me
permettre d'introduire une valeur femme
une notion plutôt notion de javascript
mais surtout utilisé dans react c'est à
dire le des structures et donc comment
ça marche des structures ring eh bien en
fait au lieu de dire qu'on va vouloir
props point country à chaque fois
partout
contrit point m props point country
point flag propres soins country pas
machin on va éviter d'écrire propre ça
c'est juste des petits raccourcis on va
se créer une variable on va faire
constante raccrocher country c'est égal
approche ça ça s'appelle les amis du des
structures inc on a des structures et
donc ça veut dire quoi
en gros les crochets signifie juste que
l'on fait ça mais voilà je vous le dis
parce que c'est une formation qui est le
bouc retrouver donc en gros propre ce
point country c'est gala country non pas
après on leur a juste à dire contre i.am
country point capital
voilà où que des choses comme ça donc je
reviens quand même sur le des structures
in voilà on met des crochets comme ça et
ça veut dire qu'on fait props points ce
qui est entre crochets comme ça donc
matin autres variables country est bien
le bon là voilà comme ceux ci et vous
allez voir que la magie d'internet fait
que la voilà on est directement sur
chaque pays on est dans la capitale
astana kazakhstan machin chouette
voilà on a réussi à se passer
les données de chaque carte
individuellement et bien donc maintenant
on a juste à faire du rendu juste entre
guillemets mais bon c'est une question
d'habitude après c'est assez facile à
faire
c'est à dire en se baladant le return et
on dit qu'on fait des lits avec la
classe card donc en premier on va se
mettre une image c'est l'image du
drapeau
donc comment on fait pour importer une
image depuis notre nos données ont fait
country point flag non classés
conscience est propre ce point country
poi poi flag sauf que l'orne a
déstructuré avant donc maintenant on a
juste à écrire country on n'a plus
besoin de rappeler l'âpre obs anhalt
on le voit quelle jusqu'à dire que c'est
flag ça c'est pour rien en voyant ou si
jamais elles s'affichent pas l'image
ensuite on va mettre data containers
donc qu'est ce que ça contient la date a
donc au début il ya un drapeau et
apprécie enfin over il ya éventuellement
des données sur le pays donc que moi
j'ai listé d'endémie ont fait country
points mais on a tout d'abord le nom du
pays hop là je vais multiplier comme ça
ensuite on a la capitale et ensuite on à
la population paf
voilà hélas à tous nous lis tu es là
visuellement ça va de liste et chaque
truc voit la mort des drapeaux sont très
heureux au phare mais du steel wheels on
allègue l'afghanistan paf paf cagoule la
population la voyez que la population
n'est pas lé pas mes gars bien présente
et donc s'en va seul arrangé d'ailleurs
au début j'avais écrit dans mon exemple
j'avais mis pop points et après le
chiffre de la population alors on peut
faire comme ça on peut tout à fait
concat aînés c'est à dire on écrit ce
qu'on veut puis derrière une valeur
dynamique entre crochets ça c'est dur et
actes voyez la présentation un peu notre
carte là elle est finie et c'est
magnifique monts du forez on qu'on
s'occupe du du séparateur de milliers ça
ça va être tranquille on va le faire
tranquillement fin va tranquillement
facilement plus tôt et donc là ce que
j'aimerais faire déjà c'est mettre un
petit style histoire que nos cartes et
ressemble à quelque chose parce que moi
ce que je veux c'est que ces
informations là en fait elle soit sur le
drapeau donc en fait on va y mettre un
absolu et on va les mettre sur le
drapeau en opacité 0 et quand on va sur
volet clover et bien le repas cité maman
témoin peut-être que c'est un peu flou
la nouvelle je vous montrais quand
comment on va procéder
on se met dans composantes fort niveau
du style on va dire card point css là le
jeu koh phi lippe tout ce qui est soit
mon support je vous invite à faire de
même
donc juste pour savoir pour vous
expliquer y'a pas grand chose au niveau
du style qui est qui est compliqué
vraiment à comprendre c'est comment j'ai
mis des effets de over des effets de
skate canton quand on survole la carte
elle joue un peu avec un index pour
passer devant tout le monde et il ya un
effet d'apparition également voilà sur
le scale y ait en fait ça se sache se
déploie un petit peu moins ça c'est
vraiment du css je vais pas m'attarder
dessus
donc voilà on se met là et le
composantes il s'appelle au flop il
s'appelle card
j'enregistre la nôtre ça fait voilà là
on a tous les pays vont ils sont
représentés bizarrement on va arranger
ça émouvant j'ai ça en suivant tous cas
sinon c'est trop moche
et là vous voyez bon déjà qu'on a un
début c'est à dire que les deux éléments
sont l'un sur l'autre
l'autre ils en ont pas citer 0 quand on
survole hop il apparaît afghanistan
kaboul ap un type antarctique à bahreïn
et voilà donc voilà on a réussi à ses
fichiers tous les pays bon j'avoue que
le style il est absolument dégueulasse
donc on va enchaîner et on va faire le
style de countries donc tirer countries
points sss et donc contre il paraît que
je copie alors les éléments peuple voilà
comment être comme ça qu'est ce qui est
intéressant
qu'est ce qui est intéressant là dedans
il est intéressant lala countries liste
donc c'est là qu'on fait notre notre lit
j'ai moi j'ai juste mis display flex et
flex wrap wrap cirque les drapeaux en
fait ils vont ils vont s'organiser les
barjots enregistré leur montrer ce que
ça fait en fait le flex drap si vous
connaissez pas hop ans mais là on vous
prend et on importe on importe countries
ok donc la mort lente ou le style est
terminée le style notre projet en tout
cas il est comme ci comme ça et voilà on
a tous nos drapeaux ils sont un peu
mieux présenter et oui le flex frappe ça
fait que si un petit peu de place hop
il va venir se mettre si un peu de place
il vient se mettre les voiles ainsi de
suite jusqu'à moi que voilà il ya une
horrible largeur maximale de 3200 et
quelques
donc voilà ça fait comme ça ok donc nos
pays sont bien représentées on les a
tous qui c'était et vous voyez donc
voilà j'espère que ça conclut le
principe puisque puisqu'on va dire que
ça c'est vraiment des choses les plus
importantes de ré accélèrent de de
refaire des composants dans des
composants pour ensuite structuré pour
mettre vraiment des pleins de petits
faons découper le code en plein de
petites parties pour avoir un code
lisible un col facile à maintenir ce que
par exemple maintenant ce qu'on va
vouloir faire c'est ajouter une fonction
pour faire un séparateur de milliers
mais la fonction pour séparateur de
millions n'avaient pas de rencontre ils
ont lavé dans card est donc tout ce qui
concernera notre carte
ça sera connaît ici toute la logique
javascript si on remonte beaucoup ce
sera ici donc tout tout sera mieux
partitionner en quelque sorte voyez on
se récupère les données et après lens
mais toute la logique est comme ça ça
fait des composants moins volumineuse
que ça au final n'aurait plus
humainement countries
serait rendu le composant le plus gros
moins lisible oui c'est pour ça qu'on
fait ça donc maintenant séparateur de
big n
alors eh bien d'abord on déclare les
variables éventuellement les boucles et
new state chose comme ça ensuite on
déclare les fonctions et après on
déclare le gie et 6 donc maintenant on
va se faire une fonction qui va
s'appeler number format thing je propose
uniformatic de leurs formes at c'est
mieux s'aimer forme at on lui passe en
paramètre le x d'accord x à être le
nombre qui va recevoir et bien il va
faire un séparateur d'humilier et là je
vais copier la formule vous l'avez donc
d'un projet je terminais en bas de la
vidéo si vous voulez parce que ils
trouvent que c'est une règle ex et voilà
j'ai peur de faire des erreurs en
confiance a forcément dû commettre a dit
quoi sony x le nombre x qu'on va te
passer donc country population c'est ça
le clic ce tu vas nous le mettre en tout
string d'abord ce no string et après on
fait un replay 10 et c'est à dire que la
banque procède cette règle ex ça veut
dire que tous les trois tous les trois
caractères je nous mets quoi tu nous
mets un espace vide et par sanctionner
milliard gül et bien il aurait mis des
virgules
tous les trois caractères donc voilà
c'est ce que ça veut dire la rague ex je
les trouvais sur sa cover flow
moi je ne suis pas très bon en rayons x
moi je sais mon pas les faire par contre
à chaque fois que vous cherchez quelque
chose vous trouver sur internet des
bonnes formules des gens qui ont passé
des heures ou au moins en quelques
minutes donc vous pouvez prendre leur
travail et les remercier voilà c'est ce
que je vais donc hop ans mais là et
regardez là on préfère des javascript
comme on veut et bien là on va lui dire
qu'on regarde sur j'appelle la fonction
number formate et number formaté prend
un paramètre elle prend un chiffre en
paramètre est bien d'apprendre country
population à part à m j'enregistre et
regarder magnifique d'autres composantes
là il est très très beau je trouve et
qu'est-ce qui se passe voilà on a un
séparateur de miel vous possédez vous
mettez virgule ne pas mettre des points
entre les milliers ça marche aussi
donc voilà on a réussi déjà le plus gros
du projet en tout cas le plus essentiel
les choses qu'on peut retrouver sur
plein de projets réac qu'on fait est
qu'on refait donc bon c'est pas facile
au début c'est vraiment la toute
première fois hier et actes je comprends
que soit pas facile
mais après quelques semaines c'est
facile donc voilà qu'est ce qu'il vous
reste à faire il reste à faire du triage
un petit peu là affiché plus ou moins
deux pays
faire des radios et trier les pays par
ordre de population c'est comme ça que
j'ai écrit à la basse et du plus peuplé
au moins peuplées parce que là c'est pas
trés peut-être pas très pertinent comme
thriller oui on a des pays avec treize
mille habitants ouais très bien je ne
méprise pas du tout mais c'est qu'à
mieux d'avoir tous les plus grands pays
donc voilà on va faire ça après bien on
va d'abord se trier les pays par ordre
de population alors comment on va faire
pour trait des pays part de population
est bien inscrit une nouvelle variable
donc là on a tout notre data et bien au
rescrit une variable pour dire qu'on
aura tout notre data trier donc on va
l'appeler la sortie data donc on va
trier de du plus peuplé au moins
peuplées et donc on va mettre sept
sorties d'attaqué que c'est comme ça qu
enfin général donc pour agir dessus il
faudra faire cette sortie de là tu as
donc cette date a on va faire news state
et de base de ce sera 2 heures et 1
heure évident pour l'instant donc là on
va se récupérer là on a un respect de
l'ata qui est mis en place ici
ok donc en dessous on va faire quoi
mauresca une fonction qu'on storti de
country donc on va se trier les pays
opte est donc cette fonction donc dans
le lieu effect qui sera relancé
quand on aura la datar éventuellement eh
bien il va falloir tout d'abord prendre
cet heureux et pour faire produire la
fonction sortant javascript il faut tout
d'abord transformé notre leur et data en
objet donc on va faire constat comment
on va l'appeler objets country hodge
voilà country objets et c'est égal à
quoi ce qu'elle a object point qu'ils
donc de data donc on se récupère la
taille derrière ans yeux map en y
et data de i comme ceux ci on écrit
hélas convient de faire en fait c'est
quand même transformé notre heureux en
d'objets à la même chose à l'intérieur
mais maintenant on va pouvoir y
appliquer les méthodes sorte sinon on
peut pas faire en sorte ce directement
sur sa faim croyez moi j'ai déjà essayé
c'est pour ça que vous dis donc ok on
part sur ça maintenant on va dire qu'on
est donc sortie d' e rey qui sortit doré
dans ses bons jours je lis ça
correspondait avec lui rien donc
construit devrez et là on va appliquer
notre sortent donc on va faire en sorte
qu'on stockera le résultat dans cette
variable là d'accord donc ça va être
quoi ça va être construit object on va
lui dire quoi pour quand on fait un
sorte la plage oublié on va lui dire
sorte à b en paramètres et nous ce qu'on
veut leur faire c'est un tri sur la
population et regarder comment ça se
fait avec les méthodes modernes pas
javascript on dit juste return b point
population - à point population ça veut
dire que par rapport à la population
enfin tri des croissants c'est du plus
grand au plus petit ce que sinon ça ne
fait apte pour population - bons plans
population serait fait un tri croissant
est donc là les amis notre sortie des
heureux logiquement il contient il
contient les éléments ranger vérifions
vérifiant ou pas faut pas aller plus
loin si jamais ça ne marche pas déjà
vous voyez donc il va quand même falloir
qu'on se joue la fonction se mettre là
on va faire sortir heureux prof
bref hockey essayons gfr recharger la
page un petit peu il me dit quoi sortie
de reais note define dans ses sorties de
country par dans la fonction c'est pour
ça que je suis un peu embrouillé clés
non la norme allemande voit un petit peu
mais s'en sortir res ayons donc voyons
voir ce qui nous a mis donc notre log
ligne 20 21 il n'y a rien pourquoi y'a
rien parce qu'on lui dit de javascript
house alex et asynchrone donc lui
paf il ans à milan ça il fait son zen
mais elle n'a pas le temps de mettre la
date à la ici l'apple temps de la ranger
dans data que nous le demande
de trier la date à la honte du monde
déjà on prend date un an la tri donc ça
va pas du tout il appelant à faire donc
ce qu'il faut faire c'est que là on veut
utiliser ce call back
si on met lui décroché vite il a plus
d'effet que se joue qu'une seule fois en
revanche sénateur a décroché évident on
y met ce qu'on veut par exemple on y met
le terme data ça signifie quoi
ça signifie qu'à chaque fois que data va
évoluer et bien le milieu effect sera
rejouée grâce aux call back ici voilà
voilà la force du call back j'enregistre
est donc maintenant il va certes joué
d'abord son or est vide mais ensuite
voilà là il est plus vide alors là on a
un gros problème voyez ça rejoue à
l'infini pourquoi est-ce que ça rejoint
à l'infini mais parce que à chaque fois
date a évolué ok on relance une muse
effect et à chaque fois que l'on relance
news effect paf ont fait évoluer data
ont relâché les effects paf ont fait
évoluer d'état donc là on a un souci
le souci c'est que faut pas se relancer
le fait en permanence mais une fois
qu'on a là des données les pays ça
change pas à la seconde
donc il ya plus de 20 après d'aller
rechercher en permanence cette date à la
d'accord or comment est ce qu'on peut
faire pour pour pour ne jouer qu'une
seule fois ce truc là
et bien tout simplement on va interroger
onze inscrits en fait une sorte de ifs
enfin même complètement un if on va dire
si tu n'as pas encore joué cette
fonction joue là et après à la fin on la
passera sur falls et donc ensuite quand
on relancera avant d'aller voir c'est
vrai que j'explique trop ça sera
beaucoup plus parlant en images regardez
on va faire construire once et cette
plaie once d'or se dire joue une seule
fois on va mettre news state et de
bacilly sur true d'accord on met
toujours la valeur de base la côte aux
familles aux states of quand on a des
origines m'ont effectivement c'est
évident cercle ans vient de créer un
boulet un qui est sur true games et bien
qu'est ce qu'on va faire maintenant on
va se mettre à ce niveau là on lit à vif
pelé watts donc est-ce que si pelé watts
c'est vrai oui eh bien tu me joue tu vas
me chercher
toute la data et tu lèves tu me fais un
cette date ait eu ma thune à stoke
là-dedans d'accord sauf qu'une fois que
tu l'as fait ça une fois tu as plus à le
refaire donc regarder hop on met des
accolades on pourra mettre plusieurs
lignes plutôt comme ça je crois voilà et
là on lui dit cette plaie once falls et
de cette façon là il va la jouer une
fois tac tac tac tac des rats chercher
la data et la toque ici et après c'est
fini on arrête les appels intempestifs à
l'apei des appels en permanence alors
des jeux recharge la page
la voilà comme je dis ça bloque toujours
deux fois
jf donc le premier il fait il n'a rien
dans leur et la data n'est pas encore
arrivé par contre une fois que la la
data elle est arrivée
et bien ici là on relance le venue
effect est donc en relançant lieu effect
on se relance cette fonction est là la
fonction elle peut avoir lieu
on log et regarder comment ils sont
rangés les pays
ils sont rangés china india united
states indonesia du plus peuplé au moins
peuplé donc on a réussi à faire ça
maintenant on peut de notre sortie de
dirt et éventuellement déjà le passé le
passé ici la sortie de data ça serait
déjà un bon début
donc on se met comme ça et on dit cette
sortie d' data et on lui dit tu prends
la valeur de sortie aurait encore besoin
ça notre sortie de data là ce sera les
pays ranger dans le bon ordre
maintenant on peut même avoir lu on peut
lui demander de remettre qu' un certain
nombre on n'a qu'à dire de base de
bastien va faire sortir heureux problème
et de base tu vas me remettre 30
voilà comme ça on va pas non plus se
recharger la page au début et après on
va mettre éventuellement une poutre en
jeu pour mettre le nom de corne
ok on enregistre sa
hop là allons vérifier
ah oui du coup j'ai enlevé mon joueur de
mon blog mais on n'a pas besoin de faire
de log enfin de là je voudrais faire
l'homme mais regardez certaines
composantes
si on va dans composantes et qu'on se
balade un peu éventuellement nos
countries on voit qu'il ya deux steaks
country le deuxième c'est celui qui est
trié regardez on à beijing et new delhi
en c 2 secondes pour la capitale et on
n'a que trente pays donc ça commence à
zéro donc là il ya 29 ça fait trente
voyez on a les 30 pays les plus peuplés
du monde uniquement
donc vous voyez que ça a marché déjà par
contre c'est pas affiché à l'écran
pourquoi c'est pas affiché à l'écran est
bien parce que je lâche entrevoir que ça
c'est souligner parce qu'il est appelé
one choqués ont valeur ajoutée planes
même si c'est pas hyper utile on y va
pas nous embêter hockey est donc là ce
qui nous intéresse c'est que là en fait
on map la data
nous non on va pas faire ça on va map
est sortie d' data et c'est comme ça
qu'on n'aura que les 30 pays hop
j'enregistre et voilà les amis on a les
30 pays les plus peuplés du monde en
temps comme ça et voilà leur population
et c'est ok ça c'est bien mais bon si on
veut faire des tris ils ont étrillé par
continent si on veut en mettre plus
- eh bien c'est pas très dynamique tout
ça donc maintenant qu'est ce qu'on va
faire
eh bien on va se rajouter un petit peu
de recherche
alors pour mettre un nombre de pays
dynamique dans affiché à l'écran basquin
arrange le risque est surtout une valeur
qui sera stocké donc on va dire qu'on se
range value et cette rage value voilà on
va faire comme ceci est illégal
yooz state un câble de base dans le de
base ont affiché 40 pays voilà comme ça
donc ok on à rentrer value qui vaut 40
donc si on voulait déjà affiché notre
tableau et qu'il est toujours la valeur
de
d'où cette affiche au drapeau là est
bien ici ou d'avoir 30 des gens munis de
leurs dynamiques ont mes fringues value
déjà de base il a nous afficher 30 toute
logique
voilà une d'avoir tranquille je sais pas
on n'est pas compté mais bon ça doit
être bon attendez j'ai mis 30 ou 40 ans
car en toi j'ai mis 40 tout à l'heure à
30 ça s'arrêtait à l'espagne donc on est
bien on est bien on est bon il ya dix
pays qui se sont rajoutés donc voilà
c'est cool on a on a donc la valeur
qu'il peut évoluer dynamiquement en
faisant cette rente value cette
vaillance adverline volera donc ça fera
évoluer le nombre de pays affiché est
donc à chaque fois que rand value va
évoluer
il faudra qu'on se relance au musée fait
acter bien comment on fait on lui dit là
on lui dit rendre value à chaque fois
qu'il évolue lui tu me la suis effect
tout comme data voyait on le paye ne
mise que si nous y souligne voyez là si
on ne met pas et souligne pour ok allez
on va pas le vexer parce
qu'effectivement ça pas grand chose de
relance et louise effect seaplane sipa /
falls mais bon au moins comme ça c'est
fait donc maintenant on va se créer
cette input le fameux c'est une poutre
ranch qui va nous permettre de faire ça
donc on se met là et on veut dire sorte
tirer containers donc ça c'est le
conteneur on va mettre les choses on va
se créer un impôt de type rente gens
qu'on fait input de poing rendent je
voyais ça craint du boudin qui prend
automatiquement le nez mais l'idée on
s'en fout faut juste lui dire orange en
valeur minh tu peux faire un un pays en
valeur max tu vas d'affiché 250
ok il peut aller de lalart regardez ce
que ça regardez comme quoi ça ressemble
comme deep ou trois ans si vous n'êtes
pas familier
voilà ça fait ça la championne barque
l'alleud la marge a pas très bien pris
bon je verrai ça après donc la voyons en
ligne putsch qui peut évoluer entre 0 et
250 mots là il se trouve qu'il n'est lié
à rien du tout c'est une poutre anges
donc comment est-ce qu'on pourrait lier
à quelque chose à des gens peu le maître
une valeur sa valeur de base ça value
c'est quoi et bien c'est rendre value
donc là de base on part sur 40
donc lui de base il affiche 40 mais
c'est pas ça qui va nous permettre de le
faire évoluer en même temps que la
veille le lin 9h40 haut débit de base
c'est pas ça qui va nous permettre de le
faire évoluer la semaine juste comme ça
pendant un petit moment plus voilà bon
c'est pas beaucoup mieux faire comme ça
voilà c'est pas ça qui va le faire
évoluer
enfin qui va nous faire évoluer la
recherche des plans plus live est bloqué
donc qu'est-ce qu'il faut qu'on fasse il
faut qu'on prenne en charge à chaque
fois qu'il fait un changement est bien
quand le ranch value il évolue nous faut
qu'on récupère la valeur du range en
fait regardez comment on fait ça dans
les actes on va lui dire unchanged donc
quand tu quand tu changes comme un rival
qui se noie on va dire en quelque sorte
en javascript classique on suit une
fonction fléchir en récupère die welt
pourquoi est-ce qu'on se récupère les
vannetais mais pour pouvoir avoir le hip
hop internet point value donc la valeur
que le ranger ans ferme et donc on va
faire cette rando value donc met en
place la valeur du ranch avec quoi avec
10 points target point value donc ça
veut dire quoi se dire que si on se met
sur 200 lui il va faire un cette frange
manu sur 200 et donc ici ron van où il
va passer à 200 et vu qu'à chaque fois
qu'on veut lui évolué on relance le tri
lui il va nous afficher 200 pays et
c'est donc là j'enregistre et on va
vérifier sans plus attendre
c'est bon j'ai enregistré leur charge au
casot regarder on réduit et ça réduit
voilà ça va très très vite ce que tous
les pays sont déjà pré chargés on
relance pas un fait chaque fois
voyez donc si on veut on peut se mettre
250 et voyez que là on a les pays les
moins peuplés du monde plutôt vers le
bas
french house and territories 140
habitants la magnifique jeu je peux me
tromper je me dois pour aux français
très bien monté et bien voilà on apprend
plein de choses en plus en regardant ce
truc là la réunion aussi considère que
c'est un pays très bien première
nouvelle donc fait donc voilà on apprend
que beaucoup de choses c'est bien on est
content
donc on a réussi à se faire b à faire
évoluer notre votre input maintenant
qu'est-ce qu'on va vouloir faire eh bien
on va vouloir faire selon les continents
alors pour créer le tri avec des inputs
radio je sais bien qu'on va pas ce kode5
input avec cinq labels
radio on va pas faire ça on va plutôt se
maps et rex créer une logique une fois
et puis cela ma paie donc regarder à
quoi ça va ressembler on va procéder
comme cela c'est à dire que là on va
dire en se faire d'abord ayew state pour
sélective de radio ça ce sera la radio
qui aurait été sélectionné
donc cette selected radio donc pas
simple le continent afrique à asia et
c'est bon ça en anglais 1 on est là pour
l'exemple vous inquiétez pas c'est que
sinon il aurait été plus pertinent de
médecins en français mais là c'est pas
très grave donc pour l'instant à dire
ses strings vide y'a rien qui est
sélectionné dans le radio ya aucune
radio qui sait quel de base d'accords et
maintenant on va dire qu'on est radio
dans toutes nos radios c'est quoi on
peut créer une variable à un mode
javascript un vraiment un classique on
est obligés de faire du youth texte à
chaque fois ça marche aussi
alors on veut juste énuméré un tableau
avec les cinq continents
les principaux on va dire donc africa
america asia europe et le dernier
océaniens ok donc nous maintenant on va
ma pcc différents noms pour en créer des
inputs vous allez voir à quoi ça
ressemble on va se placer après cet
hymne coutelas donc on va se mettre
comme ça à ce niveau là on va faire des
ul avec la classe même radio
venant d'ailleurs n'y a pas besoin de le
déclasser 88 chiens non je crois pas
qu'ils aient besoin de casting et on va
dire quoi mais regardez on va faire du
javascript on va dire radio point map
on va se battre et quaresma paix des
radios au singulier et donc là il faut
faire un return de notre de notre maps
et on va se faire un lit
vu qu'on fait un map avec réacteurs sont
une seigneurie dans les erreurs
on lui met une clé unique donc la clé au
mixer sera le nom de la radio
et voilà et on se crée et anime foot
donc deux types radio et il va quand
même falloir qu'il est né l'enfant s'en
fiche il falloir qu'ils aient une value
et de sa value ces radios donc regarder
déjà je pense que là on a un premier
visuel qui va pouvoir apparaître non
d'ailleurs y'a pas de bon là on a cinq
boutons radio qui sont apparus d'accord
school je les ai mis en flex en ce pays
se rendent donc ils se sont bien séparés
les uns des autres
par contre ils ont aucun label or
comment on fait pour projet de label
donc il faut un idée
notre radio c'est comme ça que ça marche
on lui met un idée est en dessous on se
fait un label et html fort donc c'est
pour ces pour l'idée on lui mais on dit
on une idée ces radios donc africa
america etc et donc qu'est ce qu'on
écrit dans la belle et bien écrit la
valeur de radio tension c'est hyper
simple on ajuste maps et on ajuste maps
et un tableau hyper simpliste inde avec
le terme donc on peut mettre que ça en
fait radio c c africamerica europe et c
est encore deux ans à en reliant les
labels l'a11 en sorte que l'aïd et lady
et html force sur les mêmes c'est à dire
qu'ils sont liés
donc même en cliquant sur le label
s'appliquera sur la case regarder
j'enregistre et la voilà la magie
d'internet on à africa america on peut
tous les cochers pour l'instant n'y a
pas vraiment de logique qui ont été mis
en prison peut pas voir les décrocher
les radios donc ça c'est un truc qu'on
va corriger mais en tout cas vous voyez
le principe on vient de ce côté on vient
juste de se bat p ça c'est du javascript
1 on a fait on a peu en html classique
vous auriez dû faire faire comme ça quoi
voyez enfin oui bon là ça part mal
présentés mais en faire cinq différents
là on n'a pas besoin de leur économie du
code qr en faisant ça on m'appelait les
éléments et c'est bon donc on lorgne une
value
on leur a mis la d'idées et il faut
éventuellement savoir dans quelles
circonstances
notre radio et checker ou pas donc on va
lui dire checked tué checker
si jamais radio il est égal à selected
radio d'accord pour l'instant c'est
l'équipe de radio il est vide d'accord
c'est ce paramètre qu'on a mis là il est
vide
donc pour l'instant rien et cochet donc
qu'est-ce qu'on va qu'est ce qu'on va
simplement se contenter de faire eh bien
on va changer selected radio au fur à
mesure que l'input est cochée tout
simplement
donc on veut dire quoi on your own
challenge si jamais on clique sur cette
input on se récupère l'événement et ont
fait un set
selected radio donc met en place le sait
qui de radio avec le hip - target moins
value donc on récupère soit afrique à
sion clique dessus en récupère soit
europe si on clique dessus et donc ça va
créer quoi ça va faire en sorte que ces
liquides radio een et africa par exemple
et si jamais c'est l'équipe de radio il
à africa alors cette condition est
remplie
alors il devient checker regarder on
peut on peut le vérifier
ok vérifions voilà là il n'a plus qu'un
seul qui ait sélectionné parmi tous
désignent pour nous c'est comme ça qu'on
fait en réalité pas besoin la procédure
orale faire broder scott et ça marche
très bien
donc juste pour vous montrer puisque
l'on est sûr qu on trees et qu'on a
regardé le state là ces oceania regarder
le state
là on est sur asia je clique europe
voyez là c'est comment ça évolue voilà
c'est comme ça qu'on fait évoluer le
state et d'ailleurs si on bouge ça voyez
que là aussi ça a évolué donc voilà
c'est comme ça qu'on puisse contrôler
aussi vous allez sur votre composantes
et vous regardez comment évoluent les
state avec les state à chaque fois et là
vous voyez prenez vraiment sur des
évolutions dynamique
donc ok c'est bien on arrive à stocker
la valeur qui est cochée par d'autres
utilisateurs
mais pour autant il ya pas de tri qui
s'effectue donc c'est à quel niveau à
votre avis comment faire le tri
bon et bien sûr j'attends une réponse
mais pas savoir répondre et à quel
niveau on va faire le tri bien c'est au
niveau du map tout simplement là avant
deux maps et qu'est-ce qu'on applique
pour faire un tri s'il reste un petit
peu javascript ce que je recommande
quand même du début qu'est-ce qu'on fait
avant deux maps et en faire un filtre on
va dire méthode filter
donc tu ne filtre annuellement chaque
country on dit country pour un région ça
c'est le coup triple région c'est le
continent si jamais ils includes
selected radio donc le bon on a vu ce
qu'il y avait dans ses lectures de radio
alors tu me lemay et et derrière on se
lance un map
voilà ça c'est un petit peu plus
complexe le bois je pense que c'est
quelque chose qui sont maîtrisées en
général donc hop normalement en faisant
ça
regardons ce qui se passe si on fait
america on a plus que des pays
américains
hop hop europe on peut en rajouter
on peut éventuellement en enlever voilà
on a ça je crois qu'il ya même pas en
océanie il faudra rajouter un peu sur de
l'océanie est quand même tout ça en
océanie ne s'acceptent pas très peuplée
donc voilà et donc là on peut absolument
trier tout ce qu'on veut avec la
vivacité le vivacité d'un d'une
bibliothèque javascript c'est à dire que
on ne demande rien aux serveurs on a
fait notre on a fait notre fait une
seule fois et après on se démerde c'est
nous qui quittent riom les données
qu'ils en tout selon ce que
l'utilisateur veut et donc on est sur un
site très très dynamique
49 des beats en algérie très bien je
suis très curieux donc je regarde
ok donc voilà on a réussi on a réussi à
se faire sa part contre white les radios
un petit défaut c'est que si jamais
l'utilisateur ne veut plus de radio il
me revenir à tous et bien il peut pas ne
peut pas parce qu'en radio on peut pas
quand on fait une chute boxe on peut
tout ou décocher mais là on peut pas
dans ce qu'on va faire c'est qu'on va
créer un bouton et vous allez voir avec
réac ce qu'on peut faire ça facilement
on va créer un bouton tout simplement
pour annuler
regardez on se place donc à la fin de
notre radio la tac tac tac ici à ce
niveau là
on veut faire une classe name dancehall
pour annuler et là on va dire quoi
on va tout simplement secret h5 où on va
dire à nu les recherches alors dans
quelqu'un est ce qu on veut qu'ils
apparaissent chaque la regarde et
j'enregistre l'agent registre il est
déjà là la salle d'accord est ce qu'on a
envie qu'ils apparaissent là non enfin
tant défaut je recharge la page voilà là
y'a rien qui est cochée elle en est sûre
le truc de mode est ce qu'on a envie
d'avoir un lieu recherché alors que si
je clique de suisse passe rien dont on a
envie que la numéro cherche il se
déclenche uniquement quand il existe une
série qui de radio et regarder mes amis
en direct comment ça marche on fait
selected radio donc la honte est si la
valeur et roux s'il ya quelque chose de
sexy de radio il faut savoir que il faut
savoir que des strings vide là c'est
qu'ils voient rien au niveau du trou
c'est puissant c'est qu'il faut pas trop
en tout cas et donc regarder on dit
selected radio et hop referme ici ça
veut dire quoi ça veut dire si jamais
celle écrite radio et sur true le et il
veut dire il inclut forcément tu
affiches
ça regarde et j'enregistre ça c'est des
choses qui après son hyper pratique
quand on le connaît des pages rapidement
et tout ça permet vraiment de faire une
super interface donc voir des jeux clic
et voilà il est passé sur true selected
radio puisqu'il contient asia là il
contient américains d'accor s'est tout
simplement comme ça que ça marche
et donc là si on veut
à lui la recherche comment on fait
comment on fait les amis et bien on se
met au niveau du h5n1 petit peu logique
on va dire si jamais on peut cliquer
dessus
mon ami le h5 qu'est ce que tu fais
fonction fléché paf paf on va dire cette
sélective radio et on se passe sur
guillemets du coup cette valeur là elle
ne sera partout pas trou donc ce hashtag
disparaîtra j'enregistre et en plus bon
ça en plus a nommé tracé l'équipe radio
sans lèvres à tous que tous les toutes
les radios accessoirement on refait on
est sûr africamerica hop on revient à 0
et voilà les amis nous avons réussi ce
projet bien il est temps de conclure
j'espère que vous avez réussi ce projet
n'est ce pas que c'était pas trop
compliqué pour vous alors comme je le
répéte et des dizaines et centaines de
fois peut-être dans cette vidéo ce qui
est important c'est d'être bon en
javascript en fait parce que plus vous
avez de bons javascript et plus
réactives va vous paraître facile voyez
faire des choses comme ça ou même créer
des fonctions comme celles ci ça si vous
êtes bon javascript et aucun souci donc
il faut savoir que en plus eu les
devants javascript vous arriverez vous à
une courbe de progression très rapide se
rend lui la survie js donc faut quand
même ne pas oublier que la base de la
base avant d'être spécialisé dans
quelque chose dans un framework ou quoi
avant et spécialisés la base de la basse
et de maîtriser c'est le vraiment
maîtriser javascript en tout cas si vous
êtes un développeur front tu es en
l'occurrence pouvait même être full
stack en javascript j'ai fait des vidéos
sur ça mais si vous voulez en tout cas
déjà être un développeur fronte qui
bosse avec des technologies modernes qui
fait des pages dynamiques comme celle ci
est bien il faut que vous ayez un bon
niveau en javascript et ensuite que vous
perfectionner sa en étant bon en react
alors vous ai montré beaucoup de choses
de réac mais vraiment pas tous vraiment
vraiment pas tous là on va dire que il
ya entre 20 % ce qu'on peut faire en
réalité peut-être 30%
il ya énormément de choses en règle
notamment un truc que j'adore mois qui
s'appelle redux mais bon ça vient
beaucoup plus tard on va pas se mentir
il faut déjà que vous comptiez vous un
deux trois projets vous voyez les
limites de react pour comprendre
pourquoi redux c'est extraordinaire
enfin extraordinaire j'exagérais
beaucoup gens qui aiment pas réduction
et moi j'adore ça
mais voilà en tout cas je vous ai
expliqué react avec des mots simples
avec par exemple il ya beaucoup
d'exemples on va dire que s'ils
voulaient reprendre des projets faire
des tris voilà faire des radios faire du
range afficher des données d'une api
avec axios faire des navigations vous
avez déjà tous ici j'ai déjà tout dans
ce projet faisait juste à picorer dedans
vous venez picorer certaines choses et
même si vous voulez faire du tri ça va
faire du tri c'est hyper important et
retenez juste cette méthode là et vous
permettra de trier n'importe quel
tableau en fait voilà j'ai trié
population mais j'aurais pu trier région
par d'infâmes éthique où j'aurais pu
trier autre chose dans qui avait dans
nos données donc voilà retenez bien tout
ça enfin rené non sachez que ça existe
et puis le jour où vous avez besoin
aller picorer dans des bouts de codes
parce que on peut partout retenir par
cas ça sert à rien tout retard parker
sachant que tout le contenu est
disponible sur internet vous avez pas
besoin de tout retenir
j'ai besoin de savoir quand aller
chercher le contenu au bon moment donc
voilà je voulais également vous orienter
éventuellement sur ma playlist react
alors pas surtout voyez qu'en fait j'ai
refait un projet réac parce que mon tout
premier projet rac il parle des bases et
tout mais il parle un petit peu de vieux
réac ce projet j'ai tourné il ya un an
et serait que ça va très très vite la
technologie est depuis restée beaucoup
évolué mais moi j'ai beaucoup évolué at
home 2 niveaux donc j'ai trouvé plus
partir de refaire une vidéo au propre
bureau elles servent aussi
accessoirement à mes étudiants à mes
étudiants dans la vraie vie donc
donc voilà qu'est ce qui est bien dans
ma playlist passa passa dans le golf ça
peut être pas mal ces choses là mais bon
je les recommande pas spécialement
enfin fait leur deuil c'est assez
intéressant
non ce que je recommande la csu sur
lequel je suis là c'est là le site
vitrine en react c'est à dire après
cette explication je vous ai fait là
je trouve que c'est ça peut être sympa
ça peut être sympa de faire ce site
vitrine c'est dur 2h43 mais il ya
énormément style energy s et on apprend
je trouve on apprend plein de choses le
projet est assez assez stylé on ne voit
pas très bien
enfin bon voilà il ya des effets entre
chaque page et tournoi plein de choses
en fait et c'est assez intéressant
et puis le jour vous serez très bon
react très très très très bon en direct
n'ont peut-être pas très bons non plus
mais bon il ya cette vidéo de deezer bon
je sais pas qui la regarde cette vidéo
enfin bon tout cas je la regarderai pas
vu d'autre 10h faut être fou pour faire
ça enfin bref c'est une vidéo de dix
heures où j'explique comment faire un
projet en react hyper hyper complet et
puis éventuellement après un projet sur
next js qui est un framework de réac qui
lui même est une bibliothèque javascript
là je vous dis qu'on passe on commence à
placer dans des niveaux un petit peu
plus poussée et la vidéo sont next en
plus tu m'en allais pas vrai les pas si
compliqué mais elle vous simplifie
énormément la façon de faire des sites
vitrines notamment c'est très très
pratique pour faire des sites vitrines
des pièces il n'y a pas besoin de faire
de navigation comme non la codéine
faille est plein de choses qui se font
automatiquement que j'explique dans la
vidéo dure une heure dix neuf donc mon
sens un peu de temps pour vous la faire
un peu plus tard donc voilà je vous
invite à sa faire ça et puis si vous
n'êtes pas bon javascript aussi bossé au
jazz inscrits
et puis surtout si vous voulez
progresser la meilleure solution pour
progresser ça reste de vous mêmes codes
et les choses c'est bien de regarder
comment les gens font
c'est même recommandé au début et après
c'est à vous de développer de buter sur
des choses parce que c'est la nouvelle
et avoir une courbe de progression
extraordinaire
en tout cas moi ça s'est passé comme ça
pour moi donc voilà les amis je vous
souhaite bon code vous avez le fichier
terminer en dessous la vidéo
je crois que j'ai déjà dit plusieurs
fois donc voilà je vous souhaite bon
code et je vous dis à bientôt
allez ciao