Transcription
1. Intro: Avez-vous déjà entendu parler
de React, l'une des bibliothèques frontales
les plus populaires au monde ? Aujourd'hui, nous allons passer en revue tout
ce que vous devez
savoir pour créer votre propre
projet à l'aide de React. Y compris comment
créer cette application à faire. Bonjour, je m'appelle Zoé. Je suis un ingénieur logiciel
et un ancien professeur qui adore enseigner
aux autres comment démarrer avec le codage J'ai créé des tonnes de sites Web
et d'applications Web en utilisant React CSS, HTML et d'autres technologies. À la fin de ce cours, vous serez capable de le faire
vous-même . Commençons.
2. Projet du cours: Projet de classe. Le projet de cette classe est de créer une application
entièrement fonctionnelle. Pour cela, vous devez avoir accès à un ordinateur et à un éditeur de code
tel que Visual Studio Code. Vous devez également avoir
une certaine compréhension du script
Java ou du script de type
ainsi que du HTML et du CSS. Pour lancer notre application,
nous allons utiliser un framework appelé Next
S, qui utilise React. Nous utiliserons également du matériel pour certains
styles et composants de base. Un lien permet d'accéder à tous les actifs et ressources dont vous aurez besoin dans l'onglet
Projet et ressources.
3. Pourquoi réagir ?: Pourquoi réagir ? Si vous
connaissez déjà React, vous pouvez passer aux leçons
du didacticiel. Mais dans les prochaines leçons, nous verrons quel problème React
a été créé pour résoudre, comment il est utilisé et
comment l'exécuter. React a été développé par Facebook et rendu
public en 2013. Il a été initialement créé
afin de gérer rechargements de pages
et les mises à jour
inefficaces qui nécessitaient
à l'époque de
repeindre l'intégralité du Dom ou le
modèle d'objet du document À chaque mise à jour, React résout ce problème en créant ce qu'ils ont
appelé le Dom virtuel, une représentation
du Dom en mémoire. Cela a permis à React de ne
mettre à jour que les aspects ou composants du Dom qui ont changé plutôt que
la page entière, ce qui a entraîné de meilleures performances. React a changé la donne dans le
domaine du développement Web et
reste l' une des bibliothèques les plus
populaires du marché. Grâce à l'utilisation de composants, les développeurs sont désormais en mesure d' écrire du code modulaire
beaucoup plus facilement, ce qui leur permet de développer de manière
plus efficiente
et efficace. D'autres frameworks
populaires souvent comparés à React incluent
View et Angular.
4. Composants: Composantes. Les composants sont des morceaux de code
réutilisables qui réagissent aux effets de levier
afin de maintenir leur modularité Considérez-les comme
les éléments de base que les développeurs utilisent
pour créer des applications. Un composant est un morceau de
code autonome et
réutilisable qui englobe ses propres fonctionnalités ,
son
état Ces composants peuvent être
considérés comme une combinaison de HTML et
de Javascript ou de JSX, qui est utilisée dans React Chaque composant peut
avoir son propre état, qui représente des données susceptibles
de changer au fil du temps, et un ensemble de propriétés
ou d'accessoires permettant aux composants
parents de
transmettre des données à leurs enfants Tout comme le HTML fait réagir des éléments
dans d'autres éléments, composants
se trouvent dans
d'autres composants. Ces composants internes sont considérés comme les enfants
des composants externes.
5. Accessoires et état: Accessoires et État. Pour vraiment comprendre et utiliser
React au maximum, nous devons parler d'
état et de propriétés. Ou comme on les appelle, des accessoires. Jetons un coup d'œil à
un composant du bassin. Ces composants ne sont en réalité
que leurs fonctions de base. Ils peuvent accepter des arguments, modifier des variables et renvoyer une valeur. Mais en termes simples, nous
pouvons considérer les accessoires comme les arguments transmis par notre fonction
lorsqu'elle est appelée, et les états comme les variables locales qui n'existent que dans
le composant donné Nous développerons cette
définition plus tard, mais il est important de
comprendre d'abord comment elle fonctionne.
6. Créer une application React: Créez une application React. Il existe plusieurs manières de
configurer une application React. Dans ce cours, nous passerons en revue
deux des plus populaires. La façon originale de
configurer une application React était utiliser CRA ou de
créer une application React. L'application Create React a également été développée par Facebook
afin de supprimer une grande partie de cette
complexité et de la transformer en une commande simple mais
puissante. En utilisant l'application Create React, vous vous éviterez
des heures de maux de tête lorsque vous
essayez de configurer une nouvelle
application React pour la première fois. Pour exécuter, créez une application React. Entrez simplement px,
créez une application React, puis le nom de votre application dans le terminal et appuyez sur Entrée. Au bout de quelques minutes,
vous serez prêt à partir. Vous pouvez exécuter la commande
vous-même dans votre terminal si vous souhaitez voir à quoi ressemble l'application
Create React. Cependant, je
vous mets en garde contre son utilisation pour créer votre projet car il
n'est plus maintenu. Suggérez plutôt
d'utiliser des frameworks ou des outils tels que Next S ou Vet. Nous utiliserons next S
pour créer notre to do.
7. TypeScript: Tapuscrit. Au lieu d'utiliser Javascript pour notre application de tâches, nous utiliserons du tapuscrit Typescript n'est en fait qu'
un sur-ensemble de Javascript. Cela signifie
qu'il est construit à partir de Javascript et qu'il
se compile finalement en Javascript Mais il possède des fonctionnalités
supplémentaires que Javascript ne
nous offre pas immédiatement. Typescript nous permet d'utiliser saisie
statique plutôt que
dynamique, ce qui permet de détecter beaucoup plus d'erreurs
lors de l'écriture de notre code, par
opposition à l'exécution Il
développe automatiquement un niveau de documentation
pour votre projet. C'est un peu
différent du Javascript, mais nous allons le parcourir ensemble étape par étape tout au long de
notre tutoriel. Si vous savez écrire du Javascript, je suis sûr que vous pouvez
écrire du Typescript
8. Next.js: Next S Au cours des années qui
se sont écoulées depuis l'introduction de
l'application Create React, de nombreux frameworks ont été
construits et développés à partir de celle-ci. Next JS est un framework très populaire
aujourd'hui. Next GS propose de nombreuses optimisations prêtes à
l' emploi, telles que routage de rendu par
servicide et Et en tant que tel, c'est l'un
des favoris des développeurs front-end. Nous l'utiliserons
dans nos projets, alors allons-y
et commençons.
9. Mettre en forme l'application: Très bien, alors commençons. Donc, la première chose que nous
allons vouloir faire est d'installer le package
que nous utilisons. Nous allons en fait utiliser
ce modèle ici qui nous
permet de créer une application
contenant le prochain S Material, interface utilisateur et le script de texte
assemblés en même temps. Si vous deviez l'installer
manuellement un par un, commençant par le JS suivant,
puis en l'installant, material I et type script, configuration prendrait un
peu plus de temps. Nous utilisons donc simplement
ce modèle
comme raccourci pour nous faire gagner du
temps sur le tuteur Donc, ce que je vais faire ici
pour l'utiliser, c'est de laisser le lien
vers ce
référentiel Github en particulier dans l'onglet projets et
ressources ci-dessous Je vais donc passer
sur le côté droit là où se trouve le bouton vert. Je vais juste copier
l'URL du projet. Ensuite, je vais
aller dans le dossier de
développement
et je vais le
cloner dans un dossier que
je vais appeler pour le faire. Nous allons donc le faire
et ensuite c'est génial. C'est donc créé, laissez-moi
passer à mon dossier de tâches maintenant. Documente, développe-le et fais-le. Ensuite, nous allons l'
ouvrir dans le code VS. C'est bon, génial.
Maintenant que tout est en code VS, nous
devrions être prêts à partir. Nous allons
maintenant utiliser NPM pour installer les packages avec
lesquels nous travaillons Parce que même si nous avons
notre package sur Json, dont nous avons déjà parlé, il contient tous ces
packages qui doivent encore être installés
pour que nous puissions l'utiliser. Allons-y donc et
commençons. Je vais donc commencer par
ouvrir un nouveau terminal. Et vous verrez qu'il est déjà initialisé en tant que dépôt Git C'est une caractéristique de l'utilisation de
next S. Elle nous permet faire toutes les choses
que nous aurions à faire une par une, essentiellement pour nous. Nous allons de l'avant et
nous allons taper NPM I pour l'installer et
laisser l'installation s'installer Et comme vous le verrez
en haut à gauche, un dossier appelé node
modules vient d'apparaître Et c'est essentiellement le résultat de l'installation
de tous ces packages. Ce sont toutes les informations dont le projet aura besoin
pour fonctionner. Vous verrez donc que nous y avons
installé des modules de nœuds, quelques erreurs
, mais nous n'
allons pas nous inquiéter à ce sujet. Ensuite, nous allons
lancer NPM start pour démarrer notre projet Nous avons reçu une
petite erreur. Oh, tu sais quoi, nous
devons exécuter NPM, exécuter dev. C'est ce que c'est.
Très bien, désolé, lancez Endeavour. Deux commandes
différentes. Nous allons donc passer sur la droite ici et si nous avons fait
les choses correctement, l'hôte local 3 000, comme
indiqué dans notre terminal, nous devrions être
en mesure de commencer. Nous avons donc notre prochain
S en marche. Nous utilisons le matériau Y et
nous utilisons un script de type. Nous allons donc
simplement commencer à développer
et à développer notre application à faire afin de
pouvoir nous concentrer sur
ce qui compte. Très bien, donc l'
application que nous allons
créer,
si vous n'en faites application que nous allons
créer, qu'
une sur Google, vous savez, vous voulez essentiellement
créer quelque chose, vous savez, avec n'importe
quelle application à faire. Vous voulez créer
quelque chose qui ressemble à une liste de tâches. Vous savez, un moyen
de cocher ce que vous faites et un autre de
supprimer ce que vous êtes en train de faire. Une application que j'ai créée dans le passé et que nous
allons en fait modéliser est cette application à
faire ici. C'est donc ce que
nous nous efforçons d'atteindre. Nous voulons créer une application qui,
lorsque nous l'ajoutons à Do, puisse l'ajouter à la liste. Vous savez, simplement en appuyant sur
Soumettre, en appuyant sur Entrée, nous pouvons cocher la case et, vous savez,
peut-être avoir un style
associé à cela peut-être avoir un style
associé à Nous pouvons le supprimer
si nous le souhaitons. Ensuite, si nous l'
ajoutons à do et que nous actualisons la page, nous
voulons qu'elle reste correcte. Nous ne voulons pas qu'elle
disparaisse parce que nous
voulons pouvoir utiliser cette
application pour
faire comme notre application personnelle aussi
longtemps que nous le souhaitons. Il y a donc deux
choses que nous allons devoir faire pour que
cela fonctionne comme ça. Mais nous utiliserons cette application to do
comme référence au cas où nous aurions
besoin d'aide à l'avenir. En ce moment, nous avons cependant
cette application. Ce prochain kit de démarrage S. Allons-y et
débarrassons-nous de tout ce que nous
n'avons pas besoin d'utiliser pour accéder à notre projet de code
VS Ici, je vais passer aux pages. La façon dont Next S fonctionne est
qu'elle structure réellement votre application en termes
de pages. Comme nous sommes sur la
page d'accueil de l'application, nous allons simplement modifier ce fichier d'index comme nous en avons
parlé précédemment. Nous avons JSX, qui est Javascript
mélangé à du Javascript XML Il s'agit de S, qui
n'est que la version dactylographiée de la même chose que celle que
j'ai mentionnée précédemment Si vous n'êtes pas familier
avec Typescript, il est très, très
similaire à Il s'agit essentiellement
de la même chose. Typescript n'est que du
Javascript avec des types, et nous y reviendrons au fur et à mesure que
nous travaillerons sur notre projet Donc, la première chose
que nous voulons faire est de régler
tout cela entre les deux. Nous allons donc tout
effacer, du Maine au pied de page,
et nous en débarrasser Nous voulons juste une feuille
blanche et nous allons
changer le titre
ici pour faire du bon travail. Donc, comme vous le verrez sur la droite,
nous n'avons rien à faire, donc nous savons que
nous avons fait notre travail correctement. Nous l'avons vidé. Je vais également me
débarrasser des styles ici, juste pour que nous
puissions vraiment partir de
zéro. Très bien, alors jetons
un coup d'œil à nouveau à notre application.
Que voulons-nous faire ? Eh bien, je pense que nous allons devoir
créer plusieurs
composants différents ici. Nous allons donc
avoir besoin de ce type de composant
plus grand qui
héberge l'arrière-plan. Peut-être que vous pouvez simplement ajouter l'
arrière-plan au corps, mais nous aurons alors
ce conteneur qui contient vraiment
le contenu à faire lui-même. Mais il semble que nous ayons
ici un en-tête que nous pourrions nommer. De l'art, une liste de choses à faire ou quoi que ce soit d'autre, mais c'est juste une activité pour le moment. Et puis nous avons cette
entrée qui est liée à la soumission et à la tâche
à faire elle-même. Il y a donc quelques composants que
nous voulons créer. Pensez à créer
ici. Commençons d'abord par styliser
l'arrière-plan. Je pense que ce que nous avons fait
ici est un gradient linéaire. Je pense donc que c'est ce que
je vais probablement faire également
pour nos projets. Ce que je vais faire pour
comprendre cela, c'est
rechercher la sémantique
du dégradé linéaire Et oui, c'est
ce que je veux faire. Je veux le prendre
comme couleur de fond ou simplement en
faire l'arrière-plan. Je vais donc
retourner à l'application, puis essayons-la sur notre div
ici pour voir si cela fonctionne. S'il couvre toute la page, il s'agira
donc d'un dégradé
linéaire et nous n'aurons qu'à emballer cette citation. Il s'agit d'un CSS en ligne si vous ne l'
avez jamais utilisé auparavant. En gros, cela nous
permet d'écrire notre CSS dans l'élément
lui-même. Nous devons donc simplement nous
assurer que cela se passe bien. Ouais. Oh, tu sais, désolée, j'ai mis la citation
du mauvais côté. Voilà. Cool. Jetons donc un
coup d'œil à ce
que cela nous a apporté. Maman, hum. Oh, et ajoutons de la texture pour voir que nous travaillons sur le
bon fichier. C'est bon. Pour faire quelque chose de génial. Cela nous
donne donc un dégradé linéaire, mais il ne couvre tout simplement pas toute
la page. Je vais
donc ajouter une autre étape à cette page. En gros, je veux que la page occupe toute la page visible. Il existe donc une propriété appelée hauteur de
vue que vous pouvez réellement utiliser pour prendre
100 % de la vue, la hauteur de la vue
que vous utilisez. Nous allons donc régler la hauteur à 100 VH avec des valeurs correspondant à la hauteur
de vue Et nous allons économiser
ça. Et nous y voilà. Notre page
occupe l'arrière-plan, ou du moins pour notre page d'accueil, la
page entière. C'est génial. Une autre fonctionnalité que
je vais ajouter à ce
style de dégradé linéaire est un tour. Je vais donc
ajouter un tour de 0,125. Et cela ne fera que
changer la ligne où se trouve le
dégradé en ce moment. C'est un peu de l'autre côté de la
page. Ça va juste le faire glisser, donc nous
allons enregistrer ça. Génial. Et ce ne sont qu'une
petite touche supplémentaire. Cool. Nous en avons donc fini avec ce
style pour le moment. Passons à la
création de nos composants. Je veux donc créer
un nouveau dossier ici, et je vais l'
appeler components. Comme je l'ai mentionné dans mes leçons
précédentes, lorsque
je crée
un projet React, j'aime créer un dossier de
composants afin de
pouvoir classer et créer tous mes composants
dans les dossiers existants Je trouve que cela me facilite
beaucoup les choses. Cela dépend simplement de
l'application
avec laquelle vous travaillez et de la manière dont vous souhaitez
structurer votre projet. Donc, dans le dossier des composants, je vais créer un nouveau
fichier et je vais appeler ce fichier pour faire
container parce que
ce sera le
gros conteneur blanc que nous avons vu dans l'
autre, dans l'exemple. Je vais donc appuyer sur
Entrée puis utiliser, je crois que c'est moi,
c'est une saisie automatique, je vais utiliser R AFC et cela va
créer automatiquement un composant fonctionnel Voilà, nous avons un composant fonctionnel
appelé do container. Ce que je vais
faire maintenant, en revenant à cette page principale, je vais simplement
remplacer notre petit texte qui dit « Do »
et le remplacer par notre composant conteneur Do
qui, comme vous le voyez, s'importe
automatiquement à cause de
certaines des extensions que
nous avons installées Et je dois juste dire que si vous avez d'autres questions
sur les extensions, laissez un commentaire ci-dessous et je peux vous
en recommander un tas si vous avez besoin d'
aide pour ce genre de choses. Donc, en passant à, vous
verrez sur la droite que le
conteneur à faire est désormais réellement
présent dans, dans l'application Donc, vous savez, nous
travaillons plutôt bien. Donc, la prochaine chose que
nous voulons faire
est de mettre en forme, nous voulons que notre
conteneur soit au centre de
la page, n' est-ce pas ?
Nous voulons qu'il soit là. Donc, pour ce faire, je pense que le moyen le plus simple de le faire
serait de configurer notre page comme une boîte flexible, car ce sera la
seule chose sur notre page. Nous pouvons en quelque sorte permettre que
ce soit une boîte flexible sans craindre que cela n' affecte quoi
que ce soit d'autre. Donc, sur notre page, ce que je vais faire ici, c'est
régler l'affichage, faire Flix, puis je vais
justifier le fait que le contenu est au centre et l'enregistrer. Comme vous le verrez, le conteneur a déjà rebondi vers
le centre, il est
donc déjà
centré sur la page La prochaine chose que je vais
vouloir faire maintenant est styliser le conteneur lui-même. Et je vais ajouter un peu de style intégré à cela pour l' amener là où nous le voulons style intégré à cela pour l'
amener là où nous le voulons
. En utilisant un style intégré. Au cours de la plongée,
je vais passer au style, puis je vais
définir une marge en haut de,
disons, de cinq M pour le moment, juste pour la pousser un peu vers le bas depuis le haut de la
page. Ensuite, la prochaine chose que je veux faire maintenant est de définir une couleur d'arrière-plan. Couleur de fond Nous allons juste le
mettre en blanc, qui est FF, et
enregistrer ça, super. Nous avons donc notre conteneur à faire, mais comme vous pouvez le voir,
il va jusqu'au
bas de la page. Ce n'est pas nécessairement ce que nous voulons. Donc, ce que je
vais faire, c'est définir une hauteur
maximale qu'
elle reste belle et contenue. Nous pouvons l'
agrandir si nous le voulons. Nous pouvons le rendre plus réactif ou le rendre défilant Toutes ces sortes de choses
sont agréables à avoir, mais nous nous en occuperons au
fur et à mesure. heure actuelle, nous
voulons simplement obtenir ce type de MVP, le produit minimum viable avec
lequel nous travaillons ici Bien, il y a encore deux choses que je veux voir ici, c'est que nous ne voulons pas que nous soyons vraiment écrasés jusqu'au
bord du contenant Nous voulons donc probablement
ajouter un peu de rembourrage. Je vais donc ici et j'
ajoute du rembourrage. Ajoutons simplement deux béliers de
rembourrage sur tout le pourtour. Génial. Ça a l'air plutôt bien. Enfin,
nous allons ajouter
un rayon de bordure pour simplement
courber ces coins. Vous allez donc
taper le rayon de la bordure ,
puis je vais le régler sur, et l'enregistrer. Génial. Je suis plutôt content de
son apparence en ce moment. Je pense que nous pouvons faire un peu plus une fois que nous aurons commencé à ajouter les composants internes
ici en tant qu'en-tête. Et nous allons également ajouter la saisie, le bouton
et les tâches à effectuer. Alors passons à autre chose et faisons-le. En revenant à notre conteneur Do
ou en disant
dans celui-ci, allons-y et
ajoutons l'en-tête Nous allons donc
créer un H Et en fait, parce que
nous utilisons Material I
, une bibliothèque
de styles
et de composants particulière mise à notre disposition. Comme nous utilisons React, nous pouvons utiliser
certains de leurs
composants intégrés qui nous permettent de
styliser les choses un peu plus rapidement. Cela nous permettra d'être en quelque sorte
opérationnels avec notre Apple
un peu plus rapidement. Et apprenez-nous également une nouvelle bibliothèque et donnez-nous un nouvel outil
à connaître. Je vais donc utiliser un
composant qu'ils ont appelé typographie et importation Maintenant, par
expérience, je sais que le composant de topographie possède un élément ou une propriété
appelé variant Je vais donc utiliser
la propriété variant et je vais vouloir
accéder à la variante de H one, car ce
sera le titre de notre page. Ensuite, entre
ces deux crochets, je vais taper todos Ce sera
notre titre pour le moment. Et voilà,
nous l'avons là. C'est un peu différent
de celui que nous avions avant. Je pourrais aller de l'avant
et le styliser un peu différemment, juste pour les
besoins de ce didacticiel. Mais si vous vouliez utiliser matériellement y pour
styliser un projet plus important, vous pouvez accéder au dossier de styles
fourni avec
le prochain JS, puis modifier le thème et travailler un
peu plus en détail la typographie
et sur la taille ou le H, l'une est, l'épaisseur, le poids de la police, etc. Vous pouvez vraiment définir le
style des composants
même s'il s'agit d'une bibliothèque de
composants. Mais pour l'instant, je vais
simplement accéder
aux styles réels de l'élément lui-même pour le modifier
comme je le souhaite. Donc, pour ce qui est du matériau I, chaque composant du matériau Y possède une propriété spéciale appelée X. Et X est essentiellement
similaire au style, au style en ligne, mais il est juste spécifique
au matériau Y. Nous allons
donc
utiliser le SX Prop, et je vais
définir la taille de police comme étant,
disons, trois RAM, peut-être disons, trois RAM, Ensuite, nous allons définir le poids de la police. Je pense à 500. C'est bon, cool. Cela me
semble plutôt bon. Passons à autre chose. Donc, la prochaine chose que
nous voulons faire maintenant, vrai, en
repensant à notre application To Do, nous voulons prendre en compte cette entrée, le bouton Soumettre, et les
choses à faire elles-mêmes. Je vais donc commencer par créer le Todos,
puis revenir en arrière, en revenant à notre application
et en le
réglant sur trois Rams afin qu'il corresponde
un peu plus au design de l'exemple Nous allons créer
un autre composant, call to do item. Nous allons utiliser la
même chose, R AFC, et il va y exporter
notre composant Ensuite, au lieu de simplement les
importer immédiatement, je vais
créer des données fictives. Je vais donc faire
une simulation constante, puis je vais juste
créer un tableau de chaînes, qui
sera notre maquette. Pour ce faire,
faites un , deux et trois. Et
nous allons économiser ça. Et ce que je vais faire en
dessous de la typographie, je
vais maintenant simuler des données et
importer notre élément à faire Donc, en utilisant
ces crochets nacrés, je vais
faire notre maquette et je vais les
cartographier. Donc, si vous vous souvenez bien, cette carte est une fonction que nous pouvons utiliser sur des
tableaux pour nous permettre d'
itérer sur les
objets ou les éléments d'un tableau, puis de les
étaler et d'effectuer une sorte d'
action répétable sur chacun d'eux effectuer une sorte d'
action répétable sur chacun Nous allons donc
cartographier chacun
des tos et ce que nous voulons faire, parce que les cartes doivent avoir un retour, nous allons revenir pour faire objet, nous allons le dire. Maintenant, ça me donne de l'air ici. Cela indique qu'il me manque l'accessoire clé car pour les cartes,
vous devez avoir une clé pour que chaque élément soit identifiable
indépendamment Donc, ce que nous allons
faire, c'est
définir la clé comme étant « À faire », car nous savons que nos tâches
à faire sont uniques. Cela va fonctionner. Mais vous devriez
lui attribuer un identifiant unique, ce que nous ferons ultérieurement. La prochaine chose que nous allons
vouloir faire ici, c'est que, comme
vous le voyez sur
la droite ici, les éléments à faire ont été remplis
un certain nombre de fois. Les Mac to Dos sont donc présents.
Il y en a donc trois à faire. Il y a trois ou deux
articles. Cependant, ils n'ont pas réellement été
renseignés avec les données. Et c'est parce que nous n'avons pas réussi
à transmettre les données au composant to Do it
proprement dit. Alors allons-y et faisons-le. Pour en revenir à l'élément do, ce que nous allons
faire ici et c'est là que le Javascript
et les scripts de type commencent à légèrement différer. Si vous connaissez
le Javascript qui réagit, vous savez que
vous pouvez simplement créer un accessoire à faire, puis transmettre à votre composant
actuel Mais ce que vous ne verriez pas dans le
script de travail , c'est cette
erreur que je reçois. Il dit donc que l'élément de liaison à
faire a implicitement n'importe quel type. Et c'est parce que
nous n'avons pas précisé le type de pour le faire. Tout comme en Javascript, tout a un type, non ? Tout ce qui se trouve dans un
script de type possède un type. Mais dans le script de type, ils veulent que
vous
définissiez ou déclariez explicitement ce type
afin d'éviter toute confusion quant au contenu transmis, à l'
endroit où il est transmis, etc. Donc, une façon de le
faire dans un script de type est de
créer ce que l'on appelle
une interface d'interface. Et tu peux l'
appeler comme tu veux, mais nous allons
l'appeler accessoires. Et dans cette interface, nous allons maintenant définir nos types. Nous n'en avons qu'un pour le moment, mais nous pouvons en
ajouter d'autres selon nos besoins. Nous allons donc
créer, nous allons définir que do est une chaîne de caractères. que nous allons
dire. Et puis, en dehors de cette parenthèse
frisée, nous allons mettre un deux-points Et nous allons taper le
mot props pour indiquer que ces accessoires doivent être
appliqués à ces paramètres À faire, c'est le type string. Si nous ajoutons autre chose ici, nous n'aurons pas à ajouter
de plus en plus d' accessoires sur la septième ligne Nous pourrions simplement les ajouter aux
lignes 56.7, et cetera. Donc, pour en revenir à l'élément « faire », nous voulons maintenant passer à
l'élément « à faire ». Hein ? Parce que tu sais
qu'il s'y attend maintenant. En gros, il sait que
pour faire quelque chose, il faut le faire. Il faut donc que nous
utilisions réellement cette propriété particulière, ce qui est l'un des avantages du
tapuscrit Tu ne vas pas faire ce
genre d'erreur. Par exemple, s'il s'agissait de Javascript
et que
nous n'étions jamais passés à do, nous nous demandons peut-être pourquoi notre
to do n'est jamais renseigné, mais
comme il
s'agit d'un script de type, cela va nous donner cette erreur lorsque nous écrivons notre code. Nous n'aurons donc pas ces erreurs
silencieuses qui échoueront lorsque notre application est
en cours d'exécution. Il suffit donc d'écrire la propriété à faire, puis transmettre la propriété à faire et de l'enregistrer. Et voilà. Nous
devons faire un, deux et trois,
et exactement comme nous l'avons écrit dans notre maquette pour nous assurer que
nous transmettons les bonnes données. Génial La prochaine chose que
nous allons vouloir faire c'est commencer à le
styliser, n'est-ce pas Parce que nous avons certaines choses à faire ici. Nous voulons avoir une
petite case à cocher, nous voulons avoir un
petit bouton de suppression Nous voulons avoir ce fond
gris. Vous savez, deux ou trois choses que
nous voulons accomplir. Donc, si nous nous dirigeons vers un objet, nous pouvons commencer à en déterminer la portée. Donc, dans le cadre de cette tâche, je suppose que
la première chose que
je veux faire est de définir ce contexte. Alors laisse-moi prendre une couleur ici. Faisons donc un RG, une couleur, passons à l'
image en couleur ici et choisissons une sorte de
gris clair pour notre arrière-plan Je vais le faire, puis nous allons simplement le
définir comme
arrière-plan de notre plongée en utilisant cette couleur de
fond de style. Nous allons le régler sur
ce point. Nous allons conserver cette aide ici. Super, nous avons notre couleur de
fond. La prochaine chose que
nous allons vouloir
faire est probablement d'
ajouter un peu
d'espacement en dessous eux, puis d'ajouter à nouveau ce rayon de
bordure Je vais donc ajouter ceci en faisant une marge en bas de
disons un RAM. De cette façon, chaque nouvelle tâche sera ajoutée, nous
aurons cet espacement. Ensuite, nous allons également
ajouter, euh, le rayon de bordure de, disons 0,25 RAM Et disons que la dernière chose nous voulons
faire ici maintenant est ajouter du rembourrage, juste pour qu'il y ait un peu
plus d'espace autour de nous Ajoutez donc le rembourrage et nous ferons peut-être un Ram
également, un peu partout C'est bon, cool. Donc ça
a l'air plutôt décent pour le moment. La prochaine chose à laquelle je pense que
nous allons vouloir
aborder, ce sont les
éléments qui se trouvent à l'intérieur, n'est-ce pas ? Nous voulons avoir cette case à cocher et nous voulons avoir
cette poubelle Je pense que le moyen le plus simple de
saisir la case probablement d'utiliser la case à cocher
matérielle. Oui, nous voulons juste quelque chose de
vraiment basique comme celui-ci. Nous voulons qu'il soit décoché
dans un premier temps
, puis vérifié au fur et à mesure que nous l'utilisons Nous pouvons simplement
copier cette ligne de texte ici
et l'inclure. Avant de pouvoir le préplier, nous allons retirer cette
pièce qui est étiquetée ici pour indiquer comment ils
veulent l'étiqueter. Si nous voulons inclure une
étiquette dans la case à cocher, nous le pouvons, mais nous allons le
styliser séparément. Ensuite, nous allons
ajouter cette importation depuis Maturely en cochant cette case Alors si nous sommes ici, nous
devons faire quelque chose de formidable. Une autre chose que nous pouvons faire est d'
intégrer de l'art à un élément de
typographie, car il s'
agit d'une typographie d'élément Et garde ça, cool. Ensuite, nous voulons
ajouter une poubelle. Je ne sais pas s'ils
ont une icône de poubelle, mais s'ils en ont, ce
serait génial. Essayons les poubelles. Génial, ils
ont une icône de suppression, nous pouvons y accéder. Nous pouvons le copier. Utilisez-le dans nos composants, je me demande si. Oui, et nous pouvons changer
la couleur, ce qui est génial. Allons-y et nous allons
simplement laisser tomber ça, désolée. Nous allons insérer l'icône
dans notre projet ici. Et puis nous
appellerons simplement l'icône de suppression ici. C'est super, nous avons
notre icône de suppression ici. Ensuite, nous devrions
pouvoir définir la couleur dessus. Donc, si nous saisissons une
couleur et que nous la saisissons, je pense que ce sera
probablement un danger ou une erreur. L'erreur devrait probablement
être la couleur rouge. Si on garde ça, tant mieux. Nous avons une poubelle rouge. Génial Vous remarquerez
cependant qu'ils descendent tous directement
en ligne droite, ce qui n'est pas idéal. Ce que nous voulons
faire pour résoudre ce problème, c'est qu' en fait, nous
allons le configurer pour qu'il se trouve dans une boîte flexible l'autre côté, puis nous les
séparerons de là. Nous allons donc créer une plongée qui contourne la case à cocher
en topographie Parce que si vous vous souvenez
de notre exemple, nous voulons qu'ils restent
sur le côté gauche et que la suppression
soit sur la droite. Ensuite, nous allons
agrandir cet écran
de type boîte flexible. Réglez-le pour qu'il fléchisse cela. Pareil,
nous allons ajouter cet accessoire,
disons que nous alignons également les objets
au centre parce qu'ils sont
un peu bancaux. Et nous allons
faire la même chose ici nous allons ajouter cet accessoire,
disons que nous alignons également les objets au centre parce qu'ils sont un peu bancaux. Et nous allons
faire la même chose Cool, tout a l'
air plutôt bien. La dernière chose que nous
allons vouloir faire est de régler ce plongeon supérieur sur le
contenu à espacer. Nous voulons qu'ils
soient essentiellement aussi éloignés que possible de cette div et de cette icône de suppression. Et une chose qui
va nous aider dans ce domaine est de
fixer un minimum avec ce conteneur extérieur, car à l'heure
actuelle, il n'y a pas beaucoup d'espace
entre les deux. Hein ? Pour ce faire, nous
allons aller dans notre conteneur To do et nous allons
définir une largeur minimale,
disons 40 largeur de vue, une, si c'est le cas,
c'est plutôt bien. Nous avons donc notre tâche à faire, nous les avons renseignés
ligne par ligne Nous avons notre en-tête, auquel je vais en fait
ajouter une marge au bas d'un seul RAM. Et nous avons à faire, et
notre case à cocher consiste à cocher
et à décocher, mais pour le moment aucun
de nos boutons ou icônes ne fait quoi que ce Allons-y donc et faisons-leur
faire des choses. Donc, ce que nous devrons également
faire ici pour autoriser cette fonctionnalité, c'est enrouler notre
icône de suppression dans un bouton. Je viens donc d'importer le
bouton depuis le matériau. Moi, je ne l'ai pas fait. J'ai maintenant importé le
bouton depuis Material UI, et maintenant c'est en fait un bouton. Ainsi, lorsque vous passez la souris dessus, vous voyez qu'il
se transforme en bouton. Il y a un petit état
de survol, donc nous sommes sûrs qu'il s'agit essentiellement
d'un bouton Bien, donc l'autre chose que nous allons devoir
faire maintenant, c'est
comme si, plutôt que d'
utiliser ces données fictives, nous allons en fait vouloir utiliser des données réelles à un moment donné. Donc, pour réellement
saisir les données réelles, nous allons avoir besoin d'
une entrée, n'est-ce pas ? Allons-y et
créons notre contribution. Nous allons le créer ici même dans ce
nouveau conteneur. Je crée, je crois, de la matière. J'ai une saisie de texte. Option de saisie de texte. Champ de texte de mai. Oui, c'est un champ de texte
et je pense que nous voulons champ de texte
encadré très basique. Encore une fois, je vais simplement copier la première ligne des
options ici, la documentation, et la
coller dans notre projet. Et je vais juste
faire une solution rapide pour
pouvoir importer le champ de texte. Et si on y retourne en équipage,
cool, c'est là. Mais nous avons également besoin d'un bouton. Allons-y et créons un bouton séparé en utilisant simplement
le même composant de bouton, et ce
sera un bouton Soumettre. Génial. Nous avons donc le bouton et le bouton
Soumettre côte à côte. Je vais aller de l'
avant et les envelopper dans une plongée juste pour qu'ils soient contenus, comme
tout le reste. Ensuite, je peux leur ajouter du
style pour
que les choses apparaissent comme
nous le voulions avec le div. Je vais faire la
même chose. Je vais le configurer et en faire une boîte flexible. Nous allons donc créer
Display Flex. Et trouvez-vous que vous
faites le même genre de schéma encore et encore ? Une chose que vous pouvez faire est de créer quelque chose comme un
composant de style qui
est simplement un conteneur
qui
crée automatiquement une boîte flexible à chaque fois. Et puis utilisez-le au lieu
d'utiliser des divs de base. C'est quelque chose que vous
voudrez peut-être faire si vous réalisez un projet plus important ou si vous
pensez simplement à des optimisations Display Flex, nous allons ajouter une
marge inférieure d'un M. Oui, ça a l'air plutôt bien. Je veux m'en occuper. Eh bien, désolés,
ajoutons également une marge
sur le côté de notre saisie. Marge, non ? Nous allons refaire un M. Et je voudrais faire quelque chose
avec ce
bouton pour qu'il tienne
un peu plus debout. Donc, si je clique
sur le bouton LI de Contained, nous avons un aperçu, nous avons du texte. Je pense que ce que nous voulons faire,
c'est avoir un bouton intégré. Je vais donc
ajouter ce bit ici qui dit que variante est égale à celle contenue dans
notre bouton. Gardons-le. Et maintenant, vous voyez que nous avons un bouton un peu plus
intégré. Mais vous remarquerez également qu'
il est vraiment très grand. Je ne sais pas si nous voulons
qu'il soit aussi grand. Je pense que c'est peut-être à
cause de notre boîte flexible. Je pense donc que ce que je peux faire
ici, c'est simplement aligner les éléments au
centre, ce qui devrait corriger la hauteur supplémentaire
de notre bouton Essayons ça.
Dis-le et tant mieux. Oui, il a retrouvé
sa taille normale. Mais oui, j'aime bien le bouton, mais je pense que je veux garder un thème similaire et un
style similaire dans l'ensemble. Donc, ce que je vais faire avec le bouton
ici, c'est changer
l' arrière-plan pour qu'il
corresponde à notre note linéaire à chaud à celle de
notre fichier d'indice TSX Je vais littéralement
prendre cette couleur d'arrière-plan ici, copier, revenir à
notre élément de bouton. Et dans l'accessoire X
que je vais ajouter ici, je vais simplement le déposer et
le sauvegarder. Allons-y. Notre bouton s'active automatiquement, alors
commentons-le une
seconde pour que nous puissions vraiment y
jeter un œil. Il était blanc et bleu. Et puis, quand,
permettez-moi de le rajouter. Il est toujours blanc,
mais
ce dégradé linéaire
fonctionne maintenant plutôt bien. La prochaine chose que nous voulons
aborder est la contribution réelle. À l'heure actuelle, l'étiquette
indique « esquissé ». Changeons cela. C'est donc un
peu plus une question. Disons peut-être, ajoutez un
nouveau point et enregistrez-le.
10. Ajouter un état global: La prochaine chose que nous allons
vouloir faire ici est assurer que
nos tâches à faire se trouvent dans
un outil de gestion de l'état. Nous allons envisager quelque chose comme Redox ou Z.
Stand personnellement. Je
pense que Redux a peut-être un peu
trop de prérequis
pour ce projet à ce stade pour Parce que c'est vraiment
une application très simple à utiliser. Nous n'avons pas beaucoup d'actions d'interface utilisateur
complexes. Je pense qu'une simple utilisation d'un « instead » pourrait
être la solution. Si nous consultons la
documentation du stand, nous pouvons trouver comment l'
installer et le faire fonctionner. C'est vraiment comme un système de
gestion d'état plus simple. Nous allons donc procéder à l'installation
d'un stand dans notre projet. Maintenant
qu'il est installé, nous allons procéder Je vais créer un nouveau dossier ici et je vais l'
appeler store. Donc, si vous n'avez jamais
travaillé dans le magasin auparavant, il s'
agit essentiellement
d'un endroit où vous, votre État
, vivez essentiellement. Pour le dire simplement, cette boutique que je vais créer
s'appelle index et c'est là que se trouve notre boutique. Ce
sera notre dossier de boutique. Consultez leur
documentation ici. Utilisez-le essentiellement pour
créer notre composant. Je vais donc le mettre
là et ensuite nous pourrons modifier en
fonction de ce que nous faisons. Donc, ce que cela fait ici, c'est qu'il importe cette fonction
créée à partir d'un support. Et nous créons ici une variable appelée store, qui
appelle create. Et puis en gros,
c'est en fait notre boutique ici. Cela
crée notre boutique. Dans ce cas, les ours vont en fait
devenir des todos Ce sera un
tableau vide pour commencer. Lorsque nous allons accéder à nos todos, c'est là qu'ils
vont vivre Nous allons simplement ajouter cela à la configuration de notre espace de
travail. Alors allez le chercher.
Sont. C'est bon. Donc, au lieu d'
augmenter la population, nous allons en fait vouloir créer quelque chose appelé ajouter à. C'est exactement ce qui
se passera lorsque nous cliquerons sur Soumettre et que cela ajoutera nos tâches
à faire à la liste des choses. Nous allons régler l'état à la
place des ours quel que soit l'état
actuel, au lieu de plus
un que nous allons faire,
nous devrons peut-être le mettre dedans, envelopper dans un tableau, désolé. Nous allons faire
quel que soit l'état du tableau précédent, puis le nouveau pour le faire au lieu
de l'état plus le nouveau oh, désolé, ce n'était pas le bon
endroit où nous allons passer pour faire et plus
le nouveau pour faire. Je dois dire que je
reçois quelques erreurs
ici parce que, encore une fois, nous avons besoin de mettre les bons types
dans ce projet pour qu'il
fonctionne correctement. Donc, en fait, je vais
créer un autre type et je vais créer un
autre dossier pour le type. Je vais donc créer
un dossier appelé types. Je vais créer un nouveau fichier, l'index S, et c'est là que tous
nos types seront créés. Ainsi, si je crée
un type, par exemple, je n'ai pas besoin de le
recréer dans chaque fichier, mais créer une interface
dans chaque fichier Je peux simplement l'exporter et y accéder dans chaque fichier afin que
nous puissions garder notre code au sec. C'est donc une autre
façon de créer un type. Je vais créer
le type à faire. Et tout comme l'interface, elle nous permettra de taper
tout ce avec quoi nous travaillons. Alors,
réfléchissons-y sérieusement une seconde, car ce sera quelque chose
que nous pourrons soit modifier plusieurs fois, soit créer
une fois puis construire
le code autour de celui-ci. Donc, lorsque nous examinons notre
exemple d'application, n'est-ce pas, nous voulons pouvoir
ajouter l'application À faire, n'est-ce pas ? Il doit donc avoir une sorte de description ou quoi que ce soit d'autre qui
signifie.
Comme vous l' avez déjà mentionné, nous
voulons avoir un identifiant unique C'est donc aussi une autre propriété que nous devrions avoir. Nous voulons donc une description
et un identifiant. Nous voulons probablement
savoir s'il est
coché ou non Parce que si nous voulons qu'il
persiste lorsque la page se recharge. Nous ne pouvons pas simplement le diffuser en direct du
côté du client, n'est-ce pas ? Il doit vivre quelque part dans
le magasin. Cela ne changera
pas d'un rechargement à l'autre. Enfin, nous
voulons pouvoir les supprimer. Encore une fois, supprimez les types de
vies dotés de cette capacité d'identification. Pour supprimer une
tâche spécifique, il est bon qu'elle ait un identifiant. Je pense donc que nous avons établi en quelque sorte trois choses à faire. Doit avoir ou trois propriétés. Nous allons
lui donner une propriété ID, qui sera probablement une chaîne. Nous allons probablement en
faire, désolé, nous allons probablement en
faire un UUID Nous allons probablement en
donner une description. Ce sera également une chaîne. Enfin, nous allons
lui attribuer une propriété cochée. Donc, que ce soit vérifié ou non, ce sera
une aubaine. Donc un vrai ou un faux. Permettez-moi d'exporter ce type afin que nous puissions y
accéder ailleurs. Ensuite, je vais l'
importer ici. Voyons voir. Je pense que nous pouvons vraiment,
oh, tu vois ce que c'est. J'ai besoin d'en créer une autre, j'ai besoin de créer
une autre interface, mais c'est juste pour le magasin, donc je dois créer
un type pour faire du magasin. En gros, cela va nous
donner toutes ces options. Et nous allons changer cela, mais en supprimant sur Do, nous devons essentiellement définir de
quels types il s'agit. Ça va être un tableau à faire. Array va importer
les types à faire à partir de. Un tableau de Todd to do sera une fonction
qui prend en do, qui est du type chaîne En fait, vous savez
quoi, ce n'est pas le cas, ce sera
probablement une description. Nous allons donc changer cela. Nous allons le modifier ici. Et
nous allons le changer ici. Nous allons l'enregistrer, puis y revenir, puis le dernier ici. Ou peut-être que nous
allons probablement en avoir deux autres. Nous allons donc faire une suppression pour ce
faire, ce sera notre suppression. Nous allons prendre un
identifiant de type chaîne et essayer de fonctionner. Et puis, oui, alors changeons
simplement cela pour le supprimer. Pour ce faire, nous savons
que c'est ce que cela est
censé être prévu pour
le moment Très bien, nous avons
donc une erreur ici. Oh, parce que nous n'avons pas
demandé à notre boutique d'agir comme notre état à notre
boutique avec un script de saisie. Cela dépend
en quelque sorte de l'orientation des choses. Mais généralement, vous
pouvez le mettre un
peu à côté de la fonction ici. Par exemple, lorsque vous
créez un effet d'utilisation, vous le placez en quelque sorte juste
après les mots effet d'utilisation, mais juste avant
le crochet ouvert. Je pense donc que je peux
le mettre ici après la création. Donc je vais le faire, parce que
c'est essentiellement un crochet. Je vais donc
écrire dans Do store, je vais fermer
le support je vais le sauvegarder et
c'est parfait. C'est bon, ils ont changé. Cela indique qu'il me manque les propriétés
suivantes. Ajouter à faire. Oh, tu sais quoi ? C'est juste parce que je l'ai
tapé différemment. Permettez-moi de tout
faire en minuscules. Je disais juste que je n'ai pas été supprimé pour le faire.
Créons-le. Nous allons donc prendre une pièce d'identité
et elle ne rapportera
rien pour le moment. Oh, non, ça ne lui plaît pas. Non. En fait, laissez-moi régler, d'accord, laissez-moi régler deux problèmes. Je vais réparer
cette annonce pour le faire. Ce que nous allons
faire ici, c'est que je crois, oh, vous savez quoi, eh bien, il s'
agit de deux choses différentes. Nous obtenons ici quelques erreurs différentes. L'opérateur de spread doit
donc
réellement apparaître en état pour le faire, peut-être ne le remettons-nous pas dans
un tableau. Cela résoudra-t-il le problème ? Maintenant, déclarez. Allons-y et
finissons de créer notre tâche
supprimée, puis nous
pourrons régler cette autre question. Euh, je vais juste le copier
et le coller. Pour
déterminer ce que nous devons faire, nous les supprimons pour
accéder à toutes nos
tâches et nous voulons les
filtrer pour les activités
que nous n'utilisons plus. C'est bon. Ce que nous
ne voulons plus faire deviendra au contraire
ce que nous devons faire. Un état à filtrer selon
le type de
filtre à effectuer en fonction de l'état d'identification. Filtre Dom Dodd. Ford est donné Mainer me manque un autre support,
ici indiqué le filtre Ford Nous voulons,
cherchons le filtre. OK. Nous allons utiliser le
bon filtre pour qu'il ne soit pas égal au DID. Cela devrait fonctionner. Voyons pourquoi ces erreurs se
produisent maintenant. Très bien, donc en regardant ça, il
manque le type à faire
supprimé. N'ajoutez jamais de choses à faire,
mais vous devez les saisir pour les stocker. Oh, est-ce la seule
erreur en arrivant ici ? Bien sûr. Toutes mes virgules sont
au bon endroit. Effacez, supprimez pour faire,
des deux. Jetons un coup d'œil à
l'annonce « Do errors ». Voyons ce qui se passe ici. C'est trop clair mais jamais réglé. Donc, juste une petite
erreur, c'est que nous devons
probablement supprimer ces crochets. Et puis, au lieu de simplement
transmettre la description, ce que nous
voulons réellement faire, c'est créer une nouvelle activité, n'est-ce pas ? Nous voulons donc
créer un identifiant, identifiant
unique, qui
sera une chaîne. Ensuite, nous allons
créer la description, qui ne sera que
la description. Ensuite, nous allons également
ajouter un état de vérification. Donc ça va être vérifié et ça va
commencer comme faux. Donc, l'état de vérification, nous ne pouvons plus simplement passer une chaîne
vide pour chaque identifiant. Nous allons en fait avoir
besoin d'un identifiant unique. Et pour cela, nous allons
probablement utiliser une
bibliothèque UUID, dont NPM possède au moins une Nous allons utiliser
cet identifiant unique qui nous permettra
essentiellement de nous permettra
essentiellement créer des identifiants uniques
pour notre projet Je vais donc juste
l'installer ici. Ensuite, je vais l'
importer dans notre tempête et le sauvegarder. Oh, et tu sais
quoi, je pense que je dois installer et sauver Deb. Je pense que j'ai
parfois cette erreur. OK, cool. Et puis si tout échoue, fermez-le et
ouvrez-le de nouveau. Et parfois, cela ne fait
que clarifier les choses. Oh, donne-moi une suggestion
, laisse-moi essayer. Arrêtez, revenez dans plus de temps. C'est bon.
L'erreur parfaite est corrigée. Très bien, donc nous le
voulons, cela devrait fonctionner. Et puis au lieu de
passer une chaîne vide, je crois que ce qu'ils
suggèrent ici,
c'est que nous appelons simplement UID
chaque fois que nous en avons besoin Donc, identifiez-vous avant et
ensuite nous l'
appellerons , ce qui devrait créer un identifiant
unique pour notre nouvelle activité. Génial. Je pense donc que nous sommes plutôt bien placés
sur le plan de l'identification. Je ne pense pas que nous soyons là pour
installer d'autres packages. Nous travaillons maintenant avec le stand Z pour accéder aux nôtres, les ajouter à notre liste et les utiliser
pour les faire au lieu de les utiliser également. Je pense que nous pouvons commenter
Roof to Do Now. Je pense que nous avons corrigé
l'erreur que nous avions rencontrée,
qui concerne en fait le niveau supérieur que nous allons
atteindre, nous nous basons sur les choses à faire. C'est bon, c'est cool. Les deux devraient fonctionner maintenant. Revenez à l'option « À faire ». Nous allons en quelque sorte nous
connecter à tout maintenant et faire que tout fonctionne
comme nous le voulions. Donc je suppose que nous devons
être dans le conteneur, donc nous voulons le faire. Commençons donc par
cela. Nous allons donc prendre les choses à faire. Donc, la constante à faire équivaut à ce crochet ici
stocké sur un support. Ensuite, nous voulons nous
emparer de l'État. Et sur l'État les choses à faire sont présentes dans
cet État, n'est-ce pas ? Donc, ce petit tableau que nous avons
créé au début, c'est ce
que nous voulons
saisir pour que nous puissions le faire Ici, D n'est pas un bol, c'est pourquoi il nous donne cette erreur en fait
huit correctement. C'est bon. C'est juste
une erreur de type que nous recevons parce que
State en a n'importe quel type. Je crois qu'il existe des
guides de script que nous pouvons suivre ici pour
accéder à notre boutique. Qu'est-ce que je n'ai pas exporté dans la boutique ? Exportez le magasin. Oui, je dois exporter le magasin. Sinon, nous ne pouvons pas l'utiliser. C'était le problème. Je
me suis demandé : « Pourquoi ça ne marche pas ? Bien, fermons ça encore
un peu. Ouvrez-le de nouveau. Oh, nous avons toujours le
message d'erreur. C'est tellement intéressant.
Qu'est-ce qu'il disait ? Tapez, mais il importe
le mauvais magasin. Le magasin. En fait, renommez-le un
peu moins confus. Nous allons donc l'appeler
To Do Store. Et je vais
appeler Store Store. J'ai importé le mauvais magasin, je dois
donc importer un
magasin à un autre. Alors je pourrai faire ce que
j'essayais de faire. Je me demandais pourquoi
cela ne fonctionnait pas. Très bien, alors c'est à l'État
qu'il reviendra de le faire. Et vous voyez comment un script de type a ready crée comme ce type
de documentation intégrée. C'est vraiment génial dans ce
sens que vous puissiez simplement découvrir ce qui vous
manque essentiellement. Très bien, ce
sera donc à nous de le faire. Nous devrions donc avoir une
liste de nos choses à faire. Nous n'avons rien à faire pour l'instant, mais c'est
ici que nous vivrons. Si je passe de deux
à deux,
nous ne devrions pas avoir de données car nous n'
en avons pas encore besoin. Donc ça marche vraiment. Nous savons donc soit que nous avons
complètement cassé
notre application, soit que nous l'avons
modifiée correctement. Je vais donc clore ça. Je reçois une petite
erreur indiquant que le type de tâche à faire
n'est pas assignable à faire Et c'est correct
car en fait To Do, nous l'avions initialement
défini comme une chaîne de caractères. Donc, ce que nous devons vraiment
réussir, c'est faire une description. Même chose avec la clé ici. Au lieu de passer
l'objet de to do, nous devons le passer à Dod et l'
enregistrer, avoir ces erreurs La prochaine chose que nous
allons vouloir faire maintenant, c'est que nous allons
vouloir connecter notre annonce
afin de pouvoir réellement ajouter le fait que nous
allons revenir Nous allons être dans notre
conteneur de tâches , puis
nous allons
saisir notre fonction
qui est mauvaise à faire. Nous allons donc
faire la même chose. Vous stockez, stockez, mettez en
support, déclarez. Ensuite, nous allons prendre une publicité de
l'État pour le faire. Nous
allons enregistrer cela. Et ensuite, ce que nous allons
faire, c'est appeler cela lorsque vous cliquerez sur le
bouton Soumettre, n'est-ce pas Nous pourrions donc le faire, nous pourrions réellement
le faire sur Submit. Nous pouvons créer, nous
pouvons le transformer en un composant de formulaire et nous pouvons réellement créer une fonction de
gestion pour cela Nous allons créer un
gestionnaire appelé Hand Submit. Nous voulons faire deux
choses. Nous voulons transmettre un événement parce que, en
gros, nous allons devoir cibler cette entrée et aimer la
valeur de cette entrée. En
cas de clic, nous voulons transmettre
n'importe quel type de clic pour le moment, ce qui n'
est pas la meilleure pratique, mais cela va simplement
éliminer l'erreur que nous sommes sur le point de rencontrer. Alors appelez événement, empêchez le rechargement de la page à
chaque fois que nous l'ajoutons Ce que nous allons faire
maintenant, c'est appeler notre annonce pour le faire. Nous allons donc ajouter
To Do. Et ce que nous
ajouterons se
fera sur cet événement, donc ce sera
la fin de l'événement. Il va
falloir le cibler, non ? Ce gestionnaire va donc être appelé lors
de la soumission. Sur notre formulaire, nous avons une propriété
spéciale appelée submit qui, en gros,
lorsque vous soumettez le formulaire, appelle la
fonction que vous souhaitez appeler. Notre onsubmit sera donc ce handle à faire. la suite de cela, un événement va être transmis à
ce handle pour le faire. Nous voulons donc ajouter
notre objectif à faire. Cet événement sera la cible de l' événement car le formulaire
s'enroule autour de plusieurs éléments Ce sera le premier
élément que nous ciblerons. Et puis ce
sera la valeur de cela. La valeur de l'
élément sera celle que nous
transmettrons à notre annonce, à savoir la description. Je sais que c'était probablement
beaucoup à assimiler. Revenons en arrière encore
une fois. Nous avons créé un composant de formulaire, nous avons utilisé l'élément de formulaire. L'élément de formulaire possède une propriété
intégrée appelée
submit chaque fois que votre formulaire est
soumis, c'est ce qui se passe. Nous avons créé cette fonction
appelée handled to do, qui empêche le chargement par défaut
de la page lorsque nous appuyons sur le bouton Soumettre ou que nous
soumettons le formulaire Et puis il ajoute également ce qu'il faut faire. L'annonce à faire va
prendre cette description, cette valeur de l'entrée, puis elle va l'envoyer
à notre boutique et nous donner à faire. Cela va créer un lien avec un
nouvel identifiant et l'état de vérification des défauts
qui devraient à peu près fonctionner. La dernière chose que nous
allons vouloir
faire avant de continuer et d' ajouter need to do est d'ajouter
le type à notre bouton. Vous voulez donc que le bouton
soit du type Soumettre. Il existe deux manières de le
soumettre dès maintenant. Vous pouvez appuyer sur Entrée lorsque vous ajoutez votre valeur, ou
vous pouvez appuyer sur Soumettre. Nous voulons nous assurer que
les deux fonctionnent correctement. Maintenant, le bouton
consiste à taper Soumettre. Le formulaire sait que
lorsqu'ils cliquent sur ce bouton, ils ont l'intention de soumettre et il
devrait fonctionner en conséquence. Ce que nous allons
simplement faire, c'est le tester. Allons-y,
ajoutons ce qu' faut
faire et voir si cela apparaît. C'est apparu. Nous
avons fait la première chose à faire et notre annonce fonctionne correctement. Ce que nous allons
vouloir faire maintenant, c'est que notre suppression fonctionne correctement.
C'est donc très similaire. Nous allons simplement devoir le
faire dans le cadre de notre composant «
à faire ». Donc, passer à « faire
» va réellement commencer et nous allons l'
ajouter à notre bouton ici Nous allons l'ajouter au bouton de suppression que
nous avons créé. Donc, tout d'
abord, nous devons faire les choses. Cela va donc
être supprimé pour le faire. Supprimé pour stocker notre boutique. Nous allons nous emparer
de l'État, puis nous allons faire de
l'État. Supprimer pour faire. Génial.
Pour être correctement supprimé, il faut un identifiant Nous allons
donc vouloir
récupérer l'identifiant
Dos afin de pouvoir supprimer le code correspondant à l'
utilisation du bouton. Maintenant, nous allons dire «
cliquez pour supprimer ». Nous voulons appeler Remove to Do. Ensuite, nous voulons le transmettre
à Do et l'enregistrer. En fait, cela va me donner une petite erreur parce que j'ai fait une petite erreur dans
le conteneur à faire. En fait, j'ai commis l'erreur
de passer à la description. Nous ne voulons pas le faire. Nous
voulons passer le cap. Je vais donner à
ceci le
type à faire depuis notre dossier types. C'est une autre bonne raison pour laquelle nous aurions
dû payer nos cotisations. Ensuite, cela va
vous donner une autre erreur,
car c'est comme si toutes ces
choses étaient en train de se casser. Nous
allons juste accéder à la description et toutes
nos erreurs devraient être corrigées. Encore une fois, c'est une autre bonne raison pour laquelle le script
de type existe. Bien que cela
puisse sembler un peu ennuyeux de devoir résoudre
ces erreurs à tout moment, si nous ne les résolvions pas, nous passerions maintenant
quelques minutes à essayer pourquoi l'erreur se
produit même avec un script Java Parce qu'il n'y a aucun
moyen de savoir si notre projet échoue silencieusement Si nous avons
tout fait correctement, nous avons intégré notre déménagement à faire, nous l'avons transféré à ID Ajoutons-en une seconde à faire, juste pour être sûrs que si nous le supprimons,
c' est bien
celui que nous supprimons. Et allons-y et
essayons de supprimer pour le faire. Personne n'a parfaitement fonctionné. Nous pouvons donc maintenant ajouter des tâches, nous pouvons supprimer des tâches. La dernière chose que
nous voulons faire est probablement de nous excuser. Les deux dernières choses que
nous voulons faire sont de pouvoir suivre
l'état du contrôle. Et puis si vous remarquez quand je
rafraîchis cette page, persistez. Nous voulons donc nous
assurer que notre T
persiste, que nous l'utilisons Abordez-le d'abord. Abordons d'abord
la question de la persistance Pour lutter contre la persistance,
nous allons utiliser le middleware
fourni avec le support Donc, ce que
nous allons faire ici, c'est importer, nous allons
importer des outils de profondeur et nous allons
importer persister. Et comme vous pouvez le voir
ici, ils n'ont fait qu'intégrer leur
application, outils
approfondis dans
leur boutique et persévérer. Et cela ne fera que
permettre de persister. Je crois que cela le fait, enregistrant dans un stockage local. Il sera enregistré dans le stockage
local de votre navigateur , puis chaque
fois que vous le relancerez, vous devriez pouvoir
accéder aux mêmes valeurs. Si vous deviez le définir
dans le stockage de session, chaque fois que votre
session expirerait, vous pourrez à nouveau
accéder à ces valeurs. Allez-y,
enveloppez simplement notre application dedans. Mets-le ici, oups, prends ces deux-là Ensuite, nous voulons appeler
set power function. Je fais également une erreur ici. Je dois retirer
ce support ici. Et puis tout cela
devrait être replacé dans la sauvegarde où, je crois,
j'en ai encore quelques autres. Quelques crochets de trop, quelques crochets de
trop, deux de plus. Sauvegardez ça. Nous
recevons toujours un message d'erreur. Je dois passer les options. C'est ma batte. Comme vous le voyez ici, conservez l'état réel avec
lequel vous travaillez, puis il crée un nom pour le nommer. En effet, lorsque vous
regardez dans votre application, vos outils de développement,
lorsque vous inspectez, vous verrez un nom
présent pour votre boutique. Nous allons donc aller de l'avant
et lui donner un nom comme deuxième argument
. Et gardez-le. Mettez-le dans le bon support. En ai-je ajouté un ? Non, non, non. Je l'ai
mis entre de mauvaises parenthèses. C'est ce que c'est ici. Persist n'est pas assignable
à un type à stocker. Pourquoi est-ce que ce set est un pass défini ici ? C'est là le problème. J'ai donc juste besoin de retirer ceci, cela et cela
résoudra notre
problème de support supplémentaire que nous avons. Il s'agissait donc simplement d'une flèche
supplémentaire qui n'avait pas besoin d'être présente
dans un paramètre supplémentaire. Donc oui, maintenant nous avons
configuré Persist. Donc, si nous l'avons fait correctement, nous revenons à notre application. Rafraîchissez-le un peu. En ajoutant à cela, rafraîchissez la ration de page pour
corriger cette hydratation. Cette hydratation signifie essentiellement
que tout ce qu'elle accumule
n'est pas nécessairement ce que nous
obtenons et que nous persistons C'est différent à chaque
fois. Ce qui est assez juste. Donc, ce
que nous pouvons faire pour remédier à cette hydratation, c'est
simplement exécuter un simple effet d'utilisation pour nous assurer
que ce que nous voyons ressemble à une
page de chargement juste pour nous assurer que la bonne
chose est chargée. Donc, ce que nous allons
faire, c'est
exécuter ici dans notre page d'index et nous allons simplement
créer des fichiers chargés. L'ensemble est chargé. Un formulaire très simple de React. Et nous allons simplement
appeler use effect ici. Mais exécutez une fois, puis une fois qu'il exécuté, nous allons simplement
définir que le chargement est vrai. Donc, il s'
agit essentiellement de voir que, vous savez, la page est chargée. Il va voir avec
quelles données nous
travaillons , puis
ce sera vrai. Ce que nous voulons faire maintenant, c'est simplement montrer que le conteneur ne doit être
utilisé que lorsque le chargement est
correct. Nous ne devrions pas avoir d'erreur. Non, on dort chez elle. Pourquoi est-ce fait avant ? C'est mon pari. Je l'ai juste dit à la mauvaise personne, encore une fois. Aucune erreur d'effet d'utilisation,
aucune erreur d'hydratation. Passons donc
à la pièce suivante. Très bien, donc la
dernière étape que nous voulons faire est de régler
notre état de contrôle, n'est-ce pas ? Nous voulons nous assurer que lorsqu' elle est cochée et que nous l'actualisons, elle le reste réellement. À l'heure actuelle, ce sont toujours les
valeurs par défaut. Donc, ce que nous devons faire
pour cela, c'est
définir l'état de vérification
au sein de l'état. Lorsqu'il est coché,
il le transmet à l'état et cela persiste dans le
cadre de l'état. Donc, ce que nous allons faire maintenant,
c'est revenir à l'index. Et nous allons ajouter
une dernière action ici. L'action de bascule est cochée, saisissez l'identifiant
de la tâche avec laquelle nous travaillons Ensuite, il suivra
la même structure que celle dans
laquelle il se trouve, il fera d'autres choses. Ensuite, nous allons l'
ajouter ici afin de ne pas activer
le bouton d'erreur,
qui est essentiellement
le même que celui supprimé À faire en ce qui concerne le script
texte, chaîne égale à. Alors, voyons voir ce que nous voulons faire
ici maintenant. Nous voulons déterminer lequel des dos est
coché ou non C'est bon, allons-y,
allons-y et prenons notre état point par point pour
passer en revue chacune des choses à faire. accord ? Et si c'est le cas, voulions-nous faire
l'une des deux choses suivantes S'il est égal à
ID, je veux revenir, je veux retourner
ce qu'il faut faire. Nous voulons donc renvoyer
l'identifiant et nous voulons renvoyer la description. Mais nous voulons le configurer pour qu'il fasse
ce qu'il ne devait pas faire. Il faut juste que ce soit le
contraire de ce que c'était. Cela a donc été vérifié, il
ne faut pas le vérifier. Si elle n'a pas été cochée,
elle doit être cochée. Si ce n'est pas le cas, nous voulons simplement y retourner. J'ai commis une erreur. Nous voulons simplement activer la case à cocher
parce que nous savons déjà qu'il faut
cocher deux arguments. Nous en avons un pour le mettre
au mauvais endroit, c'est probablement pourquoi
je reçois une erreur. Oh, non. Oui, et travailler. Si je
dis oui, ça devrait marcher. C'est bon, cool.
Nous avons donc pris notre, nous avons parcouru et
nous avons cartographié notre Do pour trouver la
personne à faire Et nous sommes en train de vérifier
chacune de ces tâches, donc nous voulons voir si
l'identifiant de cette opération est à faire. Propriété Id ID du To do. Correspond à l'identifiant que
nous transmettons. Lorsque nous l'avons vérifié, en doublant le chèque, s'il correspond Donc oui, nous voulons transmettre le
reste du paramètre à faire, mais pour le paramètre de
vérification, nous voulons transmettre le
contraire de ce qu'il était. Donc, quel que soit le paramètre de
vérification, nous voulons réussir, vous
savez, si c'est vrai nous voulons réussir les
chutes, etc. Si cela ne correspond pas aux
deux autres Dos, nous voulons simplement vous le renvoyer
et passer à autre chose. Et donc, dans ce cas, nous allons simplement
aller de l'avant et essayer ceci. Je vais donc
retourner à objet, puis je vais
passer à Target, le bouton étant
coché Je vais utiliser le
magasin encore une fois. Activez
cette case à cocher, enregistrez-la dans la case à cocher. Au clic, je veux juste passer
en ligne pour basculer, cocher, cocher,
puis je vais transmettre Todd et
l'enregistrer Cela devrait fonctionner. Donc, si je consulte cette page et que je l'
actualise, il me reste
encore une chose à faire. En fait, je dois accéder à la propriété cochée
sur la case à cocher car pour le moment, la case ne sait pas si
elle est censée être cochée ou non Hein ? Nous sommes en quelque sorte en train de supposer qu'il le saurait.
Il n'a aucun moyen de le savoir. Donc, ce que nous allons
faire ici, c'est accéder à la propriété cochée. La propriété vérifiée sera en
fait ce qu'
il faut faire , vérifiée l'est, donc c'est de savoir si elle
doit être vérifiée ou non. Donc, si je l'actualise, si je le
vérifie puis j' actualise son état de vérification. Génial. Je vais apporter une dernière petite modification styles
tout à l'heure nous avons accès à cet
accessoire dans Si c'est coché, je
veux créer plusieurs styles
différents. Je veux donc changer la couleur pour qu'elle soit un peu
plus graduée. Donc c'est un peu comme si,
oh, nous l'avions fait,
c' est comme si nous n'avions plus besoin d'
être aussi visible. Je souhaite donc changer la
couleur du To do. Si cette case est cochée,
changez de couleur. Peut-être quelque chose d'un
peu
plus sombre que ceci, peut-être cela. Ensuite, nous l'adopterons. Nous voulons que la couleur
soit celle qu'elle est censée être, alors nous allons simplement passer une voiture. Oui, tu veux dire
vérifié sans contrôle ? Cool. La prochaine chose que je veux faire est d'ajouter un strike through. La ligne
de
décoration du texte est
prête à figurer sur notre liste . Je vais faire le même contrôle. Je vais dire que c'est la
propriété que je cible, si l'option Faire est cochée. Désolé, je veux en
faire une ligne. Si je veux juste ne pas vérifier la décoration
du texte, il traverse une ligne. Génial. Donc oui, nous avons à peu près
toute notre application à faire qui fonctionne. Comme je l'ai déjà mentionné,
vous pouvez réellement voir où se trouve le magasin
de ce produit. Si vous vérifiez que l'application a
besoin d'un stockage local ici, vous pouvez voir que nous l'
avons réellement ou que nous devons le stocker ici. Nous avons donc notre État. Permettez-moi d'
en parler un peu. Nous avons donc notre État
à faire. Ils ont leur identifiant unique, enfin, juste le 12,
mais il a un identifiant unique. Il possède la propriété vérifiée true et la
description de to do. Si nous le décochons,
vous constatez qu'il change et que le to do n'a plus
cette vraie propriété Il a maintenant une fausse propriété, a la description à faire
et il a le même identifiant. Donc oui, notre application To Do
fonctionne pleinement. Il ne reste plus qu'à
l'héberger. Mais nous pouvons aborder cela
dans une autre leçon sur la façon de l'héberger
à l'aide de Verselle Next S et Verselle sont
en fait connectés. Je pense que Versell a créé Next S, donc hébergé avec Sell Mais nous aborderons cela
dans une autre leçon. Donc oui, j'espère que cela vous
sera utile. Si vous avez
des questions, veuillez laisser un commentaire dans la section des
commentaires ci-dessous. Si vous aimez cette leçon, veuillez également laisser un
commentaire. Cela aide vraiment, d'en faire part à d'autres personnes qui souhaitent suivre le cours
11. Conclusion: Conclusion, nous avons parlé de
beaucoup de choses dans cette vidéo des origines de React
à la création de votre propre application entièrement fonctionnelle à
l'aide de Next JS. l'avenir, vous
devriez être capable de vous
attaquer à tous les projets React
qui se présentent à vous. Même des éléments avec un script
de saisie pour rechercher quelque chose en cas de doute et accéder à
Stack Overflow si nécessaire J'adorerais savoir comment vous avez décidé
de mettre en œuvre votre application Do. Veuillez donc mettre un lien vers votre
code ou le site hébergé dans l'onglet Projets et
ressources afin que je puisse voir tout le
travail que vous avez accompli. Je lis chaque commentaire, chaque critique et je regarde
chaque proposition de projet. Donc, si vous avez des questions, hésitez pas à
laisser un commentaire dans la section d'évaluation ci-dessous ou
à me contacter directement. J'adore voir ce que
vous avez à dire. Consultez la page pour plus d'
informations à ce sujet, en savoir plus sur le codage. Consultez les autres vidéos
que j'ai sur ma page de profil. J'ai également des vidéos sur HTML et CSS disponibles sur ma
chaîne Youtube et mon site Web. Je les lierai ci-dessous et sur mon profil si vous souhaitez également les apprendre, et je verrai dans le prochain.
Zoë Davidson, Software Engineer & Cinematographer
