3447 lines
132 KiB
Plaintext
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
|