Transcription
1. Introduction: Bonjour, je déjeunerai et je suis ingénieur logiciel pour des
années d'expérience avec React. Dans ce cours,
nous allons créer une application React simple qui vous permettra de saisir
une tâche ajoutée à votre liste. Et une fois que vous avez terminé, vous pouvez le compléter en cliquant sur le bouton ci-dessous qui
passera par le code HTML, CSS et JavaScript
du code à partir de zéro. C'est donc le
projet parfait si vous apprenez, réagissez et que vous voulez
vous mouiller les pieds avec un projet
réel. Une connaissance du HTML, du CSS et du JavaScript est requise et une connaissance de base des
réactifs est préférée. Mais ne vous inquiétez pas, nous
allons tout revoir. À la fin de cela,
vous aurez construit votre premier projet React
et vous aurez
appris à appliquer les concepts React à des projets
réels
sans plus tarder. Commençons.
2. Le projet: Dans ce cours, vous
apprendrez comment créer une application de
liste de tâches. À la fin,
vous devriez avoir
une application fonctionnelle dans laquelle vous pouvez ajouter des éléments et vous pouvez les
supprimer en appuyant sur
le bouton ici. Votre projet
va maintenant s'appuyer sur ce point en ajoutant
d'autres fonctionnalités. Certains exemples de
fonctionnalités peuvent être un bouton qui efface
tous les éléments. Peut-être qu'au lieu de supprimer
le mois de l'article terminé, vous pouvez le montrer comme
grisé sans doute. Cela vous apprendra comment créer vous-même un composant, comment passer des accessoires pour souder et comment manipuler l'état. Pour commencer,
essayez de réfléchir
aux composants dont vous avez besoin et à l'état qu'
ils vont manipuler. Une fois que vous avez terminé, assurez-vous de
publier une vidéo ou un lien vers votre projet
dans la section Projets et ressources ci-dessous. J'aimerais bien voir
ce que vous avez fait.
3. Planifier nos composants et nos états: Avant de commencer un
nouveau projet React, vous devez planifier comment
vous allez le réaliser. Et lorsque vous planifiez, pensez à deux choses les composants et les
états dont vous aurez besoin. Nous avons ici deux
composantes : le formulaire
et le champ de texte. Dans le formulaire, nous
avons deux éléments
, à savoir le champ de texte et le
bouton à droite. D'autre part, les
listes de tâches peuvent comporter de nombreux
sous-composants, qui sont des éléments de liste. Et chaque élément de liste comporte du texte et un bouton sur
le côté droit. Nous aurons besoin
de différents États. La première étape
permet de suivre les textes saisis dans le champ de
texte par l'utilisateur. Deuxièmement, nous aurons une liste
qui permettra de suivre tous les éléments que nous avons déjà
ajoutés à notre liste de choses à faire. En résumé, avant de
commencer notre projet, nous planifions à quoi il
ressemblera en fonction des composants et des
états qu'il aura. La prochaine leçon,
nous examinerons l'environnement de développement
que nous utiliserons.
4. Notre environnement de développement: Dans cette leçon, nous
examinerons les outils que nous utiliserons
pour créer notre projet. Nous allons réaliser un projet sur un site Web appelé
code sandbox.io. Il s'agit d'un site Web gratuit qui vous permet de créer des projets
React distance sans devoir installer quoi que ce soit sur
votre machine locale. Si vous
commencez tout juste avec React, c'est la plateforme idéale
pour commencer. Vous pouvez vous connecter à l'aide votre compte GitHub
ou de Google. Vous pouvez cliquer sur
l'un d'eux pour commencer. Une fois que vous êtes connecté, vous verrez une page
similaire à celle-ci. Maintenant, ce que vous devez faire,
c'est d'aller ce bouton qui indique un nouveau
bac à sable et de cliquer dessus. Ce que cela vous permettra de faire c'est de créer un nouveau projet. Vous pouvez voir que nous pouvons
créer des projets à partir de plusieurs frameworks tels que
Vue, Angular et React. Mais comme il s'agit d'un projet de bricolage, nous allons ici,
puis cliquez sur React pour commencer. Une fois que votre projet est configuré, vous verrez une page
similaire à celle-ci. Sur la
gauche, vous pouvez voir
les fichiers de votre projet, toutes les dépendances que vous utilisez et toutes les ressources externes que nous utilisons, telles que les polices. Au milieu, vous pouvez
voir le code que vous écrivez et tous les fichiers
que vous avez ouverts. Et sur le
côté droit, vous pouvez voir à quoi ressemble
votre projet React dans le navigateur. Maintenant, ce qui est génial avec le bac à sable de
code, c'est que toute
modification apportée à votre code apparaît presque immédiatement sur le navigateur,
sur le côté droit. Changeons le
texte ici du sandbox
Hello Code
à Hello World. Lorsque nous sauvegardons cela, vous verrez sur le
côté droit qu' il se met à jour presque automatiquement. Dans cette leçon, nous avons
appris comment configurer code sandbox dot IO
pour notre projet. Dans la prochaine leçon, nous
examinerons les différents fichiers
utilisés et comment
structurer un projet.
5. Configuration et structure de fichiers: Bienvenue de retour. Dans cette leçon, nous
allons examiner la
structure des fichiers et des dossiers de notre projet. Et nous ajouterons également un style de base
à notre projet. Si vous regardez
le côté gauche, nous avons principalement cinq dossiers. Tout d'abord, nous avons
empaqueté ou JSON. Ce fichier contient la
configuration de vos projets par exemple toutes
les dépendances dont vous disposez et tous les scripts
dont vous disposez. Ensuite, nous avons indexé sur HTML. Il s'agit des cinq premiers affichés lorsque quelqu'un
visite votre site Web. Il n'y a pas vraiment
beaucoup de contenu à l'intérieur. Mais c'est principalement parce que
tout le contenu de votre site Web y sera
injecté par index.js. Index.js est essentiellement un
fichier JavaScript qui prend tout le code React
que vous avez à l'intérieur votre composant d'application et l'
injecte dans index.html. Tous les
composants React que vous créez résident dans app.js, toutes les entreprises que vous
créez seront placées dans ce développement qui porte
le nom de classe App. Il sera envoyé à index.js, qui l'injectera dans
le fichier index.html. Enfin, nous avons styles.css. agit d'une feuille de style
qui applique des styles à notre composant d'application et
donc à l'ensemble du projet. Lorsque vous commencez avec
un nouveau projet React, vous devez toujours aller dans
le dossier source et
créer un dossier à l'intérieur de
celui-ci, les composants informatiques. Désormais, chaque fois que vous créez
un nouveau composant, vous pouvez ajouter les fichiers
JavaScript et CSS de ce composant
dans ce dossier. Pour commencer, nous allons
créer les fichiers de notre premier composant sur lequel nous
travaillerons, qui sera le composant
formé. Ce que vous devez faire, c'est que vous
devez cliquer sur cette icône ici et vous devez
écrire Formed ou JS. Vous pouvez créer la feuille de
style correspondante en créant un nouveau fichier et en le nommant
sous forme de code CSS à points. Nous ne le coderons pas pour le moment,
mais
c' est la
structure de base que vous devez suivre lors de la création
d'un nouveau composant. Enfin, nous allons passer dans styles.css et ajouter un style de
base à notre projet, ce qui est une bonne
pratique lorsque vous
commencez avec un nouveau projet. Ce que nous allons faire, c'est d'abord que nous lui donnerons une
couleur de fond légèrement grise. Ce que nous pouvons faire, c'est dire la couleur du tiret d'
arrière-plan et définir la valeur sur hachage F4, F6, FDI. Vous pouvez maintenant voir
à droite que notre application ne couvre pas toute la
largeur et la hauteur de la page. Ce que nous pouvons faire, c'est que nous pouvons dire
que la largeur de notre application doit être égale à 100 %
de la largeur de la fenêtre d'affichage. Et la hauteur de notre
application doit être égale à 100 % de la hauteur de la
fenêtre d'affichage. Enfin, nous pouvons constater que le contenu d'une
application commence
directement par le haut et
que nous voulons laisser de
l'espace en haut. Ce que nous pouvons faire, c'est que nous pouvons
ajouter un peu de rembourrage au sommet de notre application et
lui donner une valeur de deux REM. Et une fois que nous l'
avons sauvegardé, nous pouvons constater que le contenu d' une application commence
légèrement en dessous du haut. Dans cette leçon, nous
avons examiné certains
des fichiers déjà
présents dans notre projet React. Nous avons créé la structure des fichiers et des
dossiers et nous avons ajouté un style de base
à notre application. Dans la prochaine leçon, nous
commencerons par notre
premier composant, qui est le composant de formulaire.
6. Notre premier composant - La forme: Bienvenue de retour. Dans cette leçon, nous allons
créer notre premier composant, qui est le composant de formulaire, passera par le HTML et le CSS
de ce composant, et la logique sera
ajoutée dans la leçon suivante. Commençons donc par
entrer en forme dot js. Nous allons commencer par créer notre
composant fonctionnel en écrivant un formulaire
d'exportation const égal à B. ne prendrons aucun
paramètre à l'heure actuelle. Et nous allons créer le composant
fonctionnel, puis nous devons retourner le HTML, dans notre cas,
retournera un formulaire. Nous allons donc ajouter les balises de
formulaire ici. Et puis, à l'intérieur,
nous ajouterons deux entrées. Tout d'abord, il y aura
une entrée de type texte. Et deuxièmement, il y aura
une entrée de type soumettre. Nous allons y aller de l'avant et sauver ça. Maintenant, nous devons ajouter
ceci à notre app.js pour
que nous puissions voir qu'il va aller dans app.js et lire les
deux balises d'en-tête ici et ajouter dans notre composant de
formulaire. Nous devons maintenant
l'importer également. Nous allons donc passer au-dessus de votre
tête et dire Importer un formulaire, qui est le nom
du composant à
partir du chemin d'accès à l'endroit où se trouve
le composant de formulaire, oblique de composants obliques de
points. Nous allons y aller de l'avant et sauver ça. Et maintenant, nous pouvons voir un champ de texte et un bouton sur le
côté droit. Maintenant, ça n'a pas l'air si génial. Donc, ce que nous devons faire, c'est
revenir en forme dot js et ajouter des
noms de classe et un style. Ce que nous allons faire, c'est que nous
ajouterons des noms de classes à nos
différents éléments. Nous allons commencer par
ajouter un nom
de formulaire de classe à notre élément de formulaire. Nous ajouterons un nom de classe
TextField à notre champ de texte. Enfin, nous ajouterons un nom de
classe Submit, Dash et Btn à notre bouton de
soumission ici. Et puis, comme nous voulons que les styles s'appliquent
à ce composant, va importer la feuille de style
en allant en haut et en disant importer des points
obliques de points CSS. Et nous allons aller de l'avant
et sauver cela. Nous devons maintenant
définir les styles. Nous allons donc passer en forme de
code CSS et commencer là-dessus. Tout d'abord, nous ajoutons le style à l'ensemble de
notre composant de formulaire. Nous allons dire « display flex ». Nous voulons justifier le contenu. Au centre. Nous voulions avoir une
hauteur de deux REM. Nous voulions avoir
une largeur de 80 % de la page et nous
lui attribuerons une marge automatique, centrée sur la page. Ensuite, nous ajouterons un peu de style
à nos champs de texte. Nous allons donc dire champ de texte point. Nous allons lui donner une
couleur de fond légèrement d'accord. Nous dirons donc que le hachage de
couleur d'arrière-plan supprimera toutes les
bordures qu'il possède. Nous allons lui donner une bordure légèrement
arrondie en indiquant rayon du tiret de
bordure et en lui
attribuant une valeur de 0,5 rem, nous lui donnerons une hauteur
de 100 % de son parent. Nous éliminons la marge sur le côté droit
de dix pixels, donc elle n'est pas collée au bouton. Nous allons lui donner un rembourrage de
cinq pixels et dix pixels. Ainsi, lorsque vous
tapez, il y a un espace entre le
texte et la bordure. Ensuite, nous lui donnerons une taille de
police d'un rem. Et nous
lui donnons également une ombre de boîte, veillera à ce que l'ombre
soit de 0 pixels horizontalement. Cinq pixels verticalement
ont un flou de dix pixels. Et nous lui donnerons
une valeur RVB de 218 pour le rouge, le vert et le bleu. Et nous lui donnerons également
une boîte de bordure de taille de boîte afin que lors du
calcul de la taille, les pixels dans la bordure soient
également pris en compte. Maintenant, notre champ de texte
est parfait, mais une fois que nous nous concentrons dessus, nous ne voulons pas que le
contour apparaisse et nous voulons
également que l'ombre
change légèrement. Nous allons commencer là-dessus en
utilisant le sélecteur de focus. Nous allons donc dire champ de texte à points. Quand c'est le point de vue. Nous allons le définir pour qu'il n'y ait aucun
aperçu. Et nous allons définir cela
comme un style important. Et nous allons également modifier légèrement
la box-shadow. Nous allons donc dire 0
pixels horizontalement, trois pixels verticalement,
un flou de cinq pixels. Et nous lui donnerons une
valeur RVB de 218 pour les valeurs rouge, verte et bleue. Maintenant, quand on clique dessus, ça a l'air beaucoup mieux. Enfin, nous allons commencer par
le bouton Soumettre. Donc, nous allons dire point soumission, btn. Nous lui donnerons une hauteur
de 100 % de ses parents. Nous lui donnons une couleur
de fond légèrement bleue en disant couleur de
fond et en
lui donnant une valeur de 1993 et 55. Ensuite, nous dirons que les
formulaires doivent être blancs. Et nous supprimerons toutes
les frontières qu'il possède. Nous lui donnerons un
rayon de bordure de 0,5 rem. Nous allons lui donner une taille de police d' un rem pour que le texte
soit légèrement plus grand. Nous allons lui donner une
ombre de boîte de 0 pixels, cinq pixels et dix pixels, et lui donner une couleur de B1 Ff. Nous ajouterons également un
rembourrage de 01 rem. Lorsque nous passons le curseur sur le bouton, nous voulons qu'il apparaisse
légèrement différent que nous
puissions dire que
nous le survolons. Nous allons donc écrire point,
soumettre, tiret, btn, et sur le survol changera légèrement
l'ombre. Nous allons donc dire
ombre de boîte 0 pixels, trois pixels et cinq pixels, et lui donner une valeur de hachage de 789. Plus facile. Allez-y et sauvegardez ça. Enfin, à l'intérieur de Formed ou JS, nous modifierons le texte
du bouton Soumettre pour
qu'il indique Ajouter. Et nous allons aller de l'avant
et sauver cela. Nous y avons notre composant
de formulaire. Nous avons appris comment créer un
nouveau composant fonctionnel. Nous avons appris comment ajouter le code HTML, puis nous avons
appris à ajouter le CSS. Dans la prochaine leçon,
nous allons travailler sur l'
ajout de fonctionnalités
à l'aide de JavaScript.
7. Ajouter de l'état à notre formulaire: Bienvenue de retour. Dans notre leçon précédente, nous avons appris comment créer un nouveau composant fonctionnel à
l'aide de HTML et de CSS. Maintenant, si nous entrons dans le
champ de texte et que nous écrivons quelque chose, nous voyons qu'il est
affiché à l'écran. Mais le problème est que nous
n'avons pas accès à la valeur
entrée par l'utilisateur dans le champ de texte. Pour qu'il soit utile, nous devons le stocker dans
une sorte de variable que nous pouvons envoyer à
nos autres composants. Pour ce faire, nous pouvons utiliser une fonction
React appelée état. L'état correspond à toute variable
que vous suivez, qui influence la façon dont le
composant est rendu. Ce que nous pouvons faire, c'est d'aller
en haut ici et d'importer une fonction appelée
État américain à partir de React. La fonction US State nous
permettra de créer une
nouvelle variable qui gardera une trace
de
l'état du texte entré par l'
utilisateur. Pour ce faire, nous pouvons
aller ici et dire const, ajouter des crochets, et nous nommerons le texte
variable. Et la fonction que nous
pouvons utiliser pour modifier cette variable s'
appellera SetText. On dira l'état américain, sorte qu'il s'agit d'une variable avec état et nous lui donnons une valeur vide
par défaut. Maintenant, ce que nous voulons
faire est de connecter cette variable à la
valeur saisie par
l'utilisateur dans le champ de texte qui l'utilisateur dans le champ de texte ira à l'élément HTML
TextField. Et nous dirons que
la valeur à l'intérieur doit être égale
à la variable de texte. Deuxièmement, chaque fois que l'utilisateur modifie la valeur
à l'intérieur du champ de texte, nous voulons prendre
en compte cet événement et définir la variable
de texte sur la valeur la plus récente. Nous allons le faire en utilisant la valeur de point cible de points de
texte défini. Et nous allons aller de l'avant
et sauver cela. Maintenant, si nous allons
dans
le champ de texte à droite et
notez quelque chose. C'est la même chose que
lorsque nous avons commencé. Maintenant, pour voir la valeur
à l'intérieur de la variable de texte, nous allons l'imprimer. Une fois que nous avons
appuyé sur le bouton Ajouter ici. Pour ce faire, nous allons créer une nouvelle fonction
appelée const handle submit en cas d'appuyer sur
le
bouton en tant que paramètre, et nous dirons que le point E
empêche la valeur par défaut. Cela devrait empêcher la
page de se rafraîchir chaque fois que nous appuyons sur le bouton
comme c'est le cas actuellement. Nous allons aller de l'avant dans
le formulaire et dire que chaque fois que la
fonction onsubmit est appelée, appelez la méthode de soumission du handle. Ensuite, nous allons entrer
dans la fonction et console.log la valeur à l'intérieur de la variable texte et la
réinitialiserons également à vide. Nous allons donc dire définir du texte et nous y mettrons une
chaîne vide. Maintenant, si nous allons à
droite et notez quelque chose
et cliquez sur Ajouter. Vous pouvez voir que la valeur a été imprimée sur la console. Dans cette leçon, nous avons appris comment convertir un composant qui n'était
pas contrôlé et qui n'
était pas resté dans
un composant contrôlé par nous
et qui aurait un état. La prochaine leçon, nous
apprendrons comment ajouter de l'état à l'ensemble de
notre application
et comment suivre
toutes nos tâches.
8. Ajouter de l'état à notre application et utiliser des accessoires: Dans cette leçon, nous
allons apprendre comment suivre toutes nos
tâches à l'aide de l'état. Et nous examinerons
également comment nous
pouvons transmettre les fonctions en tant qu'accessoires afin que nous puissions ajouter notre dernier
élément à notre liste de choses à faire en utilisant le composant du téléphone qui commencera
par revenir dans app.js. Ce que nous voulons faire, c'est suivre tous les éléments de notre liste de choses à faire. Pour ce faire, nous pouvons utiliser
l'État américain comme nous l'avons fait auparavant. Nous pouvons aller au sommet
ici et écrire l'importation. Vous déclarez de React. Nous pouvons entrer dans ce composant d'
application et dire const à faire et définir à faire, qui est notre variable et qui fonctionne pour modifier
cette variable. Et nous pouvons lui donner
la valeur d'une liste vide. Maintenant, nous avons notre variable
qui a été déclarée. Nous avons maintenant besoin d'une fonction
qui, lorsqu'un élément est donné, met à jour la liste pour qu'elle
contienne le dernier élément, crée une nouvelle fonction
appelée const add to do, qui ajoutera une nouvelle tâche
à faire à notre liste existante. L'esprit a pris un paramètre
qui sera nouveau à faire, qui ne sera que quelques textes. Ensuite, nous allons créer
la fonction flèche. Ensuite, nous dirons qu'ils sont prêts à faire. Puisque nous voulons mettre à jour
la valeur des tâches à faire, nous ajouterons quelques crochets,
puis nous dirons utiliser les tâches existantes à
l'aide de l'opérateur spread, mais ajouterons également la nouvelle tâche
que nous obtenons. Maintenant, cette fonction doit ajouter le dernier élément à
notre liste de choses à faire. Maintenant, ce que nous voulons faire
est d'exécuter cette fonction et transmettre la nouvelle valeur chaque fois que vous appuyez sur
le bouton Ajouter. Et pour ce faire,
nous devrons transmettre cette fonction en tant qu'accessoire
à ce composant, qui est le composant de formulaire. Les accessoires nous permettent de
transmettre des variables et des fonctions d'un
composant parent à un composant enfant. Nous pouvons transmettre une prop
appelée Add to do, et nous pouvons définir sa
valeur sur la fonction Ajouter à faire que
nous venons de créer. Maintenant, nous allons entrer dans le composant de
formulaire et nous
accepterons cet accessoire et l'utiliserons accepterons cet accessoire et l'utiliserons chaque fois
que vous cliquez
sur le bouton Ajouter. Revenons à la forme du point us. Ici, dans le paramètre, nous ajouterons quelques accolades et nous accepterons l'accessoire Add to do. Au lieu de faire un
console.log ici. Nous supprimerons cela et nous allons
plutôt dire « Ajouter à faire ». Et nous transmettrons
la dernière valeur à l'intérieur de la variable de texte, car elle
contiendra tout ce qu'il faut ajouter
à notre liste de choses à faire. Maintenant, pour voir la dernière
valeur de notre liste de choses à faire, ce que nous allons faire, c'est que nous allons juste le
console.log ici. Et nous allons y aller de l'avant
et sauver cela. Maintenant, nous pouvons aller ici
et ouvrir la console. Et nous pouvons voir que cela commence par
une liste vide. Notons le premier élément. Et lorsque nous cliquons sur Ajouter, nous voyons qu'il a été
ajouté à notre liste. Ajoutons également l'article deux. Nous pouvons voir que cet article
a été ajouté. Dans cette leçon, nous avons
appris comment suivre l'
ensemble de notre liste de choses à faire. Et nous avons également
appris à transmettre des fonctions comme accessoires
aux composants enfants.
9. Liste d'interfaces utilisateur à l'aide de composants réutilisables: Bienvenue de retour. Dans la leçon précédente,
nous avons appris comment suivre l'
intégralité de notre liste de choses à faire. Dans cette leçon,
nous allons créer la liste des tâches et l'élément de
liste Composants. Et nous verrions également comment
les composants peuvent être réutilisés, ce
qui
les rend si géniaux. Nous allons commencer par supprimer
ce console.log ici. Ensuite, nous allons créer des fichiers
JavaScript et CSS. Créons les fichiers pour
le composant de liste de tâches. Nous allons donc dire que la liste des choses à faire est point us. Nous voulons également créer la
feuille de style pour cela. Nous allons donc dire
To Do list dot CSS. Ensuite, nous voulons faire de
la liste item dot js. Nous voulons faire de
liste item dot css. élément intérieur de la liste dot js créera un composant
fonctionnel. Nous dirons donc que l'élément de
liste const est égal à, nous n'accepterons aucun
paramètre à partir de maintenant. Et nous allons juste retourner
un div pour l'instant. Et nous allons également exporter
cela. Pour l'élément de liste. Nous allons adopter une
approche du texte que nous voulons afficher
dans l'élément de liste. Et à l'intérieur de la div, nous ajouterons des balises de paragraphe pour afficher
les textes que nous voulons. Nous voulons également pouvoir accomplir une tâche. Pour cela, nous allons ajouter
un bouton ici. Maintenant, ce que nous voulons
faire, c'est que nous voulons entrer dans le composant de liste de tâches
dot js. Ici va importer
le composant d'élément de liste car nous allons afficher
l'élément de liste via notre composant de liste de
tâches. Nous dirons importer un élément
de liste à partir de la liste barre oblique point point js. Ensuite, nous allons créer
le composant qui dira export, const to do list. Nous ne prendrons aucun
accessoire pour l'instant. Nous allons juste retourner une nouvelle div. Et à l'intérieur de la div, nous ajouterons quelques éléments de liste. Nous allons créer une nouvelle instance
d'un composant d'élément de liste. Plus près du bas. Ensuite, pour le texte,
nous allons simplement dire que
l'élément 1 connectera ceci à notre état
dans la prochaine leçon. Mais pour l'instant, nous allons simplement
utiliser des valeurs factices. Nous en avons fait un. Ajoutons-en quelques autres. Nous allons donc dire l'article
deux, l'article trois. Maintenant que nous avons le composant de liste de
tâches,
tout ce que nous avons à faire est d'aller dans app.js importé et de le rendre. Nous allons donc dire importer tâches à partir de la liste de tâches à faire des
composants obliques de points. Nous allons aller de l'avant et
le rendre sous notre formulaire. Une fois que nous l'
avons enregistré, nous pouvons voir que la
liste entière a été rendue. Nous avons donc vu que nous devions
faire le composant de liste et que nous avions plusieurs
composants d'éléments de liste imbriqués à l'intérieur,
que nous affichons
les éléments de liste. Nous allons maintenant ajouter un peu de style à nos composants. Commençons par ajouter un peu de
style à notre liste de choses à faire. Nous allons commencer par importer
nos feuilles de style. Donc, en haut, nous
dirons importer la barre oblique de points, note de liste à faire CSS. Gardez ça. Allez dans la liste de tâches CSS. Pour la classe de la liste de choses à faire
ajoutera les styles. Avant cela, nous devons ajouter le nom de la classe
au développement. Nous dirons div, le nom de la
classe est égal à deux do dash list. Gardez ça. Et maintenant, ajoutons les styles. Nous voulons l'afficher
sous forme de colonne. Nous dirons donc que la
flexion de l'affichage et la direction du fléchisseur
seront en colonne. Nous voulons aligner les éléments sur
le centre horizontalement. Nous dirons donc aligner les éléments au centre. Nous voulions également faire une liste de tâches pour être au centre de la page. Nous dirons donc une largeur de 60% et nous lui donnerons une marge d'un rem
et auto horizontalement. Nous allons sauver ça. Maintenant, cela n'a pas l'air
trop différent, mais ajoutons également un peu de style
à notre élément de liste. Donc, tout d'abord, nous allons importer l'élément de
liste dot css. Ensuite, nous ajouterons les noms de classes. Nous appellerons donc cela un élément de liste. Donne au bouton un nom de
classe de case à cocher. Allons maintenant et
ajoutons les styles pour cet élément de liste intérieur CSS. Pour commencer,
ajoutons les styles de l'élément de
liste lui-même. Nous dirons l'objet de la liste. Nous voulons l'afficher sous forme de ligne. Nous allons donc commencer par dire que flex définira la
direction de flexion sur la ligne. Nous voulons aligner les
éléments verticalement, c'est pourquoi nous allons dire aligner les éléments au centre. Nous voulons justifier l'espace de
contenu entre sorte que le texte soit à gauche et que le bouton soit à droite. Nous dirons donc justifier le contenu et
définir l'espace entre les deux. Ensuite, nous ajouterons une
marge verticalement pour que toutes les cartes
en stock soient ensemble. Nous allons donc placer cela comme cinq pixels verticalement et 0
pixels horizontalement. Nous ajouterons un peu de rembourrage
aux bords horizontaux. On dirait donc 02 EM. Nous lui donnerons une largeur de 90 % et une couleur
d'arrière-plan blanche pour qu'
il soit facilement visible. Nous lui donnons une bordure arrondie. On peut donc dire le rayon du tableau de
bord. Nous lui donnerons une valeur
de 0,5 d'entre eux. Et enfin, nous allons
lui donner une ombre. Donc, 0 pixels, cinq
pixels, dix pixels. Et nous lui donnerons une valeur
RVB de 10992 . Nous allons sauver cela. Maintenant, une fois que nous avons
survolé la carte, nous voulons qu'elle
soit légèrement différente. Nous allons donc dire élément de liste de points
et utiliser le sélecteur de survol. Nous allons changer légèrement l'
ombre de la boîte. On va dire « box shadow ». Nous dirons 0 pixels,
trois pixels, sept pixels, et nous lui donnerons une valeur
RVB de 205. Ensuite, nous sauverons cela. Maintenant, si nous survolons les objets, nous pouvons voir qu'ils ont un
aspect légèrement différent. Enfin, donnons également
un peu de style à la
case à cocher. Nous allons donc dire la case à cocher point, qui est le bouton sur
le côté droit. Nous allons lui donner une
couleur de fond blanc, lui
donnera également une bordure. Nous allons donc le faire 3,5 pixels. Il sera solide, et nous voulons qu'il soit bleu. Nous dirons donc que RGB 1993255
supprimera toutes les ombres qu'il possède. Nous allons donc dire « box-shadow none ». Nous allons lui donner une hauteur de 20 pixels et une
largeur de 20 pixels. Ensuite, nous voulons qu'il soit
complètement circulaire, alors nous allons dire le rayon du corps et le
mettre à 100 %. Enfin, lorsque nous le
survolons, nous voulons que le curseur
soit un pointeur. Nous allons donc dire la
case à cocher point en survol, transformer le curseur en pointeur. On y va. Nous avons nos éléments de liste dans
notre liste de choses à faire, et ils ont les cases à cocher,
puis également. Dans cette leçon, nous avons
appris les composants imbriqués et nous avons vu comment réutiliser les compétences comme nous l'avons fait avec les éléments de liste. Dans cette leçon,
nous utilisons des valeurs factices, mais dans la leçon suivante, nous
examinerons comment
rendre la compétence en fonction des données réelles.
10. Cartographie de l'état et des composants: Bienvenue à tout le monde. Dans la leçon précédente, nous utilisons des valeurs factices pour
représenter notre liste de choses à faire. Dans cette leçon, nous
allons examiner comment
mapper nos données aux composants de l'élément de
liste. Pour commencer,
nous allons entrer dans le composant Liste de tâches et nous supprimerons les
valeurs fictives que nous avons ici. Maintenant, ce que nous voulons
faire, c'est que nous voulons
rendre notre variable de tâches, que nous avons dans
notre fichier app.js. Ce que nous allons faire, c'est que nous transmettrons cette variable à notre composant de liste de
tâches car un prop économisera
deux cotisations et nous
affecterons la
variable d'état des tâches à faire à cela. Maintenant que nous le
transmettons comme un problème, nous pouvons aller au
composant de liste de tâches et accepter en
mettant des accolades bouclées et en prenant l'accessoire à faire. Nous devons maintenant trouver
un moyen de faire correspondre cette liste de texte à
une liste de composants. Heureusement, ES6 a la fonction
parfaite pour cela, appelée fonction
de carte. Si vous voulez utiliser du
JavaScript à l'intérieur de notre code HTML, mettrez quelques accolades. Ce que nous disons, c'est de
prendre cette liste de textes à faire et de la
mapper à une
liste de composants d'éléments de liste. Pour chaque valeur à l'intérieur, prenez la valeur de texte,
qui est la tâche à faire, et l'index actuel, qui utilisaient ensuite
une fonction de flèche. Nous disons que, retournez-moi pour chaque élément, un composant d'élément de liste et le
texte doit être à faire, donnera à chaque
élément de liste une clé unique, qui sera l'index, car ce ne sont que de
bons caractères. Et nous allons aller de l'avant
et sauver cela. Maintenant, vous verrez qu'il est vide. Mais une fois que nous avons ajouté un article, nous pouvons voir qu'il est ajouté
ici et que nous pourrons continuer. Nous pouvons donc dire l'article deux, l'article trois, et il
est ajouté à notre liste. Dans cette leçon, nous avons appris
comment mapper une liste de variables à une
liste de composants. Cela nous montre la puissance des composants et la réutilisabilité. Et c'est la
raison pour laquelle React est si populaire et si puissant. Dans la prochaine leçon,
nous ajouterons la fonctionnalité Complete Task, et nous
examinerons comment passer accessoires à plusieurs niveaux. Et un cas d'
utilisation plus complexe de l'État américain.
11. Ajouter la fonction de suppression: Bienvenue à tout le monde. Nous avons maintenant
la
possibilité d' ajouter un nouvel
article à notre liste. Dans cette leçon, nous allons ajouter la fonctionnalité pour marquer
qu'un élément est terminé. Ce que nous allons faire
dans cette leçon c'est d'apprendre comment créer une fonction qui prend en compte index
d'un élément et la
supprime de notre liste. Pour commencer, nous allons
créer une nouvelle fonction et nous l'appellerons
const, remove to do. Et il prendra en compte l'index de l'élément que nous voulons
supprimer et nous le
transformons en fonction de flèche. Ce que nous devons
faire, c'est créer une copie de notre état de choses à faire. Donc, ce que nous allons faire, c'est dire que
const doit faire, c'est copier. Et nous utiliserons l'
opérateur de propagation pour créer une copie. Donc on va juste écrire des
points, des points, des points à faire. Ensuite, pour supprimer l'
élément, vous écrirez l' épissure de points
à faire copier, puis directement vers le bas pour
faire une virgule d'index. Nous avons maintenant une variable
qui contient la liste mise à jour sans l'élément que nous
voulions supprimer. Maintenant, nous allons enregistrer
cela en disant définir tâches et
en transmettant la copie des tâches. Maintenant que nous avons une
fonction qui peut supprimer un élément de la liste, nous devons le transmettre en tant qu'accessoire à l'élément de liste afin qu'une fois
le bouton enfoncé, il puisse invoquer cette fonction et
se retire de la liste. Nous allons donc le transmettre dans notre liste de
choses à faire en disant que remove two du est égal à la fonction Supprimer à faire,
ce que nous voulons dire. Ensuite, nous allons passer à l'intérieur du composant de liste de
tâches. Je prendrai cet
accessoire ici. Nous allons écrire à supprimer à faire. Ensuite, puisque nous connaissons déjà l'index basé sur la
variable ici, nous pouvons transmettre une fonction
à l'élément de liste, qui sera une version modifiée de la fonction à faire supprimée. Nous transmettrons un prop appelé supprimé à faire à l'élément de liste. Et chaque fois que l'
élément de liste appelle cette prop, nous appellerons la
fonction remove to do que nous
avons obtenue de app.js. Nous transmettrons l'index
de l'élément de liste actuel. Nous devons le faire maintenant si nous devons
entrer dans le composant d'
élément de liste. Nous devons prendre en charge la fonction
Supprimer pour faire. Nous devons
noter que chaque fois que onclick est appelé ici, nous devrions simplement invoquer
la suppression pour faire prop. Parce que le
composant de liste de tâches s'occupe de l'index auquel
il doit être supprimé. Maintenant que nous l'avons enregistré, si nous cliquons sur le bouton, il supprime l'élément. Ajoutons quelques autres éléments que nous pouvons voir que le
bon est en train d'être supprimé. Et si nous essayons de supprimer
l'article numéro trois en
cliquant sur le bouton,
il est supprimé. Dans cette leçon, nous avons ajouté la fonctionnalité
permettant de supprimer une tâche. Nous avons appris à passer des accessoires
à plusieurs niveaux. Nous avons également constaté un cas d'utilisation
plus complexe de la fonction étatique américaine.
12. Conclu: Félicitations, vous venez de réaliser tout
un
projet React à partir de zéro. Ce n'est pas un petit exploit. Alors, tapote-toi dans le dos. En travaillant sur ce projet, nous avons appris comment
créer de nouvelles compétences. Nous indiquons, transmettez des accessoires à
différents composants, réutilisez les composants et restituez
les composants en fonction de l'état. Maintenant, ce n'est pas encore fini. Consultez la section projets
et ressources ci-dessous et travaillez à ajouter d'autres
fonctionnalités à notre liste de choses à faire. Assurez-vous de publier votre projet
dans la galerie de projets. J'aimerais bien y aller. Si vous êtes arrivé
jusqu'ici dans le cours, veuillez envisager de laisser un avis et de me donner un
suivi sur skillshare. C'est tout pour l'instant les gens, bonne chance avec
votre voyage réact.
Laksh Dwivedee, Software Engineer
