React für Anfänger:innen: Entwickle eine App und lerne die Grundlagen

1. Einführung: Meine Leidenschaft für die Webentwicklung stammt definitiv aus meiner Liebe zur Problemlösung. Es gibt etwas sehr Befriedigendes daran, ein Problem zu nehmen und es Ihrem Testament auf Code zu beugen. Hallo, da. Ich bin Ryan Johnson. Ein Webentwickler aus Kanada, wo ich seit 15 Jahren das Privileg hatte, in der Tech-Branche zu arbeiten. Im Laufe dieser Zeit hatte ich das Glück, an einer Vielzahl von verschiedenen Orten zu arbeiten, angefangen von kleinen Startups bis hin zu großen Unternehmen. Heute möchte ich Ihnen eine meiner Lieblingsbibliotheken vorstellen, mit denen ich arbeite, React JS. React JS wird nicht nur von Facebook unterstützt, sondern es hat auch eine der lebhaftesten Entwicklungs-Communities da draußen. Ich habe vor drei Jahren angefangen, React zu benutzen und seitdem habe ich nicht mehr zurückgeschaut. Für mich macht React die UI-Entwicklung mehr Spaß. React bringen einige dringend benötigte Reihenfolge zur Schnittstellenentwicklung indem Sie Ihre Schnittstelle in nette, saubere Komponenten aufteilen können. Dieser Kurs richtet sich an Entwickler, die alle bereit haben ein gutes Verständnis von JavaScript, aber abholen wollen React. Viele Neulinge, die reagieren, neigen dazu, auf externe Abhängigkeiten wie Webpack und Redux und Babel aufgehängt zu werden, und Linting und Testen und so weiter. In diesen Lektionen werde ich diese Ablenkungen vermeiden und an React Grundlagen festhalten, und dann führe ich Sie durch die Erstellung Ihrer ersten App. Um die Dinge abzuschließen, werde ich mein Bestes tun, um zu entwirren wie React funktioniert und was es so effizient macht. Wenn Sie wie ich sind und gerne verstehen, was unter der Haube vor sich geht und die Werkzeuge, die Sie verwenden, sind diese Lektionen für Sie. Ich bin super aufgeregt, euch React vorstellen zu können und ich hoffe, dass ihr genauso viel Spaß daran habt, damit zu arbeiten wie ich. Lasst uns weitermachen und loslegen. 2. Codesandbox einführen: Bevor wir anfangen, möchte ich Ihnen einen leistungsstarken Online-Code-Editor namens CodeSandBox vorstellen , wir für die meisten dieser Lektionen verwenden werden. Ich werde damit beginnen, ein neues Projekt zu erstellen, indem ich auf Sandbox erstellen klicke. Wie Sie sehen können, unterstützt CodeSandBox nicht nur React, sondern auch viele andere beliebte Frameworks. Ich gehe weiter und wähle das React-Projekt aus, und mit einem einzigen Klick habe ich jetzt eine voll funktionsfähige React-App in meinem Browser. CodeSandBox hat es mir erlaubt, das Setup zu überspringen und sich auf die React-Grundlagen zu konzentrieren, die wir hier sind, um zu lernen. Als erstes werde ich tun, da ich bereits ein Konto habe melden Sie sich bei CodeSandBox als mein GitHub-Konto an. Fühlen Sie sich frei, ein eigenes Konto zu erstellen, damit Sie den Lektionen folgen können. Der letzte Editor-Teil von CodeSandBox ist ziemlich Standard und funktioniert genauso wie die meisten gängigen Code-Editoren heute. Sie haben Ihren Datei-Browser. Wir können alle Dateien und Verzeichnisse im Projekt anzeigen. Wie Sie sehen können, hat CodeSandBox bereits einige Dateien für uns erstellt. Wenn ich eine neue Datei oder ein neues Verzeichnis hinzufügen möchte, kann ich die Schaltflächen hier oben verwenden. Unterhalb des Datei-Editors haben wir den Abschnitt Abhängigkeiten. Dadurch werden alle NPM-Abhängigkeiten angezeigt, die für das Projekt installiert sind. Sie können sehen, dass CodeSandBox bereits einige React-Abhängigkeiten für uns installiert hat. Das Hinzufügen neuer Abhängigkeiten ist ebenfalls einfach. Klicken Sie einfach auf Add Dependency, suchen Sie nach dem gewünschten, und klicken Sie dann darauf, um es zu installieren. Ein einzelner Klick auf eine Datei öffnet sich im Vorschaumodus, während ein Doppelklick auf eine Datei die Datei im Bearbeitungsmodus öffnet. Möglicherweise haben Sie auf der rechten Seite etwas bemerkt, das wie ein Browserfenster aussieht. Dies ist eine Live-Ansicht der App, die automatisch neu geladen wird, wenn sich eine Datei ändert. Um zu demonstrieren, Ich werde voran gehen und unsere h1 aktualisieren, um Hallo React Anfänger zu sagen. Jetzt können Sie sehen, sobald das Update abgeschlossen ist, es hier auf der rechten Seite automatisch aktualisiert. Schließlich möchte ich Ihnen die eingebaute Konsole von CodeSandBox zeigen. Dies imitiert so ziemlich die Funktionalität der Konsole Ihres Browsers. Also, wenn ich voran gehe und Konsole etwas abmelde, kann ich die Peer-Hearing-Code-Sandboxen-Konsole sehen. Und genau wie die Browser-Konsole kann ich auch Befehle ausführen. Wenn ich Sie in Alert voran gehe, die Hallo von der Konsole sagt, können Sie sehen, dass es ausgeführt wird und hier oben im Browser angezeigt wird. Genug von unserer Code-Sandbox schon. Wir sind hier, um etwas über React zu erfahren. Aber das wird gesagt, lasst uns voran gehen und loslegen. 3. Grundlagen: Komponenten: Wenn es darum geht, zu reagieren, dreht sich alles um die Komponenten. Komponenten sind wahrscheinlich mein Lieblingsteil bei der Entwicklung einer Reaktion. Mit Komponenten können Sie jede Benutzeroberfläche verwenden und sie in kleinere, wiederverwendbare Blöcke aufteilen , die unabhängig voneinander funktionieren können. Nehmen wir zum Beispiel die Code-Sandbox-Schnittstelle, in der wir arbeiten , und denken darüber nach, wie wir sie in Komponenten aufteilen könnten. die Kopf- und Fußzeilenbereiche ignoriere, sehe ich das Potenzial für drei Komponenten der obersten Ebene. Eine Datei-Browser-Komponente, Datei-Editor-Komponente und eine Browser-Fenster-Komponente. Jede dieser Komponenten kann auch aus ihren eigenen Komponenten bestehen. Zum Beispiel hat der Datei-Browser ein Akkordian-Menü , das eine eigene Komponente sein könnte, und jedes Element innerhalb des Akkordeans kann auch eine Komponente sein. Wenn Sie weiter gehen möchten, kann jedes Item-Symbol sogar eine Komponente sein. Aufteilen Ihrer Benutzeroberfläche in kleinere verwaltbare Komponenten wie diese hat alle möglichen Vorteile, einschließlich der einfacheren Wiederverwendung und Testen Ihres Codes. Aber wir können nicht über Komponenten sprechen, ohne Elemente zu erwähnen. Ein Element ist der kleinste Baustein und reagiert und beschreibt, was Sie schließlich auf dem Bildschirm sehen. Um zu demonstrieren, werde ich damit beginnen, ein einfaches H ein Element zu erstellen. In diesem Element werde ich einen Hallo Text haben und dann werde ich ihn in die App-Komponenten einfügen, die wir auf dem Bildschirm rendern können. Dies ist ein Beispiel für ein sehr einfaches Element, aber auch Elemente können komplexer sein. Hier ist ein Beispiel für ein komplexeres Element namens Wrapper, das aus einem div mit etwas Absatztext besteht. Sie können sich Elemente als Bausteine vorstellen, die zum Zusammenfügen Ihrer Komponenten verwendet werden. Wie sieht eine Komponente aus? Eine Komponente in ihrer einfachsten Form ist nur eine Funktion. Nehmen wir beispielsweise an, wir hatten eine einfache Add-Funktion , die zwei Parameter nahm und die Summe von zwei Werten zurückgibt. Sie können sehen, ob ich die Add-Funktion zwei und zwei übergebe, ich bekomme vier Log an die Konsole. Wenn ich diesen zweiten Parameter zehn ändere, bekomme ich 12 wieder in der Konsole. Aber was wirklich cool ist, ist, dass wir diese Add-Funktion leicht konvertieren können , um stattdessen eine reagierende Komponente zu sein. Verwenden Sie zunächst ein Großbuchstabe A für den Komponentenfunktionsnamen, da alle Komponenten mit einem Großbuchstaben beginnen müssen. Dies liegt daran, dass React Komponenten, die mit Kleinbuchstaben beginnen, als DOM-Tags behandelt. Als nächstes nehmen sie anstelle der Funktion zwei Parameter, einen einzelnen Parameter namens Requisiten. Requisiten sind, wie Sie Daten in Ihre Komponente übergeben. Eine Komponente ist eine unveränderliche Funktion, was bedeutet, solange Sie ihr die gleiche Eingabe geben und reagiert Fall Requisiten immer die gleiche Ausgabe erhalten sollten. Jetzt kann ich die Add-Komponente übernehmen und die App rendern lassen. Um die Werte für a und b zu übergeben, fügen Sie sie einfach als Eigenschaften zu der Komponente hinzu. Jetzt können Sie sehen, dass die Summe auf dem Bildschirm gerendert wird. Wenn es um Komponenten geht, bietet React tatsächlich zwei verschiedene Optionen. Die erste und die einfachere der beiden sind funktionale Komponenten, denen es sich um eine Funktion handelt, die einen Requises-Parameter hat und ein gültiges Reakt-Element zurückgibt. Die Add-Komponente, die wir gerade als Beispiel für eine funktionale Komponente, die zweite oder Klassenkomponenten erstellt haben, und wie der Name sagt, wird die Komponente eine Klasse anstelle einer Funktion sein. Zum Beispiel kann ich die Add-Komponente leicht in eine Klassenkomponente konvertieren. Beginnen Sie mit der Konvertierung von const in Klasse. Dann haben Sie die Klassenausdehnung von reagierenden Punktkomponente. Fügen Sie dann eine Renderfunktion hinzu und lassen Sie das Element stattdessen zurückgeben. Schließlich, da Requisiten jetzt eine Instanzvariable sind, fügen Sie dies davor hinzu. Dort haben Sie es, eine Klassenkomponente. Aber die Ausgabe sieht genau so aus wie zuvor, was die Frage aufwirft, warum überhaupt eine Klassenkomponente verwendet wird? Es kommt einfach so vor, dass es einen sehr guten Grund gibt, nur Klassenkomponenten Zugriff auf Reaktionsstatus und Lebenszyklusmethoden haben. Keines dieser Features steht über funktionale Komponenten zur Verfügung. Sie sich keine Sorgen, dass wir später sowohl Status- als auch Lebenszyklusmethoden eingehen. Ein weiteres schönes Merkmal der Komponenten ist die Kinderstütze. Angenommen, ich wollte eine wiederverwendbare Seitenlayoutkomponente erstellen. Die Idee ist, dass alle meine Seiten die gleiche Kopf- und Fußzeile zeigen. Aber entweder übergeben Sie für jede Seite eine andere Textkopie. Also, wie mache ich das? Geben Sie Requisiten Punkt Kinder. Jetzt werde ich die Layoutkomponente rendern, aber anstelle eines selbstschließenden Tags werde ich ein öffnendes und schließendes Tag verwenden. Dann füge ich einige Absatzelemente für diese Layouts Körperkopie hinzu. Genau so können wir sehen, dass meine Körperkopie zwischen meiner Kopfzeile und Fußzeile gerendert wird. Sie können sich Requisiten vorstellen, die untergeordnete Elemente als Platzhalter für den Inhalt darstellen, den Sie zwischen den öffnenden und schließenden Tags einfügen, wenn Sie die Komponente rendern. Ich werde voran gehen und eine weitere Layout-Komponente hinzufügen, aber dieses Mal werde ich in einer anderen Körperkopie übergeben. Da das Layout Eingabeaufforderungen Punkt untergeordnete Elemente verwendet, kann ich verschiedene Textkopien an dieselbe Layoutkomponente übergeben. Dies ist eine sehr leistungsfähige Funktion, mit der Sie Komponenten schreiben können, die keine Kenntnisse der Kinder dort einschließlich erfordern. Sie haben vielleicht bemerkt, dass ich sie, wenn unsere kreative Layout-Komponente, in ein div-Element eingewickelt habe, genau wie die App-Komponente, als ich die zweite Layer-Komponente hinzugefügt habe. Dies liegt daran, dass eine Komponente nur ein einzelnes Wurzelelement haben sollte , es sei denn, die Verwendung von etwas reagierenden Fragmenten ruft Um zu demonstrieren, werde ich das Wrapper-Div aus der Layoutkomponente entfernen und sehen, was passiert. Sie können sehen, sobald ich das mache, bekomme ich einen Fehler. Angrenzende JSX-Elemente müssen in ein schließendes Tag eingewickelt werden. So ziemlich sagt das, dass ich erwarte, dass eine Komponente ein einzelnes Element zurückgibt, und du hast mir stattdessen drei gegeben. Jetzt gibt es eine Möglichkeit, mehrere Elemente zurückzugeben, und das ist, Fragmente zu verwenden, wie der Fehler suggeriert. Dies ist praktisch, da es verhindert, dass Sie die Elemente umwickeln müssen und was in diesem Fall ein nutzloser Deal ist. Um das Layout zu aktualisieren, verwenden Sie Fragmente, muss ich nur die Elemente in die Reakt-Punkt-Fragmentkomponente umschließen. Wenn unsere Seite gerendert wird, wird es kein zusätzliches div-Element geben und unser Fehler sollte verschwinden. Das schließt alles zusammen, was ich in Komponentengrundlagen abdecken wollte. Als nächstes werde ich einen Blick auf die HTML-ähnliche Syntax wir verwendet haben, um unsere Komponenten namens JSX zu schreiben. 4. Grundlagen: JSX: Wir müssen noch etwas abdecken, bevor wir Ihren ersten Reaktor, JSX, erschaffen. Wenn Sie sich früher erinnern, habe ich erwähnt, ist JSX eine HTML-ähnliche Syntax, die verwendet wird, um reagierende Elemente zu beschreiben. Obwohl es viel wie HTML aussehen kann, ist es tatsächlich eine Erweiterung von JavaScript und die meisten Leute finden es einfacher, mit ihnen zu arbeiten reagiert Top-Level-API-Aufrufe wie React create Element. Damit ist es wichtig, sich daran zu erinnern, dass JSX immer noch kompiliert wird, um Create-Elementaufrufe zu reagieren. Um ein Tool zu demonstrieren oder zu verwenden, das uns tatsächlich zeigt, worauf JSX kompiliert wird. Ich gehe einfach voran und kopiere unsere App-Komponente. Auf der linken Seite sehen Sie die JSX-Version der Komponente und auf der rechten Seite sehen Sie tatsächlich die Compiler-Ausgabe von dieser Komponente. Wenn wir uns die kompilierte Version der Komponente genauer ansehen, können Sie tatsächlich sehen, dass sie aus mehreren Aufrufen von React.createElement besteht. Jeder dieser Aufrufe entspricht einem Element in der JSX-Komponente. Wir haben unseren Haupt-React Create-Elementaufruf , der ein div ist, der hier zu unserem Hauptdiv zurückgeht. Das hat einen Klassennamen von App, und dann hat es auch einige untergeordnete Elemente, ein h1 und h2, die wir in beiden sehen hier durch zwei weitere Aufrufe dargestellt erstellen Element zu reagieren. Beim Vergleich dieser beiden Versionen derselben Komponente finde ich, dass die JSX-Version viel einfacher zu lesen ist. Ich denke, das wird für die meisten Entwickler gelten, die mit HTML vertraut sind. Alle Lektionen, die folgen werden mit JSX. Aber ich wollte zeigen, was unter der Haube vor sich geht, wenn Sie eine JSX-Komponente erstellen. Die wahre Schönheit von JSX ist, dass es mit der vollen Leistung von JavaScript dahinter kommt. Beginnen wir mit einigen JSX-Grundlagen, zuerst, Einbettung von Ausdrücken. Nun klingt das alles wirklich schick, aber wir haben hier eigentlich schon mit einem Ausdruck gearbeitet. Unsere props.version, die auf dem Bildschirm gerendert wird, ist ein Ausdruck. In JSX werden Ihre Ausdrücke nur in geschweifte Klammern eingewickelt. Der Inhalt der geschweiften Klammern ist das, was tatsächlich ausgewertet wird. In diesem Fall geben wir nur den Wert von props.version auf den Bildschirm aus. Bevor wir fortfahren, möchte ich ein paar schnelle Twist CodeSandBox machen. Wir werden damit beginnen, unseren Dateieditor zu reduzieren, indem Sie auf die Registerkarte Dateieditor klicken. Dann werde ich nur unser Browserfenster ein bisschen hier auf der rechten Seite verkleinern. Jetzt werde ich voran gehen und unseren Ausdruck aktualisieren , der tatsächlich eine Nachricht basierend auf dem Wert der Version rendert. Wenn die Version größer als eins ist, werde ich eine Meldung rendern, die ungültige Version besagt. Wenn die Version kleiner oder gleich eins ist, dann werde ich die props.version tatsächlich rendern, wie wir es vorher getan haben. Ich gehe voran und aktualisiere eine Version zu zwei Punkten, obwohl, Sie können jetzt sehen, dass wir tatsächlich eine neue Nachricht haben, ungültige Version auf Bildschirm gerendert. Wie Sie sehen können, mussten wir hier nichts Besonderes tun, um das zum Laufen zu bringen. Dies ist nur ein einfacher alter ternärer JavaScript-Operator , der eine oder andere Nachricht basierend auf einer Bedingung rendert. Das ist, was ich an JSX liebe, es ist nur JavaScript. Keine Notwendigkeit, noch eine andere Templating-Sprache zu lernen. Jetzt, da wir einige Änderungen vorgenommen haben, werde ich voran gehen und unsere Arbeit retten. Sie haben es vielleicht gewusst, sobald wir unseren Code tatsächlich Auto-Format speichern. Dies liegt daran, dass CodeSandBox tatsächlich ein Tool namens hübscher verwendet, das den monotonen Job der Codeformatierung übernimmt und dies automatisch für Sie erledigt. Jetzt, da wir JSX-Ausdrücke behandelt haben, gehen wir zu Attributen über. Bei der Angabe von Attributen und JSX gibt es einige wesentliche Unterschiede im Vergleich zu HTML-Attributen. ReactDom verwendet Kamel Groß-/Kleinschreibung für Attributnamen. Zum Beispiel wird Kleinbuchstaben beim Klicken zu Kamel Groß-/Kleinschreibung beim Klicken, Kleinbuchstaben Tab-Index wird zu Kamel-/Groß-/Kleinschreibung Register Index. Beim Angeben von Attributwerten stehen Ihnen zwei Optionen zur Verfügung. Die erste sind String-Literale, und es ist einfach genug. Die zweite sind Ausdrücke, die es ermöglichen, dynamische Attributwerte wie folgt zu erstellen. Nur um zu zeigen, dass das funktioniert, werde ich die Konsole hier öffnen. Sie können sehen, dass dies tatsächlich zu einem Tab-Index von zwei ausgewertet wird. Seien Sie vorsichtig, wenn Sie Ausdrücke als Attributwerte verwenden, nicht um sie in Anführungszeichen zu setzen. Dies führt dazu, dass der Ausdruck nicht ausgewertet wird und stattdessen als Zeichenfolgenliteral behandelt wird. Das schließt die Grundlagen von JSX. Aber keine Sorge, wir werden in den kommenden Lektionen in eine fortgeschrittenere JSX-Nutzung einsteigen. 5. Eine App aufbauen: Einführung: Ich fand den besten Weg, ein neues Framework zu lernen, darin, etwas zu bauen. Jetzt, da wir die Grundlagen behandelt haben, möchte ich Sie durch die Erstellung Ihrer ersten React-App führen. Also, was bauen wir? Für unsere erste App erstellen wir einen einfachen Google-Klon. Aber anstatt in der Lage zu sein, nach irgendetwas zu suchen, wird unser Google nach Papa-Witzen und nur Papa-Witze suchen. Wenn ich voran und geben Sie „Katze“, klicken Sie auf „Suchen“, Ich bekomme wieder eine Liste von fünf Prime Katze bezogenen Papa Witze. Wenn ich einen neuen Suchbegriff eingeben und auf „Suchen“ klicke, kann ich sehen, dass die Suchergebnisse mit neuen Papa Witze aktualisiert werden. Schließlich haben wir im Gegensatz zu Googles Schaltfläche „Ich fühle mich glücklich“ die Schaltfläche „Ich fühle mich lustig“, die in diesem Fall einen einzelnen Papa-Witz zurückgeben wird. Obwohl diese App ziemlich unkompliziert erscheinen mag, werden wir eine Menge Knurren bei der Erstellung abzudecken, also lasst uns loslegen. Wir werden weiterhin CodeSandBox verwenden, die Creator-App. Aber bevor wir beginnen, möchte ich irgendwie mit einem sauberen Schiefer beginnen. Also werde ich voran gehen und unsere vorherige Arbeit löschen und mit einer schönen leeren App-Komponente beginnen und den Pfeil ignorieren, der vorerst erscheint. Zunächst werden wir die Dinge wirklich einfach halten. Wir werden eine einzige Taste haben, die, wenn sie angeklickt, erzeugt einen einzigen Dad Witz. Also werde ich anfangen, indem ich voran gehe und diesen Button erstelle, und ich werde ihn mit „Sag mir einen Witz“ beschriften. So können Sie sehen, dass wir unseren neuen „Sagen Sie mir einen Witz“ -Button auf dem Bildschirm hier gerendert haben. Aber wenn ich darauf klicke, passiert nicht viel. Um Klick-Ereignisse in React zu behandeln, verwenden Sie die OnClick Event.Lassen Sie uns voran und fügen Sie eine zu unserer Schaltfläche hier. Das OnClick -Ereignis nimmt tatsächlich eine Funktion als seinen Wert. Wir gehen also voran und fügen eine einfache Funktion hinzu, die einen Wert abmeldet, wenn Sie darauf klicken. Gehen wir einfach weiter und öffnen Sie unsere Konsole hier. Jetzt können Sie sehen, dass jedes Mal, wenn wir auf die Schaltfläche „Sagen Sie mir einen Witz“ klicken, das Wort „Klick“ für jeden dieser Klicks an der Konsole protokolliert wird. Jetzt, da wir wissen, dass unser OnClick-Ereignis tatsächlich funktioniert, möchte ich unseren OnClick-Handler in seine eigene Funktion verschieben. Ich werde voran gehen und es OntellJoke nennen, und es wird unseren Klick genau so protokollieren, wie er es jetzt tut. Also werde ich diesen neuen OntellJoke nehmen, und ich werde die Inline-Funktion ersetzen, die wir zuvor erstellt haben, und ich werde einfach voran gehen und speichern. Wenn ich nun auf „Sagen Sie mir einen Witz“ klicke, sollten wir immer noch den Klick ausgeloggt sehen. Jetzt macht dieser Witz-Button immer noch nicht sehr viel, wenn wir darauf klicken. Was wir wirklich wollen, ist jedes Mal, wenn Sie auf den Witz-Button klicken, erhalten Sie einen Witz zurück, einen Dad Witz, speziell. Aber bevor wir das machen können, brauchen wir einen Platz, um ein paar Dad Witze zu kriegen. Da es in diesen Tagen eine API für alles gibt, werden wir eine kostenlose API von icanhazdadjoke.com für alle unsere Papa-Witzbedürfnisse verwenden. Werfen wir einen genaueren Blick auf API-Dokumente, um zu sehen, was wir es zu tun haben. Erstens würden Sie feststellen, dass keine Authentifizierung für diese Anrufe erforderlich ist, was eine Sache weniger ist, um die Sie sich Sorgen machen müssen. Als Nächstes werden Sie sehen, dass die API tatsächlich mehrere Antwortformate unterstützt. In unserem Fall beschäftigen wir uns nur mit der JSON-Option und das ist, was wir für unser Tutorial verwenden werden. Für unsere „Sagen Sie mir einen Witz-Button“, werden wir den Endpunkt „Holch a random dad Witz“ verwenden. Die Art und Weise, wie dies funktioniert, ist, dass jedes Mal, wenn auf die Schaltfläche geklickt wird, ein neuer zufälliger Witz generiert und an uns zurückgesendet wird. Wir können ein Beispiel der Antwort sehen, die hier zurückgegeben wird, das ein Objekt ist, das den Witz zusammen mit einer eindeutigen ID und einem HTTP-Statuscode enthält. Jetzt, wo wir unseren Endpunkt haben, gehen wir zurück und schließen unseren Witzknopf an. Um den Endpunkt „Random Witz“ aufzurufen, verwenden wir die Fetch-API von JavaScript , mit der Ressourcen im Netzwerk abgerufen werden können. Wir werden Fetch zwei Parameter übergeben. Die erste ist die Ressourcen-URL, die in unserem Fall der Endpunkt „Fetch random Witz“ ist. Der zweite Parameter ist ein Optionsobjekt, aber wir werden die HTTP-Methode auf GET setzen , da dies eine GET-Anfrage ist. Als nächstes werden wir den „Accept“ -Header auf den JSON-Typ der Anwendung setzen , um sicherzustellen, dass unsere Daten im JSON-Format zurückkommen. Der Aufruf von „Fetch“ gibt ein Versprechen zurück, das zu einem Antwortobjekt aufgelöst wird. In unserer „then“ -Methode verwenden wir die Antwortobjekte, die in der JSON-Methode erstellt wurden, um unsere Antwortdaten zu analysieren. Da die JSON-Methode auch ein Versprechen zurückgibt, können wir einfach eine andere „dann“ -Methode verketten. Diesmal wird der Callback an geparste JSON-Daten übergeben, wenn das Versprechen aufgelöst wird, nur um sicherzustellen, dass die Ergebnisse mit protokolliert werden. Jetzt gehen wir weiter und öffnen die Konsole. Nun, wenn ich auf den Witz-Button klicke, können Sie sehen, dass die Antwort von der Papa-Witz-API abgemeldet wird. Da wir den Endpunkt „Random Witz“ verwenden, erhalten wir einen anderen Witz zurück, wenn ich erneut auf die Schaltfläche klicke. Jetzt, da unser Witz-Button funktioniert, schließt das diese Lektion ein. Als Nächstes betrachten wir einen wichtigen Zustand der React-Feature-Komponente. 6. Eine App entwickeln: Komponentenstatus: In dieser Lektion werde ich einen tieferen Einblick in den Zustand der Komponente machen. Aber bevor wir reinspringen, gehen wir dahin, wo wir aufgehört haben. Um zusammenzufassen, haben wir einen Scherz-Button, der jedes Mal einen Witz holt, wenn er angeklickt wird, und wir haben den Witz derzeit auf der Konsole protokolliert. Als nächstes möchte ich unsere Apps aktualisieren, damit der Fetch-Witz auf dem Bildschirm gerendert wird. Um dies zu tun, müssen wir irgendwo den Fetch-Scherzwert speichern. In einem nicht reagierenden Setup denken Sie vielleicht, den Wert in einer Variablen wie so zu speichern. Wenn ein neuer Witz geholt wird, werde ich den Wert der Witzvariablen mit dem geholten Witz aktualisieren. Wenn Sie aufrufen, gibt der Witz EPI ein Objekt zurück. Dazu gehören ID, Witz und Status. Anstatt das gesamte Witzobjekt zu speichern, werde ich nur den Witz selbst speichern. Ich werde auch den Wert dieser Witzvariablen abmelden, nur um sicherzustellen, dass sie aktualisiert wird. Schließlich werde ich eine schnelle Entwicklung um unsere Schaltfläche hinzufügen und ein Absatzelement einfügen und dann den Inhalt dieses Absatzes auf den Wert unserer Witzvariablen setzen. Lassen Sie uns das versuchen und sehen, was passiert. Wir können sehen, dass unsere Witzvariable jedes Mal in der Konsole protokolliert wird , wenn auf die Schaltfläche geklickt wird, aber wir sehen nichts Update auf dem Bildschirm. Wie kommt es? Der Grund, warum wir keine Updates auf dem Bildschirm sehen , ist, dass React nicht weiß, dass sich etwas tatsächlich geändert hat. Eine React-Komponente wird nur dann wiedergerendert, wenn sich ihre Eingabeaufforderungen oder der Status geändert haben. Bei unserer App-Komponente tritt jedes Mal ein Rendern auf, wenn die App-Funktion von React ausgeführt wird. Ich füge eine Konsole hinzu, die sich bei unserer App-Funktion angemeldet hat. Auf diese Weise können wir jedes Mal, wenn die Komponente rendert, etwas protokolliert sehen. Wie Sie sehen können, wird das Rendern für das anfängliche Rendern der Komponenten abgemeldet. Beachten Sie jedoch, dass jedes Mal, wenn ich auf den Witz-Button klicke , das Rendern nicht abgemeldet wird, obwohl die Witzvariable aktualisiert wird. Dies liegt daran, dass Änderungen an unserer Witzvariablen nicht von React verfolgt werden und daher kein neues Rendering auslösen. Es sieht so aus, als ob wir möchten, dass die App Witzänderungen rendert, wir müssen Witz entweder im Komponentenstatus oder Requisiten speichern. Welches verwenden wir in diesem Fall? Requisiten werden an eine Komponente übergeben und sind schreibgeschützt, was bedeutet, dass sie nicht geändert werden können, wo ein Status Informationen über die Komponente enthält und aktualisiert werden kann. Damit wird gesagt, Zustand sieht wie die richtige Wahl aus, da wir den Witzwert aktualisieren müssen, während wir gehen. Da funktionale Komponenten keinen Zugriff auf den Status haben, müssen wir zuerst die App in eine Klassenkomponente konvertieren. Beginnen Sie, indem Sie die App-Funktion in eine Klasse ändern, die sich von React zu einer Komponente erstreckt. Konvertieren Sie dann Witz in eine Klasseneigenschaft. Als nächstes müssen wir die OntellJoke-Funktion konvertieren, um stattdessen eine Klassenmethode zu sein. Dann schließlich, anstatt Elemente direkt zurückzugeben, verwenden wir die rendermethode und geben stattdessen die Elemente von dort zurück. Nun, da OntellJoke und Witz beide Klassenvariablen sind, müssen wir dies vor ihnen hinzufügen. Es sieht so aus, als würden wir ohne Fehler rendern, aber versuchen wir den Witz-Button noch einmal. Sieht aus, als hätten wir etwas kaputt gemacht, und Code Sandbox ist nett genug, um uns genau zu sagen, was der Fehler ist, kann den Eigenschaftsscherz von undefined nicht setzen. Es stellt sich heraus, dass wir diesen Fehler verursacht haben, wenn wir die OntellJoke-Funktion in eine Klassenmethode ändern . Dies liegt daran, dass Klassenmethoden nicht standardmäßig gebunden sind. Da OntellJoke von einem Click-Handler aufgerufen wird, ist der Verweis darauf kein Bereich mehr auf die Komponente, sondern auf die Schaltfläche, daher erhalten wir einen Fehler, wenn wir versuchen, einen Wert für diesen Gedankenscherz festzulegen. Obwohl es mehrere Lösungen für dieses Problem gibt, beschließe ich, jede Methode der Komponente im Konstruktor explizit zu binden. Unsere Komponente hat momentan keinen Konstruktor, also fangen wir an, indem wir einen hinzufügen. Da alle Komponenten von der Komponentenklasse Reacts erweitert werden, müssen Sie sicherstellen, dass Sie die Super-Methode aufrufen, bevor Sie etwas anderes tun. Ich werde diese OnTellJoke-Methode nehmen und sie einer Version dieser Methode zuweisen, die an die Komponente gebunden ist. Obwohl OntellJoke nun von einem Klick-Handler aufgerufen wird, wird dies auf die Komponente und nicht auf die Schaltfläche verweisen. Wenn das fixiert ist, lassen Sie uns voran gehen und versuchen Sie erneut einen Scherzknopf. Ehrfürchtig, keine Fehler mehr. Jetzt, da unsere Komponente erfolgreich auf eine Klassenkomponente aktualisiert wurde, sind wir bereit, den lokalen Status zu verwenden. Lassen Sie uns damit beginnen, unsere alte Witzvariable zu entfernen, da sie nicht mehr benötigt wird. Stattdessen werden wir eine neue Scherzvariable in unserem Komponentenstatus erstellen. Wenn Sie Ihrer Komponente Zustandswerte hinzufügen, füge ich normalerweise Standardwerte hinzu. Dies geschieht im Konstruktor, indem der Komponentenstatus-Eigenschaft direkt Werte hinzugefügt werden. Ich werde voran gehen und Witz zu unserem Zustand hinzufügen und es auf null setzen, um mit zu beginnen. Es ist wichtig, sich daran zu erinnern, dass dies die einzige Zeit ist , die Sie den Komponentenstatus direkt ändern sollten. Für Statusaktualisierungen müssen Sie immer die Komponenten-Set-Zustands-Methode verwenden, die wir jetzt verwenden, um unseren Zustand jedes Mal zu aktualisieren, wenn ein neuer Witz abgerufen wird. Lassen Sie uns damit beginnen, unseren Verweis auf unsere alte Witzvariable zu entfernen. Lassen Sie uns das durch einen Aufruf von this.set-Status ersetzen. Als nächstes werden wir setzen Zustand ein Objekt mit unseren aktualisierten Zustandswerten übergeben. In unserem Fall wird das in unserem neuen geholten Scherzwert übergeben. Wenn Sie set state verwenden, ist es besser, es als eine Anfrage zu betrachten, anstatt einen sofortigen Befehl zum Aktualisieren der Komponente. Dies liegt daran, dass der Set-Status die Komponente nicht immer sofort aktualisiert, sondern die Aktualisierung möglicherweise bis zu einem späteren Zeitpunkt aufschiebt. Dies macht das Lesen this.state direkt nach dem Aufruf setzt Daten potenzielle Fallstricke. Um diese Fallstricke mit festgelegtem Zustand zu vermeiden, empfehle ich, Reacts offizielle Dokumente zu diesem Thema zu lesen, da es ein kritisches Stück ist, wenn es um fortgeschrittenere React-Themen geht. Jetzt, da wir unsere Set-Statusaufrufe angeschlossen haben, aktualisieren wir unser Absatzelement, um den Scherzstatus anstelle unseres alten Scherzwerts zu verwenden. Mal sehen, ob das einen Unterschied gemacht hat. Schön. Jetzt werde ich auf den Witz-Button klicken, unser neuer Witz wird auf dem Bildschirm gerendert. Sie werden auch feststellen, dass Renderings jetzt jedes Mal protokolliert werden, wenn ich auf die Schaltfläche klicke. Dies wird erwartet, da jeder Schaltflächenklick eine Statusaktualisierung auslöst und jede Statusaktualisierung ein erneutes Rendern auslöst. Das schließt die Einführung in den Zustand der Komponente ein. Als Nächstes werden wir einen Blick auf eine weitere wichtige React-Funktion werfen, Lebenszyklusmethoden. 7. Eine App entwickeln: Lifecycle: In dieser Lektion werde ich vorstellen, reagiert Lebenszyklusmethoden. Aber bevor ich das mache, machen wir eine kurze Zusammenfassung. In der vorherigen Lektion haben wir unsere Schaltfläche angeschlossen, um jedes Mal, wenn darauf geklickt wurde, einen neuen Witz anzuzeigen. Aber wenn unsere App zum ersten Mal geladen wird, sieht unser Bildschirm ziemlich nackt aus. Also werde ich voran gehen und einige neue Funktionen hinzufügen, die einen Witz holen und anzeigen, wenn die App geladen wird. Also, wie machen wir das? Dafür werden wir Reages-Komponenten-Lebenszyklus-Methoden nutzen. Diese Methoden stellen Hooks bereit, mit denen Sie Ihre eigene Logik ausführen können, wenn ein entsprechendes Ereignis in einer Komponente auftritt. In unserem Fall möchten wir einen Witz holen, bevor die App-Komponente auf den Bildschirm gerendert wird. Dies ist ein perfekter Anwendungsfall für die ComponentDidMount () Lebenszyklusmethode reagiert. Wenn wir einen Blick auf die offiziellen React-Dokumente werfen, heißt es: „ComponentDidMount () wird unmittelbar nach dem Einhängen einer Komponente aufgerufen.“ Es heißt auch: „Wenn Sie Daten von einem Remote-Endpunkt laden müssen, ist dies ein guter Ort, um die Netzwerkanforderung zu instanziieren.“ Das ist genau das, was wir mit unserem FetchJoke gemacht haben. Also denke ich, dass dies perfekt zu unserem Szenario passt. Lassen Sie uns also fortfahren und fügen Sie unserer App-Komponente eine componentDidMount () -Methode hinzu. Jetzt könnten wir einfach den Inhalt unseres on tell Witz-Klick-Handlers in die Komponente kopieren , die so eingehängt wurde und das würde gut funktionieren, aber es erzeugt eine ganze Menge Duplizierung, die nicht großartig ist. Stattdessen werde ich diese Logik in eine neue Methode kopieren und sie FetchJoke nennen. Jetzt werde ich beide Komponenten aktualisieren, die gemountet wurden und Witz mitteilen, stattdessen FetchJoke aufzurufen. Mit dieser Änderung wird ein Witz geholt, wenn die App-Komponente eingehängt wird, was bedeutet, wenn ich die Seite aktualisiere, sollte ich sofort einen Witz sehen, der auf der Seite gerendert wird und da gehen wir. Bei asynchronen Netzwerkanfragen wie unserem FetchJoke-Aufruf ist es gut darüber nachzudenken, was ein Benutzer sieht, während diese Anfrage geladen wird. Meine Verbindung ist ziemlich schnell, so dass die Zeit zwischen mir auf den Witz-Button klickt und tatsächlich einen Witz sieht, ziemlich schnell ist. Aber was ist mit diesen Benutzern, die eine langsamere Verbindung haben? Was werden sie sehen? Ich werde voran gehen und eine langsamere Verbindung mit Chrome DevTools simulieren. Bei einer langsamen Verbindung können Sie sehen, dass der Benutzer eine Weile warten muss, bevor er einen Witz auf dem Bildschirm sieht und während dieser Zeit hat der Benutzer keine Hinweise darauf, was los ist. Das macht keine großartige Benutzererfahrung, also lassen Sie uns voran gehen und das verbessern. Das erste, was ich tun werde, ist eine neue Zustandsvariable namens IsFetchingJoke zu erstellen. Dies wird verwendet, um zu verfolgen, wann ein Witz abgerufen wird, und standardmäßig werde ich voran gehen und auf Standardwerte setzen. Der Job beginnt mit dem Abrufen, sobald FetchJoke aufgerufen wird. Also werde ich einen Set-Status hinzufügen, der direkt am Anfang dieser Methode genannt wird und Satz Witz auf true abruft. Ein Witz gilt als erledigt Abrufen, wenn wir eine Antwort von der Witz-API erhalten, die genau hier passiert. Da wir bereits Set-Status hier aufrufen, werde ich nur voran gehen und als IsFetchingJoke und setze es auf false. Um zu testen, dass es wie erwartet funktioniert, werde ich den Wert von IsFetchingJoke auf dem Bildschirm rendern. Da IsFetchingJoke ein boolescher Wert ist, rufe ich zwei Zeichenfolgen auf, die es uns ermöglichen, den Wert auf den Bildschirm zu rendern. Wenn ich nun auf die Schaltfläche klicke, können Sie sehen, dass der IsFetching-Wert auf true gesetzt ist und sobald der Witz zurückgegeben wird, geht IsFetching zurück zu false. Die erste Verbesserung, die ich machen möchte, ist, eine Witztaste deaktiviert zu haben , während Witz geholt wird. Dies verhindert, dass der Benutzer erneut auf die Schaltfläche klickt , wenn wir bereits einen Witz holen. Um dies zu erreichen, werden wir die Schaltflächen deaktiviertes Attribut verwenden und den Wert gleich unserem neuen IsFetchingJoke Zustandswert setzen. Wenn nun ein Witz geholt wird, wird die Schaltfläche automatisch deaktiviert und dann wieder aktiviert, wenn der Abruf abgeschlossen ist. Eine weitere Verbesserung, die wir machen können, ist das Hinzufügen besserer Messaging für den Benutzer, während ein Witz geholt wird. Momentan zeigen wir immer noch nur den alten Witz. Stattdessen möchte ich eine ladende Witznachricht für den Benutzer anzeigen. Um dies zu erreichen, werden wir einen bedingten Ausdruck verwenden. Die Bedingung wird sein, wenn es Witz abruft, ist wahr, dann rendern Sie die Ladenachricht und wenn es falsch ist, rendern Sie den Witz, wie wir es jetzt tun. Gehen wir weiter und entfernen Sie unser isFetchingJoke Label, da wir es nicht mehr brauchen. Lasst uns voran gehen und es ausprobieren. Jetzt können wir sehen, dass, wenn ein Witz geholt wird, wir diese nette Ladenachricht bekommen, die uns wissen lässt, dass etwas passiert, dies ist eine große Verbesserung für diejenigen Benutzer, die möglicherweise eine langsamere Verbindung verwenden. Als nächstes betrachten wir die Verbesserung, was wir hier getan haben , indem wir ein Formular für eine Suche hinzufügen. 8. Eine App erstellen: Füge Suchformular hinein: Nun, da wir die App gut für einen Witz arbeiten, lassen Sie uns dies einen Schritt weiter machen. Anstatt nur einen zufälligen Witz zu holen, geben wir dem Benutzer die Möglichkeit, nach Witzen zu suchen. Das erste, was wir brauchen, ist ein Formular. Lassen Sie uns voran und erstellen Sie ein leeres Formular, mit dem Sie beginnen können. Als nächstes brauchen wir irgendwo für unseren Benutzer, um seine Suche einzugeben. Lassen Sie uns voran und fügen Sie eine Texteingabe mit etwas Platzhaltertext hinzu. Schließlich werde ich eine Schaltfläche mit der Bezeichnung Suche erstellen, wo der Benutzer unser Formular absendet. Nun, da wir ein Formular einrichten oder mir sagen, ein Witz-Button sieht einsam schwebt da draußen herum. Moment werde ich es einfach innerhalb unseres Formulars verschieben, wie wir es später verwenden werden. Was kommt als Nächstes? Wenn ich an einem neuen Feature arbeite, finde ich es sehr nützlich, es in kleinere Aufgaben aufzuteilen. Lassen Sie uns voran und erstellen Sie eine Aufgabenliste, um die Arbeit zu verfolgen, die wir für das Suchformular tun werden. Zuerst wird der Suchscherz-Endpunkt aufgerufen und die Ergebnisse gespeichert, dann die Suchanfrage des Benutzers gespeichert dann die Suche beim Senden des Formulars ausgelöst. Danach rendern Sie die Suchergebnisse auf den Bildschirm, klicken Sie dann auf die Schaltfläche „Ich fühle mich lustig“, gefolgt von der Erstellung der Komponente des Suchforums. Dann Refactoring und Code-Bereinigung, und last but not least, fügen Sie Stile zu der App hinzu. Jetzt, da wir einen Plan haben, beginnen wir mit Aufgabe Nummer 1, rufen Sie den Such-Endpunkt auf und speichern die Suchergebnisse. Das erste, was wir brauchen, ist, wo man nach Papa-Witzen sucht. Zum Glück für uns, die gleiche API, die wir verwendet haben, um einen zufälligen Vater Witz zu holen , bietet auch einen Such-Endpunkt. Gemäß den API-Dokumenten müssen wir den Suchbegriff als Abfrageprem übergeben und wir werden die Suchergebnisse im folgenden Format zurückgegeben. Ich gehe voran und kopiere die URL für den Such-Endpunkt. Anstatt eine neue Methode für die Suche zu erstellen, werde ich die vorhandene Fetch-Witz-Methode neu verwenden. Ich beginne mit dem Ändern der Fetch-URL des Such-Endpunkts des Benutzers, den ich aus den Dokumenten kopiert habe. Dann lassen Sie uns den SetState-Aufruf für jetzt entfernen und ersetzen Sie ihn einfach durch einen Anruf Ich werde die Suchergebnisse in der Konsole protokollieren. Als nächstes möchte ich die FetchJoke-Methode in etwas passenderes umbenennen. Da FetchJoke derzeit auf mehrere Orte verwiesen wird, werde ich Code-Sandboxen verwenden, um alle Vorkommen Option ändern. Dies ermöglicht es mir, schnell alle Referenzen von FetchJoke durch die neuen Namenssuche Witze zu ersetzen . Schließlich werde ich einige bereinigen und einige ungenutzte Gegenstände entfernen , die nicht mehr verwendet werden. Okay, werfen wir einen Blick auf die Konsole und sehen, was los ist. Sie können tatsächlich sehen, dass wir bereits eine Antwort auf die Konsole protokolliert haben. Dies liegt daran, dass gesuchte Witze für die ComponentDidMount-Lebenszyklusmethode aufgerufen werden, genau wie FetchJoke es war. Sie denken vielleicht, wie bekommen wir Suchergebnisse, wenn wir noch nicht als Suche eingegeben haben? Wenn wir wieder zu den API-Docks springen, können Sie sehen, dass, wenn kein Suchbegriff gültig ist, standardmäßig alle Witze zurückgegeben werden. Das ist es, was in unserem Fall passiert. Eine andere Sache, die Sie vielleicht bemerken, ist, dass eine Suchantwort mehr als nur Suchergebnisse enthält. In unserem Fall sind wir wirklich nur an der Reihe von Witzen interessiert, die in der Ergebniseigenschaft enthalten sind. Aus diesem Grund werde ich die Dinge vereinfachen und die Ergebnisse direkt in einer Variablen namens Witze speichern . Jetzt können wir sehen, dass wir nur eine Reihe von Witzen zurückbekommen, die einfacher zu arbeiten sind. Jetzt, da wir wissen, dass unsere Suchaufrufe funktionieren, müssen wir irgendwo die Ergebnisse speichern. Dafür erstellen wir eine neue Zustandsvariable namens Witze und setzen sie auf ein leeres Array, mit dem begonnen wird. Als nächstes ersetzen wir unseren Aufruf console.log durch einen Aufruf SetState und übergeben die Witze, die von der Suche zurückgegeben werden. Während wir dabei sind, lassen Sie uns fortfahren und unseren IsFetchingJoke-Zustand wieder hinzufügen und auf false setzen. Auch wie zuvor sollten wir isFetchingJoke auf true setzen, wenn searchJokes zum ersten Mal aufgerufen wird. Schließlich entfernen wir die alte Scherzstatusvariable, da sie nicht mehr verwendet wird. Nur um zu überprüfen, ob unsere Suchergebnisse gespeichert werden, werde ich voran gehen und sie auf den Bildschirm rendern. Da Witze ein Array sind, würden wir normalerweise über die Daten iterieren, um sie zu rendern. Moment werde ich nur toString darauf aufrufen, damit wir sehen können, dass etwas auf dem Bildschirm erscheint. Da gehen wir, unsere Suchergebnisse zeigen, obwohl sie gerade ziemlich hässlich aussehen. Mach dir jedoch keine Sorgen, wird diese Suchergebnisse bald genug in einem dringend benötigten TLC geben. Für jetzt aber denke ich, dass kümmert sich um Aufgabe Nummer 1. Ich gehe weiter und überquere das aus. Siehst du, ist das nicht befriedigend? Wir machen hier Fortschritte. Als Nächstes wird die Suche des Benutzers in den Status gespeichert. 9. Erstelle eine App: Suchbegriffe: Beginnen wir mit Aufgabe Nummer 2 in unserer Liste speichern Sie die Suche des Benutzers im App-Status. Bevor wir eintauchen, möchte ich ein wenig mehr über Formen sprechen und reagieren. Formulare sind ein eindeutiger Fall, da native HTML-Formularelemente bereits ihren eigenen internen Zustand verwaltet haben. Zum Beispiel, wenn ich in unsere Sucheingabe tippe, wird der Wert im internen Zustand der Eingaben gespeichert. Dies wirft die Frage auf, wo der Formularzustand in einer React-App, im React-Zustand oder im Input-internen Zustand verwaltet werden soll im React-Zustand . In unserem Fall werden wir unseren Sucheingabewert mit dem Reaktionsstatus verwalten. Das erste, was wir brauchen, ist ein Ort, um den Sucheingabewert zu speichern. Dazu erstelle ich eine neue Statusvariable namens Suchbegriff und setze sie standardmäßig auf eine leere Zeichenfolge. Als nächstes benötigen wir eine Möglichkeit, dass ein Suchbegriff mit dem synchronisiert bleibt , was die Benutzer tatsächlich in die Sucheingabe eingeben. Dazu können wir die Eingaben auf Change-Ereignis verwenden, die wie der Name sagt, jedes Mal ausgelöst wird, wenn sich der Wert der Eingabe ändert. Für den schnellen Test werde ich nur eine Ereignishandler-Funktion hinzufügen , die den Eingangswert protokolliert. Der Ereignishandler wird in einem Ereignisobjekt übergeben, das einem nativen JavaScript-Ereignis sehr ähnlich ist. Aber es ist eigentlich das, was React synthetische Ereignisse nennt. Dieses synthetische Ereignis ist ein Wrapper um das native Ereignis des Browsers. Das folgt der gleichen Schnittstelle, funktioniert aber in allen Browsern identisch. Damit können wir auf den Wert der Eingabe bei event.target.value zugreifen. Wenn Sie nun die Konsole öffnen und mit der Eingabe beginnen, können wir sehen, dass der Eingabewert beim Tippen abgemeldet wird. Als nächstes entfernen wir die Testfunktion, und erstellen Sie eine richtige auf Change Handler Methode benannt auf Suchänderung. Bei dieser Methode nehmen wir die event.target.value und setzen unsere Suchbegriffe Status gleich ihm. Aktualisieren Sie dann die Sucheingaben für das Change-Ereignis, um unseren neuen On Search Change Handler aufzurufen. Lassen Sie uns voran gehen und versuchen, etwas in unsere Suche einzugeben. Es sieht so aus, als ob unsere Änderung einen Fehler erzeugt , der auftritt, wenn Sie in die Sucheingabe eingeben. Wenn Sie sich erinnern, haben wir diesen gleichen Fehler bereits gesehen, und er tritt auf, weil wir vergessen haben, den On-Suchhandler an die Komponente zu binden. Dies ist das gleiche, was wir vorher für den OntellJoke Handler tun mussten. Gehen wir weiter und reparieren das. Perfekt. Die Eingabe in die Sucheingabe funktioniert nun fehlerfrei. Nur um sicherzustellen, dass ein Suchbegriff gespeichert wird, lassen Sie ihn vorübergehend auf dem Bildschirm rendern. Jetzt können wir sehen, dass während der Eingabe, der Suchbegriffwert aktualisiert wird, mit dem Suchbegriff erfolgreich im App-Status gespeichert wird,können wir diese Aufgabe als mit dem Suchbegriff erfolgreich im App-Status gespeichert wird, abgeschlossen betrachten. Als Nächstes wird in einer Suche ausgelöst, um beim Senden des Formulars zu passieren. 10. Eine App aufbauen: Senach: Weiter oben auf unserer Aufgabenliste ist die Aufgabe Nummer 3, der ein Anstieg ausgelöst wird, wenn das Suchformular abgeschickt wird. Bis zu diesem Punkt ist, dass Suchformular nicht viel tut. Wenn wir auf Suchen klicken, sieht es so aus, als ob nichts passiert. Lass uns weitermachen und das ändern. Das erste, was wir tun müssen, ist erfassen, wenn das Formular gesendet wird. Um dies zu tun, verwenden wir die Formulare onSubmit Ereignis, an das wir unsere Ereignishandler-Funktion übergeben müssen. Ich werde eine neue Methode namens OnSearchSubmit erstellen, die das Formularereignis als Parameter annimmt und sich jetzt nur abmelden, aber das Formular wird gesendet. Vergessen Sie auch nicht, diesen neuen Handler an die Komponente zu binden, sonst erhalten wir den gleichen Fehler wie das letzte Mal, als wir vergessen haben, unsere Handler-Methode zu binden. Als nächstes fügen wir unseren neuen Handler zum onSubmit-Ereignis für dieses Suchformular hinzu, lassen Sie uns sehen, was jetzt passiert, wenn wir auf die Suche klicken, um das Formular zu senden. Das ist seltsam, wir sehen nichts in unserer Konsole auftauchen. Es stellt sich heraus, dass die Form genau das tut, was sie tun soll. Es sendet das Formular als GET-Anforderung an die Seite, wodurch die Seite aktualisiert und die Konstante gelöscht wird. Aus diesem Grund sehen wir nicht, dass unsere Formular-Absendernachricht abgemeldet wird. In unserem Fall wollen wir jedoch die Formulareinreichung verwalten und reagieren. Das erste, was wir tun müssen, ist zu verhindern, dass das Formular gesendet wird. Verhindern Sie das Senden von Formularen verwendet die Ereignisobjektübergabe an den Handler und ruft die PreventDefult-Methode darauf auf. Sobald sie eingerichtet ist, wird verhindert, dass das Standardverhalten der Formulare beim Senden nicht ausgeführt wird. Wenn wir nun das Formular absenden, können wir sehen, dass Formulare senden wie erwartet an der Konsole protokolliert und die Seite nicht mehr aktualisiert wird. Die Dinge sehen gut aus, aber unsere Form ist immer noch nicht auf der Suche nach etwas. Lassen Sie uns voran gehen und ersetzen Sie die console.log und stattdessen unsere Suche Witze Methode aufrufen. Bevor wir voran gehen und dies testen, werde ich unseren Suchscherzaufruf von componentDidMount entfernen , da er nicht mehr benötigt wird. Jetzt gehen wir weiter und senden Sie das Formular und sehen, was passiert. Es sieht so aus, als ob das Formular funktioniert, aber wir rendern immer noch nur die stringifizierte Version des Witz-Arrays, das leider nicht viel Details zu den Suchergebnissen liefert. Für jetzt werde ich die Witze protokollieren, die von der Suche an die Konsole zurückgegeben wurden. Auf diese Weise können wir eine bessere Vorstellung davon bekommen, was tatsächlich passiert. Ich werde voran gehen und zwei verschiedene Scherzsuchen einreichen. Eine für Katzen und eine andere für Hunde. Werfen wir einen genaueren Blick auf den ersten Witz, der von unserer Katzensuche zurückgegeben wurde. „ Ich habe es satt, meinen Träumen zu folgen. Ich werde sie nur fragen, wohin sie gehen und mich später mit ihnen treffen.“ Nun, das war eine Wahl, um Witz hinzuzufügen, es hat nicht zu viel mit Katzen zu tun. Werfen wir einen Blick auf den ersten Witz in unserer Hundesuche. Dieser Witz hat nicht nur nichts mit Hunden zu tun, es ist genau der gleiche Witz, den wir auch bei der Katzensuche bekommen haben. Dies ist tatsächlich erwartetes Verhalten, da wir die Suchzeichenfolge immer noch nicht an die API senden. Daher werden alle Suchanrufe die gleichen Standard-Scherzlisten zurückgeben, was gerade mit unserer Katzen- und Hundesuche passiert. Lassen Sie uns unser Gedächtnis auffrischen und werfen einen Blick auf die Hunde. Wenn Sie sich erinnern, erfordert der Such-Endpunkt, dass Sie den Suchbegriff als Abfragezeichenfolgenparameter übergeben , den sie hier veranschaulichen. In unserem Fall ersetzten wir den Hipster-Wert durch einen Suchbegriff Zustandswert. Lassen Sie uns nun bei dieser Aktualisierung den Suchscherzaufruf aktualisieren, um diesen Abfragezeichenfolgenparameter zu verwenden. Zuerst werde ich die URL aktualisieren, um JavaScripts Template-Literal Syntax zu verwenden. Auf diese Weise kann ich unseren Suchbegriffwert einfach als Ausdruck einbetten. Nun, da wir das an Ort und Stelle haben, lassen Sie uns noch einmal versuchen, einige Suchvorgänge zu machen, wie zuvor, werde ich mit der Suche nach Katzenwitzen beginnen und dann versuchen, eine zweite Suche nach Hundewitzen. Wir können bereits sehen, dass jede Suche eine andere Anzahl von Ergebnissen zurückgegeben hat, was bereits ein gutes Zeichen dafür ist, dass sich etwas geändert hat. Schauen wir uns nun den ersten Witz aus der Katzensuche genauer „Leg die Katze raus, ich wusste nicht, dass sie brennt.“ Das klingt mehr zum Thema als letztes Mal. Jetzt schauen wir uns den ersten Hunde-Witz an. „ Warum hatte der Cowboy einen Wiener Hund? Jemand hat ihm gesagt, er solle ein langes kleines Hündchen bekommen“. Fühlen Sie sich frei, einen Moment Zeit zu nehmen, um sich nach diesem Juwel zu komponieren. Lasst uns weitermachen. Die Dinge fangen wirklich an, zusammen zu kommen. Wir haben jetzt ein funktionierendes Formular, das die Suche bei Einreichung erfolgreich abgibt, das sich tatsächlich um Aufgabe Nummer 3 auf unserer Liste kümmert. Als nächstes werde ich den Render-Suchergebnissen eine dringend benötigte Aufmerksamkeit schenken. 11. Eine App aufbauen: Ergebnisse durchführen: Als Nächstes auf einer Aufgabenliste ist Test Nummer 4. Rendern im Suchergebnis. So wie es ist, sind die Suchergebnisse nicht zu viel zu sehen. Wir können nicht einmal die tatsächlichen Witze aus der Suche sehen, was nicht sehr nützlich ist. Um eine Liste der Ergebnisse in JSX korrekt anzuzeigen, müssen Sie die Sammlung durchlaufen. Das erste, was ich tun werde, ist, das p-Tag in ein ungeordnetes Listen-Tag zu ändern. Das macht mehr Sinn, da wir eine Liste von Witzen machen. Da Witze ein Array sind, kann ich Karte darauf aufrufen. Für jedes Element im Array werde ich ein LI-Element zurückgeben. In jedem LI-Element werde ich die eigentliche Witzkopie einfügen. Wenn Sie sich erinnern, enthält ein Scherzobjekt eine eindeutige Kennung unter der ID-Requisite und dann den eigentlichen Witz selbst unter der Job-Requisite. In unserem Fall wollen wir nur den Witz machen. Okay, jetzt versuchen wir eine Suche und sehen, was passiert. Schön. Es sieht so aus, als würden unsere Witze endlich rendern. Aber ich kann sehen, dass unser Konsolenprotokoll eine Warnung enthält. React gibt Ihnen in der Regel eine Warnung in der Konsole, wenn Sie etwas tun, das nicht mag. In diesem Fall sagt es uns, dass jedes Kind in einem Array oder Iterator eine eindeutige Schlüsselstütze haben sollte und sogar einen Link für weitere Informationen bietet, wenn wir möchten. Es sieht so aus, als würde React uns sagen, dass wir jedem LI-Element eine einzigartige Schlüsselstütze geben müssen. Dieses Schlüsselattribut ermöglicht es React, einzelne Elemente in der Sammlung zu identifizieren. Dies ist besonders wichtig beim Sortieren großer Sammlungen, da es erlaubt nur die Elemente zu rendern, die sich ändern, anstatt die gesamte Liste erneut zu rendern. Der wichtige Teil ist, dass jeder Schlüsselwert einzigartig ist. In unserem Fall können wir die ID Requisite aus unseren Scherzdaten verwenden. Jetzt, da jeder Witz in der Liste eine eindeutige Schlüsselstütze hat, ist unsere Reaktionswarnung verschwunden. Sie haben vielleicht bemerkt, dass wir immer noch festlegen, dass der Scherzzustand von vorher abruft, aber wir verwenden ihn nicht mehr. Genau wie zuvor möchte ich eine Nachricht zeigen, während die Suchergebnisse abgerufen werden Wir können den gleichen Ansatz wie das letzte Mal verwenden und einen bedingten Ausdruck verwenden. Wenn es Abrufen Witz wahr ist, zeigen Sie die Nachricht an, die nach Witzen sucht. Wenn das Abrufen von Witz falsch ist, rendern Sie die Suchergebnisse. Darunter wird dies funktionieren. Ich bin kein großer Fan von dieser Formatierung, da ich es schwieriger finde zu lesen. Manchmal kann es hilfreich sein, das Rendern in kleinere Funktionen aufzuteilen. Ich werde voran gehen und genau das mit einem Scherzlistenelement tun. Ich werde damit beginnen, eine neue Methode namens renderwitze zu erstellen und stattdessen die ungeordnete Liste der Witze zurückzugeben. Jetzt kann ich meinen bedingten Ausdruck aktualisieren, um gerenderte Witze anstelle dieses Scherzlistenelements zu verwenden , was meiner Meinung nach die Bedingung viel einfacher zu lesen macht. Um die Ladenachricht zu testen, werfe ich sie erneut mit Chrome DevTools auf meine Verbindungsgeschwindigkeit. Wenn wir nun die Suche einreichen, erhalten wir eine viel benutzerfreundlichere Suche nach Witzen Nachricht, während die Witze geholt werden. Das kümmert sich um das Rendern von Suchergebnissen auf unserer Aufgabenliste. nächste Schritt ist das Anschließen an, Ich fühle mich lustige Taste. 12. Eine App aufbauen: Ich fühle mich lustig: Wir machen einige große Fortschritte in unseren Aufgabenlisten und wir sind bereit, die Schaltfläche „Ich fühle mich lustig“ anzuschließen. Diese Schaltfläche ist ein Spiel auf Googles, „Ich bin Feeling Lucky“ Button, die, wenn sie angeklickt, bringt den Benutzer standardmäßig zum ersten Suchergebnis. In unserem Fall wird ein „Single Dad“ Witz zurückkehren. Für die Schaltfläche „Ich fühle mich lustig“ werden wir die bestehende Schaltfläche „Sagen Sie mir einen Witz“ neu verwenden. Beginnen wir einfach, indem wir den Knopf mit „I'm Feeling Funny“ neu kennzeichnen. Gerade jetzt, wenn wir auf die Schaltfläche klicken und es die „On Tell Witz“ -Methode aufruft, die dann die "Search Witze Methode“ aufruft. Da wir jetzt keinen Suchbegriff eingegeben haben, es nur die Standard-Scherzliste zurück. Also, wie haben wir die, „Ich bin Feeling Lucky Button“ bekommen, um nur einen einzigen Witz zurückzugeben. Wenn wir wieder zu den API-Dokumenten für die Papa-Witze springen, werden Sie sehen, dass der Such-Endpunkt andere Abfragezeichenfolgenparameter zur Verfügung hat. wir hier schauen, können wir sehen, dass es einen Grenzparameter gibt , der es ermöglicht, die Menge der Ergebnisse zurückgegeben zu steuern. Derzeit verwenden wir den Standard, der 20 Witze zurückgibt. Lassen Sie uns voran und fügen Sie Limit zu unserem Suchaufruf und setzen Sie es gleich eins. Wenn ich auf die Schaltfläche „Ich fühle mich lustig“ klicke, bekommen wir nur den einen Witz zurück. Da wir das Limit von Eins hart codiert haben, unser Suchformular nur einen Witz zurück, was nicht das ist, was wir wollen. Wir brauchen eine Möglichkeit, Suchscherze das Limit zu übergeben, das wir verwenden möchten. Um dies zu tun, werde ich einen Grenzparameter hinzufügen und ihm einen Standardwert von 20. Auf diese Weise der übergebenen Novoalign-Parameter haben wir immer noch einen gültigen Wert, den wir verwenden können. Aktualisieren wir nun die Such-URL, um den neuen Limit-Parameter als Wert zu verwenden. Lassen Sie uns unsere Suche noch einmal versuchen. Es sieht so aus, als ob die Suche wieder funktioniert, aber wir sind wieder auf Platz eins mit unserem „Ich fühle mich glücklich“ -Button, da es immer noch mehrere Witze zurückgibt. Um dies zu beheben, müssen wir die Schaltflächen On-Click-Handler aktualisieren. Zuerst werde ich die „On Tell Witz“ -Methode entfernen. Da all diese Methode die „Search Witze“ -Methode aufruft. Wir können es entfernen und einfach „Search Witze“ direkt statt. Jetzt, da ich „On Tell Witz“ entfernt habe, muss ich auch die Bindungsmethode im Konstruktor entfernen. Jetzt können wir fortfahren und den „Search Witze Call“ zum On-Click-Handler hinzufügen. In diesem Fall möchte ich jedoch den Wert eins für den Grenzparameter übergeben. Wenn ich den Suchscherz-Parameter übergeben möchte, kann ich das On-Click-Ereignis nicht direkt aufrufen lassen. Stattdessen verwende ich eine [unhörbare] Funktion, die es mir ermöglicht, Suchscherze mit Parametern und in diesem Fall ein Limit von eins aufzurufen. Wenn ich nun auf die Schaltfläche „Ich fühle mich glücklich“ klicke, bekomme ich wie erwartet einen Siegelscherz zurück. Wenn ich eine Suche einreiche, sehe ich immer noch mehrere Witze wie erwartet zurückkehren. Ich denke, wir sind gut, den „Ich fühle mich lustig“ -Button aus unserer Aufgabenliste zu überqueren. Nächster Schritt: Erstellen der Suchformularkomponenten. 13. Eine App entwickeln: an: Der nächste Schritt in einer Aufgabenliste ist das Erstellen einer SearchForm-Komponente. Bisher haben wir alle unsere Arbeit in einer einzelnen Komponente oder App-Komponente erledigt. In React möchten Sie nicht, dass eine einzelne Komponente zu viel verarbeitet. Genau wie Funktionen, wenn Sie feststellen, dass eine Komponente zu viel tut, ist es normalerweise ein gutes Zeichen dafür, dass sie in kleinere Komponenten aufgeteilt werden kann. Wenn ich einen Blick auf unsere App-Komponente habe, denke ich, dass das SearchForm ein guter Kandidat ist, um in seine eigene Komponente aufgeteilt zu werden. Beginnen wir mit der Erstellung einer neuen Datei mit dem Namen SearchForm.js. Für den Moment wird SearchForm eine funktionale Komponente ohne Knochen sein, die jeweils einen Gruß enthält. Dies wird ein temporärer Platzhalter sein, bis wir das Formularelement über von der App-Komponente verschieben. Es ist auch ein gängiges Muster, dass der Standard-Export aus einer Komponentendatei die Komponente selbst ist, das ist das Muster, das wir folgen werden. Um die SearchForm-Komponente aus der App zu verwenden, müssen Sie sie wie jede andere Datei importieren. Als nächstes fügen wir die Komponente zur Rendermethode hinzu und sehen, ob sie funktioniert. Schön. Wir können unsere Komponenten-Rendering sehen, aber es macht nicht viel. Lassen Sie uns das SearchForm aus der App in die SearchForm-Komponentendatei kopieren. Sobald wir dies speichern, können wir erwarten, einige Fehler zu sehen, da wir immer noch Methoden endstate von der App-Komponente referenzieren. Der erste Fehler, den wir erhalten, ist 'kann Eigenschaft onSearchSubmit von undefined' nicht lesen. Dies liegt daran, dass die OnSearchSubmit-Methode auf unsere App-Komponente verweist. Wie greifen wir also auf Methoden in der App-Komponente von der SearchForm-Komponente zu? Hier sind Requisiten dein Freund. Gehen wir zurück zur App-Komponente, und lassen Sie uns eine neue Requisite zu diesem SearchForm mit dem Namen OnFormSubmit hinzufügen. Was wir tun werden, ist Apps-Verweis auf OnSearchSubmit als Wert der OnFormSubmit Prop übergeben. Jetzt zurück in SearchForm, anstatt OnSearchSubmit aufzurufen, greifen wir auf die Komponentenrequisiten und verwenden stattdessen die neue OnFormSubmit-Prop, die nicht vergessen, ist ein Verweis auf die OnSearchSubmit-Methode in der App. Jetzt, wenn wir speichern, können wir sehen, dass der OnSearchSubmit Fehler verschwunden ist, aber jetzt haben wir einen neuen Fehler, aber dieses Mal beschwert es sich darüber, dass onSearchChange nicht definiert ist. Im Formular füge ich zunächst eine neue Requisite zu SearchForm namens OnSearchValueChange hinzu und übergebe dann den Apps-Verweis an OnSearchChange als Wert. Dann wieder in unserem SearchForm rufen wir die OnSearchValueChange-Prop anstelle des OnSearchChange auf. Wenn wir jetzt speichern, wird der Fehler durch einen neuen ersetzt , der beschwert, dass der Zustand nicht definiert ist. Mittlerweile solltest du die Routine kennen. Ich füge eine neue Requisite zu SearchForm mit dem Namen IsSearching hinzu und übergebe den IsFetchingJoke-Status als Wert. Während ich dabei bin, werde ich den Namen für IsFetchingWitze pluralisieren , da wir jetzt mehr als einen Witz holen. Ersetzen Sie in SearchForm den Verweis auf IsFetchingJoke durch IsSearchForm prop. Außerdem habe ich gerade bemerkt, dass wir nur die I'm Feeling Lucky Button deaktivieren , wenn IsSearching wahr ist. Wir sollten dasselbe für den Suchknopf tun. Also lassen Sie uns auch die Deaktivierungs-Requisite hinzufügen. Nun, es sieht so aus, als hätten wir die Fehler behoben, aber ich kann sehen, dass wir immer noch auf SearchWitze von der Schaltfläche „Ich fühle mich lustig“ verweisen. Wenn ich voran gehe und darauf klicke, können Sie sehen, dass wir einen Fehler erhalten, „kann die Eigenschaft SearchJokes von undefined' nicht lesen. Dies scheint unser letzter verbleibender Verweis auf die App-Komponente zu sein, also lasst uns voran gehen und es reparieren. Ich werde damit beginnen, den vorhandenen OnClick-Wert zu kopieren, wie wir ihn benötigen. Dann werde ich SearchForm eine weitere Stütze namens OnSingleSearchClick hinzufügen und für den Wert werde ich den OnClick-Wert einfügen, über den ich zuvor kopiert habe. Jetzt verwenden wir in SearchForm stattdessen die OnSingleSearchClick-Prop. Jetzt lassen Sie uns sparen und sehen, wie die Dinge aussehen. Es sieht so aus, als ob der I'm Feeling Funny Button wieder funktioniert, und die Suche sieht auch gut aus. Nun, da alles wieder funktioniert, wir einen genaueren Blick auf die neue Komponente, die wir erstellt haben. Die rendermethode sieht jetzt viel aufgeräumter aus, wobei die gesamte formale Logik in der SearchForm-Komponente versteckt ist. Ein weiterer zusätzlicher Bonus ist die SearchForm-Komponente keine Daten mehr alleine verarbeitet. Alle Verweise auf Daten werden durch Requisiten und Callbacks behandelt. Sie haben vielleicht bemerkt, dass ich meine Requisitennamen so generisch wie möglich gehalten habe. Wenn Ihre Requisitennamen nicht eng an Ihre Daten gekoppelt sind, wird Ihre Komponente vielseitiger. Auf diese Weise, wenn wir am Ende unsere App ändern, um etwas anderes als Witze zu suchen, müssen wir keines unserer SearchForm-Requisiten umbenennen. Dieser Typ einer Komponente wird manchmal als stumme oder präsentative Komponente in der React Community bezeichnet. Diese Komponenten kümmern sich nicht darum, welche Art von Daten an sie weitergegeben werden, sie kümmern sich nur darum, wie sie aussehen. Dies schafft einen guten Punkt, dass es viel einfacher ist, wiederzuverwenden. Wenn wir zum Beispiel wollten, dass unser SearchForm nach etwas anderem als Witzen sucht, müssen wir nur die Requisiten und Callbacks aktualisieren, um verschiedene Daten zu übergeben , anstatt eine ganze andere Komponente zu erstellen. Wenn die SearchForm-Komponente vollständig ist, können wir diese aus unserer Liste streichen. Als Nächstes werden wir ein paar Refactoring und Clean Up machen. 14. Eine App entwickeln: Refactoring und bereite sie bereinigt: Wir stehen fast am Ende unserer Aufgabenliste, und jetzt ist es an der Zeit, etwas zu refactoring und aufzuräumen. Sie können sich das Refactoring als Housekeeping für Ihren Code vorstellen. Es ist immer gut, nach der Entwicklung einer neuen Funktion einen Schritt zurück zu gehen, um zu sehen, ob es Bereiche gibt, an denen Sie Verbesserungen vornehmen können. Dennoch möchte ich einige Verbesserungen im Zusammenhang mit der neuen Suchformularkomponente vornehmen . Wenn wir sowohl die On Search Change als auch die On Search Submit Methoden betrachten, erwarteten beide ein Ereignisobjekt als Parameter. Jetzt, da wir diese Methoden als Requisiten an Suchformular übergeben, können wir nicht immer garantieren, dass sie mit einem Ereignis aufgerufen werden. Ich werde mit der On Search Submit-Methode beginnen und den Ereignisparameter sowie den [unhörbaren] Ereignispunkt verhindern Standard entfernen. Jetzt auf der Suche Submit tut nicht wirklich etwas außer dem Aufruf von Suchwitzen, was uns erlaubt, die Dinge ein wenig zu vereinfachen. Nun, das Übergabeformular, senden Sie die auf Suche Submit-Methode. Ich werde nur voran gehen und die Suchscherz-Methode direkt übergeben. Was tatsächlich bedeutet, dass wir bei der Suche Submit und die Bindungslogik im Konstruktor damit auch loswerden können. Vergessen Sie auch nicht, Suchscherze an die Komponente zu binden. Jetzt, da es als Ereignishandler aufgerufen wird. Beim Entfernen des Submit-Handlers bei der Suche haben wir auch die PreventDefault-Methode entfernt, die das Senden unseres Formulars gestoppt hat. Wenn wir jetzt eine Suche einreichen, können Sie sehen, dass die Seite wieder aktualisiert wird. Da das Standardverhalten des Formulars „Senden“ nicht mehr verhindert wird. Um dieses Problem zu beheben, werden wir jetzt das Formular senden Ereignis aus der Suchformularkomponente behandeln . Das erste, was ich tun muss, ist eine explizite Rückkehr in die Komponente hinzuzufügen. Auf diese Weise kann ich eine neue Funktion namens onsubmit erstellen, die ich dann jetzt für den onsubmit -Ereignishandler verwenden werde. Dies bedeutet, dass die onsubmit Funktion das Ereignisobjekt als seinen ersten Parameter empfängt und jetzt, da wir Zugriff auf das Ereignisobjekt haben, können wir Formularübermittlung mit der gleichen Methode wie zuvor und danach verhindern , dass wir nur einen Aufruf von das auf Formular Senden Sie prop. Jetzt, wenn wir eine Suche absenden, funktioniert das Formular wieder wie erwartet. Aber mit Suchformular seine eigenen Formularereignisse behandeln, haben wir es weiter von der App-Komponente entkoppelt. Als nächstes verbessern wir die Methode bei der Suche ändern, und entfernen Sie den Ereignisobjektparameter. Stattdessen wird es die Dinge allgemeiner machen und den Parameter außer dem Wert direkt ändern , anstatt ihn aus dem Ereignisobjekt zu ziehen. Jetzt vom Suchformular zum Übergeben des Ereignisses, zieht den Wert aus dem Ereignis und übergibt das stattdessen. Dies hilft wiederum bei der Entkopplung der Suchformularkomponente von der App-Komponente und je mehr entkoppelte Komponente ist, desto einfacher ist es die Wiederverwendung. Nur um zu demonstrieren, dass ich unser Suchformular duplizieren werde, aber in dieser Form werde ich nur zu Witzen zurückkehren, wenn eine Suche eingereicht wird. Diese Änderung wird sehr einfach, indem eine einzelne Requisite und die zweite Formkomponente geändert wird. Wenn ich jetzt mit dem ersten Formular suche, funktioniert es genauso wie zuvor. Wenn ich mit dem zweiten Formular suche, bekomme ich nur die beiden Suchergebnisse zurück. Beide Formulare verwenden die gleiche Komponente, können aber unabhängig voneinander arbeiten. Dies ist vielleicht nicht das praktischste Beispiel, aber hoffentlich demonstriert es die Vorteile der Verwendung von DOM-Komponenten. Bevor wir fertig sind, möchte ich ein paar schnelle Haushaltsgegenstände machen. Zuerst wird das Suchbegriff-Label loswerden, das wir früher zum Testen verwendet haben, da wir es nicht mehr brauchen. Das letzte, was ich werde das Konsolenpunktprotokoll entfernen wir den Test der Witzergebnisse früher verwendet. Jetzt lass es mich ein bisschen aufräumen. Wir sind bereit, mit unserer letzten Aufgabe fortzufahren; Styling der App. 15. Eine App erstellen: Stile hinzufügen: An diesem Punkt bin ich ziemlich glücklich, wie die App funktioniert, aber nicht so glücklich, wie es aussieht, was schön in unser nächstes Thema führt; Styling Ihrer React-App. Wenn es darum geht, Stile in React hinzuzufügen, gibt es viele verschiedene Geschmacksrichtungen zur Auswahl. Es gibt schlichtes altes CSS, CSS-Pre-Prozessoren wie Sass, CSS-Module, CSS In-Jazz und vieles mehr, auf das ich ansprechen könnte. Der Punkt ist, dass es keine richtige oder falsche Lösung gibt, da es wirklich darauf ankommt, was für Sie funktioniert. Meine Empfehlung an Sie ist, selbst zu experimentieren und zu sehen, mit welchen dieser , wenn überhaupt, Sie tatsächlich gerne arbeiten. In der Zwischenzeit werde ich nur einige Grundlagen der Verwendung von einfachem altem CSS in React durchgehen. Sie haben vielleicht bereits bemerkt, dass unsere App die Stile dot css bereits enthält. Dies wurde von CodeSandBox zurück erstellt, als wir das erste Mal gestartet haben. Wenn wir diese Datei öffnen, werden Sie sehen, dass wir einen einzelnen Klassennamen dot App mit einigen grundlegenden CSS-Regeln haben. Wir verwenden diese Klasse derzeit nicht, aber wir können sie leicht zu einem Element hinzufügen, indem wir den Klassennamen prop hinzufügen und den Wert gleich dem Klassennamen setzen. Es ist wirklich, es ist nicht anders, als wie Sie es mit einfachem HTML und CSS machen würden. Der große Unterschied hier besteht darin, dass Sie anstelle des Klassenattributs die Klassenname prop verwenden. Wenn wir jetzt speichern, können Sie sehen, dass unsere App diese neuen Stile verwendet , da unser Formular jetzt auf der Seite zentriert ist. Eine andere Sache, die Sie vielleicht bemerkt haben, ist die Import-Stile Punkt CSS-Zeile an der Spitze unserer App-Komponente. Wie hat unsere JS-Datei eine CSS-Datei importiert? Du darfst fragen. Wenn Sie mit Bundlern wie Webpack nicht vertraut sind, könnte das wirklich seltsam aussehen. In unserem Fall haben wir Glück, da webpack bereits von CodeSandBox für uns eingerichtet wurde und webpack ehrlich ein ganzer Kurs für sich sein könnte. Jetzt wissen Sie nur, dass, sobald eine CSS-Datei importiert wird, diese Stile zu Ihrer App hinzugefügt werden und bereit zur Verwendung sind. Außerdem sind Sie nicht darauf beschränkt, all Ihr CSS in einer einzigen Datei zu behalten. In der Tat ist es üblich, dass jede Komponente eine eigene dedizierte CSS-Datei hat. Lassen Sie uns damit fortfahren und eine CSS-Datei für unsere Suchformularkomponente erstellen. Ich gehe voran und benenne diese Datei Suchform dot CSS. Es ist auch üblich, dass eine Komponente und ihre CSS-Datei den gleichen Namen haben. Dies hilft nicht nur bei der Organisation im Dateisystem, es macht auch deutlich, dass diese Stile zu dieser Komponente gehören. Jetzt, da wir unsere CSS-Datei bereit haben, werde ich voran gehen und einige vorgebackene Stile einziehen, die ich zuvor erstellt habe. Als nächstes importieren wir das Suchformular CSS in unsere Komponentendatei und speichern. Wenn wir einen genaueren Blick auf das Suchformular CSS haben, können Sie sehen, dass es eine Suchformularklasse in sich gibt. Ich gehe weiter und füge diese Klasse dem Wurzelelement in der Suchformularkomponente hinzu. Außerdem werde ich unsere Schaltflächen in ein div einwickeln , da es nur benötigt wird, um einige dieser Stile funktionieren zu lassen. Jetzt, wenn ich spare, können Sie sehen, dass die Dinge wirklich besser aussehen jetzt, wo wir etwas Styling haben. Es ist wichtig, vorsichtig zu sein, wenn Sie CSS in separate Dateien aufteilen , die Sie nicht Stile in einer anderen Datei überlaufen. Obwohl die CSS-Datei des Suchformulars nur in die Komponente importiert wird, wird diese Komponente auch in eine App importiert. Eine App hat auch eine eigene CSS-Datei. Um zu demonstrieren, werde ich voran gehen und eine Hintergrundfarbe zum Körperelement in der Suchform dot CSS hinzufügen . Dann füge ich dem Körper und der App CSS eine Hintergrundfarbe hinzu und speichere. Wie Sie sehen können, haben die Körperstile und App dot css die Körperstile und Suchform dot CSS überschrieben. Sie müssen also vorsichtig sein, wenn Sie mit mehreren Dateien arbeiten. Wenn Sie eine Chance haben, empfehle ich Ihnen, sich CSS-Module anzusehen , da Sie sich keine Gedanken darüber machen müssen, andere CSS-Klassen zu überschreiben , da Ihre Komponentenstile lokal für die Komponente bleiben , in der Sie arbeiten. Okay, um fertig zu werden, werde ich ein bisschen betrügen und den Rest der fertigen Stile für die App-Komponente als auch einbringen . Last but not least, unser schöner Papa Witze Edition Google-Logo. Dort haben Sie es, Ihre eigenen voll funktionsfähigen Vater Witze Suchmaschine eingebaute reagieren. Mit dem Styling abgeschlossen, das kümmert sich um den letzten Artikel auf unserer Aufgabenliste. Im nächsten Schritt werden wir einige High-Level-Erkundungen darüber durchführen , wie React hinter den Kulissen funktioniert. 16. Wie es funktioniert: In den DOM umkehrt: Wenn Sie in React arbeiten, ist es leicht zu vergessen, dass Ihre App immer noch in einer einfachen alten HTML-Datei ausgeführt wird . In unserem Fall ist das die Index-HTML-Datei, die CodeSandBox für uns erstellt hat. Wenn ich es geöffnet habe und einen Blick darauf werfen, können Sie sehen, dass es nicht viel HTML-Markup im Körper gibt, außer diesem leeren div. Nur um zu beweisen, dass dies in der Tat die Seite ist, die wir im Browser rendern werde ich gehen und eine benutzerdefinierte Nachricht hinzufügen und speichern. Sobald ich gespeichert habe, können Sie sehen, dass diese Kopie jetzt zusammen mit der Hallo CodeSandBox-Nachricht erscheint, die von unserer App-Komponente kommt. Aber wir sehen die Kopie für die App-Komponente nirgendwo in dieser HTML-Datei, also wie ist es, dass wir sie im Browser sehen? Der Grund ist, dass React das Rendern der App-Komponente für uns behandelt und verwaltet die DOM-Elemente, die im Browser angezeigt werden. Aber wie sind die von React erstellten Elemente in der Index-HTML-Datei gelandet? React erfordert, dass Sie ihm einen DOM-Knoten zur Verfügung stellen , der als Stamm-DOM-Knoten bezeichnet wird. In unserem Fall ist der Root-DOM-Knoten dieses leere div, auf das ich zuvor hingewiesen habe, das bequem genug ein ID-Attribut gleich root hat. Wenn wir zurück zu der Add Component gehen, würden Sie sehen, dass wir einen Aufruf zu ReactDOM dot rendern. ReactDOM-Paket ist getrennt von React und enthält Methoden, die überraschen, die spezifisch für den Umgang mit dem DOM sind . Wenn Sie jemals am Ende mit serverseitigem Rendern arbeiten, werden Sie auch mit ReactDom arbeiten. Jetzt zurück zu unserer App-Komponente, wenn ReactDOM dot rendern als vorbei an der Komponente und ein Verweis auf das Root-DOM-Element aufgerufen wird. ReactDOM rendern wird normalerweise nur einmal aufgerufen, und sobald es aufgerufen wird, wird alles innerhalb des Root-DOM-Elements jetzt von React verwaltet. Nur um zu demonstrieren, ich werde meine Chrome DevTools öffnen und das DOM überprüfen. Hier kann ich das root-div-Element sehen, das in unserer HTML-Datei leer war. Aber jetzt, anstatt leer zu sein, enthält es die Elemente, die von React verwaltet werden. Jetzt, da wir wissen, wie React in das DOM rendert, wir einen genaueren Blick darauf, wie es das Rendern von Aktualisierungen behandelt. 17. Wie es funktioniert: Rendering von Updates: Mehr als wahrscheinlich, wenn Sie jemanden fragen, warum React verwenden, könnte er sagen, weil es schnell ist. Während React super effizient ist, wenn es um das Rendern von Updates geht, hilft es nicht wirklich zu beantworten, warum es schnell ist? Ich wollte mir ein paar Schlüsselmerkmale vorstellen, die zur Reaktionsgeschwindigkeit beitragen. Nummer eins, React aktualisiert nur, was notwendig ist. Sie sehen in React, wenn eine Komponente aktualisiert wird, es stellt sicher, dass nur das, was geändert wurde, auf das DOM angewendet wird. Um zu demonstrieren, habe ich ein einfaches Beispiel, das aus Komponente namens Schaltfläche besteht. Jedes Mal, wenn auf die Schaltfläche geklickt wird, erhöht sie einen Klickzählstatus um eins und rendert diese als Teil der Schaltflächenbeschriftung. Ich werde dieses Beispiel in einem eigenständigen Browserfenster öffnen , damit ich besser auf meine Chrome-Entwicklungstools zugreifen kann. In der Registerkarte Elemente werde ich die Schaltfläche auswählen und erweitert, so dass wir den gesamten Inhalt des Elements sehen können. Wenn ich nun auf die Schaltfläche klicke, können Sie sehen, dass sich der Zahlenwert ändert und er wird auch bei jeder Änderung hervorgehoben. Diese Hervorhebung stellt dar, was im DOM geändert wird. Wir können sehen, dass unsere Schaltfläche und Klick-Zähl-Label unberührt bleiben. Nur der Zahlenwert wird aktualisiert. Jetzt habe ich das gleiche Beispiel in einfachem JavaScript ohne React diesmal. Ich werde das Element in Entwicklungstools auswählen und wie zuvor erweitert. Zu diesem Zeitpunkt, wenn ich auf die Schaltfläche klicke, können Sie sehen, dass die gesamten Schaltflächen dieses Mal hervorgehoben werden. Dies bedeutet, dass statt nur die Nummer geändert wird, die gesamte Schaltfläche im DOM geändert wird. Obwohl dieses Beispiel einfach ist, stellen Sie sich vor, wie wichtig diese effizienten Updates werden wenn Ihre App an Größe wächst und Hunderte von Elementen enthält. Eine andere Sache, die React tun wird, ist Batch-Statusaktualisierungen zusammen. Wenn Sie mehrere Statusänderungen von einem reaktiven Entlüftungsbehandler oder einer Lebenszyklusmethode auslösen, werden alle diese Änderungen in einem einzigen Rendervorgang zusammengeführt. Lassen Sie uns beispielsweise so tun, als hätte ich eine einfache React-App, die aus einer Sucheingabe-Komponente, einer Ergebnislistenkomponente und einer Paginierungskomponente besteht einer Ergebnislistenkomponente . Wenn ich auf den Such-Button klicke, löst dies eine Statusänderung in allen drei Komponenten aus. Jetzt bei 3-Zustands-Änderungen, würden Sie normalerweise erwarten, drei Renders zu sehen. Aber das ist hier nicht der Fall. Es ist eigentlich nur das einzelne Rendering. Dies liegt daran, dass alle drei Statusaktualisierungen zusammengeführt wurden und React dazu in der Lage ist , da alle drei Aktualisierungen vom gleichen Klick-Ereignis stammen. Jetzt zum letzten Element in der Liste, React-Elemente sind nur einfache Objekte. Im Gegensatz zu Browser-DOM-Elementen sind React-Elemente Objekte und billig zu erstellen. Tatsächlich wird Ihre gesamte React-App durch ein Objekt dargestellt, das im Speicher gespeichert wird. Nehmen wir zum Beispiel dieses einfache HTML-Markup für ein Anmeldeformular mit einem Benutzernamen und Passwort-Eingabe. In React würde dies durch ein Objekt dargestellt, das ungefähr so aussieht. Sie können sehen, dass jedes der HTML-Elemente durch ein Objekt dargestellt werden und reagieren. Wenn dann eine Änderung auftritt, vergleicht reagiert die vorherige Version des Objekts mit der aktualisierten Version des Objekts und führt Aktualisierungen basierend auf den Unterschieden durch und rendert die Änderungen dann wieder an das DOM. Nun, das war eine sehr vereinfachte Aufschlüsselung des komplexen virtuellen DOM-Konzepts von React. Ich hoffe, es gab Ihnen einen Einblick in das, was unter der Haube in React passiert. Dies sind nur einige der großartigen Funktionen, die dazu beitragen, Geschwindigkeit und Effizienz zu reagieren. Obwohl diese Elemente möglicherweise nicht für React lernen erforderlich sind, denke ich, dass Sie zumindest ein hohes Verständnis dieser Funktionen haben , wird Ihnen helfen, ein besserer React-Entwickler zu werden. 18. Conclusion: Aufarbeitung: Bevor ich die Dinge in die Klasse einschließe, wollte ich Ihnen einen schnellen Überblick über das Klassenprojekt geben. Das Projekt beinhaltet eine [unhörbare] Suchscherz-App, die wir gerade erstellt haben, und das Hinzufügen einiger Verbesserungen. Diese Verbesserungen sind in der Projektbeschreibung skizziert, aber ich werde Sie jetzt auch durch sie führen. Jede dieser neuen Funktionen basiert auf dem was Sie während des Kurses bereits gelernt haben. Das erste Element in der Liste ist das Verschieben der Suchergebnisliste in die eigene Komponentendatei. Als Nächstes müssen Sie die Meldung „Keine Ergebnisse gefunden“ hinzufügen, wenn eine Suche keine Witze zurückgibt. Danach fügen Sie eine Schaltfläche hinzu, die die Suchergebnisse und den Suchbegriff löscht. Fügen Sie dann eine ausgewählte Eingabe hinzu, die es dem Benutzer ermöglicht , die Anzahl der Witze auszuwählen, die von der Suche zurückgegeben werden. Wenn Sie für eine Herausforderung bereit sind, aktualisieren Sie die Sucheingabe, damit die Ergebnisse während der Eingabe aktualisiert werden. Um Ihre Arbeit hinzuzufügen, müssen Sie zuerst eine Kopie meiner CodeAndBox erstellen, indem Sie sie gabeln. Um mein Projekt zu forken, öffnen Sie einfach die CodeSandBox-Projekt-URL, die in der Klassenbeschreibung enthalten ist, und klicken Sie auf die vierte Schaltfläche in der Hauptnavigation. Ignorieren Sie die Warnung, da ich das nur bekomme, da ich der Besitzer des Projekts bin, das gegabelt wird. Jetzt habe ich eine Kopie des Projekts, die ich umbenennen und Änderungen vornehmen kann , die ich mag, unabhängig von der Originalversion. Wenn Sie Fragen oder Feedback haben, wenden Sie sich bitte an mich auf Twitter oder hinterlassen Sie einen Kommentar hier in der Klasse. Wenn Sie die Klasse genossen haben, zögern Sie nicht, das Wort zu verbreiten und den Link zu teilen. Schauen Sie mich auch auf Medien. Wenn Sie eine Chance haben, wie ich auch regelmäßig poste, sie sind über React. Nochmals vielen Dank, dass Sie sich mir angeschlossen haben und ich hoffe, Sie auch in zukünftigen Klassen zu sehen.