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