React 101: React.js für absolute Anfänger lernen

1. Willkommen zu React.js für Anfänger:innen: Willkommen, um eins-zu-eins mit Ihrem Gastgeber, Caleb, high lean zu reagieren. In diesem Kurs werden wir einen randomisierten Star Wars-Charaktergenerator mit einer API erstellen . Jedes Mal, wenn Sie auf diese Schaltfläche klicken, wird es ein neues Zeichen für Sie mit einer API finden. Sie werden praktische Erfahrungen mit den Zustands-API-Anforderungen der Komponente sammeln, Ihren Status aktualisieren und mit Requisiten arbeiten. Sie werden eine brandneue Anwendung mit dem Befehl React create new app erstellen erstellen erstellen erstellen. Und dann werden wir es durch unsere eigenen namens Star Wars ersetzen. Das Projekt am Ende dieses Kurses macht wirklich, wirklich Spaß. Ich habe es vorher degradiert, ich werde es wieder demonstrieren. Es ist einfach ein Zufallszeichengenerator. Und das funktioniert mit einer API. Hallo, mein Name ist Caleb erzählt und ich lehre Leute seit 2012, wie man kodiert. Ich habe mehr als 350 Tausend Studenten beigebracht, wie man weltweit kodiert. Und heute werde ich dir beibringen, dass du reagierst. Nun, warum sollte man lernen, reagieren? Ich denke, Sie sollten reagieren lernen, weil es eine hohe Nachfrage Fähigkeit ist , die viele Web-Entwicklungsagenturen und Freiberufler wissen müssen. Und so ziemlich jeder Job da draußen wird wollen, dass Sie reagieren lernen. Und das ist eine wirklich gute Einführung in die Funktionsweise von React. Ein paar Voraussetzungen, müssen Sie HTML kennen. Sie sollten ein wenig CSS kennen und Sie sollten mit JavaScript vertraut sein , bevor Sie diesen Kurs besuchen. React verwendet fortschrittliches JavaScript. Und das bedeutet, dass Sie fortgeschrittenes JavaScript kennen müssen, wenn Sie bereit sind , einen lustigen Zufallszeichengenerator mit einer API zu erstellen, dann ist dies der richtige Kurs für Sie. Suchen Sie nicht weiter und ich werde Sie hoffentlich in dieser ersten Lektion sehen. 2. Was ist React.js?: Bevor wir anfangen, werfen wir einen kurzen Blick auf das, was React JS ist. Also, wenn Sie auf JS.org reagieren, können Sie tatsächlich sehen, dass sie Tutorials haben und sie haben alle möglichen Sachen auf hier. Es ist eigentlich wirklich, wirklich gute Website und ich schlage vor, und ich empfehle, dass Sie ein wenig vertraut mit ihm im Laufe Ihrer Zeit lernen React. Aber was ist reagieren? React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Okay, das ist etwas hilfreich. Das ist eine ziemlich gute Aussage darüber, was React ist. Aber was React eigentlich ist, wissen Sie, wie eine Website aus HTML, CSS und JavaScript besteht, und dann in der Regel eine Back-End-Sprache für die Datenverarbeitung. React ermöglicht es Ihnen, interaktive Websites zu erstellen. HTML und CSS können das also nicht tun. Es kann nicht super interaktiv sein, aber React kann es reaktiv machen, macht es lustig und ansprechend, und das ist es, was reagiert. Jetzt kommt React mit einer interessanten Syntax namens js X. Es ist nicht nur JavaScript, es sieht aus wie JavaScript gemischt mit einer verrückten Version von HTML. Und wir werden in nur ein bisschen darauf eingehen. Aber im Grunde, was Sie in dieser speziellen Lektion wissen müssen ist React einfach ermöglicht es Ihnen, sehr dynamische Seiten zu erstellen. Wie wenn ich darauf klicken würde, ist es sofort, es fängt seine, es ist schneller als die Verwendung von jQuery ist schneller als die Verwendung anderer Bibliotheken. Und es sieht sehr ähnlich aus. Auch hier werden wir ein wenig über die Syntax sprechen , nur weil es im Moment ein wenig bizarr aussieht. Aber das werden wir in ein bisschen reinkommen. Es gibt also keine Aufgabe für Sie für diese spezielle Lektion. Als nächstes werden wir Node installieren und sicherstellen, dass es auf Ihrem Computer installiert ist. 3. Installieren von Node.js und npm: In Ordnung, lassen Sie uns fortfahren und Node herunterladen und installieren. Wir brauchen die gleiche namens Node.js. Also lassen Sie uns in Google herunterladen Node JS, und dies wird uns zu Nodejs.org Schrägstrich Downloads bringen. Wenn es Sie also auf die Homepage bringt, können Sie einfach auf den Download klicken. Das Download-Symbol hier oder die, Ich denke nicht Symbol, es ist eine Schaltfläche. Gehen Sie mit LTS, das ist langfristige Unterstützung. Das bedeutet, dass sie keine neuen Sachen ausprobieren. Ich bedeutet, dass 14 oder Knoten 16 für eine lange Zeit unterstützt werden. Die ungerade Zahl wird in der Regel nicht unterstützt und Ubunto funktioniert auf die gleiche Weise. Wann immer Sie mit LTS, langfristiger Unterstützung gehen können, wird es tun, was Sie von ihm erwarten. Für mich. Ich habe bereits Knoten 15 auf meinem Computer installiert, also werde ich 15 verwenden, aber Knoten 14 wird genau das gleiche für Sie arbeiten. Also lassen Sie uns zu 14 gehen und es wird diese herunterladen. Wenn dies nicht der Fall ist, können Sie immer einfach zu Downloads hier oben gehen und entweder den Windows Installer, Mac OS Installer oder den Quellcode auswählen , den Sie manuell unter Linux herunterladen und installieren können . In der Regel klicken Sie jedoch einfach auf eine dieser. Wenn Sie also auf Mac sind, klicken Sie auf Mac OS Installer. Wenn Sie unter Windows sind, klicken Sie auf das Windows-Installationsprogramm, installieren Sie es und führen Sie die Installationsschritte durch. Und wenn Sie fertig sind, kommen Sie zurück und ich werde Ihnen zeigen, wie Sie sicherstellen können, dass der Knoten ordnungsgemäß auf Ihrem Computer installiert ist. In Ordnung, also hoffentlich hast du kein JS auf deinem Computer installiert. Was wir jetzt tun müssen, ist, dass wir sicherstellen müssen, dass wir die richtige Version von Node ausführen und dass es installiert ist und die richtige Version von NPM, die Node Package Manager ist, wir mehr über all dieses Zeug sprechen werden und wir werden einige praktische Erfahrung mit einem sehr, sehr bald. Also bin ich auf dem Mac und habe ein Programm namens Terminal geöffnet. Wenn Sie unter Windows sind, können Sie CMD öffnen. Wenn Sie unter Linux sind, haben Sie wahrscheinlich ein Programm namens bash oder Sie sind bereits vertraut mit Befehlszeilenprogramm, das Sie besser als bash mögen. Also für mich bin ich auf dem Mac, also werde ich das Terminal öffnen, welches dieses Programm hier ist. Und ich werde einfach N ODE dash v eingeben, Knoten dash v. Und das sagt Knoten dash Version, und das gibt mir Version zehn. Also, das ist nicht richtig. Ich habe Node Version Manager installiert Terminus schnell auf die Notiz Version 15 umstellt. Da gehen wir hin. Ich schalte das auf Knoten 15 um. Und wenn ich keine Bindestrich v tun, hier gehen wir, Ich benutze Knoten 15. Also möchte ich sicherstellen, dass ich Knoten 15 verwende oder für Sie Node 14 oder die langfristige Unterstützung verwende. Also, wenn Sie sehen dies ein paar Jahre nach Aufnahmedatum, und wir sind auf Knoten 16 oder Knoten 18, und es ist LTS. Stellen Sie sicher, dass Sie die LTS-Version herunterladen und installieren. Als nächstes müssen wir npm dash v eingeben. Und das wird mir meine Knotenversion zeigen, meine Node Package Manager-Version. Und das hier ist nicht so wichtig. Wir müssen nur sicherstellen, dass es tatsächlich installiert ist, dass es Ihnen keinen Fehler gibt, der besagt, dass der Befehl nicht existiert. Wenn kein Bindestrich v für Sie funktioniert und npm dash v für Sie arbeitet, sind Sie bereit, mit der nächsten Lektion fortzufahren. Ihre Aufgabe für diese Lektion besteht also darin, zum Knoten js.org zu gehen und entweder aus dem Windows Installer, dem Mac-Installationsprogramm oder dem Quellcode herunterzuladen . Wenn Sie unter Linux sind, installieren Sie es. Öffnen Sie Ihr Befehlszeilenprogramm, ob das Bash-Befehls-Terminal ist, anderes Befehlszeilenprogramm Typ Knoten dash v oder npm dash drei oder nicht oder aber, nehmen Sie beide Typ node dash v und npm dash v. Wenn Sie dass es eine Version gibt und die Knotenversion wie eine richtige Version drei für Sie aussieht. Für mich ist das Knoten 15, Sie sollten Knoten 14 oder 16 oder eine LTS-Version, langfristige Support-Version sagen. Wenn das für Sie funktioniert, haben Sie Ihre Aufgabe erfolgreich abgeschlossen. Und lasst uns zur nächsten Lektion gehen. 4. Start eines neuen Projekts: Na gut, gehen wir weiter und starten ein neues Projekt. Also verwende ich VS Code und das kommt mit einem Terminal, das ich darin verwenden kann. Also, wenn ich zu Ansicht gehe und dann zu wo ist Terminal? Terminal, es zeigt mir dieses kleine Terminal. Und so bin ich in einem Ordner namens React 101. Und nur um das noch größer zu machen, Ordnung, also bin ich nur in einem Ordner namens React 101. Und wir wollen sicherstellen, dass React installiert ist. Sie können also npm install dash g eingeben, das ist global. Erstellen Sie React-App. Und was dies tun wird, ist gehen Sie voran und installieren Create React App global auf Ihrem Computer. So können Sie sehen, dass das sehr schnell für mich war. Es dauert vielleicht etwas länger für dich. Nun, was wir tun können, ist np x, Create, React app und dann geben Sie ihm einen Namen. Und ich werde ihm einen Namen meiner Armaturenbrett-App geben. Sie werden sehen, wie dieses Gebäude, da dies beginnt, das Projekt zu erstellen, erstellt es einen Ordner namens My dash app auf der linken Seite. Also werde ich dem nur ein bisschen Zeit geben, um seine Sache zu tun. Es ist einfach, all die Dinge herunterzuladen und zu installieren, die Bedürfnisse reagieren. Es wird alle JavaScript-Bibliotheken erhalten, die benötigt werden. Es wird alle von ihnen installieren. Es wird anscheinend Yarn installieren , so dass es Dinge mit Garn anstelle von npm herunterladen kann. Es ist nur ein bisschen schneller. Es ist ein weiterer Paketmanager. Wirklich, wir brauchen uns keine Sorgen darüber zu machen. Ich bin mir ziemlich sicher, dass das Garn entfernt wird. Ja, hat es Garn entfernt? Und dann sagt es alle möglichen Dinge, die wir an dieser Stelle ziemlich ignorieren können. Wir können entweder damit arbeiten oder wir können es ignorieren. So heißt es, erstellt git commit. Cool, cool. Erfolg. Meine App unter und dann meinen App-Ordnerspeicherort erstellt . Innerhalb des Verzeichnisses können Sie mehrere Befehle ausführen. Wir empfehlen Ihnen, mit der Eingabe von CD myapp zu beginnen. Und was das tun wird, ist mein Arbeitsverzeichnis in meinem Terminal zu ändern. Oder wenn Sie unter Windows sind, können Sie DIR eingeben, wenn Sie ein Unix-System wie Mac OS oder Linux verwenden, und Sie können PWD eingeben. Sie sollten sich im Ordner „Meine App“ in Ihrem Terminal befinden. Nur weil du es hier öffnest, heißt das nicht, dass es in deinem Terminal geöffnet ist. Also nur um zu klären, jetzt, wenn wir meine App auf der linken Seite öffnen, haben wir ein paar Sachen hier drin. Wir haben Knotenmodule, public, SRC, gitignore package.json, readme dot AMD, garn dot loc. Wir werden nicht viel von diesen Dingen berühren, weil das in mehrere verschiedene Themen außerhalb der Welt von React kommt . Aber für diesen Kurs werden wir hauptsächlich im SRC-Verzeichnis arbeiten. Also lasst uns weitermachen und das einfach zum Laufen bringen. Also, jetzt, da ich CDD in meine App in meinem Terminal habe und ich kann ls dash a tun. Und das zeigt mir alle meine Dateien hier drin. Oder ich kann DIR eingeben, wenn ich unter Windows war. Und Sie sollten all diese Akten hier sehen. Sobald Sie diese Dateien sehen, insbesondere den Ordner „Knotenmodule“ hier, können Sie npm start eingeben. Und was dies tun wird, ist die React-App zu erstellen und sie automatisch in Ihrem Browser zu starten. Und so wird mich das um Erlaubnis bitten. Es wird sagen, hey, kann ich auf Google Chrome zugreifen? Ich werde nochmal sagen, ja, und warten, bis das geladen wird. Es wird nur eine kurze Sekunde dauern. Und los geht's. Wir haben eine React-App, die auf unserem Computer läuft. Nun, wenn Ihr Browser nicht automatisch für Sie geöffnet, können Sie immer zu HTTP-Doppelpunkt Schrägstrich lokalen Host Doppelpunkt 3 Tausend, und das geht zu localhost Port 3 Tausend. Wenn das aus irgendeinem Grund nicht für Sie funktioniert, können Sie immer zu 127 Punkten gehen. Nr. 1, Doppelpunkt 3 Tausend. Es ist genau das Gleiche. Nur einige Computer sind etwas anders konfiguriert, also gibt es zwei verschiedene Möglichkeiten, dies zu tun. Ihre nächste, lassen Sie uns voran und sprechen über einige reagiert Syntax. Aber vorerst wird Ihre Aufgabe im Grunde darin bestehen, das in Gang zu bringen. Stellen Sie sicher, dass Sie hier bestimmte Befehle ausgeführt haben. So haben Sie npm installieren dash g für globale, Create React App ausgeführt. Geben Sie dann np x Create React app, meine dash app. Und das wird all diese Ordner und all diese Struktur für Sie erstellen. Und dann CD in diesen bestimmten Ordner. Also meine hieß meine Dash-App, also habe ich nur CDD in diesen Ordner. Ich habe mein Verzeichnis in diesen Ordner geändert. Und dann geben Sie npm start ein. Es sollte einen Browser für Sie starten. Gehen Sie zu localhost Port 3 Tausend und sagt Ihnen direkt hier oben, lokalen Host Port 3 Tausend. Und es wird Ihnen Ihre React-App zeigen, aber Sie müssen sicherstellen, dass npm start läuft, damit das funktioniert. Sobald du das erledigt hast, lass uns zur nächsten Lektion gehen. 5. React.js: Okay, lassen Sie uns einen Blick auf die Reaktions-Syntax werfen. Also, was ich tun werde, ist, das eine Berührung kleiner zu machen, einfach nach unten zu bewegen. Ich gehe in meinen SRC, meinen Quellordner, und gehe in app.js. Und das sieht wirklich, wirklich, wirklich, wirklich bizarr aus. Ich werde das hier noch einen Hauch kleiner machen , weil wir das Terminal für diese Lektion nicht brauchen. Und das sieht wirklich bizarr aus. Wenn Sie also gewohnt sind, einfach Vanille-JavaScript zu schreiben, haben Sie vielleicht noch nie einen Importbefehl gesehen. Das könnte ganz neu für Sie sein. Und wenn das ganz neu für dich ist, ist das okay. Wir werden darüber reden und wir werden auch ein wenig Erfahrung damit sammeln. Wir sehen eine Funktion, die wie eine reguläre Funktion in JavaScript aussieht und eine return-Anweisung mit einer öffnenden Klammer. Und wenn wir hier runter gehen, gibt es eine schließende Klammer, die dazu passt. Sie können diese Zeile Highlights hier oben sehen. Und dann haben wir ein div. Jetzt sieht das komisch aus, weil wir keine Zeichenfolge verwenden, wir verwenden kein Template-Literal in JavaScript. Wir verwenden gerade HTML. Und in der Tat wird dies tatsächlich ein wenig seltsamer nur weil wir nicht nur HTML verwenden, wir verwenden dieses Ding namens JS Acts, das im Grunde XHTML ist. Es ist also HTML, ähnlich wie bei normalem HTML5, aber es ist in unserem JavaScript geschrieben, das ziemlich verrückt ist zu C Also, wenn dies Ihr erstes Mal ist und du bist wie, whoa, ich mag das entweder nicht oder ich habe keine Idee, was mit mir vor sich geht für ein wenig. Es wird viel einfacher und es wird ziemlich schön, mit auf der Straße zu arbeiten. Also lasst uns diese Zeile für Zeile durchlesen. Wir haben ein div. Und beachte, dass es keine Klasse ist. Klasse ist ein tatsächlicher Name in JavaScript, es ist ein Schlüsselwort, wir können das nicht verwenden, also verwenden wir Klassenname ist gleich app. Wir sehen das Gleiche hier und hier haben wir ein Bild. Es ist SRC ist, naja, das sieht ein bisschen bizarr aus. Also statt einer Datei, Lake Logo Punkt SVG, haben wir Logo Punkt SVG importiert. Also lasst uns gehen und diese Datei öffnen. Es ist nur eine normale SVG-Datei. Wir haben das als Variable namens Logo importiert. Wann immer wir eine von diesen verwenden und reagieren, sagen wir, dass der Attributname oder der Eigenschaftsname gleich ist. Und anstatt Anführungszeichen auf beiden Seiten zu haben, wie wir es normalerweise in HTML tun, haben wir geschweifte Klammern und öffnende geschweifte Klammer und eine schließende geschweifte Klammer. Und dann setzen wir diesen Variablennamen hinein. Und was das tun wird, ist dieses Logo direkt in diese Bildquelle zu injizieren. Wieder haben wir Klassennamen, nicht Klasse, Klassenname, es ist ein js X-Attribut. Und wir können sehen, dass hier, sobald ich den Mauszeiger über diese, es sagt als DJ ESX Attribute und regelmäßige Alt-Tags und Klassennamen, yada, yada, Absatz mit etwas Code, Standard-HTML. Wir haben hier einen Link, Klassenname, aber die HRF ist das gleiche, das Ziel ist das gleiche, die Schiene ist die gleiche und es sagt lernen React. Eine Sache, die Sie beachten müssen, ist in Ihrer Return-Anweisung, beachten Sie, dass wir eine Klammer oder eine Klammer am Anfang und am Ende hier verwenden. Wir wickeln auch alles in ein div ein. Sie können also nicht einfach regulären Text eingeben. Sie müssen tatsächlich ein HTML-Element mit mehr Code darin haben. Und so ist das eine kleine Eigenart mit React. Aber wenn ich nur sicherstelle, dass mein Server hier läuft, sieht so aus, als wäre es. Es ist auf Localhost 3 Tausend. Das ist es, was wir sehen werden. Nun, um das zu ändern, sagen wir, ich wollte diese Zeile hier ändern. Alles, was ich tun muss, ist, diesen Text zu ändern. Und dann, wenn ich es speichere, und das ist eine wirklich schöne Sache, es lädt automatisch meinen Browser für mich neu. Also, wenn ich zurück zu Chrome oder Firefox oder Safari, es hat sich für mich geändert, es ist lebendig, aktualisiert. Ich muss nicht Refresh drücken, was wirklich schön ist, weil manchmal das ziemlich ärgerlich wird, wenn man das an einem Tag genug macht. Alles, was ich tun muss, ist zu tippen. Und du siehst, dass sich ein Leben direkt vor mir verändert hat. Und es ist fast Instanz, also bin ich in Hit Speichern und dann werde ich zu Chrome wirklich schnell bewegen. Und du wirst in der Lage sein zu sehen, dass es sich tatsächlich verändert hat. Es war sehr, sehr schnell, aber wir haben gesehen, dass es sich geändert hat. Also, was ich tun werde, ist, das einfach zu tun. Sie können sehen, dass jedes Mal, wenn ich meine app.js gespeichert habe, dieser Knoten ebenfalls aktualisiert wird. Es sagt also, dass es jedes Mal kompiliert, wenn ich auf Speichern, Kompilieren, Kompilieren, Kompilieren. Ihre Aufgabe für diese Lektion ist also ich möchte, dass Sie Ihre app.js öffnen, sicherstellen, dass Ihr Server läuft und nur ein wenig Text ändern. Sie sich keine Sorgen um das Logo oder etwas Fortgeschrittenes. Sorgen Sie sich einfach über das Ändern des Textes. Und in Ihrem Browser, sollte es den Text für Sie ändern, wenn Sie haben, dass läuft und gehen Sie über die nächste Lektion. 6. Komponenten importieren: In Ordnung, werfen wir einen Blick auf das Importieren von Komponenten. Und wir können alle möglichen Dinge importieren. Sie müssen nicht nur eine Komponente sein. Ich werde in ein wenig mehr über Komponenten sprechen. Aber wenn wir einen Blick auf unsere app.js werfen, die in unserem Quellordner lebt. Wir sagen, Import-Logo. Das ist der Name, den wir von Punktschrägstrick-Logos verwenden. Das heißt also, dass der gleiche Ordner, in dem wir uns gerade befinden, gleiche Ordner, in dem app.js ist, Logo Punkt SVG. Lassen Sie uns voran und öffnen Sie diese Datei, Logo Punkt SVG. Und wir können sehen, dass es ein Standard-SVG ist. Es ist nur wichtig für uns und macht es uns zur Verfügung, in dieser speziellen Datei zu verwenden. Ebenso können wir sagen, importieren, und wir müssen ihm nicht unbedingt einen Namen geben. In einer Zeichenfolge können wir Punktschrägstrich sagen. Also dieser genaue Ordner, App Punkt CSS. Lasst uns das aufmachen. Dies ist app.use ESS, und das macht uns nur das CSS in unserer App ab.js Datei zur Verfügung. So können wir ClassName verwenden ist gleich App. Und werfen wir einen Blick hier rüber. Wir haben hier eine App, Textausrichtungszentrum. Lassen Sie uns voran gehen und ändern Sie diesen Text nach links ausrichten. Sie können sehen, dass es unten schnell neu kompiliert wird. Und hat das irgendetwas getan? Es sah nicht so aus, als hätte es irgendetwas getan. Hmmm Muss ich app.js erneut speichern? Nein. Es ist nur funky CSS, so dass es aussieht, als wäre es eigentlich nicht wirklich so nützlich. Lassen Sie uns voran und ändern Sie die Textfarbe in Schwarz. Und lasst uns da drauf schlagen, weil ich nicht weiß, was noch hier drin ist. Ich habe es nicht wirklich durchgelesen und ich möchte auch nicht Ihre Zeit damit verschwenden, nur das Standard-CSS zu lesen . Also lasst uns voran gehen und das speichern. Und das hat wahrscheinlich wegen der Spezifität nicht funktioniert. Lassen Sie uns also einen Blick auf den App-Header werfen. Wir möchten den App-Header Absatztext ändern. Das ist also nur eine Front-End-Arbeit, die wir hier machen. Also haben wir App, wir haben App-Header irgendwo, App-Header. Und die Farbe dort ist weiß. Also lasst uns voran gehen und das in Schwarz ändern. Mal sehen, ob das hier den Trick macht. Dort gehen wir, haben es in schwarz geändert und es hat automatisch Ihr CSS für uns kompiliert. Damit wir das in Blau ändern können. Für diesen Text ändert es automatisch auch für uns, was wirklich, wirklich schön ist. So importieren wir Befehle. Einfach das Schlüsselwort importieren und den optionalen Variablennamen. Entweder möchten wir eine bestimmte Komponente importieren die wir in nur ein wenig eingehen werden. Bitte ertragen Sie mit mir. Wir kommen dorthin, ich verspreche es. Von und dann ein Dateiname. Und dieser Dateiname wird in einer Zeichenfolge sein. In anderen Sprachen, Python, setzen wir dies nicht in eine Zeichenfolge. In JavaScript setzen wir dies in eine Zeichenfolge, und dann beenden wir es mit einem Semikolon. Nun, was ich möchte, dass Sie für diese Lektion tun, ist Ihr app.use CSS geöffnet und einige Änderungen in ihrem Nichts Major vornehmen. Also habe ich gerade die Textfarbe in Blau geändert. Ich werde das wieder ändern Ich werde es in Gelb ändern, damit es hell und sichtbar ist. Wenn ich es in Schwarz ändere, ist es schwer zu lesen. Blau ist schwer zu lesen, gelb ist schön und hell. Gehen Sie weiter und ändern Sie ein wenig CSS, stellen Sie sicher, dass es in Ihrem Browser so angezeigt wird, wie Sie es erwarten. Und wenn du damit fertig bist, lass uns zur nächsten Lektion gehen. 7. JSX: Lassen Sie uns voran gehen und erkunden Sie index.js. Dies ist, wo unsere App tatsächlich gerendert wird. Und wir können sehen, dass ich mein Terminal dort geschlossen habe, einfach das laufen lassen. Ich kann es immer mit View-Terminal öffnen und Sie können sehen, dass es noch läuft, also habe ich es einfach zusammengebrochen. Und jetzt heißt es „React von React als String importieren“. Das ist ein Paket, das wir installiert reagieren, wenn wir npm install dash geschrieben, dash g, Create React app. Es hat ein Paket dort für uns namens React erstellt. Wenn ich nun in meine Knotenmodul-Ordner gehe, wirst du es sehen. Es gibt eine Menge Zeug hier drin. Aber wenn wir den ganzen Weg nach unten scrollen, a, C, D, E, F, G, H, den ganzen Weg nach unten. Wo bist du? P, Q, R, S. Wo reagieren Sie? Da bist du ja. Reagieren Sie. Das ist es, was wir importieren, importieren, reagieren, von React. Und wir können uns auch hier den gesamten Quellcode für React ansehen. Wenn wir wollten, werden wir reagieren DOM von reagieren Dom importieren. Also, wenn wir hier wieder rein gehen und einen Blick nach React DOM werfen, gibt es React Dom. Es wird auch eine relevante importieren, nicht irrelevant, aber ein Verwandter, ich denke, es ist auch relevant, aber eine relative Datei namens index.js s. Also in unserer index.js Datei importieren wir, werde ich diese schließen. Wir importieren Index Dot CSS. Und so wird dies nur etwas Marge und etwas Code hinzufügen, und nicht Marge, sondern irgendeinen Körper. Es enthält eine Marge und einen Code hier. Das ist also alles, was es tut. Wir werden App importieren. Das sind im Grunde unsere Komponenten. Also, wenn wir zur App gehen, haben wir eine Funktion namens App, und ganz unten sehen wir Export Standard-App. Und was dies tun wird, ist sagen, nehmen Sie diese APP-Funktion und exportieren Sie sie. Und das erlaubt es, tragbar zu sein. Also werden wir App aus dem gleichen Ordner App importieren. Dann werden wir Report Web Vitalwerte importieren. Und das kommt von einem relativen URL-Bericht Web-Vitalwerte, die nur eine Reihe von Sachen für uns berichten werden. Wir werden in diesem speziellen Modul nicht darauf eingehen. Und dann kommen wir zum Nitty-Gritty, dem eigentlichen Code. So haben wir reagieren DOM oder Document Object Model dot rendern. Im Strict-Modus reagieren. Wir werden unsere App darin setzen. Und so ist das GSS. Das sieht wirklich, wirklich bizarr aus. Aber im Grunde war unsere App in JavaScript eine Funktion. Wir können es jetzt schreiben, als ob es Standard-HTML oder XHTML wäre. Und das Schöne daran als React wird einfach hinter die Kulissen gehen und sagen, oh, ich weiß genau, was das ist. Und ich werde einfach damit arbeiten. Ich werde nur magisch dafür sorgen, dass es funktioniert. Und damit wir wirklich wirklich, wirklich kompliziert werden können. Und wir können Dinge wie Variablen dynamisch zu jeder Komponente hinzufügen. Darüber werden wir in Zukunft sprechen. Zu guter Letzt haben wir hier zwei Möglichkeiten. Dies ist also unser erstes Argument für den Renderbefehl. Dies ist das zweite Argument für einen Renderbefehl. Was das heißt, sagen Sie es im strengen Modus sagen, machen Sie unsere App und strikten Modus und setzen Sie es in unsere, unsere Elemente, die eine ID von root hat. Wenn wir also in einen öffentlichen Ordner gehen und zu index.html gehen, werden wir irgendwo hier drin sehen, wo bist du? ID der Wurzel? Hier wird unsere App leben. Also, wenn wir das loswerden, wird das für uns nicht mehr funktionieren. Wir wollen also sicherstellen, dass das immer existiert. Jetzt muss es nicht root genannt werden. Du könntest das alles andere nennen. Sie werden es oft auch App genannt sehen. Also nur eine ID der App. Und wenn du das je änderst, musst du es auch hier ändern. Stellen Sie also sicher, dass das immer übereinstimmt. Zu guter Letzt betreiben wir Web-Vitalwerte. Und das ist wirklich, wirklich nützlich für, Das sagt uns direkt hier, um die Leistung in Ihrer App zu messen. Übergeben Sie eine Funktion, um Ergebnisse zu protokollieren. Melden Sie beispielsweise Web-Vitalwerte, console.log. Das ist also einige der bizarren Syntax, die wir mit React sehen werden. Und das heißt js X. Die Hauptsache, die ich möchte, dass Sie von hier wegnehmen und es gibt keine Aufgabe für diese Lektion ist, dass Sie nur einen Blick darauf werfen, lesen Sie es einfach durch. Verstehen Sie, dass dies importiert wird. Dies ist eine Klasse, dies ist eine Methode für diese Klasse. Also kommen wir in objektorientierte JavaScript-Programmierung. Es braucht einen Parameter, wir können sagen, dass es ein Parameter ist, weil es hier ein Komma gibt. Und der zweite Parameter ist, wo diese App gerendert werden soll. Und dann reagieren, als würde eine Reihe von Sachen kompilieren. Es wird sagen, oh, reagieren strikt Modus, okay, ich weiß, wie man das benutzt. Ihre App wird verstehen, was Ihre App ist und sie wird sie auch hier rendern. Schön daran ist, dass wir beginnen, in Komponenten zu kommen. Wenn wir also eine sekundäre App hätten, könnten wir hier eine andere App haben. Import, der uns so tun lässt, als hätten wir ihn importiert. Wir können es App nennen oder wir nennen es Shop. Und es wird unsere App und unseren Shop in unserem Dokumentstamm rendern. Also noch einmal, es gibt keine Aufgabe für diese Lektion. Ich will nur, dass du einen, weißt du, kratzt. Die Aufgabe ist eigentlich, Ihre index.js zu öffnen und einfach diese Zeilen hier durchzulesen, nur irgendwie eine Vorstellung davon zu bekommen, wie das aussieht, denn das ist zuerst wirklich bizarr. Und das ist nichts wie alles andere im Web. Dies ist eine völlig neue, das heißt die js X Und so im Grunde haben Sie eine Komponente und Endkomponente und darin, und es sieht genau wie HTML aus. Wir haben etwas drinnen. Das ist also wie in HTML, wir können einen div Schrägstrich div haben, und dann können wir ein H1 darin haben. Es ist sehr, sehr ähnlich. Die Lernkurve für diesen bestimmten Teil ist also ziemlich niedrig. Sobald du fertig bist, das durchzulesen, lasst uns zur nächsten Lektion gehen und lasst uns vielleicht mit der Erstellung unserer ersten Komponente beginnen. 8. Deine erste Komponente: Na gut, lass uns weitermachen und unsere ersten Komponenten erstellen. Also, was wir tun werden, ist in erster Linie werden wir sagen Import, React from React Paket. Und das erlaubt uns nur React zu verwenden. Und dann, was wir tun können, ist eine neue Komponente hier zu erstellen. Und es sieht aus wie diese Klasse, mein Komponentenname. Also nennen wir es ein Element, erweitert react.com. Und hier dauert es eine Rendermethode. Es sieht viel wie eine Funktion aus. Und hier drin braucht es eine Return-Anweisung, also gibt es etwas zurück, das wir mit Klammern öffnen und schließen und einfach ein h1 hier einfügen werden. Hallo Welt. Nun, das ist schön. Aber Sie können sehen, dass diese Art von nicht die richtige Farbe ist. Es sieht irgendwie dunkel aus. Und das heißt im Grunde, dass es nicht wirklich benutzt wird. Also lasst uns voran gehen und das benutzen. Jetzt haben wir diese React-Komponente. Und das Schöne daran ist, dass wir es so schreiben können, wie wir es in unserer index.js gesehen haben , genau so. Lassen Sie uns also voran und erstellen Sie ein neues Element innerhalb unseres Codes. Und lasst uns diesen Absatz entfernen. Und zuerst, lassen Sie uns den Absatz entfernen. Gehen wir zurück zu unserem Browser und stellen Sie sicher, dass Absatz nicht existiert. Dies ist, was es sah aus, bevor es sagte, ändert Text. Ich bin es losgeworden. Es ist weg. Ok. Cool. Also, jetzt, da das gelöscht wird, kann ich item eingeben. Und das ist nur ein Standard-XHTML-Speicher. Und da steht hallo Welt. Also, jetzt habe ich hier drin nichts gesagt. Ich habe es geschrieben, ich habe es geschrieben. Ich habe es hier geschrieben. Und ich kann hier alles schreiben, was ich will. Ich kann Hallo Welt sagen. Und dann in kleinen Buchstaben, das ist ein Test. Und was ist schön daran ist, dass wir es nicht wirklich in unserer App ändern müssen, sobald wir diesen Artikel gesetzt haben , wir können eine Menge unserer Logik tun, einen Großteil unserer Verarbeitung in einer Komponente. Nun gehen wir weiter und teilen diese Komponente in eine eigene Wandkomponentendatei. Also, was ich tun werde, ist, dass ich das einfach schneiden werde. Schneiden Sie das ab. Und ich werde sagen, Import Artikel aus. Und ich werde hier eine neue Datei erstellen, die meinen Artikel nennt. Und wir können diese Zeile auch loswerden, weil sie nicht in dieser Datei verwendet wird. Und ich werde hier eine neue Datei erstellen, die meinen Artikel dot js genannt wird. Beachten Sie also, dass ich es meinen Artikel dot JS genannt habe, aber es heißt nur mein Artikel hier. Wenn React Ihren Code kompiliert, weiß er, es versteht, dass dies höchstwahrscheinlich eine JavaScript-Datei sein wird. Nun, zum Beispiel, haben wir App Punkt CSS angegeben, weil wir es sagen mussten, hey, übrigens, importieren Sie nicht app.js, importieren Sie nicht Logo ab.js wichtigen Logo Punkt SVG, aber standardmäßig wird es Javascripts annehmen. Also habe ich eine Datei namens mein Element ab.js erstellt und war keine Paste, die erste Zeile darin. Und fügen Sie diesen Code auch hier ein. Und lasst uns die Vertiefung dort reparieren. Das sieht gut aus. Und jetzt können Sie sehen, dass Artikel auch wieder verdammt ist, es wird nicht verwendet. Was wir hier sagen müssen, ist, dieses Element zu exportieren, so dass es später unmöglich ist, exportieren Sie standardmäßig dieses Element. Und wenn ich zu app.js zurückgehe, werden wir Artikel aus meinem Artikel importieren. Nun lassen Sie uns unser Terminal öffnen und es gibt keine Fehler in Ihrem, was wäre, wenn wir dies geben würden, sagten wir Punkt zwei. Es sagt, dass nicht kompiliert werden kann. Artikel ist nicht definiert. Lassen Sie es uns auf die Art und Weise zurücksetzen, wie es sein soll und wir bekommen keinen Kompilierungsfehler in unserem Terminal. Jetzt gehen wir zurück zu unserem Browser. Und es funktioniert. Wir haben nun eine Komponente erstellt und in eine eigene Komponentendatei aufgeteilt. Und das können wir jederzeit ändern. Und nur als Beispiel, hallo von Caleb Talia und das bin ich. Und es sagt Hallo von Caleb Tolkien. Und so können wir jetzt Komponenten aufteilen, nicht nur aus großen Mengen an Logik, weil Ihre app.js ziemlich groß werden könnte. Sie können diese Komponente jetzt in eine eigene Datei aufteilen , damit sie in Zukunft besser wartbar ist. Und all Ihre Logik und Ihre gesamte Verarbeitung für dieses bestimmte Element in Ihrem, für dieses, das wir rendern, kann in Ihre Elementkomponente gehen. Ihre Aufgabe für diese Lektion ist also Schritt Nummer eins. Was ich möchte, dass Sie tun, ist, fügen Sie diesen Text, den ich gerade zu Ihrer app.js hervorgehoben habe. Und dann möchte ich, dass du tatsächlich instanziierst. Ich möchte, dass Sie diese Komponente verwenden, die Sie erstellt haben, und Sie können meinen Code kopieren. Ich werde Ihnen den Quellcode nicht unbedingt geben, nur weil das sehr, sehr einfach ist. Und es ist wirklich, wirklich gute Übung, dies auszuschreiben, damit Sie wissen, dass zum Beispiel Klassen geschweifte Klammern haben, aber return verwendet eine Klammern. Also geh weiter und probiere das mal aus. Das ist Schritt eins. Schritt zwei besteht dann darin, diesen Code aus Ihrer app.js zu nehmen und ihn in Ihre eigenen Komponenten zu teilen, wie ich es getan habe. Sobald du damit fertig bist, lass uns zur nächsten Lektion gehen. 9. Arbeiten mit Requisiten: In Ordnung, reden wir über diese Sache, die Requisiten genannt wird. Also, wo ist ein gutes Beispiel? Ein gutes Beispiel wäre ein sauberes Beispiel wäre in unserer index.js, wir haben eine Komponente namens App. Und wir können dieses Ding genau wie ein HTML haben, wo wir ein Attribut haben, ist gleich einer Art von Wert. In React nennen wir es eine Requisite. Also ist eine Requisite gleich einer Art von Wert und wir können das in übergeben. Wenn wir nun eine Requisite oder ein Attribut in unsere Komponente übergeben, können wir darauf als JavaScript-Variable zugreifen. Also lasst uns weitermachen und ich habe das einfach rückgängig gemacht. Ich werde diese Datei schließen, app.js öffnen und wo ich Element hier habe, werde ich diesem Element einen Namen geben. Und so wird dieser Name einfach Gully sein. Also bewahre ich das auf und wir werden sehen, dass absolut nichts passiert. Und in meinem Artikel hier, wo ich diesen Artikel habe, kann ich nicht einfach Gullies eingeben, weil eine, die keine Variable ist. Ich kann Gully nicht eingeben und ich kann sicherlich keinen Namen eingeben. Du würdest denken, dass wir es schaffen könnten, aber wir können es einfach nicht. Also, wenn ich das speichere, werden wir sagen, dass wir sehen werden, dass es nicht möglich ist, unerwartete Verwendung des Namens zu kompilieren. Also lasst uns diesen Platzhalter hier rückgängig machen und das speichern. Nun, was wir tun können, ist, dass wir Requisiten mit diesem Schlüsselwort zugreifen können. Also reagieren, wenn wir irgendeine Art von Verweis auf andere Reaktor, anderes JavaScript haben, öffnen und schließen wir immer mit Schnurrbart Syntax mit einer öffnenden und schließenden geschweiften Klammer. Dann sagen wir diesen Punkt, Requisiten Punkt, und was war dann der Name der Requisite? Der Name der Requisite war nur ein Name. Also können wir sagen, dass dieser Punkt Requisiten Punktnamen, aber speichern Sie das. Und da steht, dass ich das jetzt im Browser öffnen kann. Und da ist es, hallo von Gully. Jetzt ist das wirklich schön, weil wir diesen Artikel jetzt an mehreren Orten verwenden können. So können wir hier einen Artikel erstellen. Wir können das kopieren und in eine neue Zeile einfügen, Rhabarber. Das sind die beiden Katzen, mit denen ich lebe. Ich liebe sie sehr, sehr. Sie sind super süß und ich möchte, dass sie in diesem Video sind. Also gehe ich zurück und es sagt Hallo von Gully, hallo von Rhabarber. Ich habe noch einen gesetzt, mich. Hallo von Caleb. Hallo von Gully, hallo von Rhabarber, hallo von Caleb. Und so durch das Schreiben einer sehr minimalen Menge an Code, einfach mit einer Komponente, eine wiederverwendbare Komponente genannt ein Element, das wir benannt haben. Hier. Wir können in einer Variablen namens Name übergeben, und dieser Name kann durch diesen Punkt Requisiten Punkt Namen zugegriffen werden. Und der Grund, warum wir das verwenden, ist, weil wir hier in einer Klasse sind. Dies bezieht sich also auf diese ganze Klasse, nur diese, keine andere Klasse. Dies bezieht sich einfach auf diese Klasse als Komponente. Dann benennen wir es mit Requisiten, so dass es nicht nur this.name , weil das sehr verwirrend werden kann, wenn Sie ein größeres Projekt haben, sagen wir this.name crops wie in Eigenschaften und dann den Eigenschaftsnamen. Was passiert, wenn wir hier den falschen eingeben? Nehmen wir an, wir machen diese Punkt-Requisiten, Punkt-Name mit einem großen N. Es kompiliert, es hat gut funktioniert, aber es funktioniert nicht wirklich für uns. Und der Grund dafür ist, dass dies nicht nach einer Requisite namens Name mit einem Großbuchstaben N sucht . Und so ist das sehr, sehr Groß- und Kleinschreibung beachtet. Stellen Sie also sicher, dass Ihr Namensgehäuse immer funktioniert. Ich sagte, Name mit einem Kleinbuchstaben n, dort, dort und dort. Und ich möchte sicherstellen, dass es hier funktioniert. Nun möchte ich, dass Sie als Ihre Aufgabe tun, ist für Ihre Komponente, die Sie erstellt haben. Ich möchte, dass Sie ihm eine Eigenschaft geben und wenn Sie ihm eine Requisite geben, und Sie können mein Beispiel auch verwenden, wenn Sie möchten. Es kann sein, dass ein Name gleich etwas ist. Und dann möchte ich, dass Sie in Ihrer Komponente auf diese Eigenschaft zugreifen. Ich möchte, dass Sie es auf Ihrer Seite zeigen können. Also sagen Sie hallo von diesen Punkt-Requisiten und dann Ihren Eigenschaftsnamen. Stellen Sie sicher, dass es in Ihrem Browser so angezeigt wird, wie Sie es erwarten. Und wenn Sie das getan haben, gehen wir weiter zur nächsten Lektion, in der wir über das Hinzufügen von Klick-Ereignissen sprechen. 10. Klicke auf Events in React.js: Werfen wir einen Blick auf das Hinzufügen eines Klick-Ereignisses. Also habe ich eine Komponente hier namens item. Ich habe drei von ihnen mit unterschiedlichen Namen. Es verwendet also die gleiche Logik. Wir ersetzen einfach den Namen. Und hier drinnen benutzen wir dieses Problem. Das ist aus unserer letzten Lektion. Nun, was passiert, wenn Sie auf klicken, sagen wir dieses. Nun, das ist eine Art schreckliches Beispiel, aber das wird wirklich die Idee nach Hause fahren, dass es ein Klick-Ereignis geben kann. Und so wie Klick-Events funktionieren oder wie die meisten Ereignisse funktionieren, ist es tatsächlich Old-School-HTML, das wir seit langem nicht gesehen haben. Eine Möglichkeit, eine Funktion zu schreiben , ist onclick gleich und dann können Sie hier einige JavaScript- oder JavaScript-Funktion einfügen. Jetzt lehren uns viele Orte nicht mehr, weil es wirklich, wirklich alte Schule ist. Aber React nutzt das sehr, sehr stark. Also, um ein onclick-Ereignis zu erstellen, sagen wir onclick, und dann geben wir ihm eine Art von Wert. Wir werden das nur für den Moment löschen. Und ich werde in nur einer Sekunde darauf zurückkommen. Wir müssen ihm eine Art Methode geben, irgendeine Art von Aktion. Lassen Sie uns also eine neue Funktion erstellen, die hier Click Me genannt wird. Und all dies wird als Konsolenprotokoll sagen, ich wurde angeklickt. Und dann zurück zum onclick hier. Wir setzen dies in Schnurrbart-Syntax oder geschweifte Klammern. Und wir können Pfeilfunktion sagen, führen Sie diesen Punkt, Click Me als Funktion. Das sieht zunächst etwas seltsam aus, aber du wirst dich daran gewöhnen, versprochen. Also haben wir diese öffnende geschweifte, geschweifte Klammer ist diese seltsame geschweifte Syntax hier. Und das sagt, alles dazwischen wird JavaScript sein, es wird reagieren. Der Rest davon sieht viel wie HTML aus. Aber hey, reagieren Sie, wenn Sie gehen, um dies zu kompilieren, und das wird JavaScript sein, nur damit Sie es wissen , also wenn Sie etwas klicken , wird es eine Art Ereignis geben und wird dann diesen Punkt ausführen klicken Sie mich. Und das ist objektorientierte Programmierung. Und jedes Mal, wenn wir klicken, wird dies zu Konsolenprotokoll Ich wurde geklickt. Also lasst uns voran gehen und das speichern. Es sah aus wie eine kompilierte Definition. Und wenn ich hier reingehe, klicken Sie mit der rechten Maustaste auf Inspect, gehen Sie in meine Konsole. Und lassen Sie uns das einfach deutlich größer machen. Wenn ich auf Golly klicke, steht es, dass ich angeklickt wurde. Rhabarber sagt, ich wurde angeklickt und Caleb sagt, dass ich angeklickt wurde. Nun, was daran cool ist, ist, dass jede Komponente im Grunde ihr eigener Code ist. So Gully wird als On-Click-Ereignis bekommen, Rhabarber bekommt sein onclick-Ereignis und ich bekomme mein onclick-Ereignis. Was wir jetzt sagen können, ist, dass ich angeklickt wurde. Und lassen Sie uns dies sagen, Lassen Sie uns einen zweiten Parameter hier setzen, der besagt, dass dieser Punkt Requisiten Punktnamen. Und es wird sagen, dass ich geklickt habe und dann nur den Namen. Also lassen Sie uns voran und werfen einen Blick. Es steht, dass es erfrischt hat. Lassen Sie uns einfach unsere Konsole freimachen. Und lasst uns das anklicken. Ich habe auf Golly geklickt. Ich klickte Rhabarber, ich klickte Caleb. So können wir jetzt eine Art Logik ausführen, die darauf basiert. Wir können sagen, hey, wenn Sie auf den Rhabarberabdruck geklickt haben, war das eine orangefarbene Katze. Oder wenn Sie auf gully console log etwas anderes klicken oder wenn Sie auf Caleb klicken, sagen, dass dies kein Haken ist, können wir eine Art Logik basierend auf diesem Eigenschaftsnamen und einem Klick-Ereignis ausführen. Was ich möchte, dass Sie als Ihre Aufgabe tun, ist, dass Sie ein onclick-Ereignis mit einer Klickfunktion hinzufügen und einfach die Eigenschaft protokollieren , die aus der letzten Lektion in Ihre Eigenschaft übergeben wird. Also jetzt werden wir hier etwas weiter fortgeschritten. Und um dies nur noch einmal zu brechen, sagen wir, onclick ist gleich geschweifte Klammer. Das ist, wie wir wissen, dass es Javascript sein wird und innerhalb dieser Funktion reagieren wird, um dann dies auszuführen, die diese gesamte Komponente ist. Punkt klicken Sie mich mit Klammern, weil das hier übereinstimmt. Das wird dann hingerichtet. Und Sie können Konsole protokollieren, alles, was Sie wollen, da drin. Es kann nur eine reguläre Zeichenfolge sein, oder Sie können Ihre Requisiten Punktnamen in der Konsole protokollieren. Sie könnten alles in der Konsole protokollieren. Sie können eine API-Anfrage erstellen, wenn Sie möchten, die wir auf die Straße gehen, Sie können wirklich alles zu diesem Zeitpunkt tun, weil dies nur normales JavaScript ist. Jetzt haben Sie Ihren HTML-Code mit einem onclick-Ereignis kombiniert, das mit Ihrem JavaScript verbunden ist. In React, geh weiter und gib diesem einen Schuss, verbringe ein paar Minuten damit. Und denken Sie daran, wenn Sie jemals auf ein Problem stoßen. Sagen wir mal, es gab hier einen Tippfehler. Wir können das retten. Es wird perfekt kompilieren. Aber wenn wir dies testen, lassen Sie uns die Seite aktualisieren. Wir testen das. Es funktioniert einfach nicht. Sie möchten also sicherstellen, dass Ihr Code immer funktioniert. Und wenn Sie diese Pause sehen wollten, wird dies Ihnen eine Art Fehler geben. Sieh dir das an. Typfehler können keine Eigenschaftenaufforderungen von undefined lesen. Es sagt dir also, dass es hier ein Problem gibt. Und das liegt daran, dass dies eine Eigenschaft ist, keine Methode. Dies verhält sich wie eine Variable, keine Funktion. Also, wann immer Sie auf ein Problem stoßen, können Sie immer einfach lesen, es ging weg, aber Sie können den Fehler durchlesen und es wird Ihnen wahrscheinlich eine Vorstellung davon geben, was los ist. Es ist nicht perfekt, aber es gibt Ihnen eine gute Vorstellung davon, was los ist und wie Sie es beheben können. 11. Zustand zu deinen React hinzufügen: In Ordnung, lassen Sie uns weitermachen und etwas Zustand zu unserer Komponente hinzufügen. Und was der Zustand ist, ist es sehr wie Requisiten. Requisiten ist ein Wert, den Sie an Ihre Komponenten übergeben. Es ist also eine Eigenschaft, es ist eine benutzerdefinierte Eigenschaft, die Sie in Ihre Komponente übergeben. Status ist wie eine Variable, die intern innerhalb Ihrer Komponente verfolgt wird. Jedes Mal, wenn Sie ein neues Element erstellen, erhält es einen neuen Status. Und das ist irgendwie knifflig zu erklären. Und für mich, zumindest als ich das vor langer Zeit gelernt habe, war der beste Weg, dies zu lernen, es einfach zu tun. Also lasst uns weitermachen und einen Zustand schaffen. Dafür. Wir werden eine magische Methode verwenden müssen, die con structure genannt wird. Und ich muss in der Lage sein, unsere Hilfskonstruktion zu buchstabieren oder, und das kann eine Requisite nehmen, wenn wir wollten. Und wir könnten Super-Requisiten schreiben. Also haben wir es nur mit Requisiten zu tun. Wenn dies von einer anderen Komponente ausgedehnt würde, die wir geschrieben haben, würde dies sicherstellen, dass alle anderen Komponenten von, sagen wir, nicht Element, sondern vielleicht eine Liste, die wir schreiben würden , für uns hier zur Verfügung stehen. Und das ist alles, was sagt. Dann können wir sagen, dass dieser Punktzustand gleich ist, und dies ist ein Objekt. Und lassen Sie uns die Anzahl der Klicks zählen. Wir können also sagen, dass Klicks 0 sein werden und das ist die Anzahl der Male, auf die dies geklickt wurde. Jetzt in unserem Click Me Status, ein weiterer Zustand, in dem Click Me Methode. Was wir sagen können, ist jedes Mal, wenn dies angeklickt wird, dieser Punkt-Set-Zustand als Funktion nimmt ein Objekt und es passt im Grunde zu diesem Objekt hier. Also werden wir den Schlüssel der Klicks setzen, und es wird dieser Punkt-Zustand sein, Punkt-Klicks plus eins. Nun, das ist cool und völlig nutzlos. Es tut gar nichts. Wenigstens neigen wir dazu zu sehen, dass es alles tut. Lassen Sie uns also voran und stellen Sie sicher, dass, wenn Sie auf eines dieser klicken, es tatsächlich etwas tut. So innerlich. Eins. Jedes Mal, wenn dies geklickt wird, wird es etwas tun. Lassen Sie uns also die Anzahl der Klicks darunter setzen. Das ist richtig, eine neue Spannweite hier drin. Und das wird nur die Anzahl der Klicks anzeigen. Wir können diesen Punktzustand sagen, Punkt-Klicks ist die Anzahl der Klicks. Und das wird zwei Dinge tun, eigentlich drei Dinge. Also der erste hier ist, dass wir all dies in irgendeine Art von HTML-Element umwickeln müssen. Gehen wir weiter und bewegen Sie das einfach nach oben. Und du merkst, dass es mir dort ein großes Problem gab. Es gab mir all diese quiggly Unterstreichungen. Das liegt daran, dass die return-Anweisung immer erwartet mindestens ein Element um Ihren anderen Code umbrochen wird. Also, das ist Nummer eins. Ich rette, ich gehe hierher. Nummer zwei ist, Sie können sehen, es sagt 0 als die Anzahl der Klicks Es gab die Anzahl der Klicks, Nullen, die Anzahl der Klicks. Ich habe das an einer Stelle geschrieben. Aber weil ich diese Komponente dreimal verwendet habe, wird sie automatisch an drei verschiedenen Stellen aktualisiert. Das ist fantastisch. Das bedeutet, dass Sie viel weniger tippen müssen und Ihre Arbeit wird viel einfacher oder einfacher. Es war eine lustige Art, das zu sagen. Okay, das dritte, was tun wird, ist, die Anzahl der Klicks zu aktualisieren. Sie können sehen, dass standardmäßig 0 steht. Wenn ich auf Gully klicke, jedes Mal, wenn ich darauf klicke, ich meine, ich hätte dies wahrscheinlich eine Schaltfläche anstelle eines H1 machen sollen, aber jedes Mal, wenn ich darauf klicke, steigt diese Zahl. Gleiches mit Rhabarber, gleich mit Caleb. Und das wirklich Schöne daran ist, dass die Anzahl der Klicks lokal für diese bestimmte Komponente ist. Die Anzahl der Klicks für Rhabarber ist lokal für diese Komponente, und Gully ist lokal für diese Komponente. Was das bedeutet, ist, dass dieser nicht Gegenstand ist. Dies ist ein anderer Artikel. Dies ist ein anderer Artikel. Aber wir haben nur einmal eine Logik geschrieben. So haben wir Konstruktorstatus ist gleich einem Objekt mit Klicks ist standardmäßig 0. Dann, wenn Sie darauf klicken und Updates und die Anzahl der Klicks um eins. Und alles, was tun wird, ist es für eine Komponente zu aktualisieren. Also, wenn ich auf Rhabarber klicke, drei Umdrehungen in 412 ändert sich nicht für ändert sich nicht. Nur drei. Und die einzige Komponente wird aktualisiert. Das ist die Macht hinter dem Staat. Nun, die Syntax dafür ist ein bisschen seltsam und es sieht ein wenig magisch aus. Aber wir können im Grunde sagen, wenn Sie einen Konstruktor haben, ist dieser Punktzustand gleich, und ich weiß nicht, warum sich das bewegt hat. Aber dieser DOD-Zustand ist gleich einem Objektschlüsselwert. Auch hier können wir zahlreiche Werte haben. Wir können sagen, die gesamte verbleibende ist gleich 100. Und wenn wir die gesamte verbleibende aktualisieren wollten, würden wir hier nur ein Komma hinzufügen und sagen, die restliche Summe. Wir werden das alles auf einmal aktualisieren. Stellen Sie sicher, dass das das gleiche Jep geschrieben ist. Ist gleich, ist gleich diesem Punktzustand, Punktsumme verbleibend minus eins. Und kein Semikolon, weil dies ein Objekt ist, keine reguläre JavaScript-Zeile. Und dann könnten wir hier drinnen sagen, die restliche Summe wird dieser Punktzustand-Punkt-Gesamtwert sein. Und denken Sie daran, dass wir diese Syntax verwenden, diese geschweifte Klammer Syntax. So weiß es, dass dies JavaScript und nicht nur HTML sein wird. Also, jedes Mal, wenn ich darauf klicke, wird das nach unten gehen. Sie können sehen, dass es von 90 auf 80 runter geht. Dasselbe mit diesem, das gleiche mit diesem. Und die Zahlen steigen. So haben wir jetzt zwei verschiedene Zustände, die gleichzeitig für jedes einzelne Element oder jede Komponente arbeiten. Nun möchte ich, dass Sie für Ihre Aufgabe tun, ist, dass Sie zuerst einen Zustand hinzufügen, den Sie benötigen, um Ihre Konstruktormethode zu schreiben. Es tut nicht weh, Requisiten zu übergeben und deine Requisiten dort zu super. Erstellen Sie Ihren Status in Ihrem Konstruktor. Dann möchte ich, dass Sie in Ihrer Klickfunktion aus der letzten Lektion diesen Punktsatzzustand schreiben. Es braucht ein Objekt, das im Grunde identisch mit diesem Objekt aussieht und diesen Wert einfach ändern. Sie können es in einen Namen ändern, Sie können es in Anzahl der Klicks ändern. Du könntest es in alles ändern, was du willst. Letzt müssen Sie in der Lage sein, diesen Zustand in Ihr Dokumentobjektmodell in Ihrem HTML zu setzen . Und so alles, was wir dort tun, ist, dass wir geschweifte Klammer sagen, dieser Punkt-Zustand, Punkt-Eigenschaftsname von unserem Objekt, das ist. Und dann schließen geschweifte Klammer, normales HTML oder JavaScript. Das ist alles, was wir tun müssen. Probieren Sie das aus, und wenn Sie bereit sind, gehen wir zur nächsten Lektion. 12. Star Wars: In Ordnung, lassen Sie uns eine brandneue Komponente erstellen. Also, was ich tun werde, ist, dass ich loswerde, na ja, ich werde das kommentieren, damit ich Ihnen zeigen kann ein Kommentar aussieht, und lassen Sie mich diese anderen beiden löschen. Ein Kommentar in JS Acts oder in React sieht also wie diese geschweifte Klammer aus. So wissen wir, dass dies JavaScript sein wird, endet mit geschweiften Pausen. Also wissen wir, dass alles dazwischen JavaScript sein wird, dann ein Javascript-Kommentar und ein endender Javascript-Kommentar. So sieht das also aus. Wenn Sie VS-Code verwenden, können Sie auf Befehl klicken. Ich werde das tatsächlich Cmd plus diesen Schrägstrich ausgeben. Wenn Sie unter Windows sind, kann ich mich nicht erinnern, ob es sich um einen Schrägstrich oder einen Schrägstrich handelt, aber in jedem Fall können Sie einfach zu Ihrem Zeilen- und Befehlsschrägstrich für mich gehen. Und es hat mich gerade auskommentiert, damit ich das retten kann. Und wir werden einen Blick werfen und es sagt, kompiliert mit Warnungen Element ist definiert, aber nie hier oben verwendet. So können wir weitermachen und das können wir auch aussagen. Dies verwendet einen regulären JavaScript-Kommentar, da er nicht in js X ist. Speichern Sie. Und lassen Sie uns hier eine brandneue Komponente erstellen, und dann teilen wir sie aus. Lassen Sie uns also eine neue Komponente namens Star Wars erstellen. So Class Star Wars erstreckt sich reagieren. Das war eine seltsame Autocomplete react.component. Und da wir React.Component verwenden, müssen wir React importieren. So können wir sagen, importieren React von. Und dann reagiert die Zeichenfolge, weil es ein Paket ist. Dann brauchen wir hier eine Art Renderfunktion. Also rendern und es wird auf mehrere Zeilen zurückkehren, so verwenden wir Klammern und H1. Und hier, das ist Star Wars. Das ist alles, was wir jetzt tun werden. In dieser speziellen Komponente, zumindest, lasst uns gehen und packen Star Wars. Und weil es nicht benutzt wird, lassen Sie es uns benutzen. Also lasst uns voran gehen und unseren Header loswerden. Das brauchen wir nicht. Und lasst uns das einfach ein bisschen aufräumen. Nehmen wir also an, dies ist ein Test, um sicherzustellen, dass dies so funktioniert, wie wir dies als Test erwarten. Wir wollen eigentlich diesen Header da drin, weil das mit etwas nettem Styling kommt. Also lassen Sie uns die Kopfzeile behalten. Ich habe nur Control Z oder Befehl Z rückgängig gemacht. Dies ist ein Test. Da gehen wir. Das ist es, was wir wollen. Also, was ich hier tun kann, ist jetzt, wo ich im Grunde das Innere meiner Standard-React-App entkernt habe, ich kann voran gehen und Star Wars hier einbringen. Lass uns weiter gehen und Star Wars schreiben. Und das ist eine React-Komponenten. Also schreiben wir es, wie JS Acts sagt, dass Logos nicht verwendet werden. Lass uns weitermachen und das loswerden. Und wir haben keine Beschwerden mehr sind Warnungen. Und da steht, das ist Star Wars. So erstellen wir in nur wenigen Minuten eine React-Komponente im laufenden Betrieb sehr, sehr schnell. nun in der nächsten Anzahl von Lektionen tun würde, Wasnun in der nächsten Anzahl von Lektionen tun würde,ist, dass wir eine API erstellen oder wir werden keine API erstellen, wir werden eine API verbrauchen. Wir werden eine API verwenden, die es uns erlaubt, Star Wars-Charaktere jedes Mal zufällig zu generieren, wenn Sie auf eine Schaltfläche klicken. Was Sie für diese Lektion tun müssen, ist, dass Sie eine neue Klasse erstellen müssen, eine neue Komponente, die sich von React.com erstreckt. Machen Sie einfach ein Ding. Wir können etwas später ändern, was es gerendert wird und das dann in Ihren JS Acts verwenden. Sobald das tatsächlich in Ihrem Browser funktioniert, können Sie mit der nächsten Lektion fortfahren. 13. Pseudo: Okay, lassen Sie uns hier ein paar Pseudo-Codierung machen. Zunächst einmal werden wir einen zufälligen Star Wars-Generator mit einer API erstellen. Also lasst uns voran gehen und eine API finden. Also lasst uns Star Wars API tun, nicht Daten, GitHub. Und wir können gehen, um Dot Def zu tauschen. Austauschen von Dot Co existiert nicht mehr. Es gibt auch einige copy.txt, wenn Sie möchten. Dies ist die Star Wars API-Swaps. Und jedes Mal, wenn Sie zu HTTPS wechseln dot.gov Schrägstrich API Schrägstrich Leute zum Beispiel einen Schrägstrich. Es wird Ihnen Informationen über Luke Skywalker geben. Also lassen Sie uns voran und geben Sie dies in unsere URL ein, nur um sicherzustellen, dass dies funktioniert. Slash api Schrägstrich Menschen Schrägstrich eins. Und hier können wir sehen, dass dies am Ende für uns zurückkehren wird. Jetzt sind die Stylings wenig seltsam, weil es wie weißer Text auf einem hellgrauen Hintergrund. Aber das ist der JSON, den wir zurückbekommen werden. Und gehen wir weiter und fügen Sie einen Namen hinzu, Höhe. Fügen wir eine Heimatwelt-URL und die Filme hinzu, dass dieser Charakter N. also werden wir hier ein bisschen Pseudocodierung machen. Wir werden uns nur für den Erfolg einsetzen. Also werden wir ein div erstellen, das unser Container für all unseren Code sein wird. Dann haben wir hier einen Namen. Und was habe ich dann gesagt? Wir werden eine Höhe hinzufügen. Fügen wir vielleicht diese Höhe in Zentimetern hinzu. Die Heimatwelt ist eine Art Heimatwelt. Wir wissen es noch nicht. Das wird also eine URL sein, das wird ein Link sein. Und dann p vielleicht lassen Sie uns nicht ein P machen, Lassen Sie uns UL tun, eine ungeordnete Liste mit einem LI. Nur als Beispiel filmt hier kein LU, sondern ein LI. Und das wird ziemlich schrecklich aussehen, aber das wird zumindest für uns funktionieren. Es steht also Name. Dies ist alles Text nach links ausrichten. Lass uns weitermachen und das ändern. Ich ändere i zum Anfang, Index Punkt CSS. Nein, es war in app.js S text-align. Lassen Sie uns das loswerden, weil es nichts tut, text-ausrichten zentriert. Sie können sehen, dass es unten in der Nähe neu kompiliert wurde. Da gehen wir. Es ist zentriert. O last but not least. Wir brauchen auch eine Art Knopf hier drin. Denn wie werden wir zufällig einen Charakter ohne Schaltfläche generieren? Also gehen wir weiter und fügen einen großen alten Knopf da drin. Also geben wir Taste, Schaltfläche und das ist nur HTML. Typ wird eine reguläre Schaltfläche sein. Klasse wird eine Art Klassennamen haben, den wir hinzufügen können. Ein Zusammenstoß heißt btn Button, schätze ich. Und das wird Randomize Charakter sagen. Ok, wir haben einen kleinen Knopf da drin. Lassen Sie uns voran und machen Sie diese Schaltfläche größer, indem Sie unsere App Dot CSS öffnen. Und ich werde nach unten scrollen und dot btn eingeben , weil das mit dem Klassennamen übereinstimmt. Dies ist nur CSS hier. Beachten Sie also diese Datei, aber den Klassennamen hier, also ist das reguläre CSS und ich habe tatsächlich einen Fehler gemacht. Es ist keine Klasse, es ist Klassenname gleich btn. Und wir haben hier eine Klasse namens btn. Lassen Sie uns die Hintergrundfarbe in Schwarz ändern. Bordüre. Ein Pixel, einfarbig schwarz. Nein, lass uns gelb machen. Textfarbe wird auch gelb sein. Polsterung wird überall 20 Pixel betragen und die Schriftgröße wird viel größer sein. Lassen Sie uns diese 25 Pixel machen und speichern, warten Sie, bis es randomisierte Zeichen kompilieren. Das ist also ein Knopf, der tatsächlich machbar ist. Wir haben einen Fehler in Ihrer Obwohl Klasse. Meinten Sie den Klassennamen? Gehen wir weiter und erfrischen wir uns. Und das war nur ein Fehler von Hill habe kompilieren. Also habe ich nur erfrischend und diesen Fehler loswerden. Also, jetzt müssen wir dieses Zeichen randomisieren, aber wir haben es ein wenig hier drin pseudocode. Und alles, was wir getan haben, war, dass wir gesagt haben, hey, es wird einen Namen geben und es wird um erhöhte Zentimeter gehen. Es wird zu Hause Welt sein ist URL. Es wird Filme hier drin geben. Also machen wir im Moment keine echte JavaScript-Codierung. Wir hacken das nur heraus, wo wir unseren Code ausrauben, damit wir wissen, womit wir arbeiten sollen. In der nächsten Lektion möchte ich, dass du mich spiegelst. Ich möchte, dass du ein paar Pseudo-Codierung machst. Wenn Sie also nicht die Swapping API verwenden möchten, diese hier, wenn Sie nicht wollen, dass Sie Star Wars, gibt es eine andere namens Pokemon API. Du musst es nur googeln. Es wird Ihnen im Grunde eine sehr ähnlich aussehende Seite mit sehr ähnlichen Datenstrukturen geben. Aber ich werde den Star Wars benutzen. Und ich wollte den Namen eines Charakters, die Höhe, die Heimatwelt und die Filme bekommen. Und das werden wir mit der nächsten Lektion beginnen. Also geh weiter, imitiere mich und wenn du bereit bist, lass uns zur nächsten Lektion gehen. 14. Ein anderes React.js: In Ordnung, wir müssen jetzt eine schnelle Funktion hinzufügen, also eine Onclick-Funktion. Also haben wir diese Star Wars-Komponente hier und es rendert HTML mit einer Reihe von H1, PP, UL, Verbündeten und einer Schaltfläche. Und jedes Mal, wenn Sie auf diese Schaltfläche klicken, muss es etwas tun. Also haben wir das einmal durchgemacht. Gehen wir weiter und gehen es noch einmal durch. Also werden wir sagen, onclick ist gleich. Und dann statt Ihrer regulären Zitate, wie wir es normalerweise in HTML oder XHTML tun. Und wir werden sagen, dass das JavaScript sein wird. Wir verwenden geschweifte Klammern. Dann können wir hier sagen, bekommen neuen Charakter wird eine Funktion sein, und das wird einfach einen neuen Charakter zu bekommen. Aber lassen Sie uns einfach sicherstellen, dass dies funktioniert, indem Sie etwas konsolenprotokollieren, neue Zeichen von einer Schaltfläche erhalten. Und wir haben es nicht auf Klick gefüllt. Also OnClick, das muss sein, dies wird eine Pfeilfunktion sein. Dieser Punkt erhält einen neuen Charakter. Dies ist eine Methode, daher verwenden wir Klammern. Und was wir hier tun können, und Sie werden das viel sehen, ist, dass wir das alles auch auf neue Zeilen setzen können, also ist es ein wenig lesbarer wie folgt. Und ja, du wirst das auch ein bisschen auf der Straße sehen , wenn du eine Menge Reaktion schreibst. Also haben wir hier eine onclick-Funktion. Lassen Sie uns fortfahren und speichern Sie diese und aktualisieren Sie unsere Seite. Es löscht nur die Konsole für mich unten aus. Und wenn ich darauf klicke, heißt es bekommen neuen Charakter von einer Schaltfläche. Es funktioniert also. Unser Klick-Event funktioniert tatsächlich. Das ist alles, was wir für diese spezielle Lektion tun werden. Und ich möchte, dass du dasselbe tust. Stellen Sie sicher, dass Sie ein onclick-Ereignis haben. Es muss tatsächlich etwas auslösen. Machen Sie sich noch keine Sorgen, um API-Anfragen zu stellen. Das kommen wir in nur ein bisschen. Aber stellen Sie sicher, dass Sie ein Click-Ereignis haben , das tatsächlich funktioniert, und ich schreibe nur Konsolenprotokoll als Test. Wir werden diesen Code ein wenig löschen. Aber es ist ein guter Test. Es sagt mir, dass es tatsächlich funktioniert. Also machen Sie das Setup und wenn Sie bereit sind, gehen wir über die nächste Lektion, wo wir anfangen, mit ein bisschen Staat zu arbeiten. 15. So speichere sie Daten mit React: In Ordnung, lassen Sie uns weitermachen und einen Zustand zu unserem Star Wars Zufallscharaktergenerator hinzufügen , indem wir eine API verwenden. Also zuerst müssen wir einen Konstruktor con, Lehrer hinzufügen. Wir können die Requisiten übergeben, wenn wir wollten, es gibt kein Problem. Also werden wir das einfach überspringen. Und wir werden sagen, dieser Punktzustand ist gleich. Und dann braucht es ein Objekt. Oder wenn Sie aus Python kommen, braucht es ein Wörterbuch. Und wir müssen speichern, was müssen wir speichern? Der Name, die Höhe, die Heimatwelt und die Filme, in denen sie sich befinden. Also lasst uns voran gehen und den Namen als null speichern. Wir wissen noch nicht, wie dieser Name sein wird. Die Höhe wird null sein. Wir wissen noch nicht, wie hoch diese Höhe sein wird. Diese Hausaufgaben werden auch null sein. Wir wissen noch nicht, was das sein wird. Und die Filme, das wird ein leeres Array sein. Und so, wie ich das habe, und wir kommen in nur einer Sekunde mit einem Super darauf zurück. Aber die Art, wie ich überall null bekam, ist, weil wir nicht wissen, wie der Name, Höhe oder die Heimatwelt ist. Aber Filme, wir wissen, dass das zumindest eine Liste oder ein Array sein wird. Und wenn wir hierher zurückgehen, sehen wir Filme. Sehen Sie hier, das ist ein Array. Und so wollen wir diese Daten so speichern, wie sie innerhalb unserer Anwendung sind. Jetzt gehen wir weiter und führen das aus. Und das sagt, dass Super vorher kommen muss. Also lasst uns super cool laufen. Das scheint zu funktionieren. Gut genug. Jetzt, jedes Mal, wenn wir auf bekommen neuen Charakter klicken, müssen wir diesen Zustand aktualisieren. Und das machen wir mit diesem Punkt-Set-Status. Und ich werde das buchstäblich kopieren und einfügen. Und wir werden einige von ihnen nur vorerst hart codieren. Also wird der Name Luke sein. Die Höhe wird ein 172 sein. Wenn ich mich erinnere. Ted, um mich bitte nicht zu urteilen, wenn ich das falsch geschrieben habe. Und ich werde die Filme als einen Gegenstand belassen und du bist nur Artikel eins. Eigentlich werde ich auch Artikel zwei hier reinbringen, nur damit wir sehen können, wie das aussieht. Also werden wir diese Werte nur hart codieren und dann können wir es hier ändern. Also können wir sagen, dieser Punktzustand, Punktname, Höhe in Zentimetern, ich denke, es ist in Zentimetern. Dieser Punktstatus, Punkthöhe. Die ganze Welt wird eine URL sein. Also dieser Punktzustand, Dot Heimatwelt. Und wieder stellen wir diesen Zustand fest. Wir haben ursprünglich diesen Zustand gesagt und wenn Sie klicken, werden wir diese S8 einstellen oder wir werden diesen Zustand aktualisieren. Und schließlich werden Filme hier reingehen. Das wird ein interessanter. Wir werden etwas später damit arbeiten. Aber wir könnten sagen, diese Punktzustands-Punktfilme. Und wir haben dies hart codiert, weil wir keine API-Anfragen verwenden , die Sie sehen können, dass es etwas hässlich aussieht, im Moment etwas kaputt. Wenn wir darauf klicken, füllt es diese Dinge automatisch für uns aus. Sieh dir das an. Das ist ziemlich nett. Gehen wir weiter und stellen sicher, dass das nicht auftaucht. machen wir in der nächsten Lektion. Jedes Mal, wenn Sie die Seite laden, gibt es nur einen Knopf. Und nichts von diesem Zeug wird angezeigt, bis auf diese Schaltfläche geklickt wird. Das machen wir in der nächsten Lektion. Aber vergewissern Sie sich vorerst, dass Sie diese hartcodiert haben. Sie sich keine Sorgen um die API-Anforderungen. Wir müssen nur sicherstellen, dass Sie ein Konstrukt haben oder sicherstellen, dass Sie zuerst super laufen. Babum, babum, this.tab Zustand, Sie werden die Höhe Heimwelt-Filme nennen wollen, oder andere Daten, die Sie aus Swaps verwenden möchten, von der sumpfigen API. Stellen Sie sicher, dass Sie, wenn Sie klicken , diesen Status festlegen. Sie möchten also den Namen, die Höhe, die ganze Welt, die Filme oder die Eigenschaften, die Sie in Ihrem Objekt und Ihrem Zustandsobjekt festlegen. Und dann drucken Sie das einfach auf die Seite in Ihrer Renderfunktion aus. Probieren Sie das aus, und wenn Sie bereit sind, gehen wir zur nächsten Lektion, wo wir all das Zeug verstecken bis es tatsächlich verfügbar ist. 16. Wenn Bedingungen in React: Werfen wir einen Blick darauf, dieses Zeug zu verstecken. Also, wenn wir hierher zurückgehen und unsere Seite aktualisieren, heißt es Zentimeter Heimatwelt und es gibt eine Liste und wir wollen einfach nicht, dass das auftaucht. Was wir brauchen, ist eine Art if-Anweisung innerhalb unserer Rendermethode. Also, was wir tun können, gibt es ein paar verschiedene Möglichkeiten, wie wir dies tun können, aber ich werde Ihnen das JS XY zeigen. Also können wir sagen, öffnen oder geschweifte Klammern. bedeutet nur, dass es hier eine JavaScript-Logik geben wird. Wir werden sagen, wenn etwas wahr ist, und dann können wir dem ein div geben. Also gehen wir zurück in js X, und lassen Sie uns all das Zeug hier rein, außer dem Knopf. Also oben, oben, in, in, in. Und etwas muss wahr sein. Also, was wir tun können, ist, dass wir mit dem Staat hier arbeiten können. So können wir standardmäßig sagen, dass etwas falsch ist. Wenn auf diese Schaltfläche geklickt wird, stimmt etwas. So können wir sagen, dass dieser Punkt Charakter hat oder sagen wir geladene Zeichen. Und das wird ein Zustand sein, also this.tab Zustand. Und das müssen wir hier in unserem Konstruktor einrichten. Also wollen wir sagen, geladene Zeichen, das wird standardmäßig falsch sein. Und wenn du einen neuen Charakter bekommst, werden wir das so aktualisieren, dass es wahr ist. Und was das tun wird, ist, dass es nichts zeigen wird, bis wir hier klicken. Was wirklich, wirklich schön ist, weil wir nicht wollen, dass CME oder die ganze Welt, oder einfach nur die kleine Kugel dort. Wir wollten nicht, dass irgendetwas auftaucht, bis es tatsächlich einige Daten gab. Um zusammenzufassen, was wir hier getan haben, war, dass wir unsere JavaScript-Syntax geöffnet haben. Also JavaScript innerhalb von js X, sagten wir, wenn der Zustand des geladenen Zeichens wahr ist und dies eine Verknüpfung von JavaScript ist. Dann sagen wir und enden. Wir setzen hier einen Text ein oder einige JS Acts. Das heißt dann, wenn dieser Charakter geladen wurde, haben wir all diesen anderen Zustand. Und im Grunde sagten wir standardmäßig Zeichen nicht geladen. Auf die Schaltfläche wurde noch nicht geklickt. Wenn die Schaltfläche geklickt wird, werden wir sagen, wie Zeichen geladen ist. Wenn dieser Charakter geladen ist, wird all das andere Zeug zur gleichen Zeit gesetzt werden, und wir können es hier zeigen. Schließlich haben wir unsere Syntax mit einer schließenden geschweiften Klammer geschlossen, und das sagt einfach, dass alles hier eine Form von JavaScript-Logik sein wird. Es ist nicht nur XHTML. Probieren Sie das aus. Stellen Sie sicher, dass es für Sie funktioniert. Wenn du bereit bist. Wir werden gemeinsam zur nächsten Lektion gehen. Ich seh dich da drüben. 17. Deine erste React-based: In Ordnung, lassen Sie uns weitermachen und unsere ersten API-Anfragen stellen. Was wir also tun müssen, ist in unserem neuen Charakter zu bekommen, nicht nur müssen wir den Zustand setzen, sondern wir müssen eine API-Anfrage machen, um zu tauschen, müssen Sie einige Informationen erhalten. Also lasst uns damit arbeiten. In einer sehr, sehr einfachen Angelegenheit zu beginnen. Lass uns rüber gehen, um e.gov zu tauschen. Und ich werde diesen API-Schrägstrich Leute bekommen, um eine URL zu schrägen. Und ich werde dies hier einfügen, da const URL nur dieser URL gleich ist, dann werden wir eine Abruf-API-Anfragen erstellen. Also werden wir sagen, holen Sie diese URL standardmäßig mit einer get-Anfrage. Dann werden wir diese Antwort nehmen und wir gehen zu JSON, trotzen es oder entschlüsselt von JSON weil wir wissen, dass die Antwort von JSON kommen wird. Dies ist das JSON-Format hier. Wir wollen also sicherstellen, dass diese Antwort, was auch immer es ist, JSON sein wird. Dann, wenn das fertig ist, nehmen wir die Daten, all das JSON, und wir werden damit arbeiten und wir sagen console.log Daten. Und lasst uns unsere erste console.log loswerden, damit wir unsere Konsole nicht überladen. Alles sieht so aus, als wäre es ein Befehl. Es kompiliert perfekt. Gehen wir zurück zu unserer React-App und aktualisieren. Und Sie können sehen, dass unser Zeug zuerst geladen wurde, nur weil es hart codiert ist. - Das ist in Ordnung. wir uns vorerst keine Sorgen machen. Wir werden das in nur einer Sekunde ersetzen. Was wir sicherstellen wollten, dass funktioniert, war das. In unserer Konsole. Es hat alle Informationen bekommen. Wurde zum Geburtsjahr, wer ist das? Das ist Luke Skywalker hat seinen Namen, seine Größe, seine Masse ist Haarfarbe, Hautfarbe, Filme, Geschlecht, Größe, Heimatwelt, Masse, Yada, Yada, Yada, Yada, alle möglichen Sachen da drin. Also haben wir jetzt diese Daten, mit denen wir in einem Objekt oder in einem Objekt arbeiten können. In JavaScript habe ich es fast ein Wörterbuch genannt, weil ich viel Python schreibe, im Grunde dasselbe. Also, was wir jetzt tun wollen, ist, dass wir diesen Code nehmen wollen, den festgelegten Zustand. Und wir wollen es in die Daten hier verschieben. Und wir wollen diese Daten so einstellen, dass sie relevant sind. Der Datenname wird also Luke Skywalker sein. Wir bekommen Daten von hier. Also wird dieses ganze Objekt hier Daten genannt werden. Das ist es, was wir hier zugewiesen haben. Und dann sagten wir, der Name wird genau dort sein. Wir haben den Namen. Also data.frame-Höhe wird Höhe 172 sein, denke ich, richtig? Nun lasst uns Datenpunkthöhe machen. Heimat Welt. Dies wird eine URL sein. Es wird also eine Heimatwelt sein. Und Sie können damit ein wenig später arbeiten. Sobald Sie dieses Projekt gestartet haben, können Sie sagen, oh, es gibt eine Heimatwelt-URL. Lassen Sie uns voran und holen Sie auch diese Daten. Aber für jetzt werden wir es einfach halten und sagen data.dat Heimwelt, und es wird nur eine URL sein und das ist in Ordnung. Und die Filme heißt es Filme in Ihrem Yep. Filme. Es gibt vier von ihnen. Lucas und Film 1236. Das sind die Ideen, nicht die Filmreihenfolge übrigens. Also machen wir Datenpunktfilme. Und lasst uns das testen. Also, was das jetzt tun wird, ist, wenn ich aktualisiere oder du musst nicht aktualisieren. Ich mag es, nur als Gewohnheit zu aktualisieren, irgendwie sauber aus meiner Konsole schnell. Was das tun wird, ist, dass ich auf diese Schaltfläche klicke und es wird dann eine Anfrage stellen, e dot dev zu tauschen. Und ich zeige Ihnen, dass es hier in unserer Konsole auftauchen wird. Und sobald diese Anfrage erledigt ist, vorausgesetzt, ich habe keine Tippfehler, wird es die Daten hier oben laden und es wird immer Luke Skywalker zeigen. Da gehen wir hin. Luke Skywalker, eine 172 Zentimeter Heimatwelt ist Planeten Schrägstrich man anys in Filmen, eins, ID von zwei, Film ID von drei Film-Idee für diese sind nicht die Episoden übrigens, ist nur eine andere Art, Daten zu bestellen. Also haben wir das jetzt funktioniert. Ich möchte, dass du sicherstellst, dass das funktioniert, genauso wie ich es habe. Und in der nächsten Lektion werden wir das tatsächlich randomisieren, weil gerade jetzt jedes Mal, wenn ich darauf klicke, es lädt nur Luke. Und weißt du, so großartig wie Luke ist. Vielleicht möchten wir, dass es jemand anderem ausgesetzt wird, einige andere Charaktere da draußen, die vom Austausch von Dot Dev kommen. 18. Randomisieren: In Ordnung, lassen Sie uns einen zufälligen Star Wars-Charakter generieren. So können Sie hier sehen, dass wir Tausch Punkt Dev-Schrägstrich, api Schrägstrich Menschen Schrägstrich eins haben. Und das wird nur das erste Zeichen in ihrer Datenbank bekommen. ID Nummer eins ist das erste Zeichen in der Vertauschung der Dot Devs Datenbank. Was, wenn wir auf ihre Website gehen und uns die Leute ansehen, die Nummer vier war? Darth Vader, nett, Ein weiterer gemeinsamer Charakter. Also, das ist ein guter zu benutzen. Was, wenn wir wessen Nummer bekommen wollten? Ich weiß es nicht. Ich werde Nummer 11 erraten. Oder du musst mich verarschen. Ich werde zu Unrecht hier und es kann Skywalker nett sein. Also, du weißt schon, es in der Familie zu behalten. Okay, also lasst uns zufällig ish. Mal sehen, was passiert, wenn wir zur Nummer 100 gehen. Es gibt keine 100. Und so mit vielen APIs, und was wir tun können, ist, weil dies eine Detail-URL ist, können wir einfach gehen, um Leute zu schrägen und dies wird uns alle Menschen zeigen. Da steht, es gibt eine Zählung von 82. Wir wissen also, dass es mindestens 82 Zeichen mit einer ID gibt. Jetzt brauchen wir eine Zufallszahl zwischen 0 oder nicht 0, aber eine Zufallszahl zwischen 182. Also werden wir eine Zufallszahl erstellen. Zufallszahl ist gleich, und das ist einfach JavaScript hier. Also werden wir umrunden, was auch immer diese Zahl ist, mathematische Punkte zufällig. Und das wird uns eine Zahl zwischen 01 geben. Und dann multiplizieren wir das mit 82 und sorgen dafür, dass das abgerundet ist. Also, wenn es 0,4 ist. 1.5.2 drei, wird es das mit AD2 multiplizieren und dann auf eine ganze Zahl runden. Dann können wir diese Nummer nehmen und wir können dies in ein Template-Literal anstelle einer regulären Zeichenfolge verwandeln . Und wir können diese Variable hier wieder hineinwerfen, das ist nur normales JavaScript an dieser Stelle. Und was das tun wird, ist eine Zufallszahl zwischen 182 zu bekommen. Und so jedes Mal, wenn wir darauf klicken, jedes Mal, wenn wir auf diese Funktion klicken, wird dieses Click-Ereignis eine neue Zufallszahl erstellen, eine neue zufällige URL erstellen. Und es wird sich auf diese URL auswirken und dann diese Daten für uns festlegen. Und jedes Mal, wenn diese Daten gesetzt werden, wird unsere Seite automatisch aktualisiert. Also lasst uns voran gehen und werfen einen Blick auf diese Auffrischung zufälligen Charakter. Einer ist Ben. Und jedes Mal, wenn ich darauf klicke, bekommt es einen neuen Charakter. Also, jetzt haben wir das wirklich am Laufen. Jetzt haben wir noch ein paar Dinge zu arbeiten, wie zum Beispiel der Film, okay. Wenn es mehrere Filme gibt, suchen wir einen, der mehrere Filme hat. Hier ist ein guter. C3po ist in jedem Film, den sie in ihrer Datenbank haben. Dies ist eine lange Saite. Was wir tun wollen, ist, dies als vielleicht einen Link zu zeigen und dies auch in einen Link zu verwandeln. Gehen wir also voran und erstellen wir zunächst in der nächsten Lektion den Link hier. Ich zeige dir, wie man das macht. Und dann in der Lektion danach, lassen Sie uns das in mehrere Aufzählungspunkte verwandeln. 19. Links aus Text erstellen: Okay, lassen Sie uns voran gehen und Link von Phi sind Heimwelten oder Heimwelt ist Datenpunkt Heimwelt und das ist eine URL. Und wenn es hier auftaucht, heißt es Heimwelt und dann nur eine URL hier drin. Also lasst uns, gehen wir voran und schneiden das tatsächlich. Und was wir tun werden, ist, dass wir eine Verbindung schaffen. Das wird ein wirklich, wirklich kurzes Video. Also habe ich das einfach da reingeklebt. Dies ist ein regelmäßiger Link. Und würdest du dir das gut kompiliert ansehen. Die einzige seltsame Sache hier ist, dass HREF keine Apostrophe hat. Wir verwenden JavaScript darin. Also sagen wir, hey, reagieren Sie, wenn Sie diese geschweifte Klammer kompilieren, das wird hier JavaScript sein, also stellen Sie sicher, dass Sie wissen, was zu tun ist. Oh, übrigens, wir schließen dieses JavaScript, der Rest wird HTML sein. Und hinter den Kulissen, das funktioniert viel Logik und verstehen, was es tun muss. Also, wenn ich hier aktualisiere, werden wir sehen, dass dies ein jetzt ist es schwer zu lesen Link, aber es ist tatsächlich ein Link. Und wenn ich darauf klicke, bringt mich das zu Planet 42. Haroun Cal, schätze ich. Oh, es tut mir leid. Wenn du ein großer Star Wars-Fan bist, bin ich ein ziemlich großer Star war in Ordnung, aber ich weiß nicht, wie man die Namen segelt. Es tut mir leid, wenn ich das abgeschlachtet habe. Aber es brachte mich zu Keule Windows-Heimwelt. Und wieder, alles, was wir dort getan haben, war, dass HREF gleich ist , diese geschweiften Klammern zu öffnen und zu schließen, dann setzen Sie Ihr JavaScript hinein. Das war alles, was wir in der nächsten Lektion tun mussten. Lasst uns weitermachen und an einer Art Link arbeiten, der diesen Filmen trotzt. Aber wir müssen lernen, wie man zuerst einige davon durchläuft, und das wird eine größere Lektionen sein. Stellen Sie also sicher, dass Sie das haben und arbeiten und wenn Sie bereit sind, gehen wir zur nächsten Lektion, in der wir gelernt haben, wie man Dinge in unserem inneren HTML oder js X durchläuft . 20. So schleifen dich durch Arrays in React: Okay, lasst uns alle Filme durchlaufen. Wir wissen, dass die Filme ein Array sein werden, also können wir diese durchlaufen. Und wie durchlaufen wir diese? In Reaktion? Nun, reagiert verwendet eine andere Art der Schleife. So sind Sie wahrscheinlich mit einer for-Schleife oder einer für jede Schleife an dieser Stelle vertraut. Und das möchte ich auch loswerden, denn wir wollen, dass jedes LI in jedem Film ist. Aber wir werden einen neuen Weg benutzen. Anstatt eine for-Schleife oder eine für jede Schleife zu verwenden, werden wir map verwenden. Also öffnen wir unsere Logik hier und wir sagen diesen Punktzustand, Punktfilme Punktkarte. Und das ist eine Funktion. Und das wird einen Film machen, also wird es jeden Gegenstand durchlaufen. Wir werden es Film nennen. Und wir könnten zurückkehren, mit dem Film da drin liegen. Lass uns voran gehen und sehen, was das tut. Lassen Sie uns hier ein neues erstellen und sehen Sie sich das an. Das funktioniert für uns. Nun, das ist wirklich, wirklich cool. Aber was, wenn wir das in eine neue Komponente werfen wollten? Wir könnten das sehr, sehr leicht machen. Und was ich hier tun werde, ist, weil es eine Menge Code gibt. Ich werde das hier etwas kleiner machen. Und wir werden das loswerden. Und wir werden diese Filme einfach nennen. Und hier oben in unserer Renderfunktion über unserer return-Anweisung, weil nichts unterhalb einer return-Anweisung jemals ausgeführt wird, muss über unserer Rückkehr liegen. Speichern Sie es. Und wir können sagen, const Filme ist gleich diesem Punktzustand, Punktfilme Punktkarte. Und was können wir hier einordnen? Zunächst können wir den Filmnamen selbst oder die Film-URL abbilden. Also lassen Sie uns diese URL nennen. Und wir können ihm auch einen Index geben. Wir werden das in einer Sekunde brauchen und ich zeige Ihnen, warum. Und dann statt wie LI etwas zu sagen, was das nicht tat, was ich wollte. Anstatt etwas Ähnliches zu sagen und js X hier oder HTML eher zu schreiben, können wir zwei js X schreiben. So könnten wir den Film Item Row zurückgeben , der noch nicht existiert, aber wir könnten es existieren lassen. Und das gibt mir lustige Syntaxhervorhebung und weil ich diesen Pfeil da drin vermisste. Also jetzt haben wir diese neue Komponente. Wir haben diese Komponente noch nicht erstellt. Wir müssen gehen und diese Komponente erstellen. Jetzt wird dies eine ziemlich einfache Komponente sein. Also lassen Sie uns voran und sagen Klasse Film, Item, Reihe erweitert react.com, rendern. Und wir kehren zurück, lassen Sie uns mehrere Zeilen zurückgeben. Also verwenden wir Öffnen, Schließen, Klammer. Wir werden jedes Mal ein LI zurückgeben. Es wird eine Verbindung geben, die irgendwo hingeht. Wir wissen noch nicht, was das ist. Und es wird einen Text geben. Und in nur einer Sekunde werden wir einige Eigenschaften übergeben, die wir dynamisch einige Daten in unsere Film-Item-Reihe einfügen können . Also gehen wir nach unten und finden Sie Ihren Film Item Row, Film Item Row. Und all dies wird tun, ist, jeden Film in ein Konzept zu werfen, das Filme genannt wird, das wir dann in hier stecken können. Lass uns das ausprobieren und haben wir einen Fehler bekommen? Das href -Attribut erfordert einen gültigen Wert. Ok? Das war mein Fehler. Gültiger Wert. Sagen wir einfach, nirgendwo zu gehen. Punkt-HTML. Da gehen wir. Keine Beschwerden mehr. K, lassen Sie uns auffrischen. Und Sie können hier sehen, es steht ein Text, ein Text und diese URL, wenn Sie unten links schauen würden, sagt nirgendwo gehen. Nun, was daran interessant ist, ist, wenn ich diese Konsole hier etwas kleiner mache , können wir diesen Fehler lesen. Es sagt, dass jedes Kind in einer Liste eine eindeutige Schlüsselstütze haben sollte. Wenn Sie das jemals sehen, was Sie tun müssen, ist eine Requisite zu übergeben. Und was wir hier tun, denn jede Komponente in React muss für mehr oder weniger einzigartig sein. Und so geben wir einen Schlüssel ein, um ihn einzigartig zu machen. Und das werden wir hineingehen. Ich, lasst uns das retten. Aktualisieren. Wir bekommen diesen Fehler nicht mehr. Und lassen Sie uns voran gehen und ersetzen Sie diesen Text durch die URL und diese URL durch die URL. Also werden wir es eine andere Eigenschaft hier namens URL übergeben, ist gleich URL und das kommt nur von hier. Was das also im Wesentlichen tut, ist, sich durch alle unsere Filme zu schleifen. Für jeden Film wird es diese URL und dann den Index in diesem grundsätzlich eine for-Schleife abbilden . Für jeden Film Es wird dann eine neue Komponente zurückgeben, die einen eindeutigen Schlüssel enthält. Es wird also 0123, et cetera, et cetera, mit einer URL-Requisite sein. Nun, was daran schön ist, dass wir nicht mehrere Komponenten schreiben müssen. Wir können einfach die Requisite hier reinlegen. Wir können sagen, dass dieser Punkt Requisiten Punkt URL. Und das bekomme ich vom Punkt-Punkt-Punkt. Ich bekomme das, von wo bin ich? Lass uns etwas davon schließen. Ich bekomme die URL von hier. Das ist also eine Requisite. Also dieser Punkt Requisiten Punkt URL gehört nicht in Klammern, weil das eine Zeichenfolge ist. Wir wollen, dass dies eine tatsächliche Logik hinter den Kulissen ausführt. Und lasst uns dasselbe hier reinlegen. Diese Punkt-Requisiten, Punkt-URL, Speichern Sie unsere Compiler, dass es keine Probleme gab. Wir werden unsere Seite aktualisieren. Ich mag es, mich zu erfrischen. Normalerweise müssen Sie nicht aktualisieren, es sei denn, Sie sehen einen Fehler und werden nicht automatisch für Sie aktualisiert. Ich mag es, dies als eine alte Gewohnheit zu aktualisieren und dies zu überprüfen. Es sagt, Dot Dev-API-Filme für API-Filme fünf, API-Filme sechs zu tauschen. Gehen wir weiter und klicken Sie auf diesen Link. Api, Filme sechs, das passt hier oben. Das ist also ein richtig aussehendes Glied. Es ist Rache der CIF Episode ID ist drei, und es hat all diese Charaktere in Ihrem, all diese Planeten, all diese Raumschiffe, all diese Fahrzeuge, all diese Spezies hat alle möglichen Sachen da drin. Das funktioniert also für uns. Im Wesentlichen haben wir uns einen längeren Weg genommen, dies zu tun. Dies ist eine sehr, sehr einfache Komponenten. Und so mussten wir das wahrscheinlich nicht in eine Komponente einfügen, aber wir haben es getan. Wir setzen es in eine neue Komponente, die einen Verbündeten für jeden einzelnen Film, in dem sich eine Figur befindet, rendert . Dann sagten wir, übergeben Sie diese URL als Requisite. Und wie eine Requisite so aussieht. Wir haben diese URL übergeben. Also für jeden Film, den wir URL nannten, könnten wir diesen Film genauso einfach nennen. Und das wird genauso funktionieren. Dies wird uns keine Fehler geben. Wenn es vier Filme gibt, gibt es vier Filme, die es in einer Konstante speichern, eine konstante Variable namens Filme. Und dann greifen wir hier unten auf Filme zu. Jetzt möchte ich, dass du das hier ansiehst. Gehen Sie auf den harten Weg. Sie nicht den einfachen Weg, den ich Ihnen in der ersten Minute, 90 Sekunden oder so gezeigt habe. Probieren Sie das auf die harte Art aus, denn so ist React in der Produktion. Als professioneller Entwickler werden Sie sehen, dass Komponenten in winzige, winzige Komponenten wie diese oder größere Komponenten aufgeteilt werden, die viele andere Komponenten verwenden. Sie müssen also wirklich mit der Verwendung einer Komponente vertraut sein. Last but not least, jedes Element in einer Liste. Jedes Element in einer Liste, wo Sie einen Schlüssel und diesen Schlüssel benötigen. Ich habe gerade gesagt, dieser Schlüssel wird i sein. Also, wenn dies die erste Iteration ist, werde ich 0 sein, zweite Iteration, 1, dritte Iteration, Es wird die Nummer zwei sein. Und das wird nur sagen, dass jeder von ihnen einen anderen Schlüsselwert haben wird . Und das macht es einfach einzigartig, so dass reagieren so schön und glücklich damit und so dass es weiß, wie man mit dieser Komponente auf der Straße umgehen. Anstatt zu sagen, dass jede Komponente genau gleich ist, gehen Sie voran und probieren Sie das aus. Wenn Sie stecken bleiben, lassen Sie Ihre Frage unten oder zögern Sie nicht, Ihre Frage zu stellen. In der Facebook-Gruppe lernen, zu programmieren. Wenn du das fertig bist, gehst du zur nächsten Lektion. Und ich werde Ihnen ein Projekt geben. 21. DEIN PROJEKT: In Ordnung, willkommen zu Ihrem endgültigen Projekt. Ich möchte, dass du etwas anderes machst. Also habe ich diese URL hier, und ich bin zur falschen gegangen. Whoops. GitHub.com Schrägstrich, AKA bab Schrägstrich Star Wars Strich-API. Und hier, wenn Sie in die API gehen, kann in Id gehen. Und wenn du in die ID Nummer eins gehst, heißt es ist Luke Skywalker. Genau wie das Tauschen von Dot Dev. Der Unterschied ist, dass es ein Bild gibt, und Sie können dieses Bild in Ihre Anwendung laden. Wenn Sie also zufällig einen Charakter bekommen, anstatt nur Sand Hill zu sagen, zeigen Sie ein Bild von San Hill, oder zeigen Sie ein Bild von jedem anderen, der hier auftaucht. Jetzt müssen Sie die URL ändern. Sie können also keine Tauschpunkte, Punkt, Punkt, Punkt verwenden , weil es keine Bilder unterstützt. Aber wenn Sie diese URL direkt hier verwenden, wenn Sie einfach auf wie ID, einen Punkt JSON klicken , wird es Ihnen dieses bestimmte Zeichen geben. Oder wenn Ihre Zufallszahl war. Und es gibt 88 Zeichen. Mal sehen, wer Nummer 88 im Plasma aufbewahrt wird. Wenn Sie Zahl sich als Zufallszahl erwiesen hat, 88, sollte es nach dieser URL suchen. Sie werden also sicherstellen wollen, dass acht eine dynamische Zahl ist, es ist eine Zufallszahl. Rufen Sie diese URL ab, rufen Sie den Namen ab. Und vielleicht die ganze Moral, Gefällt mir das? Das ist eigentlich keine URL, das ist ein Name, den ich mag, das ist ein bisschen besser. Holen Sie sich das Bild. Und vielleicht, vielleicht bekommen Sie ihre Spezies oder Zugehörigkeiten oder so und legen Sie das in Ihre App als auch. Also im Grunde möchte ich, dass Sie neu erstellen, was wir in diesem Kurs oder in diesem Modul erstellt haben. Und ich möchte, dass du hier oben ein Bild machst. Sie müssen State ein wenig benutzen. Möglicherweise möchten Sie Eingabeaufforderungen verwenden. Sie werden Ihre API-URL ändern wollen und Sie werden die Zufallszahl ändern wollen , die wir generieren, weil wir nur bis zu 8082 generieren, glaube ich, das war es. Dies unterstützt bis zur Nummer 88. Vergiss nicht, wenn du jemals stecken bleibst. Sie können Fragen stellen und das Lernen, Facebook-Gruppe zu programmieren, kommen Sie zu uns. Es ist eine völlig freie Gruppe. Sie können jede Frage über alles, was Web-Entwicklung betrifft, stellen. Sie können sehen, dass hier bereits über 65 Tausend Mitglieder sind. Fühlen Sie sich frei, mitzumachen, Fragen zu stellen, Feedback zu erhalten und anderen Menschen zu helfen, wenn Sie möchten. Sie können in der Regel innerhalb von wenigen Minuten nach der Genehmigung Ihres Beitrags eine Antwort erhalten, was wirklich, wirklich nett ist. Es ist sehr, sehr schnell. Es gibt eine Menge hilfreicher Leute hier drin. Zu guter Letzt, mein Name ist Caleb Italian. Ich war dein Lehrer, Kehle reagieren eins zu eins. Ich hoffe, Sie haben diesen Kurs genossen. Ich hoffe, das hat Spaß gemacht und eine lustige Einführung in React JS. Wenn ihr Mir folgen wollt, könnt ihr mir immer an allen möglichen Orten folgen, aber Twitter ist ein guter. Sie können mir immer auf Instagram folgen, oder wenn Sie wollen, können Sie Codierungs-Tipps und Tricks bekommen, indem Sie auf Instagram.com Slash Codierung für alle gehen. Und du bekommst nette kleine Tipps und Tricks wie die Arbeit mit Django, wie man mit Python Dekoratoren arbeitet, wie man mit React, et cetera, et cetera, et cetera. Vielen Dank, dass Sie an diesem Kurs teilgenommen haben. Ich schätze Ihre Zeit sehr und ich hoffe, Sie in einem anderen meiner Kurse zu sehen. Oder wenn Sie in einem meiner größeren Kurse sind, hoffe ich, Sie im nächsten Modul zu sehen. Nochmals vielen Dank, und ich sehe dich herum. Tschüss.