React lernen: Baue eine Web-App mit Next.js, der Benutzeroberfläche von Material und TypeScript

1. Intro: Haben Sie jemals von einer der beliebtesten Frontend-Bibliotheken der Welt gehört, React? Heute werden wir alles durchgehen, was Sie wissen müssen, um Ihr eigenes Projekt mit React zu erstellen. Einschließlich, wie man diese To-Do-App erstellt. Hi, ich heiße Zoe. Ich bin Softwareingenieur und ehemaliger Professor, der es liebt, anderen beizubringen, wie man mit dem Programmieren anfängt Ich habe Unmengen von Websites und Web-Apps mit React CSS, HTML und anderen Technologien erstellt und Web-Apps mit React CSS, HTML und anderen Technologien Am Ende dieses Kurses werden Sie in der Lage sein, dies selbst zu tun . Lass uns anfangen. 2. Kursprojekt: Klassenprojekt. Das Projekt für diesen Kurs besteht darin, eine voll funktionsfähige Aufgaben-App zu erstellen. Dazu benötigen Sie Zugriff auf einen Computer und einen Code-Editor wie Visual Studio Code. Sie sollten auch ein gewisses Verständnis von Java Script oder Type Script sowie HTML und CSS haben. Um unsere App zu starten, werden wir ein Framework namens Next S verwenden , das React verwendet. Wir werden auch Material für einige grundlegende Designs und Komponenten verwenden . der Registerkarte „ Projekte und Ressourcen“ finden Sie Links zu allen Ressourcen und Ressourcen, die Sie benötigen. 3. Warum reagieren?: Warum reagieren? Wenn Sie mit React bereits vertraut sind, können Sie direkt zu den Tutorials übergehen. In den nächsten Lektionen werden wir uns jedoch damit befassen, werden wir uns jedoch damit befassen welches Problem React entwickelt wurde, wie es verwendet wird und wie es ausgeführt wird. React wurde bei Facebook entwickelt und 2013 der Öffentlichkeit zugänglich gemacht. Es wurde ursprünglich entwickelt , um ineffiziente Seitenneuladungen und -aktualisierungen zu bewältigen , bei denen zu diesem Zeitpunkt der gesamte Dom oder das Dokumentobjektmodell neu gezeichnet werden musste oder das Dokumentobjektmodell neu gezeichnet werden musste Mit jedem Update behebt React dieses Problem, indem sie das sogenannte virtuelle Dom erstellen, eine Repräsentation des Doms im Speicher Dadurch konnte React nur die Aspekte oder Komponenten des Doms aktualisieren , die sich geändert haben, und nicht die gesamte Seite, was zu einer besseren Leistung führte. React hat die Webentwicklung grundlegend verändert und ist immer noch eine der beliebtesten Bibliotheken auf dem Markt Durch die Verwendung von Komponenten können Entwickler jetzt modularen Code viel einfacher schreiben, wodurch sie effizienter und effektiver entwickeln effizienter und effektiver Andere beliebte Frameworks , die oft mit React verglichen werden , sind View und Angular. 4. Komponenten: Komponenten. Komponenten sind wiederverwendbare Codeteile , die React nutzt, um ihre Modularität aufrechtzuerhalten Stellen Sie sich sie als die Bausteine , die Entwickler verwenden, um Apps zu erstellen Eine Komponente ist ein eigenständiger, wiederverwendbarer Code, der seine eigene Funktionalität, seinen eigenen Status und seine eigene Struktur kapselt seine eigene Funktionalität, seinen eigenen Status und seine eigene Struktur kapselt Diese Komponenten können als eine Kombination aus HTML und Javascript oder JSX betrachtet werden, die in React verwendet wird Jede Komponente kann ihren eigenen Status haben, der Daten darstellt, die sich im Laufe der Zeit ändern können, und eine Reihe von Eigenschaften oder Requisiten, die es übergeordneten Komponenten ermöglichen, Daten an ihre untergeordneten Komponenten weiterzugeben Genau wie bei HTML reagieren Elemente innerhalb anderer Elemente, Komponenten innerhalb anderer Komponenten Diese internen Komponenten werden als untergeordnete Elemente der äußeren Komponenten betrachtet. 5. Requisiten und Staat: Requisiten und Staat. Um React wirklich zu verstehen und in vollem Umfang nutzen zu können, müssen wir über Status und Eigenschaften sprechen Oder wie sie genannt werden, Requisiten. Schauen wir uns eine Beckenkomponente an. Diese Komponenten haben eigentlich nur ihre Basisfunktionen. Sie können Argumente annehmen, sie können Variablen ändern und sie können einen Wert zurückgeben. Aber einfach ausgedrückt können wir uns Requisiten als Argumente vorstellen , die durch unsere Funktion übergeben werden , wenn sie aufgerufen wird, und state als lokale Variablen, die nur innerhalb unserer gegebenen Komponente existieren Wir werden diese Definition später näher erläutern, aber es ist wichtig, zuerst zu verstehen, wie sie funktioniert 6. React-App erstellen: Erstellen Sie eine React-App. Es gibt verschiedene Möglichkeiten, eine React-App einzurichten. In diesem Kurs gehen wir auf zwei der beliebtesten ein. Die ursprüngliche Methode, eine React-App einzurichten, bestand CRA zu verwenden oder eine React-App zu erstellen. Create React App wurde auch bei Facebook entwickelt, um einen Großteil dieser Komplexität zu beseitigen und daraus einen einfachen, aber leistungsstarken Befehl zu machen. Create React App verwenden, ersparen Sie sich stundenlange Kopfschmerzen, wenn Sie zum ersten Mal versuchen , eine neue React-App einzurichten. Erstellen Sie zum Ausführen eine React-App. Geben Sie einfach px ein, erstellen Sie eine React-App, gefolgt vom Namen Ihrer App in das Terminal und drücken Sie die Eingabetaste. Nach ein paar Minuten sind Sie startklar. Sie können den Befehl selbst in Ihrem Terminal ausführen, wenn Sie sehen möchten, wie die Create React-App aussieht. Ich möchte Sie jedoch davor warnen, es zum Erstellen Ihres Projekts zu verwenden , da es nicht mehr verwaltet wird. Schlagen Sie stattdessen vor, Frameworks oder Tools wie Next S oder Vet zu verwenden. Wir werden Next S verwenden , um unsere Aufgabenstellung zu erstellen. 7. TypeScript: Typoskript. Anstatt Javascript für unsere To-Do-App zu verwenden, werden wir Typoskript verwenden Typescript ist eigentlich nur ein Superset von Javascript. Das bedeutet, dass es auf Javascript basiert und letztendlich zu Javascript kompiliert Es hat jedoch einige zusätzliche Funktionen, die uns Javascript nicht sofort bietet. Typescript ermöglicht es uns, statische statt dynamische Typisierung zu verwenden , statische statt dynamische Typisierung Ermitteln Sie beim Schreiben unseres Codes viel mehr Fehler als zur Laufzeit Es entwickelt automatisch ein gewisses Maß an Dokumentation für Ihr Projekt Es unterscheidet sich ein bisschen von Javascript, aber wir werden es in unserem Tutorial Schritt für Schritt gemeinsam durchgehen . Wenn Sie Javascript schreiben können, bin ich mir sicher, dass Sie Typescript schreiben können 8. Next.js: Next S In den Jahren, die seit der Einführung der Create React-App vergangen sind, wurden viele Frameworks darauf aufgebaut und entwickelt. Ein sehr beliebtes Framework ist heute Next JS. Next GS bietet viele sofort einsatzbereite Optimierungen wie Servicide-Rendering-Routing und verbesserte Und als solches ist es ein Favorit von Frontend-Entwicklern. Wir werden es in unseren Projekten verwenden, also lassen Sie uns eintauchen und loslegen. 9. Die App stylen: In Ordnung, also lass uns anfangen. Also das Erste, was wir tun wollen, ist das Paket zu installieren , das wir verwenden. Wir werden hier tatsächlich diese Vorlage verwenden, die es uns ermöglicht, eine App zu erstellen , bei der Next S Material, UI und Typoskript alle gleichzeitig zusammengestellt sind. Wenn Sie das manuell nacheinander installieren würden, mit dem nächsten JS beginnen und es dann installieren, Material I und das Skript eingeben würden, würde die Konfiguration etwas länger dauern. Also verwenden wir diese Vorlage nur als Abkürzung, um uns etwas Zeit beim Tutor zu sparen Also, was ich hier tun werde, um das zu nutzen, und ich werde den Link zu diesem speziellen Github-Repository unten im Tab Projekte und Ressourcen unten belassen Github-Repository unten im Tab Projekte und Ressourcen unten Also gehe ich hier einfach auf die rechte Seite , wo sich der grüne Button befindet. Ich werde einfach die URL für das Projekt kopieren. Und dann gehe ich in den Entwicklungsordner und klone ihn in einen Ordner, für den ich dann aufrufen werde. Also machen wir das und dann großartig. Also ist es erstellt, lassen Sie mich jetzt zu meinem Aufgabenordner springen. Dokumente, entwickeln und erledigen. Und dann werden wir das im VS-Code öffnen. Ordnung, großartig. Jetzt ist alles im VS-Code, wir sollten startklar sein. Jetzt werden wir NPM verwenden , um die Pakete zu installieren, mit denen wir arbeiten Denn obwohl wir unser Paket auf Json haben, über das wir bereits gesprochen haben, enthält es all diese Pakete, die noch installiert werden müssen, damit wir es verwenden können Lassen Sie uns also weitermachen und damit beginnen. Also werde ich damit beginnen, ein neues Terminal zu öffnen. Und Sie werden sehen, dass es bereits als Git-Repository initialisiert Das ist eine Funktion bei der Verwendung von next S. Es ermöglicht uns , all die Dinge, die wir sonst erledigen müssten, eins nach dem anderen für uns zu erledigen Wir machen weiter und geben NPM I für die Installation ein und lassen das installieren Und wie Sie hier oben links sehen werden, ist gerade ein Ordner namens Node Modules aufgetaucht gerade ein Ordner namens Node Modules aufgetaucht Und das ist im Grunde das Ergebnis der Installation all dieser Pakete Es sind alle Informationen, die das Projekt benötigt , um zu funktionieren. Sie werden also sehen, dass wir dort Knotenmodule installiert haben, ein paar Fehler , aber darüber werden wir uns keine Gedanken machen. Und dann werden wir weitermachen und NPM Start ausführen , um unser Projekt zu starten Wir bekommen dort einen kleinen Fehler. Oh, weißt du was, wir müssen NPM ausführen, Dev ausführen. Das ist was es ist. In Ordnung, tut mir leid, fangen Sie an, sich zu bemühen. Zwei verschiedene Befehle Also gehen wir hier nach rechts und wenn wir alles richtig gemacht haben, der lokale Host 3.000, wie in unserem Terminal angegeben, sollten wir in der Lage sein, ja, loszulegen. Also haben wir unser nächstes S in Betrieb. Wir verwenden Material Y und wir verwenden Typoskript. Also werden wir im Grunde einfach anfangen, unsere To-Do-App zu entwickeln und zu erstellen, damit wir uns auf die wichtigen Dinge konzentrieren können. Ordnung, also die To-Do-App , die wir entwickeln werden, wenn Sie nur eine googeln, wissen Sie, Sie wollen im Grunde etwas erstellen, Sie wissen schon, mit jeder beliebigen Aufgaben-App. Sie möchten etwas erstellen, das so etwas wie eine Liste von Aufgaben hat . Weißt du, eine Möglichkeit, abzuhaken, was du gerade machst, und eine Möglichkeit, das zu löschen, was du gerade tust. Eine, die ich in der Vergangenheit erstellt habe und nach der wir sie tatsächlich modellieren werden , ist diese To-Do-App hier. Das ist es also, wonach wir streben. Wir wollen eine App machen, die wir, wenn wir sie zu Do hinzufügen, zur Liste hinzufügen können. Weißt du, wenn wir einfach auf Abschicken und Enter drücken, können wir es abhaken und, du weißt schon, vielleicht ein bisschen Styling damit verknüpfen Wir können es löschen , wenn wir möchten. Und wenn wir es dann zu tun hinzufügen und die Seite aktualisieren, wollen wir, dass es richtig bleibt. Wir wollen nicht, dass sie verschwindet , weil wir diese To-Do-App so lange wie unsere persönliche To-Do-App verwenden wollen. Es gibt also ein paar Dinge, die wir tun müssen, damit es so funktioniert. Aber wir werden diese To-Do-App als Referenz verwenden , falls wir in Zukunft Hilfe benötigen. Im Moment haben wir aber diese App. Diese nächsten S-Starter-Kits. Lassen Sie uns weitermachen und alles loswerden, was wir nicht brauchen, um in unser VS-Code-Projekt zu springen in unser VS-Code-Projekt zu springen Hier werde ich zu Seiten gehen. Die Art und Weise, wie Next S funktioniert , ist, dass es Ihre App tatsächlich in Form von Seiten strukturiert . Da wir uns auf der Startseite der App befinden, werden wir diese Indexdatei nur so ändern , wie wir es bereits besprochen haben. Wir haben JSX, also Javascript gemischt mit Javascript-XML. Das ist S, was nur die Typoskript-Version derselben Sache ist nur die Typoskript-Version , die ich bereits erwähnt habe Wenn Sie mit Typescript nicht vertraut sind, ist es Javascript sehr, sehr ähnlich Sie sind im Grunde dasselbe. Typescript ist nur Javascript mit Typen, und darauf werden wir bei der Arbeit an unserem Projekt eingehen Als Erstes wollen wir also all das in der Mitte ausräumen Also werden wir einfach alles von Maine bis zur Fußzeile löschen und das loswerden Wir wollen nur ein unbeschriebenes Blatt und wir werden den Titel hier ändern, um großartig abzuschneiden Wie Sie auf der rechten Seite sehen werden, ist bei uns nichts los, sodass wir wissen, dass wir unsere Arbeit richtig gemacht haben . Wir haben es ausgeräumt. Ich werde hier auch die Stile loswerden, nur damit wir wirklich, wirklich von einer leeren Tafel anfangen können . Ordnung, schauen wir uns unsere App noch einmal an. Was wollen wir tun? Nun, ich denke, wir werden, wir werden hier mehrere verschiedene Komponenten erstellen müssen . Wir werden also eine größere Komponente benötigen , die den Hintergrund hostet. Vielleicht können Sie einfach den Hintergrund zum Hauptteil hinzufügen, aber dann haben wir hier diesen Container , der den eigentlichen Inhalt wirklich selbst enthält. Aber wir scheinen hier einen Header zu haben, dem wir einen Namen geben könnten. Art to Do-Liste oder was auch immer, aber das ist vorerst nur angesagt. Und dann haben wir diesen Input, der verlinkt ist zum Einreichen und zum eigentlichen Selbermachen. Es gibt also ein paar Komponenten, die wir erstellen wollen. Denken Sie darüber nach, hier etwas zu erstellen. Lassen Sie zunächst den Hintergrund gestalten. Ich denke, was wir hier gemacht haben, ist ein linearer Farbverlauf. Ich denke, das werde ich wahrscheinlich auch für unsere Projekte tun . mir das zu schnappen, werde ich die Semantik für linearen Gradienten nachschlagen Und ja, das ist es, was ich tun möchte. Ich möchte es als Hintergrundfarbe oder es im Grunde einfach zum Hintergrund machen. Also gehe ich zurück zur App und dann lass es uns hier auf unserem Div ausprobieren und sehen, ob es funktioniert. Wenn es die ganze Seite abdeckt, wird es einen linearen Farbverlauf haben und wir müssen nur dieses Zitat umschreiben. Das ist Inline-CSS, falls Sie es noch nicht benutzt haben. Im Grunde ermöglicht uns dies, unser CSS innerhalb des eigentlichen Elements selbst zu schreiben . Wir müssen also nur sicherstellen, dass das alles funktioniert. Ja. Oh, weißt du, tut mir leid, ich habe das Zitat auf die falsche Seite gesetzt. Da hast du's. Cool. Schauen wir uns also an , was uns das gegeben hat. Mama, hm. Oh, und lassen Sie uns etwas Textur hinzufügen, damit wir sehen können, dass wir an der richtigen Datei arbeiten. In Ordnung. Um es großartig zu machen. Das gibt uns also einen linearen Farbverlauf, es deckt einfach nicht die ganze Seite ab. Also noch einen Schritt, den ich zu dieser Seite hinzufügen werde. Im Grunde möchte ich, dass die Seite die gesamte sichtbare Seite einnimmt. Es gibt also eine Eigenschaft namens Ansichtshöhe, mit der Sie tatsächlich 100% der Ansicht einnehmen können , die Höhe der Ansicht , die Sie verwenden. Also setzen wir die Höhe auf 100 VH, was für Ansichtshöhe steht Und das werden wir speichern . Und da haben wir es. Wir haben unsere Seite, die den Hintergrund einnimmt, oder zumindest für unsere Homepage, die gesamte Seite einnimmt. Das ist großartig. Eine weitere Funktion, die ich diesem linearen Farbverlauf hier hinzufügen werde , ist eine Wendung. Also werde ich eine Umdrehung von 0,125 hinzufügen. Und das wird nur die Linie drehen, an der sich der Gradient gerade befindet Es ist irgendwie auf der ganzen Seite. Es wird nur verrutschen, also werden wir uns das sparen. Toll. Und das ist nur ein kleines Extra Cool. Im Moment sind wir damit fertig, das zu stylen. Lassen Sie uns mit der Erstellung unserer Komponenten fortfahren. Also möchte ich hier einen neuen Ordner erstellen, und ich werde ihn Komponenten nennen. Wie ich in meinen vorherigen Lektionen erwähnt habe, erstelle ich beim Erstellen eines React-Projekts gerne einen Komponentenordner, damit ich alle meine Komponenten kategorisieren und zusammenstellen kann in den vorhandenen Ordnern Ich finde, dass es die Dinge für mich viel einfacher macht. Es hängt nur davon ab, mit welcher App Sie arbeiten und wie Sie Ihr Projekt strukturieren möchten. Also werde ich innerhalb des Komponentenordners eine neue Datei erstellen und diese Datei als Container aufrufen , weil das der große weiße Container sein wird, wir in dem anderen, im Beispiel, gesehen haben. Also drücke ich die Eingabetaste und verwende dann, ich glaube, ich bin es, es ist eine automatische Vervollständigung, ich werde R AFC verwenden und es wird automatisch eine funktionale Komponente erstellen Also los geht's, wir haben eine funktionale Komponente namens To-Do-Container Was ich jetzt tun werde, zurück zu dieser Hauptseite springen , ich werde einfach unseren kleinen Text hier ersetzen, ich werde einfach unseren kleinen Text hier ersetzen der „Do“ sagt, und ihn durch unsere Do-Container-Komponente ersetzen, die, wie Sie sehen aufgrund einiger der Erweiterungen, die wir installiert haben, automatisch importiert einiger der Erweiterungen, die wir installiert haben Und ich werde nur sagen, wenn Sie weitere Fragen zu Erweiterungen haben, hinterlassen Sie einfach unten einen Kommentar und ich kann Ihnen ein paar empfehlen, wenn Sie Hilfe bei solchen Dingen benötigen Wenn Sie also rüberspringen, werden Sie hier rechts sehen, dass der To-Do-Container jetzt tatsächlich in der App vorhanden ist Also, weißt du, wir arbeiten ziemlich gut. Also das nächste, was wir tun wollen, ist , zu stylen, wir wollen, dass unser To-do-Container in der Mitte der Seite steht, oder? Wir wollen, dass er da ist. Um das zu tun, wäre es meiner Meinung nach am einfachsten , unsere Seite als Flexbox einzurichten unsere Seite als , denn das wird das Einzige auf unserer Seite sein. Wir können es gewissermaßen als Flexbox zulassen ohne uns Sorgen machen zu müssen, dass sich das auf etwas anderes auswirkt. Also, was ich auf unserer Seite hier machen werde , ist das Display einzustellen, Flix zu machen und dann werde ich begründen, dass der Inhalt im Mittelpunkt steht, und das speichern. Wie Sie sehen werden, hat sich der Container bereits von selbst in die Mitte verschoben, sodass er bereits auf der Seite zentriert ist Das nächste, was ich jetzt tun möchte, ist den Container selbst zu gestalten Und ich werde dem etwas Inline-Styling hinzufügen , um es irgendwie dahin zu bringen, wo wir es haben wollen . Ich verwende einen Inline-Stil. Beim Tauchen hier gehe ich zu Stil und lege dann einen oberen Rand von, sagen wir, fünf M fest, nur um ihn ein wenig vom oberen Rand der Seite abzuheben . Als Nächstes möchte ich jetzt eine Hintergrundfarbe festlegen. Hintergrundfarbe. Wir stellen es einfach auf Weiß, was FF ist, und speichern das, großartig. Wir haben also unseren To-do-Container, aber wie Sie sehen können , reicht er bis zum Ende der Seite. Das wollen wir nicht unbedingt. Ich werde also tatsächlich eine maximale Höhe festlegen und dann wird eine maximale Höhe es einfach schön und zurückhaltend bleiben. Wir können das vergrößern, wenn wir wollen. Wir können es reaktionsschneller machen oder wir können es scrollbar machen All diese Dinge sind nett, aber darüber werden wir uns im Laufe der Zeit Gedanken machen Im Moment wollen wir nur diese Art von MVP bekommen, das Produkt mit der geringsten Rentabilität , mit dem wir hier arbeiten Ordnung, ein paar weitere Dinge die ich mir hier ansehe, sind, dass wir nicht wollen, dass wir wirklich bis zum Rand des Containers gequetscht werden wirklich bis zum Rand des Containers gequetscht Also wollen wir wahrscheinlich etwas Polsterung hinzufügen. Also gehe ich hierher und füge etwas Polsterung hinzu. Fügen wir einfach rundum zwei RAM Polsterung hinzu. Großartig. Sieht ziemlich gut aus. Als letztes fügen wir noch einen Randradius hinzu, um diese Ecken einfach zu krümmen. Sie geben also den Grenzradius und dann setze ich ihn auf und speichere ihn. Toll. Ich bin ziemlich zufrieden damit, wie es jetzt aussieht. Ich denke, wir können ein bisschen mehr tun , wenn wir anfangen, die inneren Komponenten hier als Header hinzuzufügen . Und wir werden auch die Eingabe, die Schaltfläche und die eigentliche Aufgabe hinzufügen . Also lasst uns weitermachen und das machen. wir zurück zu unserem Do-Container oder sagen wir es tatsächlich, lassen Sie uns weitermachen und den Header hinzufügen Also werden wir eine H-Zone erstellen. Und zwar, weil wir Material I verwenden , eine spezielle Stil - und Komponentenbibliothek , die uns zur Verfügung steht. Da wir React verwenden, können wir tatsächlich einige ihrer eingebauten Komponenten verwenden , die es uns ermöglichen, Dinge etwas schneller zu stylen. Dadurch können wir unser Apple etwas schneller zum Laufen bringen . Und bring uns auch eine neue Bibliothek und gib uns ein neues Tool , mit dem wir uns vertraut machen können. Also werde ich eine Komponente verwenden, die sie Typografie und Import genannt haben Typografie und Import genannt Aus früheren Erfahrungen weiß ich nun, dass die Topographiekomponente ein Element oder eine Eigenschaft namens Variante hat ein Element oder eine Eigenschaft namens Also werde ich die Varianteneigenschaft verwenden und auf die Variante von H one zugreifen wollen, weil dies unser Titel auf unserer Seite sein wird Und dann werde ich innerhalb dieser beiden Klammern Todos eingeben Das wird vorerst unser Titel sein. Und da haben wir es, wir haben es da. Es ist ein bisschen anders als das, was wir zuvor hatten. Vielleicht möchte ich es nur für dieses Tutorial etwas anders gestalten. Aber wenn Sie materially y verwenden möchten, um ein größeres Projekt zu gestalten, können Sie tatsächlich in den Styles-Ordner springen mit next JS geliefert wird, und dann das Thema ändern und etwas detaillierter mit der Typografie arbeiten und wissen, welche Größe oder H, eins ist, wie die Dicke ist, die Schriftstärke und solche Dinge Sie können die Komponenten wirklich runterschreiben und stylen, obwohl es sich um eine Komponentenbibliothek handelt Aber im Moment greife ich nur auf die tatsächlichen Stile des Elements selbst zu, um es so zu modifizieren, wie ich es haben möchte. Was Material I angeht, so jede Y-Komponente des Materials hat jede Y-Komponente des Materials eine spezielle Eigenschaft namens X. Und X ist im Grunde genau wie Stil, wie Inline-Styling, aber es ist nur spezifisch für Material Y. Also werden wir die SX-Prop verwenden, und ich werde die Schriftgröße tatsächlich auf, sagen wir, drei Ram, vielleicht vier einstellen . Dann legen wir die Schriftstärke fest. Ich glaube etwa 500. In Ordnung, cool. Für mich sieht es ziemlich gut aus. Lass uns weitermachen. Das nächste, was wir jetzt tun wollen, ist, wir, wenn wir auf unsere To-Do-App zurückblicken, diese Eingabe, die Schaltfläche „Abschicken“, und die eigentlichen Aufgaben von selbst berücksichtigen möchten . Also fange ich mit der Erstellung der Todos an und arbeite mich dann zurück, gehe zurück zu unserer App und setze das auf drei Rams, damit es dem Design des Beispiels ein bisschen besser entspricht Wir werden eine weitere Komponente erstellen, einen Call-To-Do-Artikel Call-To-Do-Artikel Wir werden dasselbe verwenden, R AFC, und es wird unsere Komponente dorthin exportieren Und dann werden wir, anstatt es einfach sofort zu importieren, tatsächlich einige Scheindaten erstellen Also werde ich ständig simulieren, dann werde ich einfach ein Array von Zeichenketten erstellen , das wird unser Modell sein. Um das zu tun, eins zu tun, zwei zu machen und drei zu machen. Und das werden wir speichern. Und was ich unter der Typografie machen werde, jetzt werde ich Daten simulieren und unsere Aufgabenstellung importieren. Also werde ich mit diesen perlmuttfarbenen Klammern unser Modell nehmen und sie abbilden. Wenn Sie sich also richtig erinnern , ist diese Map eine Funktion die wir für Arrays verwenden können, um es uns zu ermöglichen, über die Objekte oder die Elemente in einem Array zu iterieren und sie dann zu verteilen und an jedem von ihnen unsere wiederholbare Aktion auszuführen Wir werden also die einzelnen Aufgaben und das, was wir tun wollen, abbilden, weil Karten eine Rückgabe haben müssen, wir kehren zurück zu einem Punkt, das werden wir sagen Jetzt gibt es mir hier Luft. Es heißt, dass mir der Schlüssel Prop fehlt , weil man bei Karten einen Schlüssel braucht , damit jeder Gegenstand unabhängig identifizierbar ist Was wir also tun werden, ist, den Schlüssel auf „To do“ zu setzen, weil wir wissen, dass unsere Aufgaben einzigartig sind Das wird funktionieren. Aber Sie würden es auf eine eindeutige ID setzen wollen, was wir später tun werden. Das nächste, was wir hier tun wollen, ist, dass wir, auch wie Sie hier auf der rechten Seite sehen, die zu erledigenden Aufgaben so oft ausgefüllt wurden. Die Mac-To-Dos sind also vorhanden. Es gibt also drei zu tun. Es gibt drei bis zwei Artikel. Sie wurden jedoch nicht wirklich mit den Daten gefüllt. Und das liegt daran, dass wir die Daten nicht an die eigentliche To-Do-It-Komponente übergeben haben. Machen wir also weiter und machen das. Kehren wir zum Do-Element zurück, was wir hier tun werden, und hier beginnen sich Javascript und Types-Skripte ein wenig zu unterscheiden. Wenn Sie mit dem reagierenden Javascript vertraut sind, wissen Sie, dass Sie einfach eine Requisite erstellen und diese dann an Ihre eigentliche Komponente übergeben Aber was Sie im Jobskript nicht sehen würden , ist dieser Fehler, den ich bekomme Es heißt also, dass das bindende Element, das implizit ausgeführt werden soll, einen beliebigen Typ hat. Und das liegt daran, dass wir den Typ nicht angegeben haben , um dies zu tun Genau wie in Javascript hat alles einen Typ, oder? Alles in Typoskript hat einen Typ. Aber in Typoskripten wollen sie, dass Sie diesen Typ explizit definieren oder deklarieren, damit keine Verwirrung darüber entsteht, was übergeben wird, wo es übergeben wird usw. Eine Möglichkeit, dies in Typoskript zu tun, besteht darin eine sogenannte Schnittstellenschnittstelle zu erstellen Und du kannst es nennen, wie du willst, aber wir werden es Requisiten nennen Und innerhalb dieser Schnittstelle werden wir jetzt unsere Typen definieren Wir haben momentan nur einen, aber wir können nach Bedarf weitere hinzufügen. Also werden wir erstellen, wir werden to do als Zeichenfolge definieren. werden wir sagen. Und dann außerhalb dieser geschweiften Klammer setzen wir außerhalb dieser geschweiften Klammer einen Doppelpunkt Und wir geben das Wort Requisiten ein, um anzuzeigen, dass diese Requisiten auf diese Parameter angewendet werden sollen Zu tun ist der Typ Zeichenfolge. Wenn wir hier noch etwas hinzufügen, müssen wir nicht mehr und mehr Requisiten in Zeile sieben hinzufügen Requisiten in Zeile sieben Wir könnten sie einfach in den Zeilen 56.7 usw. hinzufügen. Gehen wir also zurück zum Aufgabenpunkt und wollen nun den eigentlichen Aufgabenbereich übergeben Richtig? Weil du weißt, dass es es jetzt erwartet. Im Grunde weiß es, dass es eine Aufgabe ist, etwas zu erledigen. Wir müssen also diese bestimmte Eigenschaft tatsächlich verwenden, was eines der großartigen Dinge an Typoskript ist Solche Fehler werden Sie nicht machen. Wenn das zum Beispiel Javascript wäre und wir es nie getan hätten, wundern wir uns vielleicht, warum unsere Aufgabe nie aufgefüllt wird, aber weil es ein Typskript ist, wird es uns diesen Fehler geben während wir unseren Code schreiben. Und so werden wir nicht zulassen, dass solche stille Fehler fehlschlagen, während unsere App läuft. Alles, was wir hier tun müssen, ist die Eigenschaft to do zu schreiben und dann die Aufgabe zu übergeben und zu speichern. Und da hast du's. Wir müssen eins machen, zwei machen und drei machen und so, wie wir es in unseren Mock geschrieben haben , damit wir wissen, dass wir die richtigen Daten weitergeben. Fantastisch. Das nächste, was wir tun wollen, ist, dass wir anfangen wollen , das zu stylen, richtig. Weil wir hier ein paar Dinge erledigen wollen. Wir wollen eine kleine Checkbox haben, wir wollen eine kleine Löschtaste haben. Wir wollen diesen grauen Hintergrund haben. Weißt du, ein paar Dinge, die wir erreichen wollen. Wenn wir also rübergehen, um einen Gegenstand zu erledigen, können wir damit beginnen, das auszuloten. In diesem Zusammenhang möchte ich wohl als Erstes diesen Hintergrund festlegen. Also lass mich hier eine Farbe nehmen. Lassen Sie uns ein RG machen, eine Farbe, gehen wir zum Farbbild hier und wählen wir eine Art Hellgrau für unseren Hintergrund Ich mache das und dann stellen wir es einfach als Hintergrund für unseren Tauchgang ein und verwenden dabei die Hintergrundfarbe dieses Stils werden wir es einstellen. Wir werden die Hilfe hier speichern. Toll, wir haben unsere Hintergrundfarbe. Als Nächstes möchten wir wahrscheinlich etwas Abstand unter ihnen hinzufügen und dann den Randradius wieder hinzufügen. Also füge ich das hinzu, indem ich einen Rand am unteren Rand von, sagen wir, einem Ram mache . Auf diese Weise werden alle neuen Aufgaben hinzugefügt, wir haben diesen Abstand. Und dann fügen wir auch , ähm, den Grenzradius von hinzu, machen wir 0,25 Ram Und sagen wir, das Letzte, was wir hier jetzt tun wollen, ist etwas Polsterung hinzuzufügen, nur damit um uns herum ein bisschen mehr Platz zum Arbeiten ist Fügen Sie also die Polsterung hinzu und wir machen vielleicht auch einen Ram, einfach rundum Ordnung, cool. Also das sieht vorerst ziemlich anständig aus. Das nächste, was wir meiner Meinung nach angehen wollen, sind die eigentlichen Elemente im Inneren, oder? Wir wollen diese Checkbox haben und wir wollen diese Mülltonne haben. Ich denke, der einfachste Weg, das Kontrollkästchen zu aktivieren, besteht darin, das Kontrollkästchen Material zu verwenden. Ja, wir wollen einfach so etwas ganz Grundlegendes. Wir wollen, dass es zuerst deaktiviert wird und dann, wenn wir es verwenden, überprüft Wir können diese Textzeile tatsächlich einfach hier kopieren und einfügen Bevor wir es vorbiegen können, nehmen wir das Stück heraus, das hier so beschriftet ist, wie sie es beschriften wollen. Wenn wir der Checkbox ein Label hinzufügen wollen, können wir das, aber wir werden es separat gestalten. Dann fügen wir den Import von Maturely per Checkbox Dann, wenn wir hier drüben sind, müssen wir es großartig machen. Eine andere Sache, die wir tun können, ist , Kunst in ein Typografieelement zu packen, da es sich um ein Element Typografie handelt Und spar dir das, cool. Dann wollen wir eine Mülltonne hinzufügen. Ich bin mir nicht sicher, ob sie ein Mülltonnen-Symbol haben, aber wenn doch, wäre das großartig. Lass es uns mit Müll versuchen. Fantastisch, sie haben ein Löschsymbol, wir können tatsächlich darauf zugreifen. können wir kopieren. Ich frage mich, ob wir das in unseren Komponenten verwenden. Ja, und wir können die Farbe ändern, was großartig ist. Lass uns weitermachen und wir lassen das einfach auf, tut mir leid. Wir werden das Symbol hier in unser Projekt einfügen. Und dann rufen wir hier einfach das Symbol Löschen auf. Das ist toll, wir haben hier unser Löschsymbol. Und dann sollten wir in der Lage sein, die Farbe darauf einzustellen. Wenn wir also Farbe eingeben und eingeben, ist das meiner Meinung nach Gefahr oder Irrtum. Wahrscheinlich sollte der Fehler die rote Farbe sein. Wenn wir das speichern, großartig. Wir haben einen roten Mülleimer. Fantastisch. Sie werden jedoch feststellen, dass diese alle direkt in einer geraden Linie herunterkommen, was nicht ideal ist. Was wir tun wollen, um das zu beheben, ist , dass wir es im Grunde so einstellen, dass es sich in einer Flexbox auf der anderen Seite befindet, und dann werden wir sie von dort trennen. Also werden wir einen Tauchgang erstellen , der das Kästchen in der Topographie umschließt Denn wenn Sie sich an unser Beispiel erinnern, möchten wir, dass sie auf der linken Seite bleiben und das Löschen auf der Dann vergrößern wir das Ganze in Form einer Flexbox auf dem Display. Stellen Sie es so ein, dass es das biegt. Das Gleiche hier, wir werden die Requisite hinzufügen, sagen wir, wir richten Objekte auch in der Mitte aus, weil sie dort etwas wackelig sind , und wir werden das Gleiche hier tun Cool, alles sieht ziemlich gut aus. Das Letzte, was wir tun wollen, ist, diesen oberen Bereich auf den Inhalt einzustellen , zwischen dem ein Abstand hergestellt werden soll Wir wollen, dass sie im Grunde dieses Div und dieses Löschsymbol so weit wie möglich voneinander entfernt Und eine Sache, die uns dabei helfen wird ist die Festlegung eines Minimums diesen äußeren Behälter, da im Moment nicht viel Platz zwischen ihnen ist . Stimmt das? Um das zu tun, gehen wir zu unserem Aufgabencontainer und legen eine Mindestbreite fest, sagen wir 40 Ansichtsbreite, eine, wenn das so ist, ist das ziemlich gut. Also haben wir unsere Aufgaben, wir lassen sie Zeile für Zeile ausfüllen Wir haben unseren Header , und ich werde dem unteren Rand von nur einem Ram einen Rand hinzufügen von nur einem Ram einen Und wir haben unsere Aufgaben, und unsere Checkbox aktiviert und deaktiviert, aber im Moment macht keine unserer Buttons oder Icons irgendwas Lassen Sie uns also weitermachen und sie dazu bringen, Dinge zu tun. Was wir hier also auch tun müssen , um diese Funktionalität zu ermöglichen, ist unser Löschsymbol in eine Schaltfläche einzubinden. Also habe ich die Schaltfläche gerade aus Material importiert. Ich, habe ich nicht. Ich habe die Schaltfläche jetzt aus der Material-Benutzeroberfläche importiert, und jetzt ist es tatsächlich eine Schaltfläche. Wenn Sie also mit der Maus darüber fahren, sehen Sie, dass es sich tatsächlich in eine Schaltfläche verwandelt. Da ist ein kleiner Schwebezustand, also sind wir uns sicher, dass es sich im Grunde genommen um eine Schaltfläche handelt Ordnung, also die andere Sache wir jetzt tun müssen, richtig, anstatt diese Scheindaten zu verwenden, werden wir irgendwann echte Daten verwenden wollen irgendwann echte Daten verwenden Also, um die echten Daten tatsächlich einzugeben, brauchen wir eine Eingabe, oder? Lassen Sie uns also weitermachen und unseren Input erstellen. Wir werden es genau hier in diesem neuen Container erstellen . Ich schaffe, ich glaube, Material. Ich habe eine Texteingabe. Option zur Texteingabe. Möge ein Textfeld sein. Ja, es ist ein Textfeld und ich denke, wir wollen genau das wirklich einfache umrissene Textfeld. Also nochmal, ich kopiere einfach die erste Zeile der Optionen hier, die Dokumentation, und füge sie in unser Projekt ein. Und ich werde nur eine schnelle Lösung vornehmen, damit ich das Textfeld importieren kann. Und wenn wir zurück gehen, Crew, cool, es ist da. Aber dann brauchen wir auch einen Knopf. Lassen Sie uns also weitermachen und eine separate Schaltfläche mit derselben Schaltflächenkomponente erstellen , und es wird eine Schaltfläche zum Senden sein. Großartig. Also haben wir den Button und den Submit nebeneinander. Ich werde sie tatsächlich in einen Tauchgang einpacken , damit sie, genau wie alles andere, unter Kontrolle sind . Und dann kann ich ihnen ein Styling hinzufügen, damit die Dinge so aussehen, wie wir es mit dem Div wollten. Ich werde das Gleiche tun. Ich werde es einrichten und zu einer Flexbox machen. Also werden wir Display Flex machen. Und stellen Sie fest, dass Sie immer wieder dasselbe Muster verwenden? Eine Sache, die Sie tun könnten, ist so etwas wie eine Stilkomponente zu erstellen , die einfach ein Container ist , der jedes Mal automatisch eine Flexbox erstellt. Und dann benutze das, anstatt einfache Divs zu verwenden. Das ist etwas, das Sie vielleicht tun möchten, wenn Sie ein größeres Projekt durchführen oder nur über Optimierungen nachdenken Display Flex, wir fügen einen unteren Rand von einem M hinzu. Ja, das sieht ziemlich gut Ich will damit anfangen. Nun, lassen Sie uns auch, tut uns leid, etwas Spielraum am Rand unserer Eingabe hinzufügen. Rand, richtig? Wir machen wieder ein M. Und ich möchte etwas mit diesem Knopf hier machen, damit er ein bisschen besser steht. Wenn ich also auf die Schaltfläche LI von Enthalten gehe, haben wir es umrissen, wir haben Text. Ich denke, wir wollen eine integrierte Schaltfläche haben. Also werde ich hier tatsächlich diesen Teil hinzufügen, der besagt, dass Variante entspricht, die in unserer Schaltfläche enthalten Speichern wir uns das. Und jetzt sehen Sie, dass wir einen etwas umfassenderen Button haben. Aber du wirst auch feststellen, dass es wirklich, wirklich groß ist. Ich weiß nicht, ob wir wollen, dass es so groß ist. Ich denke, das könnte an unserer Flexbox liegen. Ich denke also, was ich hier tun kann, ist, die Elemente einfach in der Mitte auszurichten, und das sollte die zusätzliche Höhe unseres Buttons dort korrigieren Lass uns das versuchen. Sag das und toll. Ja, es hat wieder die normale Größe. Ja, ich mag den Button, aber ich glaube, ich möchte ein ähnliches Thema mit ähnlichem Stil in der ganzen Sache beibehalten . Also, was ich mit der Schaltfläche hier machen werde , ist, den Hintergrund so zu ändern , dass er unseren linearen Grade-in-Hot-Back an unsere Index-TSX-Datei anpasst Grade-in-Hot-Back an unsere Index-TSX-Datei Ich nehme buchstäblich einfach diese Hintergrundfarbe hier, kopiere sie und gehe diese Hintergrundfarbe hier, zurück zu unserem Button-Element Und in der X-Requisite, die ich hier hinzufügen werde, werde ich das einfach einfügen und speichern. Da haben wir's. Unser Button wurde automatisch aktiviert, also lassen Sie uns das für eine Sekunde auskommentieren , damit wir uns das wirklich ansehen können. Es war weiß und blau. Und wann, lass es mich wieder hinzufügen. Es ist immer noch weiß, aber dieser lineare Farbverlauf funktioniert jetzt ziemlich gut. Das nächste, was wir angehen wollen, ist der tatsächliche Input. Im Moment steht auf dem Etikett „Umrissen“. Lass uns das ändern. Es ist also eher eine Aufforderung. Sagen wir vielleicht, füge einen neuen Punkt hinzu und speichere ihn. 10. Globalen Zustand hinzufügen: Das nächste, was wir hier tun wollen, ist im Grunde sicherzugehen , dass unsere Aufgaben in einem State-Management-Tool gespeichert werden. Wir werden etwas wie Redox oder Z in Betracht ziehen wollen etwas wie Redox oder Z Persönlich denke ich, Redux hat zu diesem Zeitpunkt vielleicht ein bisschen zu viele Grundregeln für dieses Projekt Weil es wirklich nur eine sehr einfach zu machende App ist. Wir haben nicht viele komplexe UI-Aktionen. Ich denke, eine einfache Verwendung von stattdessen könnte der richtige Weg sein. Wenn wir in der Dokumentation für Stand nachschlagen, können wir herausfinden, wie man ihn installiert und zum Laufen bringt. Es ist wirklich wie ein einfacheres staatliches Verwaltungssystem. Also machen wir weiter und installieren Stand in unserem Projekt. Jetzt , wo es installiert ist, werden wir weitermachen und ich werde hier einen neuen Ordner erstellen und ich werde ihn Store nennen. Wenn Sie also noch nie mit dem Laden gearbeitet haben, ist es im Grunde nur ein Ort, an dem Sie, Ihr Staat, im Grunde darin leben. Einfach ausgedrückt, dieser Laden, den ich erstellen werde , heißt Index und hier befindet sich unser Geschäft. Das wird unsere Speicherdatei sein. Ich sehe mir ihre Dokumentation hier an. Verwenden Sie dies im Grunde, um unsere Komponente tatsächlich zu erstellen. Also werde ich das dort platzieren und dann können wir weitermachen und es an das anpassen, was wir tun. Also, was das hier macht, also importiert es diese Funktion, erstellt von einem Stand aus. Und wir erstellen hier eine Variable namens store, die create aufruft. Und dann ist das im Grunde unser Laden hier. Es schafft unseren Laden. In diesem Fall werden sich Bären tatsächlich in Todos verwandeln Es wird zunächst ein leeres Array sein. Wenn wir auf unsere Todos zugreifen, werden sie dort leben Wir werden einfach weitermachen und das zu unserer Arbeitsumgebung hinzufügen Also geh und hol das. Sind. In Ordnung. Also, anstatt die Bevölkerung zu vergrößern, werden wir tatsächlich etwas namens Add To erstellen wollen . Das wird einfach passieren, wenn wir auf Abschicken klicken und unsere Aufgaben zur Liste der Dinge hinzugefügt werden. Wir setzen den Status statt Bären auf den aktuellen Stand von „Zu tun“, anstatt plus eins, was wir tun werden , wir müssen es vielleicht eintragen und in ein Array packen, tut mir leid. Wir machen, was auch immer der Zustand des vorherigen Arrays war, und dann das Neue hinzu, um das zu tun statt State plus das neue Oh, tut mir leid, das war der falsche Ort, an den wir tatsächlich übergeben werden, um zu tun und plus das neue zu tun. Ich werde sagen, dass ich hier einige Fehler bekomme, denn auch müssen die Typen die richtigen Typen in dieses Projekt einfügen die richtigen Typen in dieses Projekt damit es richtig funktioniert. Also werde ich tatsächlich einen weiteren Typ erstellen und ich werde einen weiteren Ordner für den Typ erstellen. Also werde ich einen Ordner namens types erstellen. Ich werde eine neue Datei erstellen, Index S , und dort werden all unsere Typen erstellt. Wenn ich zum Beispiel einen Typ erstelle, muss ich ihn nicht in jeder Datei neu erstellen, sondern in jeder Datei eine Schnittstelle erstellen Ich kann es einfach exportieren und in jeder Datei darauf zugreifen, sodass wir unseren Code trocken halten können Das ist also eine weitere Möglichkeit, einen Typ zu erstellen. Ich werde den zu erledigenden Typ erstellen. Und genau wie bei der Benutzeroberfläche können wir damit alles eingeben, womit wir arbeiten. Also ich, lass uns hier wirklich eine Sekunde darüber nachdenken , denn das wird etwas sein , das wir entweder ein paar Mal ändern können , oder wir können es einmal erstellen und dann den Code darauf aufbauen. Wenn wir uns also unsere Beispiel-App ansehen, richtig, wir wollen in der Lage sein, die Aufgabenliste hinzuzufügen, oder? Es muss also eine Beschreibung haben oder was auch immer bedeutet. Was wir tun müssen, ist, wie Sie bereits erwähnt haben, wir wollen eine eindeutige ID haben Das ist also auch eine weitere Eigenschaft , die unsere Aufgabe haben sollte Wir wollen also eine Beschreibung und wir wollen eine ID. Wir wollen wahrscheinlich nachverfolgen , ob es aktiviert oder deaktiviert ist oder nicht Denn wenn wir wollen, dass es beim erneuten Laden der Seite bestehen bleibt. Wir können es nicht einfach auf der Kundenseite live haben, oder? Es muss irgendwo im Laden sein. Das wird sich von Reload zu Reload nicht ändern. Und dann wollen wir sie endlich löschen können. Also nochmal, lösche Leben mit dieser ID-Fähigkeit. Um eine bestimmte Aufgabe zu löschen , ist es gut, wenn sie eine ID hat. Also ich denke, wir haben drei Dinge festgelegt , die wir tun müssen. Sollte ein oder drei Eigenschaften haben. Wir werden ihm eine ID-Eigenschaft geben, bei der es sich wahrscheinlich um eine Zeichenfolge handeln wird. Wir werden es wahrscheinlich machen, tut mir leid, wir werden es wahrscheinlich zu einer UUID machen Wir werden es wahrscheinlich beschreiben . Es wird auch eine Zeichenfolge sein. Schließlich werden wir ihm eine geprüfte Eigenschaft geben. Also, ob es geprüft ist oder nicht, und das wird eine Quatsch sein. Also wahr oder falsch. Lassen Sie mich diesen Typ exportieren , damit wir an anderen Stellen darauf zugreifen können. Und dann werde ich es hier importieren. Lass uns sehen. Ich glaube, wir können es tatsächlich, oh, du weißt schon, was es ist. Ich muss eine weitere erstellen, ich muss eine weitere Schnittstelle erstellen, aber das ist nur für den Store, also muss ich einen Typ für den Speicher erstellen. Im Grunde wird uns das all diese Optionen bieten. Und wir werden das ändern, aber es auf Do entfernen, wir müssen im Grunde definieren, welche Typen das sind. Es wird ein Array sein, das erledigt werden muss. Array wird die zu erledigenden Typen importieren. Ein Array von Todd to do wird eine Funktion sein , die eine Funktion übernimmt, die vom Typ Zeichenfolge ist Weißt du was, das ist nicht, das wird wahrscheinlich eine Beschreibung sein Also werden wir das ändern. Wir werden es hier ändern. Und wir werden es dort ändern. Wir speichern das, kehren dann zurück und dann das letzte hier. Oder vielleicht werden wir wahrscheinlich noch zwei haben. Also werden wir entfernen, um das zu tun, das wird unser Löschen sein. Wir nehmen eine ID vom Typ Zeichenfolge und versuchen zu funktionieren. Und dann, ja, also lass uns das einfach ändern, um es zu entfernen. Um das zu tun , wissen wir , dass das vorerst berücksichtigt werden soll das vorerst berücksichtigt In Ordnung, also wir bekommen hier eine Fehlermeldung. Oh, weil wir unseren Shop nicht so angewendet haben, dass er sich wie unser Bundesstaat verhält , auf unseren Shop mit Typoskript. Es hängt irgendwie davon ab , wohin die Dinge gehen. Aber normalerweise kannst du es quasi direkt neben der Funktion hier platzieren . Wie wenn Sie einen Nutzungseffekt erstellen, setzen Sie ihn quasi direkt nach den Wörtern Nutzungseffekt, aber direkt vor der offenen Klammer. Also ich denke, ich kann es nach dem Erstellen hier platzieren. Also werde ich es tun, weil es im Grunde ein Haken ist. Also werde ich in Do Store schreiben, ich werde die Klammer schließen und ich werde es speichern und dann großartig. In Ordnung, das hat sich geändert. Da steht, dass mir die folgenden Eigenschaften fehlen. Zu tun hinzufügen. Oh, weißt du was? Das liegt nur daran, dass ich es anders getippt habe. Lassen Sie mich alles in Kleinbuchstaben schreiben. Ich wollte nur sagen, dass ich dafür fehlt . Lass uns das erstellen. Also nehmen wir einen Ausweis und es wird vorerst nichts zurückgeben. Oh nein, das gefällt ihm nicht. Nein. Lassen Sie mich eigentlich zwei Probleme beheben, okay, lassen Sie mich zwei Probleme lösen. Ich werde diese Anzeige reparieren , um es zu tun. Was wir hier tun werden ist, ich glaube, oh, weißt du was, nun, es sind ein paar verschiedene Dinge. Wir bekommen hier ein paar verschiedene Fehler. Der Spread-Operator muss dafür also tatsächlich im Staat passieren, vielleicht fügen wir ihn nicht wieder in ein Array zurück. Wird das Problem dadurch behoben? Geben Sie jetzt an. Lassen Sie uns weitermachen und unsere entfernte Aufgabe fertig stellen und dann können wir uns mit dem anderen befassen, ich werde das einfach kopieren und einfügen. Die Art und Weise, wie wir herausfinden werden, was zu tun ist, entfernen wir, um im Grunde auf alle unsere Aufgaben zuzugreifen, und wir wollen sie nach den Aufgaben filtern , die wir nicht mehr verwenden. Ordnung. Zu tun, was wir nicht mehr tun wollen, wird stattdessen zu dem, was wir tun wollen. Ein Status, nach dem gefiltert werden soll, nach dem ID-Status gefiltert Dom Dodd-Filter. Ford ist Give Mainer mir fehlt hier noch eine Halterung, der Filter Ford Wir wollen, lass uns nach dem Filter suchen. Okay. Wir gehen zu einem richtigen Filter, nicht dem DID entspricht. Das sollte funktionieren. Lassen Sie uns herausfinden, warum diese Fehler jetzt auftreten. Ordnung, wenn ich mir das ansehe , fehlt „Zu erledigen“ in „Zu erledigen“. Niemals etwas hinzufügen, sondern als Typ erforderlich , um das Ding zu speichern. Oh, ist das der einzige Fehler, hierher zu kommen? Sicher. Alle meine Kommas sind an der richtigen Stelle Alles aus dem Weg geräumt, um es zu erledigen, aus beidem raus. Schauen wir uns nur die Fehler bei der Anzeige an, um sie zu erledigen. Schauen wir uns an, was hier vor sich geht. Es ist zu klar, aber nie untergegangen. Ein kleiner Fehler hier ist also, dass wir diese Klammern wahrscheinlich nur entfernen müssen. Und anstatt nur die Beschreibung zu übergeben, wollen wir eigentlich eine neue Aufgabe erstellen, oder? Wir wollen also tatsächlich eine ID erstellen, eindeutige ID, die eine Zeichenfolge sein wird. Und dann werden wir die Beschreibung erstellen, die nur die Beschreibung sein wird. Und dann werden wir auch einen Prüfstatus hinzufügen. Es wird also geprüft und es wird als falsch beginnen. Also der Prüfstatus, jetzt können wir nicht einfach eine leere Zeichenfolge für jede ID übergeben. Wir werden tatsächlich eine eindeutige Kennung wollen. Und dafür werden wir wahrscheinlich eine UUID-Bibliothek verwenden , der NPM mindestens eine hat Wir werden diese eine UID verwenden und sie wird uns im Grunde ermöglichen, eindeutige IDs für unser Projekt zu erstellen Also werde ich es einfach hier installieren. Und dann werde ich es in unseren Storm importieren und speichern. Oh, und weißt du was, ich glaube, ich muss Deb installieren und speichern. Ich glaube, ich bekomme manchmal diesen Fehler. Okay, cool. Und wenn alles andere fehlschlägt, schließen Sie es einfach und öffnen Sie es wieder. Und manchmal macht es einfach reinen Tisch. Oh, lassen Sie uns hier einen Vorschlag machen, lassen Sie mich das versuchen. Hör auf, komm in kürzerer Zeit zurück. Ordnung. Der perfekte Fehler ist behoben. In Ordnung, also wollen wir, das sollte funktionieren. Und dann, anstatt eine leere Zeichenfolge zu übergeben, schlagen sie hier vor, dass wir einfach, ja, wir rufen einfach UID an, wann immer wir es brauchen Also vorher ID und dann rufen wir es einfach an und das sollte eine eindeutige ID für unsere neue Aufgabe erzeugen Fantastisch. Also ich denke, wir sind ziemlich gut aufgestellt, was den Ausweis angeht. Ich glaube nicht, dass wir noch mehr Pakete installieren sollen. Wir arbeiten jetzt mit dem Z-Stand zusammen, um tatsächlich auf unsere zuzugreifen und sie zu unserer Liste hinzuzufügen und sie für Aufgaben zu verwenden, anstatt sie auch zu verwenden. Ich denke, wir können Roof to Do jetzt kommentieren. Ich denke, wir haben den Fehler behoben, den wir hatten , was wirklich mit der oberen Ebene zusammenhängt, auf der wir basieren. Ordnung, so cool. Beide sollten jetzt funktionieren. Wählen Sie wieder den zu erledigenden Artikel. Wir werden uns jetzt irgendwie an alles binden und dafür sorgen, dass alles so funktioniert, wie wir es wollten. Also ich denke, wir müssen uns für Do-Container interessieren, also wollen wir das tun. Fangen wir also damit an. Also schnappen wir uns das zu erledigen. Also ständig zu tun entspricht diesem Haken hier, von einem Stand aus einkaufen Und dann wollen wir uns den Staat schnappen. Und in dem Staat , in dem sie das tun können, sind sie präsent , richtig? Also das kleine Array, das wir am Anfang erstellt haben, das wollen wir uns holen, damit wir es tun Hier ist D nicht Schüssel, deshalb gibt es uns Fehler tatsächlich richtig acht. Ordnung. Es ist nur ein Typfehler, den wir bekommen, weil State irgendeinen Typ hat. Ich glaube, es gibt einige Anleitungen für Typoskripte , denen wir hier beim Zugriff auf unseren Shop folgen können. Warum habe ich den Shop nicht exportiert? Exportiere den Shop. Ja, ich muss den Laden exportieren. Sonst können wir es nicht benutzen. Das war das Problem. Ich dachte, warum funktioniert das nicht? Ordnung, lassen Sie uns das noch etwas länger schließen . Öffne es wieder. Oh, wir bekommen immer noch den Fehler. Das ist so interessant. Was stand da? Geben Sie ein, aber es importiert den falschen Shop. Der Laden. Benennen Sie das tatsächlich etwas weniger verwirrend um. Also werden wir das To Do Store nennen. Und ich werde Store Store anrufen. Ich habe das falsche Geschäft importiert, also muss ich das Geschäft aus dem Geschäft importieren. Dann kann ich tun, was ich versucht habe. Ich habe mich gefragt, warum es nicht funktioniert hat. In Ordnung, also Staat ist dann Staat zu tun. Und Sie sehen, wie ein typisches Skript ein Ready wie diese Art von integrierter Dokumentation erstellt. In diesem Sinne ist es wirklich toll, dass Sie einfach herausfinden können , was Ihnen im Wesentlichen fehlt. In Ordnung, das wird also unsere Aufgabe sein. Also sollten wir eine Liste mit unseren Aufgaben haben. Wir haben noch nichts zu tun, aber das wird der Ort sein, an dem unsere zu erledigen sind. Wenn ich weitermache und zu zwei Aufgaben übergehe, müssten wir keine Daten haben weil wir das noch nicht tun müssen. Also das funktioniert tatsächlich. Wir wissen also, dass wir entweder unsere App komplett kaputt gemacht haben oder, weißt du, wir haben sie richtig geändert. Also werde ich das schließen. Ich erhalte hier eine kleine Fehlermeldung, dass die Art der Aufgabe nicht zuweisbar ist Und das ist richtig, denn eigentlich hatten wir To Do ursprünglich als Zeichenfolge definiert Was wir also wirklich übergeben müssen, ist eine Beschreibung. Das Gleiche gilt für den Schlüssel hier. Anstatt das Objekt von to do zu übergeben, müssen wir es an Dod übergeben und es speichern, diese Fehler haben Das nächste, was wir jetzt tun wollen , ist, dass wir unsere Anzeige einschalten wollen , damit wir tatsächlich den Tod hinzufügen können , dass wir wieder rausspringen Wir werden in unserem To-do-Container sein und dann werden wir uns unsere Funktion schnappen , die ad to do ist Also werden wir das Gleiche tun. Du speicherst, speicherst, klammerst, staatlich. Und dann schnappen wir uns staatliche Anzeige zu erledigen. Das werden wir uns sparen. Und dann werden wir das so nennen, wenn auf die Schaltfläche Senden geklickt wird, richtig? nennen, wenn auf die Schaltfläche Senden geklickt wird, richtig Also könnten wir das machen, wir könnten das tatsächlich beim Abschicken machen Wir können erstellen, wir können daraus eine Formularkomponentenkomponente und wir können dafür tatsächlich eine Handler-Funktion erstellen. Wir werden einen Handler namens Hand Submit erstellen. Wir wollen zwei Dinge tun. Wir wollen ein Ereignis übergeben, weil wir im Grunde genommen auf diese Eingabe abzielen müssen und den Wert dieser Eingabe mögen, also wollen wir im Falle eines Klicks weiterleiten, egal welchen Typ sie vorerst eingeben, was nicht die beste Methode ist, aber dadurch und den Wert dieser Eingabe mögen, also wollen wir im Falle eines wird nur der Fehler behoben, auf welchen Typ sie vorerst eingeben, was nicht die beste Methode ist, den wir stoßen werden . Rufen Sie also Event auf und verhindern Sie, dass die Seite jedes Mal neu geladen wird, wenn wir sie hinzufügen Was wir jetzt tun werden, ist unsere Anzeige to do aufzurufen. Dann fügen wir „ To Do“ hinzu. Und die Aufgaben, die wir hinzufügen, werden sich auf das Event beziehen, also wird es das Ende des Events sein. Wir werden es ins Visier nehmen müssen, oder? Also wird dieser Handler beim Absenden aufgerufen. unserem Formular haben wir eine spezielle Eigenschaft namens Submit, die im Grunde genommen jede Funktion aufruft, die Sie aufrufen möchten, wenn Sie das Formular abschicken . Unser Onsubmit wird also dieses Handle sein , um das zu erledigen. Aus diesem Grund wird ein Ereignis an dieses Handle übergeben , um es zu tun Deshalb wollen wir unser To-Do-Ziel hinzufügen. Dieses Ereignis wird das Ziel eines Ereignisses sein , weil das Formular mehrere Elemente umschließt Es wird das erste Element sein, auf das wir abzielen. Und dann wird es der Wert davon sein. Der Wert des Elements wird das sein, was wir an unsere Anzeige übergeben, nämlich die Beschreibung. Ich weiß, das war wahrscheinlich eine Menge zu verkraften. Lass uns noch einmal zurücklaufen. Wir haben eine Formularkomponente erstellt, wir haben das Formularelement verwendet. Das Formularelement hat eine eingebaute Eigenschaft namens Absenden, wenn Ihr Formular abgeschickt wird. Genau das passiert. Wir haben diese Funktion namens handle to do erstellt. Sie verhindert standardmäßig, dass die Seite nicht erneut geladen wird, wenn wir auf die Schaltfläche Senden klicken oder das Formular abschicken Und dann gibt es auch Dinge, die erledigt werden müssen. Die zu erledigende Anzeige nimmt diese Beschreibung , den Wert der Eingabe und sendet sie dann an unseren Shop und gibt uns die Aufgabe. Es wird eine Aufgabe mit einer neuen ID und der Überprüfung des Status von Fehlern erstellt , was eigentlich funktionieren sollte. Das Letzte, was wir tun möchten, bevor wir Need To Do hinzufügen, ist das Hinzufügen des Typs zu unserer Schaltfläche. Sie möchten also, dass die Schaltfläche vom Typ Senden ist. Es gibt zwei Möglichkeiten, dies jetzt einzureichen. Sie können die Eingabetaste drücken, wenn Sie Ihren Wert hinzufügen, oder Sie können auf Senden klicken. Wir möchten sicherstellen, dass beide ordnungsgemäß funktionieren. Jetzt müssen Sie auf der Schaltfläche „ Senden“ eingeben. Das Formular weiß, dass hey, wenn sie auf diese Schaltfläche klicken, sie abschicken wollen und es sollte entsprechend funktionieren. Wir werden es einfach testen. Also lass uns weitermachen und hinzufügen, was zu tun ist, und sehen, ob es auftaucht. Es ist aufgetaucht. Wir haben unsere erste Aufgabe zu erledigen und unsere Anzeige funktioniert einwandfrei. Was wir jetzt tun wollen, ist, dass unser Remove-Programm korrekt funktioniert. Das ist also sehr ähnlich. Wir müssen es nur in unserer To-do-Item-Komponente tun. Wenn Sie also zu einem Artikel springen, werden wir ihn tatsächlich weitermachen und wir werden ihn hier zu unserer Schaltfläche hinzufügen Wir werden es der von uns erstellten Schaltfläche zum Löschen hinzufügen uns erstellten Schaltfläche zum Löschen Also zuerst müssen wir die Dinge erledigen. Also das wird entfernt, um es zu tun. Es wurde entfernt, um unseren Shop zu lagern. Wir schnappen uns den Staat und dann machen wir State. Zu erledigen entfernen. Fantastisch. Für die korrekte Entfernung wird eine ID benötigt, also werden wir uns die DOS-ID schnappen wollen , damit wir das richtige Objekt löschen können , das mit der Schaltfläche zu tun hat. Jetzt sagen wir „ Auf klicken, um zu entfernen“. Wir wollen Remove to Do aufrufen. Dann wollen wir es an Do weitergeben und das speichern. Eigentlich wird es mir einen kleinen Fehler geben , weil ich im To-Do-Container einen kleinen Fehler gemacht habe . Ich habe tatsächlich den Fehler gemacht, die Beschreibung an die Aufgabenbeschreibung weiterzugeben. Das wollen wir nicht tun. Wir wollen das Loch dafür überschreiten. Ich gebe das zu erledigen den Typ von zu tun aus unserem Types-Ordner. Das war ein weiterer guter Grund, warum wir unsere Pflichten hätten erheben sollen. Dann wird es dir hier einen weiteren Fehler geben weil es so ist, als ob all diese Dinge jetzt kaputt gehen. Wir werden einfach auf die Beschreibung zugreifen und all unsere Fehler sollten behoben sein. Auch das ist ein weiterer guter Grund, warum Typoskript existiert. Es mag zwar etwas nervig erscheinen , diese Fehler ständig beheben zu müssen, aber wenn wir den Fehler nicht beheben würden, würden wir jetzt ein paar Minuten damit verbringen, herauszufinden , warum der Fehler überhaupt mit Java-Skript auftritt Weil es keine Möglichkeit gibt, zu wissen, dass unser Projekt stillschweigend scheitert Wenn wir alles richtig gemacht haben, haben wir unseren Move to do, wir haben es an ID übergeben Fügen wir noch eine Sekunde hinzu, nur um sicherzugehen, dass, falls wir es löschen, es das Richtige ist, das wir löschen Und lassen Sie uns weitermachen und versuchen, zu löschen. Niemand hat perfekt gearbeitet. Also können wir jetzt Aufgaben hinzufügen, wir können Aufgaben entfernen. Das Letzte, was wir tun wollen, ist wahrscheinlich einfach, glaube ich, Entschuldigung. Die letzten beiden Dinge, die wir tun wollen, sind in der Lage zu sein, den Status des Schecks zu verfolgen. Und wenn du dann merkst, wenn ich diese Seite aktualisiere, bleib dran. Wir wollen also sichergehen, dass unser T dauerhaft ist , dass wir es verwenden Kümmere dich zuerst darum. Lassen Sie uns zuerst das Beharren in Angriff nehmen Um die Persistenz anzugehen, werden wir die Middleware verwenden , die im Lieferumfang von Z Stand enthalten ist. Wir werden hier also importieren, wir werden Tiefenwerkzeuge importieren und wir werden Persist-Tools importieren und wir werden Persist-Tools Und wie Sie hier sehen können, haben sie eigentlich nur ihre App, ihren Shop mit den Tools in die Tiefe gepackt und weitergemacht ihren Shop mit den Tools in die Tiefe gepackt und weitergemacht Und das wird es einfach ermöglichen, weiterzumachen. Ich glaube, das macht das, indem es im lokalen Speicher gespeichert wird Es wird im lokalen Speicher Ihres Browsers gespeichert und Sie sollten dann jedes Mal, wenn Sie es erneut starten, auf dieselben Werte zugreifen können. Wenn Sie es im Sitzungsspeicher speichern würden, , wenn Ihre Sitzung abgelaufen ist, könnten Sie jedes Mal, wenn Ihre Sitzung abgelaufen ist, wieder auf diese Werte zugreifen. Machen Sie weiter und wickeln Sie einfach unsere App darin ein. Leg es her, Ups, schnapp dir die beiden da Und dann wollen wir Set Power Function aufrufen. Ich mache hier auch einen Fehler. Ich muss diese Halterung hier entfernen. Und dann sollte das alles in den Speicher verschoben werden, von dem ich glaube, dass ich noch ein paar mehr habe. Ein paar zu viel, ein paar zu wenig Klammern, zwei mehr. Spar dir das. Wir bekommen immer noch einen Fehler. Ich muss die Optionen bestehen. Das ist mein Schläger. Wie Sie hier sehen, behalten Sie den aktuellen Zustand , mit dem Sie arbeiten, und dann erzeugt er etwas, das ihm einen Namen Das liegt daran, dass Sie, wenn Sie in Ihrer Anwendung, in Ihren De-Tools, bei der Inspektion tatsächlich einen Namen für Ihr Geschäft sehen werden Also werden wir weitermachen und ihm als zweites Argument einen Namen geben. Und spar dir das. Setz es in die rechte Klammer. Habe ich einen hinzugefügt? Nein, nein, nein. Ich habe es in die falschen Klammern gesetzt. Das ist es hier. Persist kann keinem Typ zugewiesen werden , der gespeichert werden muss. Warum ist das hier als bestanden festgelegt? Das ist das Problem. Also ich muss nur das herausnehmen, das rausnehmen und dann wird das Problem mit der zusätzlichen Klammer, das wir haben, tatsächlich gelöst. Es war also nur ein zusätzlicher Pfeil, nicht in einem zusätzlichen Parameter enthalten sein musste. Also ja, jetzt haben wir Perist eingerichtet. Also, wenn wir das richtig gemacht haben, springen wir zurück zu unserer App Erfrischen Sie es dort ein wenig. Sie hinzu, aktualisieren Sie die Seitenration, um die Flüssigkeitszufuhr zu korrigieren. Was diese Flüssigkeitszufuhr im Grunde bedeutet, ist, dass das, was sie aufbaut, nicht unbedingt das ist , was wir bekommen, sondern dass wir durchhalten. Es ist jedes Mal anders. Was fair genug ist. Was wir also tun können, um die Flüssigkeitszufuhr zu korrigieren , ist, einen einfachen Effekt auszuführen , um sicherzugehen, dass das, was wir sehen, eine Art Ladeseite ist, nur um sicherzustellen , dass das Richtige geladen ist. Also, was wir tun werden, werden wir hier auf unserer Indexseite ausführen und wir werden einfach Loaded erstellen. Das Set ist geladen. Ein wirklich einfaches von React. Und wir werden hier einfach Use Effect nennen. Aber einmal ausführen und dann, wenn es läuft, setzen wir es einfach auf true. Es wird also im Grunde dafür sorgen , dass die Seite geladen ist. Es wird sehen, mit welchen Daten wir arbeiten, und dann wird es wahr sein. Was wir jetzt tun wollen, ist einfach zu zeigen, dass der Container nur dann funktioniert, wenn er korrekt geladen ist. Wir sollten keine Fehler bekommen. Nein, wir schlafen in ihr. Warum wurde das schon früher gemacht? Das ist meine Wette. Das habe ich nur länger zum Falschen gesagt. Keine Fehler bei der Verwendung, keine Fehler bei der Flüssigkeitszufuhr. Fahren wir also mit dem nächsten Stück fort. Ordnung, der letzte Teil, den wir erledigen wollen, ist, uns mit unserem Scheckstatus zu befassen, richtig? Wir wollen sichergehen, dass es, wenn es aktiviert ist und wir es aktualisieren, auch tatsächlich geprüft bleibt. Im Moment sind es einfach immer Standardwerte. Was wir dafür tun müssen, ist, den Prüfstatus innerhalb des Staates festzulegen Wenn es aktiviert ist, wird es an den Staat weitergegeben, und dieser bleibt Teil des Staates Also, was wir jetzt tun werden, ist zurück zum Index zu gehen. Und wir werden hier eine letzte Aktion hinzufügen. Die Aktion „Umschalten“ ist aktiviert Geben Sie die ID der Aufgabe ein , mit der wir gerade arbeiten Und dann wird es der gleichen Struktur folgen , wo es festgelegt ist, es macht noch mehr Sachen Dann werden wir es hier zusammenfügen, damit wir den Fehlerschalter nicht aktiviert bekommen den Fehlerschalter nicht aktiviert , der im Grunde dasselbe ist wie entfernt Was das Textskript betrifft, ist eine Zeichenfolge gleich. Also, was wir hier jetzt machen wollen, mal sehen. Wir wollen herausfinden, welcher der Punkte aktiviert oder deaktiviert ist Das ist okay, lassen Sie uns weitermachen und unseren Status Punkt zu Punkt nehmen , um jede Aufgabe zu wiederholen Alles klar? Und wenn das so wäre, wollten wir eines von zwei Dingen tun. Wenn es identisch ist , wollen wir zurückkehren, wollen wir zurückgeben, was auch immer wir tun sollen. Also wollen wir die ID zurückgeben und wir wollen die Beschreibung zurückgeben. Aber wir wollen das so einstellen, dass es das tut, was es nicht tun sollte. Es muss nur das Gegenteil von dem sein, was es war. Es wurde also überprüft, es sollte deaktiviert sein. Wenn es nicht markiert war, sollte es überprüft werden. Wenn das nicht der Fall ist, wollen wir einfach zurückkehren, um zu tun Ich habe einen Fehler gemacht. Wir wollen es nur auf Checked setzen , weil wir bereits wissen, dass es nötig ist, zwei Argumente geprüft zu haben. Wir haben einen, der das in den falschen Bereich bringt, deshalb erhalte ich wahrscheinlich eine Fehlermeldung. Oh nein. Ja, und arbeiten, wenn ich ja sage, das sollte funktionieren. Ja, cool. Also haben wir unsere genommen, wir haben sie durchgemacht und wir haben unser Do kartografiert , um uns die Person zu schnappen, die wir tun sollen Und wir überprüfen jede dieser Aufgaben, also wollen wir sehen, ob die ID der zu erledigenden Aufgabe existiert Die Eigenschaft ID ID der Aufgabe. Entspricht der ID, die wir weitergeben. Als wir das überprüft haben, verdoppeln den Scheck, falls es stimmt. Also ja, wir wollen den Rest des Parameters übergeben, aber dann wollen wir für den Prüfparameter das Gegenteil von dem übergeben, was er war Was auch immer der Prüfparameter war, wir wollen ihn übergeben, weißt du, wenn es wahr , wollen wir Stürze übergeben usw. Wenn es nicht für alle anderen beiden DOs passt, wollen wir es einfach zurückgeben und weitermachen Und so wie das so ist, dann werden wir das einfach ausprobieren. Also gehe ich zurück, um das Objekt zu erledigen , und dann gebe ich Target ein, der Schalter ist aktiviert Ich werde den Laden noch einmal benutzen. Machen Sie den Schalter aktiviert, speichern Sie das in der Checkbox. Beim Klicken möchte ich nur die Zeile mit den Optionen „Umschalten“, „ Häkchen“ und „Häkchen“ übergeben , und dann werde ich Todd übergeben und das Das sollte funktionieren. Wenn ich also auf dieser Seite nachschaue und die Seite aktualisiere, muss ich noch etwas tun. Ich muss tatsächlich auf die aktivierte Eigenschaft in der Checkbox zugreifen auf die aktivierte Eigenschaft in der Checkbox weil die Checkbox momentan nicht weiß, ob sie angekreuzt werden soll oder nicht. Richtig? Wir gehen einfach davon aus, dass es es wüsste. Es hat keine Möglichkeit, es zu wissen. Also, wir werden hier auf das überprüfte Grundstück zugreifen. Die geprüfte Eigenschaft wird eigentlich sein, was auch immer zu tun ist, geprüft ist, also ob sie geprüft werden sollte oder nicht. Also wenn ich aktualisiere, wenn ich es überprüfe und dann aktualisiere, ist es der Prüfstatus. Fantastisch. Ich werde noch eine kleine Änderung an den Stilen vornehmen, gerade jetzt , wo wir Zugriff auf diese Requisite in der Typografie haben Wenn es angekreuzt ist, möchte ich ein paar verschiedene Stile machen Also möchte ich die Farbe ändern , damit sie etwas abgestufter Also ist es so, oh, wir haben das gemacht, es ist so, als ob es nicht mehr so auffällig sein muss Also möchte ich die Farbe der Aufgabe ändern. Wenn das Häkchen gesetzt ist, ändere die Farbe. Vielleicht etwas Dunkleres als das, vielleicht das. Und dann werden wir das bestehen. Wir wollen, dass die Farbe die ist, für die sie bestimmt ist, also geben wir einfach ein Auto vorbei. Ja, du meinst ungeprüft? Cool. Als Nächstes möchte ich einen Strike Through hinzufügen. Wortwörtlich auf unserer Liste durchgestrichen, bereit dafür ist die durchgehende Textdekoration. Ich werde den gleichen Scheck machen. Ich werde sagen, dass die Immobilie, auf die ich abziele, eingecheckt ist, falls das erledigt werden soll. Entschuldigung, ich möchte eine Zeile draus machen. Wenn ich nur keine Textdekoration überprüfen lassen möchte, wird eine Zeile durchgestrichen. Fantastisch. Also ja, wir haben so ziemlich unsere gesamte To-Do-App zum Laufen. Wie ich bereits erwähnt habe, kann man tatsächlich sehen, wo der Laden dafür wohnt. Wenn du dir hier ansiehst, ob die Anwendung lokalen Speicher benötigt, kannst du sehen, dass wir sie tatsächlich hier haben oder noch speichern werden. Wir haben also unseren Staat. Lassen Sie mich das ein wenig ansprechen. Wir haben also unseren Staat, den wir erledigen müssen. Sie haben ihre eindeutigen IDs, naja , nur die 12, aber es hat eine eindeutige ID. Sie hat die geprüfte Eigenschaft „true“ und die Beschreibung „to do“. Wenn wir das Häkchen entfernen, sehen Sie, dass es sich ändert und dass das To-Do-Objekt nicht mehr die Eigenschaft true hat Es hat jetzt die falsche Eigenschaft, hat die Beschreibung zu erledigen und es hat dieselbe ID Also ja, unsere To-Do-App ist voll funktionsfähig. Das Einzige, was noch zu tun bleibt, ist sie vielleicht zu hosten. Aber wir können das in einer anderen Lektion behandeln, in darum geht, es mit Verselle zu hosten Next S und Verselle sind tatsächlich miteinander verbunden. Ich glaube, Versell hat Next S erstellt, also mit Sell gehostet Aber das werden wir in einer anderen Lektion behandeln. Also ja, ich hoffe, das hilft dir. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten. Wenn Ihnen diese Lektion gefällt, hinterlassen Sie bitte auch eine Bewertung. Es hilft wirklich, dies anderen Leuten mitzuteilen , die den Kurs belegen möchten 11. Schlussbemerkung: Fazit: Wir haben in diesem Video viel von den Anfängen von React bis hin zum Aufbau einer eigenen voll funktionsfähigen To-Do-App mit Next JS gesprochen den Anfängen von React bis hin zum Aufbau einer eigenen . Zukunft sollten Sie in der Lage sein, jedes React-Projekt in Angriff zu nehmen , das Ihnen in den Weg kommt. Sogar Sachen mit Typoskript , um etwas nachzuschlagen, wenn Sie sich nicht sicher sind, und bei Bedarf zu Stack-Overflow übergehen Ich würde gerne sehen, wie Sie sich entschieden haben , Ihre Do-App zu implementieren. Fügen Sie also bitte den Link zu Ihrem Code oder der gehosteten Site der Registerkarte Projekte und Ressourcen ein, damit ich all die harte Arbeit sehen kann, die Sie geleistet haben. Ich lese jeden Kommentar, jede Bewertung und sehe mir alle eingereichten Projekte an. Wenn Sie also Fragen haben, Sie gerne einen Kommentar im Bewertungsbereich unten hinterlassen oder mich direkt kontaktieren. Ich liebe es zu sehen, was ihr zu sagen habt. Weitere Informationen dazu finden Sie auf der Seite Erfahren Sie mehr über Codierung. Schau dir die anderen Videos an, die ich auf meiner Profilseite habe. Ich habe auch Videos zu HTML und CSS auf meinem Youtube-Kanal und meiner Website verfügbar. Ich werde diese unten und in meinem Profil verlinken , wenn Sie daran interessiert sind , sie ebenfalls zu lernen, und ich werde sie im nächsten Video sehen.