Lerne zu reagieren indem du ein Spiel machst (Ausgabe 2024)

1. Trailer zum Kurs: Hallo Leute, und willkommen bei Discourse. Das Ziel dieses Reactjs-Kurses ist es, Ihnen die Tools und Konzepte vorzustellen, die Sie benötigen, um mit der Erstellung echter Webanwendungen zu beginnen Ich bin Daniel und werde dein Lehrer sein. Ich mache jetzt seit mehr als 18 Jahren Webentwicklung , sowohl in großen als auch in kleinen Organisationen, und ich liebe es immer noch. Sie können mehr über mich auf meiner Website GScrafto lesen. Ich habe angefangen, Programmieren zu lernen, indem ich versucht habe, meine eigenen Videospiele zu diesem Grund denke ich, dass Lernen Spaß machen und dem Gefühl nahe kommen sollte , das Sie als Kind hatten , als Sie gespielt und neue Dinge entdeckt haben. Am Ende dieses Kurses werden wir das folgende Spiel mit VGS erstellen Es wird für jeden Spieler ein Stein-Paper-Scheren-Spiel Das Spiel wählt ein zufälliges Zeichen aus und bestimmt auch den Gewinner Während der Entwicklung dieses Spiels werden wir verschiedene Bilder von bewährten Methoden für React durchgehen und auch zeigen, wie man häufig auftretende Fallstricke vermeidet Der Kurs enthält auch dieses nette druckbare Handbuch , das Sie später als Referenz verwenden können Dem Inhalt der Videos hier folgend, gibt es über 35 ganze Seiten mit Code, Beispielen, Ressourcen oder Diagrammen, sodass Sie sich eine bessere visuelle Darstellung dessen verschaffen können , was vor sich geht. Ich habe ziemlich viel Arbeit in dieses Video gesteckt, ich hoffe, es wird helfen. Lass uns anfangen, den Unterricht zu besuchen. 2. Kurs-Einführung: Bevor wir mit dem eigentlichen Programmieren beginnen, möchten wir einige Dinge darlegen Zuallererst, wie man diesen Kurs benutzt. Die Informationen im Diskurs sind ziemlich umfangreich , um die besten Ergebnisse zu erzielen. Mein Rat wäre, diesen Kurs zweimal zu absolvieren. Verschaffen Sie sich beim ersten Mal einen allgemeinen Überblick über den Kurs und beim zweiten Mal machen Sie die eigentliche Übung. Jedes Kapitel enthält eine Start- und Enddatei, die es einfacher macht, dem Inhalt zu folgen. Ich empfehle Ihnen, manuellen Code zu da Sie sich so die Dinge leichter merken können. In diesem Kurs werde ich VS Code und Google Chrome verwenden, da dies meine wichtigsten Tools sind. Sie können jedoch jede andere ID oder jeden anderen Browser verwenden , mit dem Sie vertraut sind. Außerdem haben wir ein sehr minimales Setup. Es sind keine Setarbeiten erforderlich, keine NPM-Module. Sie können sich einfach den Quellcode ansehen und Sie erhalten den Code , der im Browser ausgeführt wird, das erforderliche Wissen Aus realer Sicht ist dies ein anfängerfreundlicher Kurs. Aber wenn Sie nichts über React wissen, könnte es sinnvoll sein meinen anderen Anfängerkurs über React zu belegen, den ich hier habe. Es wird von Ihnen erwartet, dass Sie nur ein wenig über Themen wissen, wie die Komponente ist oder wie eine React-Zustandsvariable funktioniert. Betrachten Sie es als einen Kurs , der Ihnen ein Denkmodell darüber vermittelt , wie Sie echte Apps erstellen können. Wir werden uns mit bewährten Methoden vertraut machen, wir werden Fehler machen und wir werden auch sehen, wie wir sie beheben können. Co-Schnipsel Ich persönlich mag keine langen Kurse. Ich glaube, ich habe noch nie einen Kurs abgeschlossen , der länger als 2 Stunden gedauert hat. Um die Zeit für diesen Kurs zu verkürzen, habe ich viele Codefragmente wie diesen definiert Sie können sie alle hier im VS-Code-Ordner sehen, in dem ich alle Codefragmente habe , die ich während des Kurses verwende Der Grund für die Definition all dieser Codefragmente ist, dass es für mich ziemlich schwierig ist, in einer Fremdsprache zu sprechen und gleichzeitig Code zu schreiben Aber ich möchte dir auch die Zeit ersparen, in der du mir nur zuschaust, wie ich Sachen in den Code-Editor tippe Nachdem wir das geklärt haben, gehen wir zu unserer ersten Lektion über, in der wir React, Render und React to Root verwenden werden , um das Gerüst für unsere Anwendung zu erstellen 3. Rendere die App mit ReactDom createRoot: Schauen wir uns an, was wir in der Startvorlage des Diskurses haben Startvorlage des Es gibt diese einfachen Importe. Hier importieren wir nur Reactome und Babel, wie wir es in der Vergangenheit für Januar getan haben Hier haben wir auch einen Skriptblock, der aus dem Text Babble besteht, nicht Javascript ist Und der Grund dafür ist, dass wir Babble und auch diesen Import benötigen , um X in unseren A-Code schreiben zu können Ich habe dieses Setup in der Idee gemacht , die Dinge nicht zu verkomplizieren, nicht mit MPM-Modulen, Webservern, Tools oder ähnlichem anzufangen Webservern, Tools oder ähnlichem Im Moment haben wir nur diese einfache einfache Index-HTML-Datei Lassen Sie uns nun unsere erste Reaktionskomponente schreiben. Diese Reaktionskomponente wird App heißen. Im Allgemeinen ist die App der Einstiegspunkt für jede React-Anwendung. Ich werde hier Constant App schreiben. Diese App ist eine einfache Funktion, die von der React-App so etwas wie Hallo zurückgibt. Was du hier siehst, ist übrigens x. Das wird von Babble interpretiert und in einfaches Javascript übersetzt Wenn ich zu diesem Zeitpunkt die Seite speichere und aktualisiere, wird nichts passieren Übrigens haben wir dieses Div mit der Idee von Root erstellt Dieses wird als Hauptcontainer für unseren React-Ap dienen . Angesichts der Tatsache, dass wir den React-Ap in diesen Tauchgang einfügen wollen , muss ich als Erstes hierher kommen und eine neue Variable namens container schreiben. Dieser Container entspricht dem Element „Document Get“ nach der ID root. Ich werde dieses De ins Visier nehmen. Als Nächstes muss ich ein neues Root erstellen. Dafür schreibe ich const root. Dieser ist identisch mit React Create Root. Ich gebe es als Parameter an, den Container, den ich gerade in der vorherigen Zeile erstellt habe . Schließlich werde ich eine neue Zeile hinzufügen, in der ich Route Render App Render Render innerhalb dieser Route, dieser App von hier aus, sagen werde Route Render App Render Render innerhalb dieser Route, dieser App von hier aus, sagen . Wenn ich die Seite speichere und aktualisiere, werden wir sehen, dass wir jetzt dieses nette Hallo von der Reactapp haben dieses nette Hallo von der Reactapp Der Inhalt, der zuvor in der ID-Route war, wurde jetzt durch den Inhalt unseres React ersetzt, wo wir gerade von diesem Root-Renderer sprechen Dies wurde zuvor in neueren Versionen von React eingeführt. Es war eine andere Syntax, aber diese bringt einige Leistungsverbesserungen mit sich. Ich werde im Handbuch dieses Kurses den Link zu einem Artikel hinzufügen , der auf einige der Updates verweist, die Root-Render eingeführt wurden. Cool Wir haben unsere erste Komponente gemacht. Als Nächstes werden wir sehen, wie man die Komponenten erstellt , die benötigt werden , um das eigentliche Spiel zu erstellen. 4. Gerüste bauen die Hauptkomponenten: Nachdem wir nun unsere Act-Hauptanwendung erstellt haben, wir einen weiteren Blick auf unsere So wird das Spiel am Ende aussehen. Wie wir hier sehen können, haben wir drei Arten von Komponenten. Zuallererst gibt es die Player-Komponente. Diese Komponente hat zwei Instanzen, eine für den roten Spieler und die andere für den blauen Spieler. Es gibt auch diese Ergebnistafel , auf der angezeigt wird, wer das Spiel gewonnen hat. Schließlich gibt es noch die Spielkomponente , die all dies beinhalten wird. Lass uns jetzt das Gerüst für all diese das Gerüst für all Ich werde zum Index-HTML zurückkehren. Als Erstes komme ich her und erstelle eine Spielkomponente. Dafür schreibe ich Constant Game. Das ist eine Funktion, eine grundlegende Funktion. Wie die App-Komponente wird sie den folgenden Inhalt haben. Ich werde hier einen Dip schreiben , der vorerst nur diesen einfachen Text zurückgibt. Anstatt dieses H in der App zurückzugeben, gebe ich jetzt eine neue Instanz der Spielkomponente zurück. Wenn wir aktualisieren, werden wir jetzt sehen, dass wir hier den Inhalt haben hier den Inhalt , den wir in der Spielkomponente deklariert haben. Aber das ist nicht genug. Wenn ich hierher zurückkomme, werden wir sehen, dass es in der Spielkomponente Spieler gibt und auch dieses Resu-Board Lass uns auch diese beiden erstellen. Als Nächstes erstelle ich die Player-Komponente. Dieser wird Player heißen. Es wird eine Funktion sein , die so etwas zurückgibt, nur mit einem einfachen Text. Schließlich gibt es noch die Ergebnis-Board-Komponente , die ebenfalls eine Funktion sein wird. Innerhalb dieser Funktion werde ich sagen, dass noch keine Ergebnisse vorliegen. Denn hier in der Ergebnisliste müssen wir zeigen, wer das Spiel gewonnen hat. Gehen wir hier in die Spielkomponente und erstellen diesen ganzen Komponentenbogen. Zuallererst benötige ich zwei Instanzen des Typs Player. Ich werde hier eine Instanz und die zweite für den anderen Spieler erstellen . Als Nächstes werde ich auch dieses Ergebnisboard hinzufügen , das wir erstellt haben. Wenn wir hier einen letzten Blick darauf werfen, werden wir feststellen, dass wir auch diese Schaltfläche zum Starten des Spiels benötigen. Ich komme wieder her. Hier werde ich einfach einen einfachen HTML-Button schreiben. Dieser ist keine Komponente, es ist nur ein einfaches HTML-Element. Ich werde speichern. Und wenn wir jetzt aktualisieren, sehen wir, dass wir zwei Player-Komponenten haben, die Schaltfläche und schließlich das Ergebniswort. Aber im Moment sind unsere Player-Komponenten genau dieselben, sie enthalten nur diesen Standardtext. In der nächsten Lektion werden wir sehen, wie wir diese Komponenten mithilfe von Requisiten anpassen können diese Komponenten mithilfe von Requisiten anpassen Und auch, wie wir unseren Komponenten beibringen, ein zufälliges Element zwischen Stein, Papier oder Schere auszuwählen ein zufälliges Element zwischen Stein, Papier oder Schere 5. Requisiten hinzufügen: wir nun das Gerüst der Komponenten fertig haben, schauen wir uns unser letztes Beispiel an Auch hier werdet ihr sehen, dass eine Player-Komponente rot und die andere blau ist Und ihnen sind auch einige Ramble-Symbole zugewiesen. In unserem aktuellen Status sehen beide Komponenten genau gleich aus Sie sind nur ein Div mit einem Standardtext. Was ich in den nächsten beiden Lektionen mit Ihnen machen möchte , ist zunächst, diesen Komponenten Parameter zuzuweisen diesen Komponenten Parameter zuzuweisen damit sie wissen, dass diese rot und die andere blau ist. Außerdem werden wir in der nächsten Lektion sehen, wie man zunächst einige zufällige Elemente für diese Komponenten zeichnet . Beginnen wir mit den Komponentenparametern. Als erstes müssen wir in der Komponentendeklaration hierher kommen und ihnen eine Farbe zuweisen. Hier werde ich sagen, dass ich eine blaue Farbe für diesen Spieler haben möchte. Als Nächstes werde ich sagen, dass ich eine rote Farbe haben möchte. So senden wir einen Parameter in diesem Wert an die eigentliche Komponente. Um sie lesen zu können, muss ich hier einen neuen Props-Parameter hinzufügen Dies ist ein Standardparameter, jede Funktionskomponente hier erhalten kann Was wir tun können, ist einfach den Wert des Parameters zu lesen , den wir senden. Wir können hier also Requisiten dieser Farbe sehen, sagen wir, wenn wir aktualisieren, werden wir hier sehen, dass wir die Farbkomponente Blau haben und die andere ist Rot Aber wir können einen Schritt vorwärts gehen. Wir können die Anweisungen zur Strukturierung von Javascript nutzen . Was ich hier tun kann, ist die Umstrukturierungserklärung für den Colo hinzuzufügen Umstrukturierungserklärung für den Colo Anstatt hier coole Requisiten zu haben, kann ich einfach sagen, dass ich jetzt die Farbe haben will und alles wird genauso funktionieren wie zuvor Aber wir können sogar einen Schritt weitergehen und die gesamte Destrukturierung direkt in der Deklaration der Funktion vornehmen Was ich hier sagen möchte , ist, dass wir ein Objekt als Parameter erhalten und direkt von hier aus eine direkte Strukturierung vornehmen ein Objekt als Parameter erhalten und direkt von hier aus eine direkte Strukturierung Wenn wir speichern und aktualisieren, werden Sie feststellen, dass alles wie zuvor ist. Aber jetzt ist der Code etwas sauberer. Lass uns in der nächsten Lektion sehen, wie wir einige zufällige Elemente für diese Spielerkarte ziehen können . 6. Zufällige Zeichen: Wir haben jetzt die Farbparameter an die Komponenten gesendet. Das ist ziemlich cool, weil wir diese Farben verwenden können, um eine Spielerkomponente rot und die andere blau zu machen. Aber was wir noch nicht behandelt haben , sind diese zufälligen Elemente. Am Ende der Lektion möchte ich in der Lage sein, einige zufällige Elemente zu extrahieren. Im Moment gibt es nur Zeichenketten und sie werden in den Komponenten angezeigt, wie wir es hier haben. Kehren wir hier zu unserem Beispiel zurück. Ich werde zuerst nur den Kommentar hinzufügen , um zu erfahren, was wir hier tun. Und ich werde eine neue Konstante definieren, Hauptzeichen. Diese Konstante wird nur ein einfaches Array sein , das einige Zeichenketten enthält. Jede Zeichenfolge stellt einen möglichen Wert für die Zeichen Stein, Papier oder Schere in diesem Array dar einen möglichen Wert für die Zeichen Stein, . Jetzt kann ich zurück zur Player-Komponente gehen und einen weiteren Kommentar hinzufügen, der besagt, dass wir einen zufälligen Index generieren , um ein zufälliges Zeichen auszuwählen. Das wird eine neue Konstante mit dem Namen Random Index sein. Dieser Zufallsindex wird eine mathematische Funktion sein. Er gibt Zufallswerte 0-2 zurück . Nachdem dieser Zufallsindex erstellt wurde, können wir nun eine weitere Konstante mit dem Namen Random L random sign erstellen dem Namen Random L random sign Nennen wir es. Dieses zufällige Zeichen wird ein Zeichen für einen zufälligen Index sein. Nun, da ich dieses zufällige Zeichen habe, kann ich herkommen und den ganzen Namen, den gesamten Inhalt der Spielerkarte durch dieses Feld ersetzen . Das heißt, was aus den Farbauswahlen kommt und das haben wir hier generiert. Eigentlich benenne ich das in Random Sign um. Okay, wenn wir jetzt aktualisieren, werden Sie sehen, dass der blaue Spieler Papier wählt, während der rote Spieler Stein wählt. Danach aktualisiere ich erneut, aktualisiere erneut und so weiter. Du wirst sehen, dass bei jeder Aktualisierung ein neues zufälliges Zeichen für einen bestimmten Spieler ausgewählt wird. 7. CSS-Stile in React: So wie es jetzt ist, sieht unsere Anwendung ziemlich langweilig aus. Lass uns kommen und einige CSS-Stile hinzufügen. Dafür muss ich eine neue Datei erstellen. Diese Datei wird Styles that CSS heißen. Hier füge ich die benötigten CSS-Stile ein. Nun, das ist kein Kurs über CSS. Sie können sich diese Deklarationen ansehen und Sie werden feststellen, dass viele von ihnen ziemlich selbsterklärend sind, wie das Einstellen eines Hintergrunds Carlo, Ausrichten des Textes und so weiter Nachdem wir diese CSS-Datei erstellt haben, wollen wir sie mit unserer Hauptreaktionsdatei hier verknüpfen Die Tatsache, dass ich ein neues Stylesheet importieren möchte, und zwar dieses, kommt von Styles, die CSS. Wenn wir jetzt aktualisieren, werden wir feststellen, dass wir bereits einige grundlegende Stile in unserer Anwendung haben . Wir haben den Hintergrund, die Farbe des Textes ist unterschiedlich, die Ausrichtung und so weiter. Aber wir haben hier noch keine Stile angewendet, zum Beispiel auf die Player-Komponenten. Dazu muss ich kommen und zum Beispiel die Player-Klasse und die Container-Klasse mit diesen Dips verknüpfen, die Player-Klasse und die Container-Klasse mit für die wir in unserer React-Anwendung haben für die wir in unserer React-Anwendung Ich muss hier einen Klassennamen hinzufügen. Ich werde sagen, dass ich einen Klassennamen für Spieler haben möchte. Und hier im anderen, wenn wir den Hauptcontainer für den Spieler X haben, werde ich den Klassennamen Container hinzufügen. Unter normalen Bedingungen ist das einfach Klasse gleich Container oder Klasse gleich Spieler Aber angesichts der Tatsache, dass die Klasse bereits belegt ist und die Reserve in Javascript funktioniert, müssen wir diesen Klassennamen hinzufügen Lass uns zurückkommen und frisch geben. Wir werden jetzt sehen, dass wir diese beiden Elemente auf dem Bildschirm haben diese beiden Elemente auf dem und sie ganz nett aussehen. Ich werde zu 100% des Browsers zurückkehren, aber eines fehlt noch. Schauen wir uns das letzte Beispiel noch einmal an. Ich werde unser endgültiges Design öffnen. Sie werden hier sehen, dass das Schild umgedreht ist. Dieser zeigt nach rechts und dieser nach links Was wir hier tun können, ist in das CSS zu kommen und eine weitere Regel hinzuzufügen. Ich werde sagen, dass ich möchte das zweite Kind des Spielertyps verwandelt wird. Was ich hier übrigens gemacht habe, ist eine native CSS-Verschachtelung. Ich werde dem Handbuch für diesen Kurs einen Link hinzufügen , über den Sie mehr darüber lesen können Aber das Schöne daran ist, dass Sie, nachdem ich diese Regel hinzugefügt habe, jetzt sehen werden, dass dieser Text im Grunde umgedreht ist Lass mich eine weitere Datei öffnen. Diese Regel, die wir hier hinzugefügt haben, diese Transformation von Scalix minus eins geht und dreht die zweite Wenn ich dort ein echtes Zeichen hinzufüge, zeigt es auf die andere Seite 8. Inline-Stile festlegen: Wir haben einige grundlegende Stile eingerichtet, aber es ist noch viel zu tun. Zum Beispiel haben wir keine Hintergrundfarbe für diese Artikel und wir haben auch kein Bild für die Schilder wie Stein, Papier oder Schere. Das wollen wir in dieser Lektion tun. Fangen wir mit der Hintergrundfarbe an. Wenn wir uns ansehen, wie die Dinge im Moment aussehen, haben wir diesen Farbparameter , der in der Komponente enthalten ist. Dieser Farbparameter kann als Hintergrundfarbe verwendet werden, da wir hier Rot oder Blau haben werden. Genau das wollen wir hier als Hintergrund verwenden. Dafür werde ich den Inline-Stil verwenden, um diesen Inline-Stil zu definieren. Genau hier entspricht der Stil diesem, der als Parameter ein vollständiges Java-Script-Objekt erhält Parameter ein vollständiges Java-Script-Objekt Ich möchte sagen, dass das Hintergrund-Colog genau dem Wert des Parameters entsprechen muss genau dem Wert des , den wir hier erhalten Es wird die Hintergrundfarbe sein und sie wird der Farbe Coloque entsprechen Lassen Sie uns jetzt aktualisieren. Wir sehen, dass wir die Spielerkarten mit der gewünschten Hintergrundfarbe haben. Dieses Inline-Objekt wird mit der Zeit komplexer werden. Eine gute Idee ist es, hierher zu kommen und es hier als separates Objekt zu extrahieren, unser richtiger Inline-Stil, dieser Inline-Stil wird genau das sein, was wir hier haben. Ich werde dieses Objekt direkt an den Inline-Stil weitergeben . Dinge werden genauso aussehen, wie sie vorher aussahen, aber wir haben dieses nette isolierte Objekt , dem wir später weitere Werte hinzufügen können. Lassen Sie uns nun ein wenig über die Bilder sprechen, die in die Spielerkarten eingefügt werden. Anstatt Steine oder Scheren hier zu haben. Dafür werden wir aktuelle Bilder haben. Ich habe bereits einige Ressourcen vorbereitet und werde sie mit Ihnen teilen. Jetzt habe ich gerade die PNGs auf meine Website gestellt. Ich öffne diese Bilder, Sie werden sehen, dass sie genau für den Stein, eines für Papier und das andere für Scheren sind eines für Papier und das andere für Scheren Angesichts der Tatsache, dass PNGs auch transparente Hintergründe haben können Und wenn wir uns das Format der URL genauer ansehen, was wir dort haben, dann ist es ungefähr so Okay? Das ist die Adresse der Website. Aber hier können wir dieses Muster durch dieses zufällige Zeichen ersetzen . Aufgrund dieses Zufallszeichens haben wir die Werte Stein, Papier oder Schere. Lass uns das machen. Ich komme und schaffe eine neue Konstante. Und diese Konstante wird mit dieser vollständigen URL gleichgesetzt. Und nach diesem zufälligen Zeichen, diesem PNG, ist es ganz nett, weil ich jetzt herkommen und für den Inline-Stil dieses Hintergrundbild hinzufügen kann jetzt herkommen und für den Inline-Stil dieses Hintergrundbild hinzufügen Gehen wir zurück und lassen Sie uns aktualisieren. Wir werden jetzt sehen, dass wir diese Bilder in unseren Komponenten platziert haben, und tatsächlich ist noch ein bisschen Text übrig. Also kann ich jetzt kommen und das löschen, da wir es nicht mehr benötigen. Sehen wir uns das letzte Beispiel in Aktion an. Es sieht ganz nett aus. Beispielsweise wirst du bei jeder Aktualisierung sehen, dass für jeden Spieler neue Schilder gezogen werden. Als letzte Anmerkung: Denken Sie bitte daran, dass wir in den Stilen für die Spielerkarte all das haben. Wir haben die Hintergrundwiederholung, die Größe des Hintergrunds, den Ursprung des Hintergrunds und so weiter. Und tatsächlich sind dies die CSS-Regeln, die es uns ermöglichen , diese Bilder auf der Spielerkarte schön aussehen zu lassen. Das ist es. Gehen wir zur nächsten Lektion über. Wir werden sehen, wie man diese nette Animation hinzufügt , wenn wir die Starttaste des Spiels drücken. 9. Der useState()-Hook: Nachdem wir die Inline-Stile eingerichtet haben, schauen wir uns die endgültige Version unseres Beispiels noch einmal an die endgültige Version unseres Beispiels Unser Spiel beginnt in einem leeren Zustand. Du kannst jetzt sehen, dass jeder Spieler einen leeren Status hat. Für einen Spieler wurde noch kein Schild gezogen. Erst wenn ich auf diese Spieltaste drücke, startet die Shuffling-Animation und jeder Spieler erhält ein zufälliges Zeichen Im Moment sieht es so aus, dass unsere Spieler, jeder von ihnen, bereits mit einem bestimmten Zeichen beginnen Und der Grund dafür ist , dass wir, wenn wir mit einem Inline-Stil beginnen , dieses Hintergrundbild auf der Grundlage des zufälligen Zeichens festlegen , das sofort generiert wurde. Das wollen wir ändern. Aber mehr noch, was wir hier ändern wollen, ist die Tatsache , dass ich möchte, dass das eigentliche Spiel startet , wenn ich diese Taste drücke. Wenn wir uns das Datenflussdiagramm ansehen, wollen wir von hier aus im Grunde die beiden Teile machen . Wenn wir die Start Gate-Taste drücken, um ein Ereignis an jede Spielerkomponente zu senden. Mal sehen, wie wir das machen können. Zuallererst müssen wir ändern, wie die Dinge hier drinnen sind. Anstatt dieses zufällige Zeichen jedes Mal generieren zu lassen, wenn die Komponente gerendert wird, wollen wir das Design in einer Zustandsvariablen extrahieren. Deshalb wollen wir einen U-State-Hook verwenden. Unter normalen Bedingungen importieren Sie einen U-Staat, also sagen Sie, importieren Sie den U-Staat aus React. Aber angesichts der Tatsache, dass wir keinen Webserver verwenden, haben wir diese sehr minimale Konfiguration. Wir müssen hier eine kleine Änderung vornehmen. Und ich werde den U-Staat wie so const importieren und die Destrukturierungsanweisung in Javascript auf die Reaktion anwenden in Javascript auf die Denken Sie jedoch daran, dass Sie, wenn Sie eine neu erstellte App verwenden, importieren müssen, wie sie hier ist Jetzt, wo wir den US-Bundesstaat korrekt importiert haben , werde ich hierher kommen. In der Player-Komponente werde ich die neue Zustandsvariable definieren, werde ich die neue Zustandsvariable definieren mit diesem U-Status erstellt wurde wird dann sin und set sign sein. Es ist okay, dass wir mit einer Neal-Variablen beginnen, weil wir hier die Player-Komponenten starten wollen hier die Player-Komponenten starten wollen ohne dass etwas ausgewählt wurde Diese festgelegte Zustandsvariable wird das Zufallszeichen, das wir hier haben, ersetzen Mehr noch, wir können alles extrahieren, was hier drin ist, die gesamte Zufallsgenerierung Wir wollen es in einer Funktion extrahieren. Wir sollten in der Lage sein, diese Funktion aufzurufen. Wenn wir die Taste drücken, ersetze ich alles, was wir hier haben, durch diese Funktion. Wenn Sie einen Blick darauf werfen, enthält diese Funktion „Pick Random Sin“ einfach genau die gleichen Zeilen, die wir zuvor hatten. Nur dass wir am Ende das Zufallszeichen in dieser Set-Sign-Zustandsvariablen setzen und alles in eine nette Funktion verpackt ist. Jetzt müssen wir noch herausfinden, wie wir vorgehen müssen herausfinden, wie wir , damit diese Funktion „Zufallszeichen auswählen“ mit der Schaltfläche verknüpft wird. Wie können wir das so machen , dass diese Funktion aufgerufen wird, wenn wir die Taste „Spiel starten“ drücken . Ich überlasse dir das als Hausaufgabe. Versuche das zu tun, bevor du das nächste Video startest. Ich denke, es gibt mehrere Möglichkeiten, wie wir das machen können, aber wenn du als Tipp willst, solltest du versuchen, den Benutzer fa hook zu verwenden. 10. Ereignisse in den Kinderkomponenten auslösen wip: Wie konnten Sie dafür eine Lösung finden? Wenn wir die Schaltfläche Spiel starten drücken, um Ereignisse an diese A-Komponenten zu senden , sodass neue zufällige Zeichen ausgewählt werden. Es gibt mehrere Möglichkeiten , dieses Problem zu beheben. Sehen wir uns einen Plan für das an, was wir tun wollen. Zunächst geben wir von der Spielkomponente einen neuen Parameter namens Startzeit an die Player-Komponente weiter . Innerhalb der Player-Komponente werden wir uns die Startzeit über den Use-Effect-Hook ansehen. Wenn diese Startzeit geändert wird, rufen wir die Methode „ Pick Random Sign“ auf. Schließlich werden wir in der Spielkomponente die Startzeit aktualisieren, wenn die Taste gedrückt wird. Lassen Sie uns das alles in Aktion sehen. Zuallererst werde ich auf die Spielkomponente eingehen. Hier werde ich eine neue Zustandsvariable erstellen. Diese wird, wie gesagt, Startzeit heißen. Es hat auch diese eingestellte Startzeitfunktion. Es beginnt mit dem Nullwert, da Sie zu Beginn keine zufälligen Zeichen erkennen möchten . Jetzt, wo diese Startzeit festgelegt ist, werde ich in beiden Player-Komponenten darauf eingehen. Ich werde den Startzeitparameter senden. Ich werde es für die erste Komponente senden und danach werde ich es auch an die nächste Komponente senden. Dieser Startzeitparameter muss an einem Punkt aktualisiert werden. Dafür werde ich eine neue Funktion erstellen. Diese Funktion wird eine Konstante mit dem Namen Start Game sein. Dieses Spiel wird so aussehen, also wird die Startzeit auf das Datum festgelegt. Jetzt wählen wir das aktuelle Datum und die aktuelle Uhrzeit des Browsers aus und aktualisieren es jedes Mal, und aktualisieren es jedes Mal wenn jemand die Schaltfläche Spiel starten drückt. Schließlich werden wir die Onclick-Funktion verwenden. Wenn jemand die Taste drückt, rufen wir das Startspiel Nun , da wir wissen, dass die Player-Komponenten diesen neuen Parameter für die Startzeit haben werden, werde ich ihn hier deklarieren und ihn in die Parameter der Komponente einfügen. Wir müssen beobachten, wann diese Startzeit geändert wird. Dazu müssen wir den Use-Effect-Hook importieren. Ich werde hierher zurückkehren und hier werde ich auch den Effekt nennen. Denken Sie daran, wenn wir ein normales Web hätten, müssten Sie es von hier importieren Importiere es direkt aus React. Da dies jetzt erstellt wurde, fügen wir den Use-Effect-Hook den Use-Effect-Hook innerhalb der Player-Komponente hinzu. Wir werden das Folgende tun. Wir werden prüfen, ob es eine Startzeit gibt. Denken Sie daran, dass diese Startzeit anfänglich Null ist. Wenn wir die Startzeit geändert haben, nennen wir das Pick Random Sign. Denken Sie daran, wie der Nutzungseffekt funktioniert. Effect erhält als Parameter ein Array von Werten. Jedes Mal, wenn diese Werte geändert werden, die Funktion ausgelöst, die im Nutzungseffekt enthalten ist wird die Funktion ausgelöst, die im Nutzungseffekt enthalten ist. Mal sehen, jetzt ist das in Aktion. Ich werde es jetzt aktualisieren. Anfänglich werden wir keine Werte in den Spielerkomponenten haben , aber wenn wir auf die Schaltfläche „Spiel starten“ drücken, werden danach zunächst einige zufällige Elemente gezogen. Mehr und so weiter. Im Grunde haben wir einen Weg gefunden, wie wir das Spiel starten können , wenn wir diese Taste drücken. Ziemlich cool. Im nächsten Kapitel werde ich auch die Shuffling-Animation hinzufügen, wenn diese Taste gedrückt wird 11. Animationen und setInterval: Schauen wir uns das letzte Beispiel noch einmal an. Wenn wir die Taste drücken, werden Sie sehen, dass wir diese Animation haben, die jedes Mal läuft, wenn ein zufälliges Zeichen gezogen wird. Wie können wir das in unserem Beispiel umsetzen? Denn im Moment drücken wir einfach auf das Sternspiel und schon haben wir direkt die Elemente gezeichnet, aber keine Animation. Nun, auch hier gibt es mehrere Möglichkeiten, dies zu tun. Es gibt auch eine reine CSS-Lösung, die wir anwenden können. Aber auch hier werden wir die Lösung sein , die es uns ermöglicht, mit einigen Mechanismen zu spielen oder zu reagieren und zu sehen, wie wir einige Fehler vermeiden können. Lass es uns versuchen. Was wir hier tun werden, ist diese festgelegte Intervallfunktion zu verwenden. Dies ist eine Javaski-Funktion, die nicht von React abhängt Im Grunde genommen nenne ich diese Funktion Weitergabe einer Funktion, die bei jeder Verzögerung ausgeführt wird Nehmen wir an, ich möchte jede Sekunde einen Code ausführen . Ich füge hier 1.000 ein, weil es 1 Million Sekunden sind. Und dann wird dieser Code in jeder Sekunde ausgeführt , wenn der Zyklus abgeschlossen ist . Wenn ich diesen Code nicht mehr ausführen muss, muss ich diese klare integrale Funktion aufrufen. Schauen wir uns also in unserem Beispiel an, wie wir das implementieren können. Zuallererst müssen wir wissen, wie oft die Animation ausgeführt wurde. Schauen wir uns das noch einmal an, wir werden sehen, dass es eine Weile dauert und danach aufhört. Das liegt daran, dass wir eine Startzeit von 20 Animationen festgelegt haben. Ich muss hierher kommen und eine neue Statusvariable namens Animation Counter erstellen . Dieser Animationszähler fängt bei Null an. Dieser wird verfolgen wie oft unsere Animation ausgeführt wurde. Und im Auswahl-Zufallszeichen werde ich die Funktion Set Interval hinzufügen Wir wollen, dass Code mit 100 Millisekunden ausgeführt wird, zehnmal zehnmal Was dieser Code ist, ist genau der, der sich zuvor direkt im Stammverzeichnis der Funktion befand Jetzt wird er in die Set-Integral-Funktion verschoben, wir wollen bei 100 Millisekunden ein neues Zufallszeichen auswählen Aber was wir tun wollen, wir wollen auch, dass diese Animation irgendwann diese Animation Ich werde herkommen und schauen, ob der Animationszähler größer als 20 ist. Wir müssen das Integral löschen, um die Animation zu beenden. Und was ich dann in der Funktion Clear Integral weitergegeben habe , ist genau diese, die Referenzen, die ich hier gemacht habe. Eine letzte Sache , die wir tun müssen. Es geht auch darum, an einem Punkt zu inkrementieren , an diesem Animations-Cotter Jedes Mal, wenn dieses Integral ausgeführt wird, sage ich hier Animation Conta Wir sollten es um eins erhöhen. Lassen Sie sich nicht dazu verleiten, so etwas zu tun denn wenn wir es so machen, werden wir am Ende einige Denken Sie daran, dass wir den Status set , wenn er auf vorherigen Werten ausgeführt , wenn er auf vorherigen Werten ausgeführt wird, so aufrufen müssen Es wird über eine Funktion aufgerufen , die Zugriff auf den vorherigen Wert erhält , und wir erhöhen diesen Wert um eins Okay, Dock, jetzt werden wir es ausführen. Lass uns die Starttaste für das Spiel drücken. Du wirst sehen, dass wir die Animation zum Laufen haben, was ziemlich cool ist. Ich werde die Seite für den Moment neu laden. Wenn Sie mit diesem Beispiel spielen, werden Sie feststellen, dass es in der nächsten Lektion zwei Bugs gibt , bevor Sie tatsächlich angefangen haben Versuchen Sie zunächst herauszufinden, was die beiden Bugs sind , und probieren Sie es aus. Versuche sie zu beheben. Wir sehen uns dann in der nächsten Lektion. 12. useRef() und bereinigen useEffect() hinzufügen: Am Ende hatten wir in der letzten Lektion einige Bugs in unserem Code. Ich habe dir als Hausaufgabe die Idee hinterlassen, diese Fehler zu finden und zu beheben. Lassen Sie uns zunächst sehen, was sie sind. Es gibt zwei Hauptfehler in unserem Code, und ich habe dieses Bild erstellt, damit sie es zeigen können. Zuallererst, wenn wir die Animation starten, werden Sie feststellen, dass diese Animation für immer läuft. Sie hört nicht nach 20 Läufen auf, auch wenn wir hier eine sehr klare Bedingung haben , dass wir aufhören müssen, wenn eine Begegnung länger als 20 ist. Das ist der erste Bug und vielleicht auch der wichtigste , wenn wir die Animation starten. Und danach werde ich schnell vorspulen, ich drücke diese Taste, du wirst sehen, dass die Animation anfängt seltsam zu werden. Es geht auch viel zu schnell, dass es sollte, es hört nicht auf. Schließlich gibt es noch einen dritten Fehler , der am einfachsten zu beheben ist. Sie werden sehen, wenn wir jetzt das Bild in der Datei betrachten, werden Sie sehen, dass wir diese Null haben, dieses PNG, die Tatsache, dass unsere Datei versucht , diese Null, diese PNG-Datei abzurufen. Fangen wir mit dieser tief hängenden Frucht an. Lassen Sie uns zunächst versuchen, diesen Fehler zu beheben, der in der Konsole angezeigt wird. Der Grund dafür ist eigentlich diese Zeile, das Hintergrundbild. Was wir hier tun , ist, dass wir versuchen, das Bild von der JS-Scheißseite abzurufen, und wir haben hier das Schild Zunächst können Sie sehen, dass dieses Zeichen mit dem Nullwert beginnt Das ist der Grund, warum wir diesen Fehler bekommen, weil wir hier versuchen die Assets abzurufen, was auch immer. Danach das PNG, eine recht einfache Lösung für dieses ist es, zu testen, ob das Zeichen existiert. Wenn das Zeichen existiert, versuchen Sie, das Bild abzurufen Andernfalls tun Sie nichts, rufen Sie hier einfach eine leere Zeichenfolge Lassen Sie uns aktualisieren und Sie werden jetzt sehen , dass der Fehler in der Konsole nicht vorhanden ist. Das war der erste Bug. Gehen wir nun zum komplexesten über. Die Tatsache, dass wir beim Starten der Animation keine Fehler bekommen, aber die Animation läuft für immer, auch wenn hier diese Bedingung vorliegt. Der Grund, warum das passiert, liegt darin, dass dieser Teil so ist, als ob der in React eingestellte Zustand nicht synchron ist. Wenn wir versuchen werden, diese Bedingung auszuführen, wird sie noch nicht aktualisiert Wenn ich hier zum Beispiel eine Begegnung mit einem Consolo aufnehme und das Spiel aktualisiere und starte, werdet ihr sehen, dass es für immer Null ist Und der Grund dafür ist , dass er nicht die Gelegenheit hatte, das vollständige Update tatsächlich durchzuführen Eine Möglichkeit, dies zu beheben, besteht darin , alles in die setanym-Zählerfunktion einzubinden und diesen vorherigen Wert als Referenz zu verwenden. Ich habe zum Beispiel im Handbuch für den Kurs dieses Beispiel gemacht Was wir tun können, ist hier einen großen Wrap zu machen und den ganzen Code in den Stan-Zähler zu legen den ganzen Code in den Stan-Zähler Und wir werden jetzt mit Sicherheit wissen, dass der Statuswert aktualisiert wurde und den richtigen Wert hat. Aber das ist nicht großartig, weil es tatsächlich das Pick-Rand-Funktionsintegral gibt, einen festgelegten Zustand, es ist ein bisschen zu viel. Eine andere Sache, die wir versuchen können , ist, Referenzen zu verwenden. Es ist großartig, mit Referenzen zu arbeiten und sie in React zu verwenden. Formulare eignen sich auch hervorragend zum Speichern Werten, die zwischen den Rendervorgängen beibehalten werden , aber nicht auf der eigentlichen Benutzeroberfläche angezeigt werden müssen. Was ich hier tun muss, ist, diesen beliebigen Zähler durch eine beliebige Gegenreferenz zu ersetzen beliebigen Zähler durch eine beliebige Gegenreferenz Angesichts der Tatsache, dass wir diese Arbeit verwenden wollen, weil F eigentlich eine Referenz ist, muss ich sie aus dem tatsächlichen Wert der Referenz importieren , der im aktuellen Feld der Referenz gespeichert ist . Was wir hier tun müssen, ist, wenn wir die Animation starten, diesen Zähler zu nehmen und zu sagen, dass Strom gleich Null ist Danach werde ich, anstatt die festgelegte Zustandsvariable zu verwenden , Gehen Sie zurück zur Referenz und sagen Sie, dass ich sie um eins erhöhen möchte. Schließlich kann ich hier einfach diese anstelle der früheren Zustandsvariablen verwenden. Mal sehen, wie es läuft. Danach gehe ich zurück und refresh. Wenn wir Spiel starten drücken. Jetzt stoppt die Animation nach 20 Iterationen. Lass uns das Spiel erneut aktualisieren. Und die Animation wird jetzt nach 20 Läufen gestoppt, was großartig ist. Wir haben einen weiteren Fehler behoben. Lassen Sie uns abschließend den letzten Fehler angehen. Ich werde zum Beispiel zurückkehren, jetzt fange ich an, sehr schnell auf die Schaltfläche zum Starten des Spiels zu drücken. Du wirst sehen, dass die Animation viel zu schnell läuft, dass sie das sollte, es gibt eigentlich zwei Möglichkeiten. Es gibt mehrere Möglichkeiten, aber zwei Hauptwege, wie wir das beheben können. Eine Möglichkeit, dies zu tun, besteht darin, eine andere Statusvariable zu verwenden und diese Schaltfläche zu deaktivieren während die Animation läuft, was in Ordnung ist. Aber gehen wir zu einem anderen Thema über, wir reagieren darauf und das ist die Funktion zur Bereinigung von Nutzungseffekten. Im Grunde passiert es, wenn wir diese Taste sehr schnell drücken , der Startzeitparameter wird geändert. Wir rufen diese Zufallszeichenfunktion ein paar Mal auf. Tatsächlich machen wir mehrere Intervalle, die laufen und unser Vorzeichen sehr schnell ändern. Das ist der Grund, warum sich die Animation so verhält. Eine Sache, die wir tun können, ist die Bereinigungsfunktion von Effect zu verwenden. Effect hat eine Funktion , die wir nur wie folgt zurückgeben müssen . Diese Funktion, die ich hier habe, wird also jedes Mal aufgerufen, wenn ein neuer Nutzungseffekt ausgeführt wird. Auf diese Weise stellen wir sicher, dass wir alle Auswirkungen eines vorherigen Laufs beseitigen. Eigentlich wollen wir hier dieses Integral löschen. Im Grunde wollen wir das auch hier nennen. Wir sollten so etwas haben. Aber Sie sehen, dass das eigentliche Integral in dieser Funktion gebildet wird und wir es hier brauchen. Eine andere Sache , die wir tun können, ist eine zweite Referenz zu erstellen, diese, ich werde diese Funktion einfach hierher kopieren und ich werde hier mein Integral O sagen. Anstatt nur eine lokale Variable zu erstellen, die nicht dem Nutzungseffektbereich ausgesetzt ist, kann ich nur kommen und diese Referenz abholen. Ich würde sagen, dass die aktuelle Zahl dem eingestellten Integral entspricht Ich werde hier abhauen. Aber jetzt kann ich auch hier ausräumen. Da das eigentlich nur eine Zeilenfunktion ist, kann ich alles durch nur diese ersetzen , damit es ein bisschen schöner aussieht Lassen Sie uns nun das Beispiel noch einmal ausführen. Sie werden sehen, dass jedes Mal, wenn ich jetzt sehr schnell die Taste drücke, die Animation trotzdem so läuft, wie sie sein sollte. Jedes Mal, wenn ich die Taste erneut drücke, wird diese ausgeführt und das aktuelle Intervall wird gelöscht. So konnten wir all unser Bellen reparieren. Sehen wir uns in der nächsten Lektion an, wie wir die A-Kontext-API verwenden können , um Werte von einer Komponente zur anderen zu kommunizieren 13. Kontextanbieter in React: Jetzt, da unsere Anwendung wieder kostenlos ist, gehen wir zum vielleicht letzten Schritt bevor wir den Gewinner des Spiels ermitteln und die Bewerbung abschließen. Dieser Teil befasst sich mit der Art und Weise, wie wir zwischen Komponenten kommunizieren. Schauen wir uns unser letztes Beispiel an. Wir haben diese beiden Spielerkarten darin. Es werden einige zufällige Zeichen gezogen. Auf der anderen Seite gibt es die Resualboard-Komponente, die wir hier haben. Sie sollte wissen , was jeder Spieler ausgewählt hat um zu entscheiden , wer das Spiel gewonnen hat Wir können das tun, indem wir Requisiten von einer Komponente an eine andere weitergeben , aber in diesem Fall wird es etwas kniffliger sein Wir können es schaffen, aber es wird schwieriger sein. Ein weiterer Nachteil dieses Ansatzes ist die Tatsache, dass wir am Ende zu viele Requisiten bohren So werden Dinge genannt, wenn wir zu viele Komponenten von einer Komponente an eine andere weitergeben zu viele Komponenten von einer Komponente an eine andere Eine andere Möglichkeit, dies zu beheben und auch mit einigen Funktionen von React zu spielen , besteht darin , den Kontext zu verwenden. Mal sehen, wie das aussieht. Wir wollen einen Reaktionskontext einrichten. Nachdem jeder Spieler ein zufälliges Zeichen ausgewählt hat, teilt er dem Kontext mit, welches Zeichen ausgewählt wurde . Danach nimmt unsere Resulusboard-Komponente beide Zeichen aus dem Kontext auf Es wird entscheiden, wer das Spiel gewonnen hat. Sie können sich den React-Kontext als allgemeinen Datenspeicher für die Anwendung vorstellen . Ich werde im Handbuch für diesen Kurs ein Video verlinken, das ich vor einiger Zeit gedreht habe und in dem es detaillierter erklärt wird, wie Act-Kontext funktioniert Aber im Grunde können Sie sich das so als einen allgemeinen Ort vorstellen , an dem wir Daten ablegen können , auf die jede Komponente einer bestimmten Anwendung zugreifen jede Komponente einer bestimmten Anwendung Am Ende der beiden Lektionen, dieser und der nächsten Lektion, wollen wir eine Ergebnis-Board-Komponente haben, die so aussieht, dass sie weiß, was der rote Spieler ausgewählt hat und auch, was der blaue Spieler ausgewählt hat. Schauen wir uns an, wie wir all dieses Gerede in Code übersetzen können . Als Erstes muss ich einen Kontext für unser Spiel erstellen. Dieser wird genau wie der Spielkontext benannt, Spielkontext entspricht dem Erstellungskontext Diese Funktion zum Erstellen von Kontext ist eine Funktion, die von React stammt. Wenn wir einfach einen Kontext erstellen, können wir nicht zu viel damit anfangen, da wir hier auch einen Kontextanbieter erstellen müssen. Ich werde einen Spielkontextanbieter erstellen , der auf diesem Kontext basiert, den wir hier erstellt haben. Wir können diesen Anbieter, den wir gerade erstellt haben, an unsere App weitergeben und das gesamte Spiel in den Spielkontext-Anbieter einbinden wir gerade erstellt haben, an unsere App weitergeben und an unsere App weitergeben und . Wir können in jeder seiner Unterkomponenten nachlesen, was wir zu diesem Zeitpunkt in den Spielkontext stellen Wenn ich die Datei speichere und aktualisiere, wirst du feststellen, dass wir einige Probleme haben, was hier passiert ist. Der Grund, warum die LUI verschwunden ist , ist , dass wir jetzt den Spielkontext-Provider rendern Und in der Tat werden wir als Kinder weitergegeben. Wir geben das Spiel weiter, aber hier, beim eigentlichen Anbieter, wir diese Kinder nicht aus. Also müssen wir kommen und einen neuen Eigenschaftsnamen hinzufügen. Kinder. Tatsächlich ist dies eine Standardeigenschaft für jede React-Komponente. Lassen Sie uns es aktualisieren und Sie werden sehen, dass die Dinge jetzt wie zuvor aussehen. Nur dass unser Spiel jetzt in diesem Anbieter enthalten ist . Eine coole Sache, die wir tun können, ist, einen Bundesstaat für den Anbieter hinzuzufügen. Und dieser Status wird an alle Komponenten dieser Anbieter weitergegeben . Mal sehen, wie wir das machen können. Ich werde hierher kommen und den Staat des Spieleanbieters hinzufügen , was wir in unserem Bundesstaat einschränken müssen. Wenn wir darüber nachdenken, werden es die Spielerzeichen sein, was hat der rote Spieler ausgewählt. Und was hat der blaue Spieler ausgewählt? Damit kann ich jetzt hierher kommen und diese Werte, die Spieler-Sines und die Seta-Funktion, weitergeben Ich werde es an den Anbieter weitergeben. Zu diesem Zeitpunkt werden die Dinge so aussehen wie zuvor, es werden keine Fehler in der Konsole auftreten, nur dass wir diese Werte in jeder Unterkomponente des Context-Providers lesen können jeder Unterkomponente des Context-Providers In der nächsten Lektion werden wir sehen , wie man diese Werte aktualisiert und wie man sie liest. 14. Der useContext()-Hook: Am Ende der vorherigen Lektion ist es uns gelungen, diesen Spielkontext zu erstellen und einzurichten Wir haben unser Spiel in diesen Spielkontext-Anbieter integriert. Lassen Sie mich Ihnen zur Erinnerung zeigen, was wir hier versuchen zu tun. Wir versuchen, die Zeichen zu lesen, die von diesen beiden Spielerkarten aufgenommen wurden diesen beiden Spielerkarten und die Zeichen in den realen Kontext zu stellen. Danach können wir in der Ergebnisliste die Zeichen verwenden, sodass wir entscheiden können, wer das Spiel gewonnen hat. Das Ziel dieser Lektion ist es, diese Elemente zu lesen und sie auch festzulegen, wenn sie ausgewählt werden. Beginnen wir damit, den Spielkontext in einer Komponente zu lesen. Ich werde in die Player-Komponente gehen. Hier werde ich den folgenden Kontext, Kontext, Spielkontext schreiben . Das bedeutet, dass wir einen anderen Hook verwenden. Wir müssen es von hier importieren. Dieser Hook ermöglicht den Zugriff auf einen bestimmten Kontext In unserem Fall ist er der einzige Kontext , den wir haben, der Spielkontext. Zur Erinnerung: Wir haben diese beiden Zustandsvariablen für den Kontext festgelegt, die roten und die blauen Werte für jeden Spieler. Lassen Sie mich das protokollieren. Ich protokolliere den Kontext. Mal sehen, ob wir diese beiden Elemente tatsächlich dort haben , während wir auf die Konsole gehen. Und Sie können hier sehen , was wir von diesem Consologan-Objekt bekommen und was es als Erstes zurückgibt, der Spieler signiert, dass wir es eingerichtet haben und auch die Set-Funktion für diese Zustandsvariable Das ist ziemlich cool , weil wir mit der Funktion „Zufallszeichen auswählen“ diese beiden Werte einstellen können , den roten und den blauen Aber bevor wir dorthin gehen, können wir diese Linie ein wenig verbessern. Anstatt nur das zu schreiben, kann ich die Strukturierungsanweisung verwenden. Zusammen mit dem Spielkontext kann ich sagen, dass ich die eingestellte Funktion und die Spielerzeichen abrufen möchte . Angesichts der Tatsache, dass wir jetzt diese Methode haben , Spielerzeichen zu setzen sollte ich herkommen und sie aufrufen und sagen, okay, Spielerzeichen setzen. Aber jetzt habe ich es hier in das if geschrieben, wenn das letzte Element gezeichnet ist. Jetzt ist die Frage, was soll ich hier schreiben? Und denken Sie daran, dass wir hier versuchen, ein Element zu aktualisieren. Wir versuchen hier, ein Objekt in einem Reaktionszustand zu aktualisieren. Denn lassen Sie uns noch einmal gehen, zurück im Provider, Sie werden sehen, dass es sich bei diesem Objekt um ein echtes Objekt handelt. Der Weg, dies zu tun, besteht darin, auch einen vorherigen Wert zu verwenden. Was wir hier tun werden, ist, alle Elemente , die wir bereits im Objekt haben, zu verteilen , die wir bereits im Objekt haben und einfach zu überschreiben, was wir brauchen In unserem Fall überschreiben wir die Farbe des Spielers und das zufällige Zeichen, das ausgewählt wurde Vor diesem Hintergrund gehen wir jetzt zurück zum Zulus-Board und schauen uns an, was wir im Kontext haben Ich werde hier hingehen, ich werde diese beiden Zeilen hinzufügen. Zuallererst extrahiere ich die Spielerzeichen aus dem Kontext Danach füge ich eine weitere Ebene der Strukturierung hinzu, und diese extrahiert genau die blauen und roten Werte Lassen Sie mich die beiden protokollieren. Ich werde blau sagen. Lass uns aktualisieren und jetzt lass uns das Spiel starten. Sie werden sehen, dass wir bei den Nullwerten angefangen haben und am Ende das Papier und den Stein erhalten haben, genau das, was wir hier haben. Das ist ziemlich cool, denn jetzt können wir diese Komponente mit der entschlossenen Box vervollständigen , indem zeigen, was jeder Spieler gezogen hat Im Grunde genommen dieser Teil von hier. Ich werde das Consolo entfernen , weil wir es nicht brauchen. Zuallererst sollten wir überprüfen, ob beide Elemente gesetzt sind Falls eines dieser blauen oder roten Elemente nicht gesetzt ist, sollten wir noch keine Ergebnisse genau so zurückgeben , wie wir es in diesem Moment haben Wenn danach beide Elemente gesetzt sind, können wir diese Zeile schreiben. Lass mich auffrischen. Ich werde das Spiel zunächst starten, es gibt keine Ergebnisse. Und danach wird es mir sagen, okay, dieser blaue Spieler hat Rock ausgewählt, dieser rote Spieler hat Rock ausgewählt. Und genau das haben wir auch hier. Damit haben wir ein Beispiel dafür behandelt, wie wir den A-Kontext verwenden können, um Werte auf einfache Weise von einer Komponente zur anderen zu senden , ohne zu viele Eigenschaften weitergeben zu müssen. Schauen wir uns das letzte fehlende Puzzleteil an und sehen wir, wie wir den Gewinner ermitteln werden. Wie können wir also so etwas schreiben? Der Gewinner ist der blaue Spieler oder der rote Spieler. 15. Entscheide den Spielsieger: Das letzte Puzzleteil besteht darin, herauszufinden, wer das Spiel gewonnen hat, und den Gewinner zu nennen. In dieser Lektion werden wir übrigens kein neues React-Zeug vorstellen, es ist nur reines Javas Wir werden den Gewinner in der Ergebnistafel ermitteln. Dafür erstelle ich eine neue Funktion. Dieser wird Win heißen. Es gibt uns Parameter, die roten und blauen Werte für die Spieler. Nachdem ich diese Funktion erstellt habe, müssen wir sie auch A im zurückgegebenen X der Komponente nennen . Wir werden den folgenden Algorithmus verwenden. Nein. Um den Gewinner zu ermitteln, prüfen wir, ob es ein Unentschieden gibt und ob die Symbole gleich sind. Danach prüfen wir, ob Rot gewinnt. Wenn es kein Unentschieden gibt und auch Rot nicht gewonnen hat, kann man davon ausgehen, dass der blaue Spieler gewinnt. Lassen Sie uns zuerst die einfache Sache überprüfen. Um zu überprüfen, ob wir ein Unentschieden haben, müssen wir nur überprüfen, ob Rot gleich Blau Wenn wir wollen, diese Zeichenfolge, die prüft, ob der rote Spieler wir ist, ist es etwas kniffliger, es wird so aussehen Deshalb haben wir hier die drei wichtigsten Bedingungen aufgelistet , unter denen Rot gewinnt. Dies sind die möglichen Kombinationen , die den roten Spieler zum Gewinner machen. Wenn wir eine dieser Bedingungen haben, geben wir diese Zeichenfolge zurück. Schließlich ist diese die einfachste, bei der wir nicht einmal nichts überprüfen müssen , weil wir bereits überprüft haben, ob wir eine rote haben. Der blaue Spieler gibt einfach die Zeichenfolge zurück , wenn dies nicht wahr ist oder nicht wahr ist. Lassen Sie uns das alles jetzt in Aktion sehen. Ich werde es aktualisieren. Ich werde das Spiel starten, und am Ende wird es mir zeigen, wer das Spiel gewonnen hat und tatsächlich Recht hat, denn Papier schlägt Stein. Gehen wir noch eine Runde. Hier drin ist es genauso. Stein ist besser als Schere. Ja, das ist es. So schreiben wir eine Funktion , um nach dem Gewinner zu suchen. Übrigens, falls Sie der Meinung sind, dass das ein bisschen zu viel ist, habe ich im Handbuch auch das Refactoring von Funktionsstörungen hinzugefügt auch das Refactoring von Funktionsstörungen Meiner Meinung nach sieht es so aus, in der Tat ist es etwas kompakter, hat Aber ich denke, es ist etwas schwieriger zu lesen. Ich weiß nicht, was auch immer funktioniert, du kannst es dir aussuchen und es wird okay sein. 16. Kursprojekt: Jetzt, wo wir all diese neuen Dinge gelernt haben, ist es an der Zeit, sie in die Tat umzusetzen. Wir möchten unserem Spiel ein paar neue Funktionen hinzufügen. Zuallererst wollen wir hier ein Punkte-Tracker-Panel haben. Und auch jeder Spieler sollte seinen eigenen Namen haben. Und diese Namen können bearbeitet werden. Sehen wir uns die endgültige Version von Home Work in Aktion an. Ich drücke die Stargame-Taste, nachdem ein Spiel gelaufen ist Du wirst sehen, dass wir jetzt hier einen Zähler haben. Blau hat einen Sieg und Rot hat keine Siege. Und wir können den Punktestand auch auf Null zurücksetzen. Und die Tatsache, dass wir diese Namen hinzugefügt haben, kann ich jetzt auch bearbeiten und sagen, okay, ich möchte, dass mein neuer Name Daniel ist und das wird hier aktualisiert. Und statt CPU will ich spielen, sagen wir mal gegen KI und auch der Name wird dort aktualisiert. Als allgemeine Regel gilt: Bitte versuchen Sie zuerst, all dies selbst zu erledigen, und wenn es nicht funktioniert, schauen Sie sich die nächste Sitzung dieses Videos an. werde ich Ihnen am Ende einige Tipps geben, wie Sie diese neuen Funktionen erstellen können. Sie können auch auf der Seite mit Wenn Sie möchten, werde ich Ihnen am Ende einige Tipps geben, wie Sie diese neuen Funktionen erstellen können. Sie können auch auf der Seite mit den Hausaufgaben nachschauen, den Hausaufgaben nachschauen wo Sie den Code sehen können , mit dem wir all das erstellen können. Von diesem Moment an werde ich Ihnen einige Tipps geben, wie Sie diese neuen Funktionen erstellen können. Denken Sie also daran, dass wir von diesem Moment an einige Spoiler hier haben Gehen Sie einfach nur zu diesem Abschnitt, wenn Sie zunächst versucht haben, das Spiel selbst zu Zunächst werde ich mit dieser Funktion beginnen und den Spielern Namen hinzufügen. Ich denke, dieser ist ein bisschen einfacher zu implementieren. Fast alle Änderungen müssen hier in der Player-Komponente vorgenommen werden . Das erste, was ich hier tun werde , ist einen Player-Parameter hinzuzufügen. Dieser Parameter wird direkt aus dem Spiel stammen. Danach werde ich mit diesem Spielerparameter eine Statusvariable für den Spielernamen festlegen. Wenn wir auf diesen Namen klicken, verwende ich dieses Fenster. Fensteraufforderung ist eine Javaski-Funktion, keine Reaging-Funktion, die es uns ermöglicht, Fenster wie dieses zu erstellen, in denen Sie den neuen Namen eingeben können, das Zeug, das Sie hier gesehen haben Nachdem wir den neuen Wert von der Windows-Eingabeaufforderung gelesen haben, sollten wir den Status aktualisieren Und damit sollten wir die neue Funktion vervollständigen. Übrigens gibt es hier auch einen Bonus, bei dem wir versuchen können, all das in einer Spielernamen-Komponente zu extrahieren , nur einschließlich des Spielers, dieser Spielernamen-Komponente. Kommen wir nun zum zweiten Feature, dem Teil mit der Anzeigetafel. Dieser Teil genau hier. Alles sollte hier in diese Tafel passen. Hier sollte die Anzeigetafel stehen. Wir sollten als Layout eine Schaltfläche hinzufügen. Das kann ein Titel oder etwas Ähnliches und auch ein Absatz mit diesem Text. Während wir diesen hinzufügen, werden wir den Status der Resulusborg-Komponente etwas komplizieren den Status der Resulusborg-Komponente Was wir hier tun müssen, ist mehrere Statuswerte für Score Bred, Score Blue und auch einen aktuellen Gewinner hinzuzufügen , oder wir können auch ein zentralisiertes Objekt hinzufügen, wir fassen den Status in nur einem einzigen Objekt zusammen Eine weitere Sache, die wir tun müssen, ist den Use-Effect-Hook zu verwenden, um diesen zu ersetzen. Wir haben hier den Gewinner der Auswahl, da wir bei der Auswahl des Gewinners auch den Punktestand und den Punktestand aktualisieren werden, ist auch eine Statusvariable. Wir werden in einer Endlosschleife enden, in der wir erneut gerendert werden. Im Grunde müssen wir diesen hier entfernen und ihn in einen hier entfernen und ihn in Use-Effect-Hook einfügen, der überwacht, wann neue Werte für Blau und Rot erschienen sind. Okay, eine letzte Sache, die Sie beachten sollten , ist, dass Sie, wenn Sie die Punktzahl aktualisieren, immer auf der Grundlage des vorherigen Werts aktualisieren sollten Punktzahl immer auf der Grundlage des vorherigen Werts aktualisieren sollten. Wir sollten so etwas im vorherigen und vorherigen Zustand plus eins haben. Schließlich können Sie alles, was wir hier haben, in eine Scoreboard-Komponente extrahieren alles, was wir hier haben, in , nachdem Sie versucht haben, diese Funktionen selbst zu erstellen. Schauen Sie sich auch die Lösung an und sehen Sie, wie sie gelaufen ist, miteinander vergleichen Und gehen Sie auch nicht wieder auf diese Funktionen zurück. Lassen Sie Ihrer Fantasie freien Lauf und versuchen Sie, hier alle Arten von Funktionen hinzuzufügen. Aber es ist sehr wichtig, den Prozess zu genießen. Viel Spaß und viel Spaß beim Codieren. 17. Schlussbemerkung: Wir haben mit unserem Beispiel viel erreicht , als wir bei Null angefangen haben. Wir haben ein voll funktionsfähiges React-Minispiel entwickelt. Während wir das getan haben, haben wir auch Dinge gesehen, wie man ein React-Projekt von Grund auf neu bootet Aber auch, wie wir Komponenten und Requisiten definieren können Komponenten und Requisiten definieren Wir haben auch gesehen, wie man den Status, den Reaktionszustand, verwendet , um die Komponenten UY zu aktualisieren Aber es ist auch sehr wichtig, wie wir einen Status auf der Grundlage des vorherigen Werts des Zustands aktualisieren können . In Zukunft haben wir gesehen, wie man beide grundlegenden CSS-Stile verwendet, aber auch Inline-Stile , damit unsere Anwendungen gut aussehen. Wir haben auch gesehen, wie man den Use-Effect-Hook , um die Werte zu überwachen und Aktualisierungen auszulösen. Sehr wichtig ist auch, wie man die Bereinigungsfunktion des Use-Effekts verwendet um Fehler als Ergänzung zu den Zustandsvariablen zu vermeiden . Wir haben gesehen, wie man das F verwendet , um persistente Werte zwischen Renderings beizubehalten , und auch, wie man Dinge wie Kontextanbieter einrichtet, um Daten zwischen Komponenten auszutauschen und vieles mehr Ich hoffe, dieser Kurs wurde für Sie als nützlich empfunden und Sie haben neue Dinge gelernt Herzlichen Glückwunsch zum Abschluss des Kurses und vielen Dank für Ihre Zeit. Denken Sie daran, dass Sie auch das Haupthandbuch für diesen Kurs lesen das Haupthandbuch für diesen Kurs Und wenn Sie Fragen haben, zögern Sie nicht, mir eine E-Mail an Daniel Gongcraft zu schreiben Daniel Gongcraft Denken Sie daran, dass Sie von Zeit zu Zeit auch meine Website besuchen können, auf der ich regelmäßig neue Artikel veröffentliche um Ihr Webcoding-Handwerk zu verbessern Ich wünsche dir alles Gute und mache weiter mit deinen Freunden beim Programmieren. Tschüss.