Reagieren mit TypeScript Projekt

1. Einführung: Alles klar Leute, willkommen zu diesem Kurs, wie man ein Projekt mit React mit TypeScript erstellt. Also für dieses Projekt werden wir eine Kontaktliste erstellen. Also lassen Sie mich Ihnen hier eine Demo geben. Ich werde einen Namen für diesen Benutzer hinzufügen. Zum Beispiel, John, das Alter wird 25 Jahre alt sein und ist ein Softwareentwickler. Ich werde auf den Benutzer klicken und dann werde ich einen anderen Benutzer hinzufügen. Zum Beispiel, Jessica, sie ist 20 und sie ist Krankenschwester. Ich werde auf Benutzer hinzufügen klicken. Jedes Mal, wenn wir einen Benutzer hinzufügen, werden wir es hier unten stapeln sehen. Und dann können wir natürlich Benutzer aus unserer Kontaktliste löschen. Sagen wir, ich möchte John löschen. Okay, ich habe John aus unserer Kontaktliste gelöscht. Nun, was sind die Voraussetzungen für dieses Projekt? Für dieses Projekt müssen Sie die Grundlagen von React kennen. Wenn Sie also völlig neu mit React sind, ist dieser Kurs nicht für Sie. Dies ist nur für Leute, die React bereits kennen, zumindest die Grundlagen davon, aber sie wollen lernen, wie man TypeScript darauf will. Denken Sie daran, dass TypeScript eine Möglichkeit für uns sein wird, tatsächlich die Typen hinzuzufügen und zu wissen, welche Art von Werten unsere Funktionen zurückgeben und so weiter. Sie werden all dies in diesem Kurs lernen und natürlich, wie Sie sein Projekt bauen können. Also hoffe ich, dass Sie begeistert sind, diesen Kurs zu starten und ich werde Sie im nächsten Video sehen. 2. React und Typescript installieren: Alles klar Jungs, Heute werden wir ein Projekt mit React und TypeScript erstellen. Ich habe viele Tutorials da draußen gesehen, die nur erklären, was TypeScript ist und nur einige einfache Tutorials dazu. Aber ich dachte, es wäre eine bessere Idee, etwas damit zu erschaffen. Lassen Sie mich Ihnen das Projekt zeigen, das wir bauen werden. Wir haben ist dies eine Art To-Do-Liste, aber mit einigen Benutzern. Also haben wir hier ein Formular, in dem wir zum Beispiel einen Namen, Alter und einen Job zum Beispiel eines Benutzers setzen können zum Beispiel einen Namen, . Und wenn wir darauf klicken, können wir diese Benutzer zu unserer Liste hinzufügen. Also werde ich nur hier reinlegen, zum Beispiel, für meinen Namen, ich werde hier 20 setzen und ich werde hier zum Beispiel Piloten setzen. Und ich werde auf Benutzer hinzufügen klicken. Und dann werde ich hier John reinlegen. Also ist John zum Beispiel 45 und E wird zum Beispiel Krankenschwester hier reinbringen. Also haben wir diese beiden Benutzer und jetzt könnte ich in jedem von ihnen klicken. Zum Beispiel, die, der verstorbene Mitarbeiter. Dies wäre beispielsweise für ein Unternehmen, wenn Sie diese Benutzer hinzufügen. Das ist also nur ein einfaches Projekt. Wir werden jetzt damit anfangen. Also, ja, lass uns dafür gehen. In unserem Visual Studio-Code. Wählen Sie einfach einen Ort aus, an dem Sie Ihr Projekt installieren möchten. Und jetzt müssen Sie den folgenden Befehl eingeben. Also machen wir NP x, Create React App. Wir geben ihm unseren Namen. Ich werde dies zum Beispiel Benutzer am wenigsten TypeScript nennen. Und jetzt werde ich einen Bindestrich, eine Strichvorlage und einen anderen Raum machen . Und dieses Mal werde ich Type-Skript setzen. Also werden wir jetzt ein komplettes neues React-Projekt installieren, aber mit TypeScript bereits integriert. Okay, also werde ich die Eingabetaste drücken, ich werde es installieren lassen. Und wenn es fertig ist, können wir einfach weitermachen. In Ordnung, jetzt, wo das Projekt installiert ist, können wir es einfach auf unserem Visual Studio-Code öffnen. Genau das habe ich getan. Also war ich hier mein komplettes neues Projekt. Ich werde das Terminal öffnen und jetzt sicherstellen, dass Sie auf dem richtigen Weg sind, um dieses Projekt zu starten. Also werde ich hier drin PWD machen. Also bin ich in meinen Entwicklerprojekten unter meinem Benutzerliste TypeScript-Ordner , der dieser ist. Ich werde l's überprüfen. Und ich habe die Knotenmodule package.json und so weiter, was all diese Ordner sind, sind wir an der richtigen Stelle, um unsere Anwendung zu starten. Ich werde einen NPM starten, um loszulegen. Und jetzt sollte ich hier im Browser sehen, ich drücke nur hier. Ja, ich muss das nur tun, weil ich diese anderen Projekte auch laufen lasse. Also, dieser Teil ist wie widersprüchlich. Also öffne ich die auf dem Port 3000 und eins, und das war's. Wir beginnen grundsätzlich von Anfang an. In Ordnung, also lasst uns in unsere Quelle gehen. Wie Sie jetzt sehen können, bevor wir gerade eine React-Anwendung standardmäßig erstellen, hätten wir zum Beispiel diese Ordner hier mit der app.js und so weiter. Nun, anstatt diese Erweiterung von ab.js zu haben, haben wir die Erweiterung von dot TSX, okay? Also lasst uns einfach ein paar Dinge hier löschen, also brauche ich dieses Logo nicht. Ich glaube. Ich werde auch alles in diesen löschen. Also innerhalb dieser Funktion werde ich alles löschen. Ich werde nur vorerst hier reinlegen. Wie TypeScript kenne ich jemanden wie diesen nicht, nur um sicherzustellen, dass wir es sehen können. TypeScript, wir haben hier ein H1. Lassen Sie uns das Logo löschen. Wir brauchen dieses Logo hier auf der linken Seite nicht. Und ich glaube, das war's vorerst. Okay, wenn Sie also in Ihren Browser gehen, sollten Sie hier TypeScript sehen. Alles klar, also was ist der Punkt, den wir hier eigentlich machen, warum sollten wir TypeScript verwenden und so weiter. Dies liegt daran, dass wir nur sicherstellen wollen, dass jede Variable, die wir erstellen, sie einen bestimmten Typ haben. Und dieser Typ wird sich nicht ändern, weil standardmäßig JavaScript, wenn Sie eine Variable wie diese erstellen, zum Beispiel Alter, und Sie werden es gleich 20 setzen. Später könnten Sie diese Variable einfach in 20 als String ändern . Und das ist wirklich keine gute Praxis. Sie möchten sicherstellen, dass, wenn Sie eine Variable erstellen, dieser Typ dieser Variablen in Ihrer gesamten Anwendung konsistent ist. Also, wissen Sie, TypeScript ermöglicht es uns, diese Art von Dingen zu kontrollieren. Und es ermöglicht Ihnen, zum Beispiel zu steuern, in welche Funktionen sie zurückkehren, so weiter. Und, aber wir werden jetzt alles darüber erfahren. Also lassen Sie mich diese einfach löschen. Lassen Sie mich hier das Projekt ansehen. Also wahrscheinlich, was ich tun werde, werde ich die in getrennte Teile zerlegen. Und ich werde nur das Styling für das Ende verlassen, weil ich glaube, dass einige Leute einfach anfangen wollen. Lassen Sie uns also das Styling für das Ende und konzentrieren wir uns hier vor allem darauf. Also lasst uns das machen. Ich muss diese vielleicht in ein paar verschiedenen Videos brechen , weil es vielleicht ein bisschen zu lang sein könnte, oder? Also lasst uns in unsere Rückkehr gehen. Zunächst einmal, und ich möchte ein Formular erstellen. Zunächst einmal, lassen Sie uns hier in der IV. Also diese div hier drin wird eine Art von unserem Container sein. Also werde ich hier ClassName des Containers einfügen. Okay, also haben wir den Klassennamen des Containers. Ich werde in ein H1 setzen wird sagen, reagiert mit TypeScript. Und drinnen werde ich nur ein Formular machen. Okay, also haben wir das Formular. Und jetzt in dieser Form werde ich ein paar Etiketten haben. Also im Grunde, was wir mit diesen Etiketten machen werden, ist das, was Sie hier gesehen haben. Das Zeug, der Name, das Alter, der Job und so weiter. Also für das erste Label, ich werde nur Namen setzen. Ok? Also haben wir den Namen hier drin, und ich werde ein Eingaben setzen. In Ordnung? Und diese Eingabe hier wird mit einer ID sein. Also werde ich hier eine ID einfügen, damit ich auf dieses Etikett klicken und dann diese auswählen kann , so aussehen. Wenn ich auf das Etikett klicke, ist es wie wählen Sie diese, die wir hier haben. Okay, also gebe ich ihm zum Beispiel einen Benutzernamen. Okay, wir haben den Benutzernamen da drin. Wir werden ein bisschen mehr von diesen Parametern setzen. Also werde ich nur zu Stil ist ein bisschen besser. Also wird diese Eingabe hier mit einer Art von Text sein. Als nächstes wollen wir einen Namen haben. Also wird der Name nur hinter uns her sein um diese Werte, die wir hier haben, tatsächlich in den Staat zu speichern. Du könntest ihm einen beliebigen Namen geben, den du willst. Ich werde nur hier Namen eintragen, okay? Und schließlich werden wir einen gewissen Wert haben. Dies wird nur später für uns sein, diesen Wert auch im Zustand zu speichern. Lasst es uns vorerst leer lassen. Also habe ich die bekommen. Ich denke, bis jetzt sind wir alle gut. Verpasse ich etwas? Wir haben das hier. Wir haben das Formular 0. Da war etwas drin. Also lassen Sie mich hier auch ein HTML vier einfügen. Und jetzt wird dies für den Benutzernamen sein. Also, wenn Sie diese HTML4 setzen muss der gleiche Name sein, wie diese ID. Und dann können Sie einfach auf das Etikett klicken. Und es wird wählen, setzen Sie auf Fokus diese Eingabe, die Sie verwenden. Okay, also haben wir das hier. Lassen Sie uns das einfach kopieren, weil wir drei von ihnen haben werden das Gleiche sein. Okay, lassen Sie uns das überschreiben. Also werde ich diese einfach stylen. Dies wird also für Benutzer-E-Mail sein. Dies wird sagen, ist es E-Mail h. Dies ist h, Dies ist h hier drin. Dies wird das ID-Benutzeralter sein. Die Art dieser Eingabe wird eine Zahl sein, weil ich nur unsere Zahlen schreiben möchte. Wenn Sie hier etwas eingeben, wird nicht funktionieren, aber wenn es eine Nummer sein wird, wird es gut sein. Also haben wir das hier. Der Name davon wird h sein, könnte alles sein. Ich werde Alter setzen, Valley war so und wir haben noch ein Etikett. Also diese Etiketten für den Job, okay, also Benutzerjob, wir werden hier reinspringen und wir haben eine Eingabe mit einem Benutzer. Job, der Name wird angeklagt. Und ich glaube, das war's. Das letzte, was wir innerhalb dieses Formulars brauchen, wird eine Schaltfläche sein. Und dieser Button wird mit einer Art von Submit sein. Und was wir hier in dieser Schaltfläche setzen werden, wird nur sagen Benutzer für jetzt hinzufügen. Okay, lassen Sie mich sicherstellen, dass ich Anzeigen Benutzer. Okay, ich denke, wir haben alles, was wir brauchen, richtig. Schauen wir uns unsere Seite an. Lass mich den Zoom vergrößern, damit ihr ein bisschen besser sehen könnt. Im Moment. Wir sollten diesen richtigen Namen, Alter, Job und Benutzer hinzufügen. Alles klar, das sollte es für dieses Video sein. Ich will sie nicht zu lange machen. Also, ja, lass es uns hier runterbrechen. Und wenn wir dann auf die nächste zurückkommen, werden wir anfangen, diese Werte aufzufüllen und sie hier im Zustand zu speichern, die Variablen mit TypeScript zu erstellen und so weiter. Das war's also. In Ordnung, wir sehen uns in der nächsten. 3. Benutzerformular erstellen: Na gut, Leute, willkommen zurück. Also lasst uns hier anfangen zu tun, was wir wollen. Also wollen wir anfangen, hier etwas einzugeben, diese Werte zu greifen und dann etwas mit ihnen zu tun. Alles klar, also lasst uns zuerst hier oben umwandeln, unsere Funktionskomponente, unsere App-Komponente, um mit einigen Reaktionsrichtlinien hier drin zu sein. So reagieren Sie nicht TypeScript. Also werden wir diese Mittel aus einer Funktionsdeklaration ändern. Wir werden diese in eine Pfeilfunktion ändern. Also lasst uns Const machen. Und ich werde in einer Sekunde erklären, was das ist. In Ordnung? Also werden wir hier einen React-Punkt-AFC einbauen. Und das ist so, und wir sollten alles in Ordnung sein, okay, also wenn Sie eine Komponente mit TypeScript erstellen, müssen Sie es mit diesem Doppelpunkt sagen, um zu sagen, okay, das wird eine React-funktionale Komponenten sein. Also, wenn wir TypeScript verwenden, so ist dies der Teil, den wir beginnen, in TypeScript tatsächlich zu berühren. Wie Sie wissen, dass zum Beispiel in JavaScript, wenn Sie eine Variable erstellen, sagen wir Alter. Wenn Sie diese Variable erstellen und sie beispielsweise für 20 als Zahl zuweisen . Später können Sie einfach gehen und sagen, dass Alter gleich 20 ist. Sie können dies tun, weil JavaScript keine Sprache ist, die wie stark typisiert ist, tatsächlich schwach typisiert ist. Das bedeutet also, dass Sie eine Variable erstellen können. Sie müssen hier nicht angeben, welche Art von Datentyp Sie haben. Und später können Sie es einfach ohne Probleme ändern. So können diese viele Probleme in Ihrem Projekt verursachen, besonders wenn Sie in großen, großen Unternehmen arbeiten , wie mit vielen Benutzern, vielen Entwicklern. Und so, wenn Sie eine Variable in mit TypeScript erstellen, Sie haben die Möglichkeit, hier zu gehen und sagen, okay, Was diese Variable, was ist der Typ davon. Ich kann sagen, dass dies die Art einer Zahl ist. Okay, im Moment haben wir gerade diese Art von verrückten Zeilen hier drin, weil er sagt, dass wir sie nie benutzt haben. Wenn ich nur hier drin tun würde, zum Beispiel, ein Konsolenpunktprotokoll von h. ein Konsolenpunktprotokoll von h. Siehst du, das ist weg, weil wir es einfach benutzen. Also habe ich beim Hören dieser Variablen angegeben, als ich erstellt habe , dass dieser Wert mit einer Art von Zahl sein muss. Wenn ich hier reingehen und es als Schnur setzen würde. Okay, sieh mal, jetzt gibt es mir diesen Fehler. gesuchte Typnummer ist dem Typ string nicht zuweisbar. Ok? Dies könnte also eine Möglichkeit sein, wie Sie beispielsweise den Typ dieser Variablen zuweisen können. Eine andere Möglichkeit, die Sie tun könnten, wäre zum Beispiel das Erstellen eines Typs, den Sie für mehrere Variablen verwenden könnten. Also werde ich das nennen, zum Beispiel, Typ. Meine Nummer. Es spielt also keine Rolle, wie der Name du gibst. Es könnte alles sein. Also haben wir einen Typ erstellt, geben ihm einen Namen. Und dann sagen wir, Okay, welche Art von Typ ist dieser, den wir erschaffen wollen? Das ist eine Nummer. Also, wenn wir hier eine Zahl haben, ist dies wie das Schlüsselwort von JavaScript, das Ihnen tatsächlich sagt, schauen Sie, dieser Typ, den Sie 20 Variable übergeben möchten, muss mit einer Art von Zahl sein. Okay, damit ich hier reingehen könnte, lasst uns das einfach loswerden. Anstatt hier die Nummer aufzuschreiben, könnte ich einfach hier reingehen und sagen: Hören Sie, das ist meine Nummer, weil Sie wissen, dass dieser Typ hier oben, den wir erstellt haben, tatsächlich eine Zahl ist, okay? So könntest du die eine oder andere Weise tun, wenn du willst. Du könntest einfach so machen. Ok? Das sollte also ausreichen, damit wir mit dem Rest fortfahren können. Also lass mich das einfach loswerden. Also, jetzt, da wir diese Eingabe hier haben, Lassen Sie uns hier einige onChanges Ereignisse anwenden. So können wir die Werte erfassen, die wir hier haben. Und dann werden wir es in einem Zustand aufbewahren. Also lassen Sie uns diesen Zustand hier schaffen. Lassen Sie uns zunächst ein CONST machen. Wir werden sagen, Users state, zum Beispiel. Und ich werde sagen, setzen Sie Benutzer, setzen Sie den Benutzerstatus. Ok? Das wird also gleich sein, um den Zustand zu verwenden. Und ich werde das jetzt als Objekt festlegen, okay? Wie immer, schau, du hast diesen US-Bundesstaat hier drin, also musst du ihn oben von React importieren. Und das ist alles gut. Was wir jetzt in diesen haben wollen, ist, dass wir einen aktuellen, einen aktuellen Benutzer haben wollen. Ok? Also wollten wir einen aktuellen Benutzer haben, der derjenige sein wird , den wir eintippen werden. Also, wenn wir diese Werte eingeben, wollten wir dies in unserem Zustand speichern, in diesem Teil hier drin. Also hier oben haben wir unseren Staat geschaffen. Das ist der Name unseres Staates. Dies ist eine Funktion, die wir ausführen, wenn wir den Zustand aktualisieren möchten. Und das ist der Wert unseres Staates, okay? Also möchte ich, dass der Wert meines Zustands ein Objekt mit einem Schlüssel des aktuellen Benutzers ist. Dies wird also der aktuelle Benutzer sein, den wir im Moment eingeben. Und was werden dann die Werte dieser bei diesem aktuellen Benutzer sein? Also wollte ich einen Namen haben. Also werde ich die einfach so ausdrücken. Das wird also ein Objekt sein, das ich einen Namen haben möchte. Für jetzt. Ich lege es einfach leer, okay? Dann will ich noch was haben? Ich wollte zum Beispiel einen Job haben. Und es war nicht da ein H Yeah, es gab ein Alter. Also werde ich noch jeden und dann Job reinlegen . Okay, genau so. Also haben wir hier ein Objekt mit Namen, Alter und Job geschaffen. Aber wie wir zuvor mit TypeScript angegeben haben, wann immer wir eine Art von Variablen oder Objekten erstellen und so weiter. Sie müssen angeben, welche Art von Typen Sie hier haben. Denn wer dieses Objekt besitzt, ist eigentlich unser US-Bundesstaat. Nach unserem US-Bundesstaat hier drin. Wir können die hier vorbeibringen. Manche nennen es Krokodil-Zahnspangen. Also könnten wir hier reingehen und einfach vorbeigehen, zum Beispiel wollen wir, dass unser US-Bundesstaat ein Objekt ist, wie Sie sehen können. Und ich möchte, dass dieses Objekt einen aktuellen Benutzerschlüssel hat. Ok? Und dieser aktuelle Benutzer wird einen Namen haben, den ich eine Zeichenfolge sein möchte. Dann haben wir ein H, dass ich eine Schnur sein will. Sagen wir zum Beispiel, wir werden das danach ändern, keine Sorge, denn wir haben es als Nummer da drin gesetzt. Und dann haben wir einen Job, der auch eine Schnur ist. Okay, also geben wir das innerhalb dieses Benutzerstatus weiter. Wir wissen, dass wir einen Blick werfen werden. Wenn Sie den Mauszeiger zeigen, haben Sie ein Objekt mit einem aktuellen Benutzer mit einem Namen, der string, age, also eine Zeichenfolge und einen Job ist, der eine Zeichenfolge ist. Okay, also haben wir alles deklariert. Aber wie Sie hier sehen können, diese Art, die wir in einen Blick setzen, sieht es nicht so toll aus, weil es viel Platz braucht. Also, wann immer wir tatsächlich eine Art von Typen für diese Art von Objekten erstellen wollen , haben sie viele Schlüssel. Wir könnten etwas schaffen, das wir eine Schnittstelle genannt haben. Also werde ich diese Schnittstelle erstellen erscheinen. Um eine Schnittstelle zu erstellen, wird eine Schnittstelle nur eine Möglichkeit für uns sein, wie mehrere Typen für ein Objekt zu erstellen. Also werde ich hier Schnittstelle einfügen, und ich werde sagen, nennen Sie es zum Beispiel, user int, die nur kurz für Schnittstelle ist. Und jetzt will ich, dass das was ist? Das wird ein Objekt sein. Wie Sie sehen können, haben wir das Öffnen und Schließen des Objekts. Und ich werde hier reinbringen, dass das ein Name sein wird, okay? Wird ein Name sein. Dies wird eine Zeichenfolge sein. Dasselbe für das Alter, muss eine Schnur sein. Und dann werde ich den Job setzen, der eine Schnur sein wird. Ok? Also haben wir unsere Schnittstelle erstellt. Denken Sie daran, dass wir nur eine Schnittstelle verwenden, wenn wir versuchen diese Art von Typen an ein Objekt wie dieses zu übergeben. Okay, jetzt in meinem US-Bundesstaat will ich meinen aktuellen Benutzer, das ist dieses Objekt, das wir hier drin haben. Ich möchte, dass dieser aktuelle Benutzer mit dem Typ dieser Schnittstelle ist, die wir gerade erstellt haben. Also, jetzt muss ich nicht all das angeben. Wir haben die Schnittstelle erstellt, und da ist sie. Hören Sie, wir haben unsere Schnittstelle da drin. Wenn Sie also immer noch den Mauszeiger bewegen, haben wir jetzt, dass unser Benutzerstatus ein Objekt mit einem Schlüssel des aktuellen Benutzers ist. Und dieser aktuelle Benutzer hier ist mit dem Typ des Benutzers INT. Sie Benutzer INT ist dieser. Also sind wir alle vorerst gut. Okay, jetzt, da wir das haben, ist das nächste, was ich jetzt tun wollte, tatsächlich anfangen irgendeine Art von OnChange-Werten zu setzen, um unsere Eingaben zu hören. Also lasst uns bei Veränderung hier reingehen. Also, wenn ich etwas ändere, was möchte ich tun? Ich möchte eine Funktion aufrufen, die zum Beispiel bei Änderung genannt wird . Handler, nennen Sie es alles, was Sie wollen. Dies ist nur eine Funktion, die wir ausführen werden, wenn wir etwas in unserer Eingabe eingeben. Also werde ich diese Funktion auf alle meine Eingaben kopieren. Alles klar, jetzt gibt es uns einen Fehler in unserem Browser, weil wir diese Funktionen immer noch nicht erstellt haben. Also lasst uns das machen. Also werde ich hier Const auf Change-Handler tun. Das wird also eine Funktion wie diese sein. Also, was wird diese Funktion tun? Lasst uns einfach nachsehen. Zuallererst möchte ich nur einige Dinge innerhalb dieser Funktion machen und ich möchte nichts von dieser Funktion zurückgeben. Also geben wir TypeScript. Sie können sagen, dass Sie nach Ihrer Klammer, die Sie im Jahr bekommen haben, gehen und einfach hier eine Leere machen können, genau so. Hör zu, du kannst nach der Klammer tun, du machst diesen Doppelpunkt und leerst. Das bedeutet also, dass diese Funktion etwas tun wird, aber er wird nie etwas zurückgeben, wissen Sie, wenn Sie versuchen, etwas wie eine Zahl oder was auch immer zurückzugeben, wird diese Funktion nichts zurückgeben. Es wird nur einen Job machen und dann aufhören und nichts zurückgeben. Also haben wir es hier reingesteckt, leere. Wenn Sie aus irgendeinem Grund diese Funktion tun , die etwas wie zum Beispiel zurückgibt, einen Namen zurückgibt, sagen wir zurück, hallo, sagen wir, es ist angegeben, okay? Diese Funktion wird eine Zeichenfolge zurückgeben, wenn Sie so etwas tun würden. Okay, also lasst uns diese einfach loswerden, weil ich nichts zurückgeben werde. Nun, innerhalb einer Funktion, müssen Sie immer angeben, welche Art von Änderungen oder welche Art von Parametern Sie hier einfügen werden. Nehmen wir an, Sie würden hier einen Namen setzen. Also wäre dies ein Parameter, den Sie angeben müssen, okay, Dieser Parameter, den Sie hier haben, ist welcher Typ? Nehmen wir an, Sie passieren noch einen. Es wäre Alter. Dieser wäre zum Beispiel eine Zahl. Ich weiß es nicht. Sie müssen also innerhalb aller Typen dieser Parameter angeben, die Sie einfügen. Aber das ist nicht das, was wir jetzt wollen. Wir wollen, dass, wenn wir hier ein onchange-Ereignis machen, wir werden diese Funktion ausführen. Und das Einzige, was ich von hier holen möchte, ist das Ereignis. Also wissen Sie, wenn Sie etwas eingeben, gibt es ein Ereignis. So können Sie zum Beispiel den Ereignispunkt-Zielpunkt-Wert tatsächlich greifen . So können wir die Werte aus diesen Eingaben greifen. Also werden wir einfach hier E einbauen, wir könnten jeden Namen setzen, den wir wollen, denn so kannst du die Ereignisse hier drin packen. Du könntest ein Ereignis schreiben oder du könntest einfach E haben, ist wirklich bis zu dir. Nun, wir müssen angeben, dass dieses Ereignis ist, welche Art von Ereignis dieses Ereignis in React mit der Art der Reaktion ist. Also das ist etwas, das Sie wahrscheinlich nur einige schnelle Google-Suche tun müssen, wenn Sie nicht wissen, dass. Also werden wir hier realisieren Änderungsereignis. Ok? Und so ist dies das Ereignis, das wir tun, React Punkt Änderung Ereignis. Und dann müssen wir angeben, okay, In welchen Elementen wir das tun, wird dies auf diesem Element sein, das HTML ist. Und dann haben wir Eingaben, Eingabeelement. Ok? Jetzt, wo wir das haben, sollten wir einfach hier reingehen können. Zum Beispiel, wenn wir etwas tun wie vorstellen Ereignis Punkt, verhindern Standard-Look wird sogar kommen. Wenn wir etwas tun wollen. Moment möchte ich nur eine console.log des Ereignispunkts machen. Schau, wenn ich den Punkt setze, kommt er sogar zu mir. Alles, was wir damit tun können, okay, also hat das Ereignis die Blasen abbrechen, Level ist vertrauenswürdig, und so weiter. Ich wollte dieses eine Punkt-Punkt-Ziel greifen. Wenn ich noch einen Punkt setzen will, schau, jetzt kann ich viele andere Dinge bekommen. Die Sache, die ich ergreifen möchte, ist, dass der Wert höchstwahrscheinlich hier unten auf dem V sein sollte . Ok? Wenn wir also einige Änderungen an diesen Eingaben machen, werden wir Zugriff auf das Ereignis haben, das wir bereits den Typ angeben. Und da wir den Typ dieses Ereignisses angeben, können wir auf all diese Werte zugreifen, ohne nach ihnen suchen zu müssen. Okay, also lassen Sie uns einfach überprüfen, ob das funktioniert. Öffnen wir die Konsole. Gehen wir hier rein. Lass uns eine Konsole machen. Lassen Sie mich die klären. Ich werde nur zum Beispiel, T E L M0 setzen. Und wie Sie sehen können, jedes Mal, wenn wir tippen, etwas auf sich kommt jedes Mal, wenn wir tippen, etwas auf sich, wie das, was Sie dort eingeben, was großartig ist. Okay, also ist das alles gut. Nun, lassen Sie uns einfach speichern diese Werte jetzt, bevor wir beenden dieses Video wird ein bisschen lang. Und lassen Sie uns das einfach unter dem Zustand speichern. Also lasst uns das machen. Um unseren Zustand zu aktualisieren, müssen wir diese Funktion namens set user state ausführen. Also lasst uns das machen. Ich werde den Benutzerstatus festlegen. Das muss also was sein? Muss der aktuelle Benutzer sein , denn das ist das einzige, was wir im Moment da drin haben. Wir haben hier einen aktuellen Benutzer. Und in dem, was ich tun werde, werde nur jeden dieser Werte aktualisieren, wie individuell. Zum Beispiel, wenn ich nur den Namen eintippe, aktualisiere ich nur diesen. Also tue ich es nicht, wenn ich hier zum Beispiel den Namen und dann einen Wert reinstelle, werde ich alle anderen Eigenschaften verlieren. Also muss ich den Rest-Operator verwenden , der der Punkt-Punkt-Punkt ist. Und dann werde ich den Benutzerstatus machen. Das ist also mein Zustand. Ich will in die Punkte hineingehen. Aktueller Benutzer, und ich werde alles greifen, was drin ist. Und dann, okay, ich werde den neuen Wert aktualisieren. Was ist dieser neue Wert, den ich aktualisieren werde? Ich werde hier diese Art von Array setzen. Denn was ich hier drin tun werde, was ich in einer Sekunde erklären werde, die Punkte, Zielpunktwert. Nun ist dies entweder Zielpunktname. Also im Grunde, wenn Sie einen Schlüssel eines Objekts dynamisch wie diesen angeben möchten, ohne zum Beispiel Namen, Alter, Job oder was auch immer angeben zu müssen. Wir sagen, dass Blick, wenn ich diese Eingabe, diese Eingabe, das ist diejenige, wo ich meine Onchange mache. Ich führe meinen Onchange-Handler aus, wenn wir darauf tippen. Ok? Also, das haben wir Zugang zu der Veranstaltung. Und weil wir Zugriff auf die Ereignisse haben, kann ich sagen, okay, Wann immer ich das aktualisieren werde, aktualisiere ich den Zustand, den aktuellen Benutzer. Und hier drin werde ich E Punkt Punkt Punkt Punkt Namen zu greifen. So wird der Ereignispunkt-Zielpunktname dieser Wert sein, den wir hier Namen haben. Also weiß ich, dass auf meinem Zustand erscheinen, ich werde diesen Schlüssel hier aktualisieren, entweder Zielpunktname. So können Sie die Schlüssel dynamisch greifen. Also, jetzt hier drin, werde ich nur E-Punkt-Ziele Punkt-Wert tun. Ok? Also werde ich diesen Schlüssel einfügen, den wir hier drin haben, den Wert, den Sie in dieser Eingabe haben, die Sie gerade einfügen. Okay, also sollte das hier drin gut sein. Jetzt. Ich denke, wir sollten jetzt alle gut sein. Wir sollten alle gut sein. Nun, lasst uns einfach, nachdem wir das getan haben, machen wir das einfach. Und lassen Sie uns einfach eine console.log von diesen des Benutzerstatus machen. Stellen Sie einfach sicher, dass dies console.log von funktioniert. Ich werde dieses hier oben entfernen, damit es den aktuellen Benutzer des Benutzerzustands nicht vervollständigt. Okay, versuchen wir es. Erfrischen Sie sich einfach. Ich werde ein T E L M0 setzen. Und jetzt, okay, hier fehlt etwas. Was wir jetzt vermissen, erinnere ich mich, was wir vermissen ist, dass in unserem Eingabefenster, wie Sie sehen können, wir den Wert der Eingabe so einrichten, dass er die ganze Zeit wie leer ist. Deshalb ist er so, als würde er die ganze Zeit zurücksetzen. Wir wollen, dass dieser Wert, den Sie im Jahr haben, ständig sein wird. Der gleiche Wert, den wir auf dem Staat erscheinen. Also werde ich für diesen Wert der ersten Eingabe setzen, ich möchte sein, was sich innerhalb des Benutzerstatus, des Punkts, des aktuellen Benutzers befindet. Wie Sie sehen können, Punktname, sehen Sie, Sie haben all diese Dinge kommen zu Ihnen wegen TypeScript. Also lasst uns das einfach kopieren. Wir werden das gleiche tun hier jetzt für das H, was auch immer auf dem Staat ist. Und dann das Gleiche hier unten für den Job. Okay, lasst uns das einfach auffrischen. Gehen wir einfach hier rein. Ich werde t L M0 setzen. Und wie Sie sehen können, nachdem ich eingeschaltet habe, kommt alles hier auf der Konsole rein, dass mein Staat h, Nichts, Job, nichts hat. Nennen Sie Thelma. Wenn ich jetzt hier reinlegen werde, zum Beispiel 35. Wie Sie sehen können, haben wir jetzt 35 Jahre alt, nennen Sie Thelma. Und lassen Sie uns einen Job machen. Wo ist sie? Also werden wir zum Beispiel einen Softwareentwickler setzen. Und da ist es. Jetzt greifen wir all diese Werte, die wir wollen, und speichern sie auf dem Staat. Alles klar, das war's für dieses Video wird ein bisschen zu lang. Und dann auf der nächsten, können wir tatsächlich diese Werte, die wir hier drin haben, greifen und sie einfach hier auf der Seite hinzufügen. In Ordnung, also sehe ich dich in der nächsten. 4. Nutzerliste in Browser anzeigen: Alles klar, willkommen zurück. Also jetzt werden wir diese Benutzer hinzufügen, die wir gerade eingegeben haben. Wir werden es zu unserer Seite hinzufügen. Also zuerst haben wir hier ein Formular mit all diesen Eingaben und wir haben eine Schaltfläche mit der Art der Einreichung, die wir hier ein neues Ereignis erstellen wollen, das auf Einreichung sein wird. Also im Grunde diese Ereignisse, onsubmit bedeutet, dass, wenn Sie diesen Knopf hier von Submit drücken, werden Sie alle diese Werte einreichen und etwas tun. Mal sehen, was wir jetzt tun können. Wir werden in hier Funktion namens senden Formular erstellen, wie das. Also lassen Sie uns dieses Formular erstellen. Also lasst uns hier reingehen. Lassen Sie uns tun const Formular einreichen. Alles klar, jetzt wird das das Gleiche hier drin sein. Diese Funktion, wir werden nichts zurückgeben. Also lassen Sie es uns als nichtig angeben. Ordnung? Und dann drinnen werden wir noch eine andere Art von Ereignis haben. Und das Ereignis, das wir hier haben wollen, wenn Sie ein Formular einreichen, es ist ein React-Punkt, der ein ästhetisches Ereignis sieht, das ist das eine. Also, wann immer Sie ein Formular absenden und Sie möchten Zugriff auf das Ereignis, das Sie dort haben. Dieses Ereignis hier wird mit einer Art von Reaktion in diesem Fall sein. Und jetzt, wie Sie wissen, wenn Sie ein Formular einreichen, werden Sie im Grunde dieses Formular auf eine andere Seite oder auf diese Seite selbst senden, und Sie werden die Seite neu laden. Wenn wir das tun, verlieren wir unseren Staat und alles, was wir hier drin haben. Wir wollen also verhindern, dass wir jedes Mal, wenn wir dieses Formular absenden, eine Veranstaltung machen wollen. Und wie Sie sehen können, schauen Sie, das erste Mal, dass ich E dot gemacht habe, gibt sogar die verschiedenen Arten von Optionen auf, die ich mit dieser Art von Ereignis tun kann. Also werde ich hier reinsetzen, dass Punkt verhindern Standard. Ich mache das nur, damit wir verhindern, dass die Seite sich neu lädt. Sie können es versuchen, wenn Sie wollen. Jetzt, wo wir das haben, was ich tun möchte, ist hier oben drinnen, erinnerst du dich daran, wann wir diesen Benutzerstatus mit dem aktuellen Benutzer im Inneren hatten? Ich will, dass der Staat jetzt was hat? Um einen aktuellen Benutzer zu haben, aber auch hier ein alle Benutzer zu haben. Und diese alle Benutzer, die wir hier haben werden, werden ein Array sein , weil es viele dieser Benutzer drin haben wird. Es wird also ein Array mit vielen dieser Benutzer sein. Wie Sie sehen können, haben wir jetzt einige, einige Fehler hier, die uns sagen, dass Blick. Wir haben gesagt, dass unser Benutzerstatus hier, schauen Sie, wir geben den Typ an. Wir sagten, okay, unser Verwendungsstatus wird ein Objekt mit dem Wert des aktuellen Benutzers sein. Und dann wird jeder dieser aktuellen Benutzer mit dem Typ einer Benutzeroberfläche sein, die distaff name, namestring h, string und so weiter ist . In Ordnung, also vermissen wir alle Nutzer. Also könnte ich jetzt hier reingehen und zum Beispiel unsere alle Benutzer setzen und so weiter. Aber das wird jetzt zu lange, ich denke, es ist besser für uns, tatsächlich zu schaffen. Und jetzt diese Schnittstelle, diesmal für unseren Benutzerstatus, okay, ich denke, das ist eine bessere Idee. Also lasst uns das machen. Gehen wir hier rein und machen eine Schnittstelle. Weil wir diese grundsätzlich für ein Objekt erstellen wollten. Und wir werden dies alle Benutzer int wie kurz nur für die Schnittstelle nennen. Ich glaube, ich habe hier oben etwas verpasst. Also, wenn Sie eine Schnittstelle erstellen, müssen Sie diese Kommas nicht wirklich übergeben, Sie müssen nur diese Semikolons übergeben. Also, wenn Sie eine Schnittstelle erstellen, ist nicht wie ein Objekt. So können Sie einfach Name, String, h, String usw. tun , ohne die Kommas übergeben zu müssen. Also erstellen wir diese Schnittstelle für diesen Benutzerstatus. Also im Grunde, was unser Benutzerstatus dort hat, haben wir einen aktuellen Benutzer. Also lasst uns das hier reinlegen. Was ist der Typ dieses aktuellen Benutzers? Wir haben bereits gesagt, Okay, der Typ dieses aktuellen Benutzers ist dieses Objekt, das wir hier drin haben. Okay, also lassen Sie uns sagen, dass dies eine Benutzeroberfläche ist, wie wir es hier oben getan haben. Okay, also für diesen hier sind wir alle gut. Okay, was ist der nächste Wert, den wir innerhalb unseres Benutzerstatus haben? Wir haben alle Benutzer. Also lasst uns das schnappen. Lass es uns hier reinlegen. Und jetzt, tut mir leid, denn wir haben hier ein Array, okay? Wir müssen hier wie dieses Array angeben. Und so ist dies die Art und Weise, wie Sie TypeScript sagen können , dass der Wert, den wir hier haben, ein Array ist. Du sagst, das ist ein Array. Und jetzt mit diesen weniger als, größer als Zeichen dieser Art von Krokodil-Klammern, müssen Sie sagen, Okay, welche Art von Arrays es, welche Art von Dingen werden Sie in dieses Objekt setzen? Die Dinge, die ich in diese Objekte setzen werde, werden Objekte wie diese sein , wird Objekte mit Namen, Alter und Jobs sein. Weil dies wie mehrere Benutzer sein wird, die Sie hineinlegen werden. Ok? Also, wenn das, was wir in dieses Array setzen all das Zeug wie Name, Alter und Objekt sein wird. Wie für Z, werden wir wie mehrere dieser Objekte so setzen. Okay, jedes dieser Objekte, sie haben die Form, sie haben diese Schnittstelle. Also werden wir sagen, okay, diese alle Benutzer, die wir hier haben, werden ein Array sein. Und innerhalb des Arrays werden wir diese Objekte mit dieser Benutzeroberfläche haben. Okay, also sind wir alle gut hier drin. Nun, da wir diese Schnittstelle bereit für unseren Benutzerstatus haben, wenn wir hier unseren US-Bundesstaat angeben. Lassen Sie uns einfach alles löschen, was drin ist, weil es zu viel Platz in Anspruch genommen hat. Und jetzt innerhalb dieses US-Bundesstaates, was ist die Form dieses US-Bundesstaates? Welche Art von Typen sollten wir da drin haben. Diese, alle Benutzerschnittstelle. Lass es uns einfach hier reingehen und schauen, alles funktioniert jetzt gut. Also werden wir sagen, schauen Sie unseren US-Bundesstaat, Benutzerstaat, das Volumen, das wir in den US-Bundesstaat passieren wird, wird eine All-User-Schnittstelle sein. Es bedeutet also, dass dies ein Objekt mit einem aktuellen Benutzer sein wird. Schau, hier ist der aktuelle Benutzer. Die Form dieses aktuellen Benutzers, dieser Typ dieser aktuellen Benutzer wird eine Benutzeroberfläche sein. Schauen Sie mit dem Namen des Zeichenfolgenalters. Das war's. Das ist es, was Sie haben. Und dann haben wir auch alle Benutzer, die ein Array im Moment ist leer, aber es spielt eine Rolle. Also sagen wir, es ist ein Array. Und was auch immer in diesem Array ist, wird diese Art von Benutzeroberflächen sein. Es werden Objekte wie diese sein. Okay, das haben wir schon. Also, jetzt schauen Sie, TypeScript sagt uns sogar einige Fehler hier. Schauen Sie, denn von unserer vorherigen Funktion, dem Onchange-Handler, als wir den Zustand aktualisiert haben, sagen wir, dass, okay, lassen Sie uns den Zustand aktualisieren. Wir würden nur aktuelle Benutzer, aber jetzt haben wir diese hier drin, dass alle Benutzer. Also, was wir tun können, ist, okay, von unserem Benutzerstatus, anstatt nur dies zu übergeben, Lassen Sie uns den Spread-Operator-Benutzerstatus bringen. Und jetzt, was wir von unserem Benutzerstatus mitbringen wollten, wird das Was sonst? Die, oh, ja, wir wollen das nur mitbringen. Wir wollen dies nur den Benutzerstatus bringen. Also im Grunde, wenn Sie sagen, lassen Sie uns den Benutzerstatus bringen, bedeutet das, dass wir all diese bringen werden. Dies ist, was der Spread-Operator tut. Wir werden das alles kopieren. Und dann, okay, wir werden diesen aktuellen Benutzer mit diesem neuen Wert überschreiben. Also im Grunde, wenn Sie das tun , kopieren Sie alle diese hier drin. Also haben wir diesen Wert bereits drin. Und dann sind wir so, als würden wir diese alte durch diesen ersetzen. Okay, also sind wir alle gut hier drin. nun auf unserem Absendeformular Was wollten wirnun auf unserem Absendeformulartun? Also lassen Sie mich einfach sehen, wir haben unser Absenden Formular bekommen und wir wollten unseren Zustand aktualisieren. So setzen Sie den Benutzerstatus. wollen wir vor allem. Führen Sie einen aktuellen Benutzer aus. Also im aktuellen Benutzer, was ich tun werde, ist, wenn ich einen neuen Benutzer hinzufügen werde, ich möchte, dass unsere Werte, die wir in unseren Eingaben haben, zurückgesetzt werden. Also werde ich den Namen leer machen, so. Ich werde auch im Alter leer machen. Und ich werde einen Job so leer machen. Also setzen wir alle Werte vom aktuellen Benutzer im Grunde zurück, so dass die, die Eingabe ist alles weg. Und dann werden wir unsere alle Benutzer aktualisieren. Das ist also ein Array. Und jetzt, was wir in einem Array haben werden, weil wir mehrere Benutzer hinzufügen könnten. Sie möchten immer einen Spread-Operator des Benutzerstatus ausführen. Ups, Benutzer, Status Punkt alle Benutzer. Das bedeutet also, dass Sie, wenn Sie aus irgendeinem Grund bereits mehrere Benutzer hinzugefügt haben, alle Benutzer in diesem Array bereits bringen möchten. Das machen wir also mit dem Spread-Operator. Und dann können Sie Ihre neue hinzufügen. Benutzer Einsätze Punkt aktuellen Benutzer. So Benutzerstatus Punkt aktuellen Benutzer. Also wirst du alle von ihnen greifen, dass sie dann MP4 waren und dann wirst du deine neue hinzufügen. Okay, also glaube ich, dass wir jetzt alle gut sind, lass mich das einfach löschen. Also werde ich hier console.log des Benutzerstatus tun , um zu sehen, ob das tatsächlich funktioniert. Richtig. Also lasst uns die Seite aktualisieren, die ich hier setzen werde. Sag es mir. Ich werde hier 32. Ich werde hier setzen, zum Beispiel, das wird ein Software-Entwickler sein. Und jetzt werde ich Benutzer hinzufügen drücken. Okay, das ist unsere Konsole, die wir haben. Wir haben unsere alle Benutzer und schauen uns das innerhalb unserer alle Benutzer. Wir haben diese Benutzer, nur die mit dem Namen Tom. Oh, 32, Jobname und so weiter. Okay, jetzt ist das alles gut. Lassen Sie uns diese einfach hier in unserer und unserer Seite, damit wir sehen können, dass ihr Wert. So können wir das schnell machen. Wir können dies tun, indem wir diese Variable erstellen. Lassen Sie uns einfach hier gehen und Nachteile für alle Benutzer wird gleich zu unserem Benutzerzustand dot alle Benutzer sein. Und dann machen wir eine Punktkarte. Ordnung, und so im Grunde eine Punkt-Map-Funktion in JavaScript ermöglicht es Ihnen , ein Array zu durchlaufen und dann alles zu tun, was Sie damit tun müssen. Okay, also machen wir hier eine Funktion. Der erste Volume wird der Benutzer sein, den Sie durchlaufen werden. Dies wird der Wert Ihres Arrays sein. Und der zweite wird der Index davon sein. Ok? Die is.na-Funktion hat also Zugriff auf diesen Index, der das erste Mal sein wird, wenn Sie die Schleife ausführen. Der Index ist 0, das zweite Mal ist eins und so weiter. Und der Benutzer wird das Objekt darstellen , das jedes Mal, wenn Sie im Array durchlaufen. Okay, also müssen wir hier drin tun, eigentlich, schau, du müsstest so etwas tun. Dies ist unsere del dot Karte funktioniert, so dass Sie jemals so zurückkehren müssen und dann passieren, was Sie wollen. Aber anstatt eine Dysfunktion mit diesen geschweiften Klammern wie diese zu haben, werde ich sie einfach so durch diese normale Klammer ersetzen. Wenn Sie also diese Art von Klammer haben, bedeutet das, dass wir alles zurückgeben werden, was drin ist, also müssen Sie dieses Schlüsselwort der Rückkehr nicht haben. Also, was ich jetzt hier zurückkehren möchte, wird nur zum Beispiel ein div sein. Das ist genau wie schnell, etwas zu tun. Zum Beispiel wird ein H2 den Benutzernamen haben. Also, weil dies diese Werte darstellen wird. Also haben wir den Namen Agent Job. Also lasst uns das machen. Wo war es? Wo war es hier? Also Benutzername, ich werde das kopieren. Also Benutzername, Benutzeralter und Benutzerjob. In Ordnung, also haben wir all das. Lasst uns hier einen Schlüssel geben. Ok? Dies ist nur react möchte, dass Sie jedem dieser Elemente einen eindeutigen Schlüssel übergeben , wenn Sie sie erstellen. Und das war's. Also lassen Sie uns diese Variable aller Benutzer verwenden. Und lassen Sie uns einfach passieren, dass unsere Form. Also werde ich es hier reinlegen, muss ich die zwischen geschweiften Klammern setzen. Okay, mal sehen, ob das funktioniert. Lassen Sie uns einfach die Seite aktualisieren. Gehen wir hier rein. Sag mir, ich werde 33 setzen. Ich werde hier setzen, dass ein Pilot ist und lassen Sie uns Benutzer hinzufügen drücken. Da ist es, Thermo, dieser und dieser hier. Okay, also sind wir alle gut hier drin. Versuchen wir es einfach noch einmal. Sagen wir David. David wird 35 Jahre alt und wird Softwareentwickler sein. Ich werde auf Hinzufügen drücken, und wie Sie sehen können, fügen wir jeden einzelnen von ihnen hier hinzu. In Ordnung. Also ja, wir sind alle gut hier drin. Also denke ich, das wird es für dieses Video sein. Im nächsten werden wir nur lernen, wie wir tatsächlich hier in jedes dieser Elemente klicken und wie sie löschen können. Also, wenn Sie jeden dieser Benutzer löschen wollen, Ordnung, also das ist es für dieses Video und ich werde Sie im nächsten sehen. 5. Benutzer aus der Liste löschen: In Ordnung, also ist es Zeit, dass wir anfangen, all diese Werte zu löschen, die wir hinzufügen. Also, dafür werde ich hier reingehen und wo wir diese alle Benutzer haben, die wir hier drin haben. Ich werde hier vorbeigehen, wahrscheinlich wie ein Knopf. Und dieser Knopf wird sagen, dass der Hauptbenutzer alles sein könnte. Ich werde es einfach Benutzer löschen nennen. Und ich werde hier ein Ereignis aufklicken setzen. Also, wenn ich auf diese Schaltfläche klicke, möchte ich diesen Benutzer tatsächlich löschen. Also werde ich hier einen Delete-Handler einlegen. Ok? Dies wird unsere Funktion sein, die wir nie ausführen werden, wenn wir diesen Benutzer löschen möchten. Also gehen Jungs hier rein. Lassen Sie uns eine Löschhandler tun. So Tonnen Löschhandler. Dies wird eine Funktion wie diese sein. Und jetzt ist die Sache, ich möchte, dass diese Funktion genau wie diese in unserer Funktion ist. Und ich wollte den Wert des Index übergeben, denn wie Sie sehen können, schauen Sie, wenn wir hier diese Funktion übergeben, okay? Und wir wollen insbesondere den Index dieser Benutzer erfassen, damit wir wissen, welcher Benutzer wir eigentlich sind, welchen Benutzer wir eigentlich löschen möchten. Also diese Funktion hier nimmt diesen Umfang des Index. Also lasst uns hier oben vorbeikommen. Dies wird ein Index sein und der Typ davon wird eine Zahl sein , denn das ist, was wir hier übergeben, ist eine Zahl und diese Funktion gibt nichts zurück. Also lasst uns hier Leere einlegen. Alles klar, was wird diese Funktion tun? Zuallererst werde ich eine neue Variable erstellen, die zum Beispiel const, filter-Benutzer genannt wird . Weil wir sie filtern werden. Und was wir tun werden, sind Benutzer. So Benutzer State dot, alle. Also, Benutzer, warum ist das nicht? Manchmal wird es etwas langsamer, weil ich vergessen habe, das Gleichheitszeichen hier zu setzen. Das ist der Grund. Also haben wir Benutzerstatus, alle Benutzer. Dort wollen wir diese jetzt durchlaufen. Und ich werde hier einen Punktfilter machen. Also im Grunde der Punktfilter, was es tut, ist eine weitere dieser JavaScript-Funktionen, die wir durch ein Rennen schleifen werden. Also jedes Mal, wenn ich das Array meiner alle Benutzer durchlaufen werde. Also, wenn Sie sich daran erinnern, dass alle Benutzer einige Objekte im Inneren haben, wie mit dem Namen, Alter und so weiter. Also werden wir jedes dieser Objekte mit diesem Umfang von Benutzer darstellen. Und dann werde ich diesen Index hier eintragen. Dies wird also der aktuelle Index der Schleife sein, die wir durchlaufen werden. Also werden wir das hier reinlegen, und ich werde Klammern setzen, nicht geschweifte Klammern. Also kann ich diese sofort zurückgeben. Eigentlich, nein, ich werde dieses Mal die geschweiften Klammern hier reinstellen, nur damit ihr sehen könnt, dass ihr auf die eine oder andere Weise tun könnt. Ok? Also, wenn Sie diese geschweiften Klammern setzen, wie wir es getan haben, müssen wir implizit hierher kommen und einfach zurückkehren, was Sie zurückkehren wollen. Okay, hier werden wir was zurückgeben? Also werden wir alle Werte des Staates durchlaufen und wir wollen nur die Benutzer, die den Index zurückgeben. Also, wenn Sie sich erinnern, dieser Index hier ist von dem Benutzer hier unten, auf den Sie geklickt haben. Sie möchten nur den Benutzer zurückgeben. Wenn sich der Index, den Sie hier unten klicken, von diesem Index aller Benutzer unterscheidet , die Sie gerade wie Schleife versuchen. Also im Grunde, was wir tun, ist wie vorstellen, dass ich auf den ersten Benutzer klicke. Dies ist der Benutzer 0, weil dies die Art und Weise ist, wie sie indizieren, zählt von 012, wie ein Array. Stellen Sie sich also vor, Sie klicken auf den Benutzer 0. Wenn wir diese gefilterten Benutzer betreiben, werden wir sagen: Okay, dieses Mal durchlaufe ich alle Benutzer. Ich durchlaufe die erste, die 0 ist mein Index. Das hier klicke ich hier unten. Dieser ist die 0. Ok? Also geben wir hier ein 0 ist 0. Die Vorderseite. Dann sind diese KI, die 0 sein wird, nein, sie sind nicht anders, sie sind die gleichen. Es bedeutet also, dass diese First-Person, auf die wir klicken, entfernt werden und wir alle anderen zurückgeben werden, weil der Index für die anderen anders sein wird. Das ist also, was Sie mit einer Filterfunktion tun können. Und jetzt, da wir hier, unsere Benutzer, filtern , können wir nur den Zustand aktualisieren. Also werde ich hier den Benutzerzellenstatus setzen. Und ich werde den Punkt-Punkt-Punkt setzen. Wir müssen den Benutzerstatus ergreifen, was auch immer vorher da drin war. Und dieses Mal, was wir tun können, ist, dass wir alle Benutzer tun. Das ist es, was in unserem Staat ist. Und der neue Wert wird sein, was hier in den Filter-Benutzern ist. Also werde ich versuchen, ein bisschen schneller zu erklären. Bevor ich mich also mit Jungs bewege, Sie daran, dass, wenn Sie den Punktfilter machen, was es tut, ein neues Array erstellen wird, das hier basiert, dieser variable Filterbenutzer ein neues Array sein wird. Und wenn Sie durch all diese Werte filtern, denken Sie daran, dass auf einer Bedingung wahr oder falsch basieren muss. So funktioniert die Filterfunktion. Und wenn Sie zum Beispiel für den ersten Benutzer schleifen , überprüfen Sie den Index, den Sie hier unten klicken. Anders als der aktuelle Index dieser Schleife. Wenn sie die gleichen sind, was sie beim ersten Mal aussehen werden Sie hier setzen , ist 0, die Sie hier unten klicken, anders als 0, was die erste Schleife ist. Nein, das ist nicht wahr. Es bedeutet also, dass dieser Benutzer hier nicht an das, an dieses Array übergeben wird. Dann, wenn Sie zum zweiten Benutzer gehen, was wir tun werden, ist wie Schauen, klicken Sie auf diesen Benutzer, ist immer noch das Gleiche. Klicken Sie auf den ersten Benutzer mit dem Index 0. Wir gehen hier rein. Auf der zweiten Schleife. Der Index ist eins. Also werden wir sagen, dass dieser Index, auf dem wir von hier oben angeklickt haben, sich von einem unterscheidet. Ja. Okay, also wirst du zum Beispiel den zweiten Benutzer zurückkehren . Ich weiß nicht, was es da drin war. Und genau so. Ordnung. Ich bin mir sicher, dass ihr all diese Sachen schon kennt. Ich wollte nur ein bisschen mehr erklären. Alles klar, jetzt, da wir hier den eingestellten Benutzerstatus haben, sollten wir jetzt in der Lage sein, den Benutzer zu löschen, auf den wir klicken. In Ordnung, lassen Sie mich, haben wir schon hier drin. Suchen Sie nach, Ich werde auf diesen ersten Benutzer klicken. Ich werde auf die späten USA klicken, es ist weg. Ich werde auf den zweiten Benutzer klicken und es ist weg. Und ich denke, dass Sitze, und ich denke, das ist es wirklich, was wir hier drin haben. Jetzt. Das Einzige, was ich jetzt tun werde, gibt es jetzt zwei zusätzliche Schritte, um dieses Projekt zu beenden, was sein wird, und wir könnten versuchen, diese etwas mehr zu entkoppeln. Wir werden versuchen, diese Dinge, die wir hier drin haben, diese alle Benutzer und so weiter zu bewegen . Vielleicht könnten wir diese in ihre eigene Komponente umwandeln, denn im Moment tun wir alles in einer Komponente ist nicht wie eine wirklich gute Idee. Also im nächsten Video, Lassen Sie uns einfach versuchen, diese ein bisschen mehr in eine andere Komponente zu trennen und so weiter. Und dann das letzte Video, wir werden nur mögen, stylen alles, um es schön zu machen, wenn Sie wollen. Alles klar, das war's. Wir sehen uns im nächsten. 6. Refactor und Optimieren von Code: Alles klar, Willkommen zurück. Beginnen wir also mit diesen Refactor unseres Projekts. Also lassen Sie uns in unseren Quellordner gehen und ich werde einen Ordner namens Komponenten erstellen. Dies könnte also sein, wenn Sie wie mehrere Komponenten erstellen möchten und so weiter. Also, was ich hier tun werde, ist, dass ich eine neue Datei erstellen werde, eine neue Komponente namens user.email ASX. Denken Sie daran, dass wir TypeScript verwenden, also müssen Sie diese Erweiterung setzen und ich werde nur für jetzt auch einen Benutzer-Punkt-CSS erstellen . Das sollte also alles gut sein. Nun, lassen Sie uns einfach hier diese Projekte erstellen. Also, jetzt werde ich importieren. Ich werde React von React importieren. Ok? Ich werde den Punktschrägstrich Benutzer dot CSS importieren. Dies muss ein Großbuchstabe sein, da dies der Name der Datei ist. Okay, wir haben das alles. Lassen Sie uns nun die Komponente erstellen. Lassen Sie uns const Benutzer tun. Und das wird ein reagiert Punkte f, c, okay ? Dies wird also eine React funktionale Komponenten sein. Und ich werde das hier so reinbringen. Also, jetzt, da wir unsere React-funktionalen Komponenten erstellt haben und wir werden Insider-Rückkehr haben. Und was wir hier zurückkehren wollen. Ich werde einen Diff mit einem Klassennamen haben. Ich werde hier nur einige Klassennamen eintragen, die wir anwenden werden , weil wir auf dem nächsten Video tatsächlich Stil sie mögen. Also werde ich nur die Klassen jetzt für jetzt und dann können wir den Rest machen. Also hier drin werde ich ein div mit einem Klassennamen der Zeile haben. Genau so. Und, und Einblicke, ich werde ein H2 haben, das wir nennen, okay? Und dann ein Absatz, den wir den Namen haben werden, zum Beispiel John oder was auch immer. Okay, also haben wir diesen einen Namen und dann John, und dann machen wir eine horizontale Regel wie diese. Ich denke, das muss hier drin sein. Okay, stellen wir sicher, dass wir den Code gut organisieren. Okay, sieh mal, wir haben diese Karten. Wir haben eine Reihe mit diesem hier. Wir haben eine horizontale Regel, um wie eine Teilung zu schaffen. Und dann werde ich noch eine Reihe setzen, lassen Sie mich diese einfach kopieren. Und dann werde ich die auch passieren. Ich denke, es wird sehr ähnlich sein, was wir tun. Ja. Also werde ich diese noch einmal kopieren. So wie das. Das wird also sein, oder? Und ich werde hier reinlegen, zum Beispiel 23. Und ich werde hier hinlegen, das ist H, und das ist John. Okay, das wird also ein Fahrer sein. Das braucht das nicht. Und schließlich brauchen wir nur einen Knopf. Und wir werden brauchen, dass dieser Klassenname Kapital sein muss. Und wir werden hier setzen Lösch-Button. Und wir werden sagen, Benutzer löschen könnte alles sein. In Ordnung, also haben wir unsere Komponenten hier drin. Also im Grunde werden wir nur das Zeug entfernen, das wir in der anderen App-Komponente hatten. Also lassen Sie uns einfach einen Export unseres Benutzers machen. Okay, also lasst uns genau das machen. Exportvorgabe. Exportieren Sie Standardwerte Benutzer einfach so. Alles klar, also ist alles gut. Ich denke, wir sind alle gut hier drin. Wir haben einen Import React. Das ist besser. Ich glaube, da war ein Tippfehler. Okay, also gehen wir zurück in unsere App dot TSX, wo wir unsere alten Benutzer haben. Nun, wir wollen dieses Zeug nicht die ganze Zeit haben, diese Art von Div hier drin, weil wir im Grunde nur unsere eigene Komponente erstellt haben. Okay, also lasst uns das machen. Lassen Sie uns das einfach auskommentieren. Und was werden wir zurückkehren, wenn wir alle Benutzer aus dem Staat durchlaufen. Was wir tun werden, ist, dass wir unsere Benutzerkomponente haben. Nun, offensichtlich, wenn wir diese Benutzerkomponente hier drin haben, müssen wir sie oben importieren, weil wir sie nie importiert haben. Also lasst uns das importieren. Lassen Sie uns importieren. Ich werde sagen, Benutzer. Ich brauche die geschweiften Klammern nicht, weil wir Standard exportiert haben. Wann immer Sie den Standardwert exportieren, müssen Sie diese geschweiften Klammern nicht umlegen. Woher wollen wir das also exportieren? Ich werde Punkt Schrägstrich setzen, damit wir auf der gleichen Ebene des Verzeichnisses suchen können. Wir wollen innerhalb der Komponenten gehen und wir wollen unsere Benutzer dot TSX Datei greifen. Sie können einfach Punkt-Benutzer tun. Diese Reaktion wird verstehen, dass das die Datei ist, die Sie versuchen zu greifen. Okay, wir haben den Benutzer. Nun, hier ist die Sache. Was ist meine Schleife? Während die Schleife hier drin ist. Jetzt innerhalb dieser Komponente, dies ist, wo wir tatsächlich beginnen müssen, um die Werte zu übergeben, die Sie ergreifen müssen. Also die Werte, die ich passieren werde. Das sind also Grundlagen von React, aber ich sage es dir. Also müssen wir einige Eigenschaften innerhalb dieser Komponenten übergeben , damit wir sie dann mit den Requisiten nach innen greifen können. Also werde ich hier reinlegen, eine Eigenschaft des Namens erstellen. Und der Wert davon wird der Benutzer sein. Punktname von unserer Schleife, die wir hier drin gemacht haben. Genau so. So schaffen wir dies, schaffen wir eine andere, die das H und andere Eigenschaft sein wird, die der Benutzer dot h sein wird. Und schließlich werde ich eine passieren, die der Sprung sein wird. Und das wird der Benutzer Dot Job sein. Nun, es gibt hier ein Problem, Leute, was im Moment ist, als wir unsere Komponente, unseren Benutzer, erstellt haben, haben wir nie angegeben, welche Art von Eigenschaften wir hineingehen werden. Wir haben nie angegeben, welche Art von Typen wir hier haben. Also müssen wir das tun. Alles klar, in unserer user.email ESX müssen wir hier angeben, okay, Sie könnten hier zum Beispiel Eingabeaufforderungen wie diese übergeben, weil Sie so all diese Eigenschaften greifen. So würden Sie zum Beispiel Requisiten Punktnamen, Requisiten Punkt-Requisiten, Punkt-Job usw. Mit diesem. Oder du könntest jetzt hier reingehen. Und anstatt die Requisiten zu haben, können Sie diese dieses Objekt strukturieren und diese Werte sofort wie diese schnappen, wie Name At Age und was war es sonst noch? Der Name, das Alter und die Arbeit. Nun, offensichtlich, im Moment, wissen wir nichts über diese Werte. Wir haben nie den Typ davon angegeben. Also, was wir hier tun können, um den Typ dieses angeben, Lassen Sie uns zurück in unsere app.js x gehen und erinnern Sie sich, als wir diese Schnittstelle für, wie ein Benutzer aussehen sollte, wie mit der Zeichenfolge, Alter, Job und -Zeichenfolge. Lassen Sie uns einfach diese Schnittstelle ausschneiden. Farbe. Lassen Sie uns einfach auswählen, schneiden Sie es von hier aus. Gehen wir zu unserer Benutzeroberfläche, unseren Benutzerkomponenten. Fügen wir es hier ein. Und jetzt können wir sagen, schauen, diese Komponenten, die wir erstellen, die eine React funktionale Komponente ist. Lassen Sie uns hier diese Art von Winkelklammern setzen. Und wir werden sagen, okay, diese Werte, die wir hier haben, den Namen, Alter und die Arbeit, sie müssen diese Form dieser Schnittstelle haben, okay, so. Okay, denn sieh mal, ich könnte das einfach von hier entfernen und einfach hier reinkommen. Schau, das ist eine Zeichenfolge und das könnten wir möglicherweise tun, aber wir können hier einfach vorbeigehen, was sind die Werte, die wir in uns übergeben werden? Also lassen Sie uns Benutzer int machen, übergeben Sie es hier, und wir sind alle gut. Okay, also benutzen wir alles, was wir brauchen. Nun, es gibt ein Problem, denn wenn Sie sich hier erinnern, als wir unsere Schnittstelle für den Staat erstellt , sagten wir, okay, der aktuelle Benutzer wird eine Benutzeroberfläche haben. Aber jetzt haben wir das hier nicht. Wir haben es nicht. Also, weil wir es nicht haben. Diese Schnittstelle, die wir hier haben, die wir speziell für diese Komponente verwenden, können wir sie tatsächlich exportieren, okay? So können wir diese Schnittstelle exportieren. So können wir es dann in der app.js exe-Datei verwenden. Also lasst uns das machen. Ich werde importieren. Und jetzt werde ich diese hier so reinstellen, sollte es gut gehen. Ja, ich werde Benutzer setzen. Eigentlich werde ich das greifen weil wir bereits etwas aus dieser Datei importieren. Also lasst uns das machen. So Benutzer int. Also verwende ich diese Winkelhalterung, diese geschweiften Klammern, weil wir sie gerade exportieren. Nicht standardmäßig. Standardmäßig ist die Komponente selbst aussehen. Die Komponente selbst ist standardmäßig, dass Sie keine geschweiften Klammern benötigen und diese ist nur Export. Müssen die geschweiften Klammern passieren. Alles klar, jetzt, da wir die Benutzeroberfläche jetzt haben, wird hier richtig verwendet. Das ist beängstigend, dass diese wichtigen, die ich hatte, einfach absagen. Ok. Also sind wir jetzt alle gut mit all den. Fehlt uns irgendetwas? Lassen Sie mich einfach mal nachsehen. Ja, wir vermissen jetzt etwas. Wir vermissen jetzt etwas, das im Grunde ist jetzt dieser Button, wenn wir darauf klicken, im Moment ist nichts zu tun. Lassen Sie mich das einfach löschen. Also schauen wir, eigentlich sehen wir nicht einmal, dass wir nicht einmal sehen, wir sehen, wir sehen den Namen, wir sehen das Alter und das Löschen. Ein Blick, wenn Sie hier auf das Löschen klicken, passiert nichts. Okay, also müssen wir diese Funktion hier unten übergeben. Also lasst uns das machen. Also, wo schleifen wir uns durch? Wo schleifen wir hier durch? Lassen Sie uns auch den Schlüssel übergeben. Wenn ihr euch erinnert, müssen wir immer nur einen Schlüssel übergeben, nur um sicherzustellen , dass sich das nicht darüber beschwert. Also das ist das Ich und wir müssen hier übergeben, dann die Löschfunktion im Grunde. Also lass mich mal sehen. Ich werde diese in verschiedene Zeilen aufteilen, damit wir das besser sehen können. Sie können das auch aufschlüsseln, wenn Sie wollen. Damit du besser sehen kannst. Also werde ich hier den Löschbenutzer setzen. Das wird der Name meiner Requisite sein. Und was wir hier drin machen, ist genau so, wie wir es hier oben getan haben, ist dasselbe. Okay, Delete Handler I. So wie Sie in unserem Benutzer sehen können, spezifizieren wir diese Schnittstelle, die einen Namen, Alter und Job hat. Aber wir geben diese Funktion des Löschbenutzers nie an. Okay, sieh dir unseren Schnittstellennamen an, Alter, Job, aber wir haben nie den Löschbenutzer angegeben. Also, weil wir diese Eigenschaft übergeben, löschen Sie Benutzer. Also lassen Sie uns hier reingehen, setzen Benutzer löschen. Diese müssen mit einem Typ einer Funktion sein, die nichts zurückgibt. So geben Sie den Typ einer Funktion an, die nichts zurückgibt. Wenn diese Funktion eine Zeichenfolge zurückgibt, würde sie zum Beispiel so etwas setzen. Wenn Sie hier beispielsweise eine Eigenschaft wie Farbe übergeben würden, würde sie so etwas wie diese Zeichenfolge übergeben. Also lassen Sie mich das einfach entfernen, weil wir nicht brauchen, ich versuche nur, diesen Teil zu erklären. Also werde ich nichtig werden. Also jetzt sollten wir in der Lage sein, wenn wir auf diese Schaltflächen klicken. Also werde ich auf Klick setzen onclick. Wir werden die Funktion ausführen, die wir importieren müssen aus erscheinen, das ist, dass der Lead, der Lead-Benutzer. Okay, also lasst uns das onclick schnappen. Lassen Sie uns das laufen. Und ich glaube, das war's. Vermisse ich etwas? Eigenschaft fehlt der Lead zum Benutzer. Ja. Also hier oben, der aktuelle Benutzer, den wir hier oben gesagt haben, ist eine Benutzeroberfläche. Es bedeutet also, dass wir diese Funktion auch darin vermissen. Wir müssen es passieren. Also lasst uns das machen. Lass uns genau wie eine Funktion machen. Das ist also der Hauptbenutzer. Und diese Funktion wird nur eine Funktion sein , die nichts wie ein, ein leeres Objekt zurückgibt. Das ist in Ordnung. Also eine Sache, die wir alles haben. Also mal sehen, Eigenschaft löschen Benutzer fehlt ein Typ, aber im Benutzer erforderlich. Was habe ich hier reingelegt? Also haben wir den Hauptbenutzer. Wir haben den Hauptbenutzer. Also, was fehlt es? Linie 39. So aktuelle Benutzereigenschaft löschen Benutzer fehlt Typ, Name Zeichenfolge, h, Jobs Zeichenfolge. Also haben wir all das, oder? Dies ist, wenn wir den Zustand aktualisieren. Also, wenn wir den Zustand aktualisieren, wie wir alles auf dem Absenden Formular zurücksetzen. Wir müssen auch wie eine leere Funktion übergeben. Weil wir zurücksetzen, müssen wir alles in das setzen. So einfach wie das. Also der Lead-Benutzer, eine Funktion, die nichts zurückgibt. Okay, also sollten wir alles gut sein. Ich denke, wir sind jetzt alle gut, lasst uns einfach die Sachen löschen, die wir nicht mehr brauchen. Ich denke, wir sind alle gut. Versuchen wir es mal. Ich werde Talmud setzen, ich werde das Alter setzen. Ich werde setzen Software-Entwickler sind Benutzer, löschen Benutzer und wir sind alle gut. Okay, lassen Sie mich einfach hinzufügen, das wird Piloten sein und ich werde einen anderen Benutzer hinzufügen, der Peter sein wird. Das Alter wird 18 Jahre alt und er ist ein Künstler. Okay, fügen wir den Benutzer hinzu. Lassen Sie mich gerade in den Lead-Benutzer oder so etwas klicken. Also lass uns einfach den Deckel machen. Das war's. Löschen, das war's. Okay, nur noch eine Sache, die ich gerne abdecken würde, bevor wir dieses Video beenden, das wäre, du kannst tatsächlich, weißt du, wenn du all diese verschiedenen Formen von Feldern spezifiziert, könnte man möglicherweise einige passieren, zum Beispiel das h, das wir hier als optionales Feld haben. Ok? Also, wenn Sie hier dieses Fragezeichen nach dieser Art von Typ übergeben, den Sie sagen. Es bedeutet also, dass Sie ein Objekt mit all diesen Werten für ähneln wie Name, Alter, Job und so weiter erstellen können . Standardmäßig werden Sie alle diese Werte benötigen. Aber wenn Sie hier hineingehen, wird diese Art von Fragezeichen wie optional der Wert sein, okay? Da wir diese so haben, könnte es jetzt einige Dinge geben, die wir aktualisieren müssen. Also diese hier, zum Beispiel hier oben, diese aus dem Alter, was wir tun wollen, ist, wenn das Alter definiert ist, okay, also werde ich ein Ende machen. Und jetzt werde ich hier Klammern setzen. Also können wir das einfach so machen. Also, wenn wir dem H etwas fehlt, ja, ich muss es nur so ausdrücken und es sollte uns gut gehen. Das ist also das Elternteil. Warum funktioniert das nicht? Weil ich diese geschweiften Klammern schließen muss. Also ich sage hier ist, dass, wenn wir ein H haben, Wir wollen diesen Teil hier zeigen, diese Zeile, die das Alter sagt und so weiter. Wenn nicht, zeigen wir es nicht. Mal sehen, ob mir jetzt noch etwas von hier fehlt. Ich denke, wir sollten alle gut sein. Also sollte das genau wie optional sein, oder? Versuchen wir es noch einmal. Ich werde hier ohne das H passieren, ich werde Software-Entwickler an Benutzer setzen. Also sieh mal, wir haben Namen und Job. Das erforderte also nicht. Eine andere Sache, die ich passieren möchte, bevor ich vergesse, ist, dass ich in den Foren alle diese Formulare erforderlich setzen möchte. Dies ist also ein HTML-Attribute, die Sie in die Foren wie diese übergeben können erforderlich, dass im Grunde, wenn Sie versuchen, dies einzureichen, wird es erfordern, dass Sie es setzen Ich werde nicht auf das Alter setzen, weil das Alter optional ist. Aber schauen Sie, wenn Sie versuchen, dies einzureichen, erfordert es einen gewissen Wert. Wie Sie sehen können, schauen Sie, jetzt beschwert es sich nur über diesen. In Ordnung. Das war's also. Ich setze hier nur Dienste sein Julius. Dies wird das Alter 45 sein und das wird ein Maler und seltsam sein. Also war dieser Benutzer ohne Alter, und das ist mit dem Alter. Und wir können sie löschen. Perfekt. Okay, also sind wir bis zum Ende dieses Projekts gekommen, Leute. Ich werde nur noch ein Video machen, nur um diese zu stylen, weil dies möglicherweise ein gutes Projekt sein könnte , um auf Ihrer Portfolio-Website zu setzen oder was auch immer Sie mit diesen wirklich tun wollen. Dies ist genau wie für Sie, um ein bisschen mehr über TypeScript zu lernen und zu reagieren und so weiter. Also das nächste Video, das das letzte ist, das Sie nicht tun müssen, ist nur optional. Aber wenn Sie möchten, dass diese Anwendung sieht schön, Lassen Sie es uns einfach tun. In Ordnung, also sehe ich dich im letzten Video. 7. CSS-Styling hinzufügen: In Ordnung, also willkommen zurück. Also lasst uns das machen. Lasst uns genau anfangen, diese zu stylen. Das sollte jetzt nicht allzu lange dauern. Das erste, was ich hier machen werde, ist, dass ich ein paar Stylings hier auf der Seite habe, also werde ich sie einfach schnappen und du kannst einfach mitverfolgen. Also werde ich alles löschen, was ich in meiner App dot css bekommen habe. Und das erste, was ich tun werde, ist auf den Hintergrund anzuwenden, diese Art von grüner Farbe. Alles klar, damit ich das hier drin sogar loswerden kann. Also haben wir das hier drin. Jetzt auf meiner App dot TSX. Also meine Hauptkomponente, ich habe diesen Klassennamen des Containers. Also, was ich da drinnen machen will, ist, dass ich das einfach kopiere. Sie können einfach im Grunde, Ich werde nicht wie tippen Sie es jeder von ihnen weil Sie einfach das Video pausieren und es einfach kopieren können. Also haben wir einen Container mit diesem max-Breite Marge 0 auto und so weiter. Also wird es nur diese Dinge hier auf der Seite zentrieren. Dann werde ich mein H1 auf der Seite ausrichten. Also hatten wir diese H1 mit einem Titel. Also richten Sie es einfach hier auf der Seite aus. Und dann haben wir ein paar Karten wie diese. Habe ich etwas vermisst? Ich glaube, ich hatte die Karte irgendwo hier drin. Lassen Sie mich einfach mal nachsehen. Also auf meiner app.js x, lassen Sie mich einfach überprüfen. Wir haben erwischt, dass wir unsere vier haben. Ja, meine Form. Ich möchte ihm einen Klassennamen der Karte übergeben. Ok. Und was das tut, ist in unserer Form, geben Sie ihm einfach diese schöne Hintergrundfarbe von Weiß mit dieser Art von Grenzradius und so weiter. Das haben wir getan. Okay, was fehlt uns jetzt noch? Wir wollten das Etikett innerhalb unseres Formulars ansprechen. Also werde ich hier drin tun, Auto das Etikett. Und wir wollen auch die Eingänge anvisieren , nur um ihm auch ein schönes Styling zu geben. Okay, Karteneingang. Schließlich haben wir den Submit-Button. Das ist das letzte, das wir einfach auswählen müssen. Also werde ich es mir einfach schnappen. Ich gehe einfach hier rein, kopiere es. Und es ist nur ein einfaches zum Schweigen gebracht. In diesem Video geht es wirklich nicht darum. Also werde ich die Taste Stadt n. Also Klassenname von so ordentlich BTN übergeben . Okay, also nur um ein bisschen besser auszusehen, als nur meinen Zoom zurückzusetzen, den ich auf der Seite hatte. Das sieht also alles besser aus. Also, wenn ich hier reinlegen würde, so ist das die Jobanzeige. Schau, die von selbst sehen jetzt nur viel besser aus. Also werden wir nur vermisst, wenn ich mich nicht irre, die diese. Okay, also lasst uns das machen. Gehen wir hier rein. Ich werde mein CSS machen, das ich dafür brauche. Also haben wir, lassen Sie uns in den Benutzer TSX gehen. Lassen Sie mich nur sehen, habe ich einen Benutzercontainer da drin? Das habe ich im Moment nicht, nein. Richtig. Also lasst uns das machen. Lass uns das machen. Ich werde mir nur eine Reihe schnappen, die sie hier drin haben. Lasst uns die Reihe hier reinlegen. Das ist es, was wir brauchen. Wir wollen innerhalb der Reihe und der H2 als auch greifen. Okay, also haben wir das hier. Also haben wir unsere Reihen, wir haben unsere H2S. Wir wollen jetzt auf die Absätze abzielen, was dieser ist. Also lassen Sie uns etwas Styling hinzufügen, einige Marge zehn. Und schließlich werden wir nur den Knopf stylen. Also lasst uns das machen. Kopieren Sie das. Geh hier rein. Und wir sollten okay sein. Da ist es. Hören Sie, ich werde nur einen anderen Benutzer übergeben. Das wird also sein, sagen Sie mir, das wird das Alter sein, und das wird der Pilot sein. Hoppla, ich werde diesen hinzufügen. Also Peter, Alter, ich werde NEH nicht setzen und ich werde hier reinbringen, das wird ein Arzt sein. Also Dr. fügen Sie Benutzer hinzu und da ist es. Hören Sie, Sie waren alle Benutzer. Dieser ist optional für die H. Ich kann alles löschen und hinzufügen. Alles klar, wir sind bis zum Ende dieses Projekts mit React und TypeScript gekommen. Also natürlich war es nicht wie ein umfangreiches wo Sie alles verwenden können, was Sie mit TypeScript tun können, aber ich denke, ist ein gutes Projekt für Sie, um einfach zu beginnen zu sehen, wie Sie TypeScript verwenden können und einfach ein bisschen vertrauter werden. In Ordnung, also hoffe ich, dass Sie diesen Kurs genießen und wir sehen uns im nächsten. 8. Endgültige Korrekturen: Oder ich kann so, bevor wir diese endlich fertig sind, gibt es nur eine kleine Sache, die wir hier hinzufügen müssen, weil sonst wir hier keine dynamischen Werte sehen werden. Also, wenn ich hier zwei verschiedene Benutzer hinzufüge, wie Sie sehen werden. Also, wenn ich zum Beispiel hinzufügen, John, 25, Software-Entwickler, Luke wird kommen John, Alter 23 und Fahrer, wir haben das nicht gesagt. Und wenn wir versuchen, einen anderen Benutzer hinzuzufügen, zum Beispiel, wie Peter, und das wird 18 sein und der Job wird ein Pilot-Look sein, was passieren wird. Es kommt die ganze Zeit, die gleichen Werte. Also wollen wir das nicht. Wir wollen wirklich hier in unsere Benutzerkomponenten, den Namen, das Alter und den Job, der hier von den Requisiten kommt, setzen. Also lasst uns diese schnell aktualisieren, wo wir John haben, wir wollen nicht, dass diese Werte ständig gleich sind. Aber jetzt lasst uns geschweifte Klammern setzen und uns den Namen injizieren. Also lasst uns hier unten den Namen geben, wo wir haben, wenn wir etwas Alter haben, wollten wir eine Agentenseite passieren, die nicht 23 sein wird, aber er wird das Alterseigentum selbst sein. Und schließlich dann hier unten, wo wir Job haben, Lasst uns nicht nur Fahrer setzen. Nun, lasst uns hier den Job selbst einbringen, der aus diesen Eigenschaften hierher kommen sollte. Okay, mit diesen, jetzt, unsere Projekte sollten komplett abgeschlossen sein. Lassen Sie uns nun die Seite aktualisieren und versuchen Sie es, sicherzustellen, dass sie funktioniert. Also werde ich John sagen, ich werde zum Beispiel 28 setzen. Und das wird ein Softwareentwickler sein. Ich werde auf Benutzer hinzufügen klicken. Und wie Sie sehen können, John, jeder Hilfs-Softwareentwickler. Also werde ich nur einen jetzt einen neuen Namen setzen. Ich werde nur zum Beispiel Jessica sagen. Und das Alter wird 20 und der Job wird sein, zum Beispiel, Krankenschwester, ich werde auf Benutzer hinzufügen klicken. Und dann haben wir Jessica 20 und sie ist Krankenschwester. Lassen Sie uns versuchen, einen der Benutzer zu löschen. Stellen Sie sicher, dass dies funktioniert. Versuchen wir es mit John, und das sind Jungs. Jetzt ist unsere Anwendung komplett fertig, unser Projekt ist komplett fertig. Also hoffe ich wirklich, dass ihr das genossen habt und ich werde euch im nächsten sehen.