React-Grundlagen für absolute Anfänger | Erste Portfolio-Website erstellen

1. Einführung in den Kurs: Hallo, da. Willkommen zu diesem Kurs über die Grundlagen von React Ich bin Fazal, ein Unternehmer und ein Technologie-Enthusiast, der Ihnen mit Leidenschaft dabei hilft, moderne Technologien zu beherrschen , die Ihnen und anderen das Leben erleichtern können Ihnen und anderen das Leben In diesem speziellen Kurs werden wir uns nun mit den Grundlagen von React befassen, und es gibt eine breite Palette von Themen , auf die ich in diesem speziellen Kurs eingehen werde Also fangen wir an. Also ich habe diesen Lehrplan hier drüben Zuallererst habe ich die Vorteile des Kurses verstanden, warum Sie diesen Kurs belegen sollten Zunächst beginnen wir mit einem Überblick über React, was React ist und So erhalten wir einen vollständigen Überblick darüber, wie die Dinge funktionieren, wenn Sie mit React arbeiten. Würde ein Projekt einrichten, oder? Und für das Projekt-Setup werden wir VS-Code und Wheat verwenden . Beide sind wie Tools für den Produktionshandel, die bei der Webentwicklung verwendet werden. Also werden wir etwas über sie lernen. Wir werden GSX aufdecken. Nun, was ist GSX und all das, falls Sie noch nie von diesen Begriffen gehört haben, sich keine Sorgen, ich habe Sie im Kurs behandelt Dies ist nur ein Überblick , den ich Ihnen mit den Themen gebe , die Sie im Grunde wissen müssen Okay. Dann werden wir über die Komponenten, Requisiten und Rückrufe sprechen die Komponenten, Requisiten und Rückrufe Also all diese Konzepte werde ich ansprechen. Dann die Syntax destrukturieren und verbreiten. also sagen, wie Sie die Destrukturierungs- und Spread-Syntax nutzen können , die ein JavaScript-Konzept Ich sollte also sagen, wie Sie die Destrukturierungs- und Spread-Syntax nutzen können, die ein JavaScript-Konzept für React- oder React-Webanwendungen ist Und dann werden wir ein praktisches Projekt haben , bei dem wir all unsere Erkenntnisse nutzen und es umsetzen werden , um eine Portfolio-Website zu erstellen Diese Portfolio-Website bietet Ihnen eine vollständige Praxis dessen, was Sie im gesamten Kurs gelernt haben, und gibt Ihnen genügend Selbstvertrauen, damit Sie mit React Dinge erstellen können Nun, da Sie aus diesem Kurs lernen, bietet er eine Reihe von Vorteilen. Nummer eins, praktischer Vortrag. Ich verstehe also, dass Studenten praktische Vorlesungen bevorzugen, wenn es darum geht , Technologie oder Entwicklung zu erlernen , Technologie oder Entwicklung zu erlernen und möglichst wenig Folien zu verwenden. Deshalb verwende ich kaum Folien. Ich sorge für alles, vom Film über React, über die Webentwicklung bis hin zum Aufbau der Portfolio-Website Alles ist mit einem Hands-On-Hands-On-Ansatz abgedeckt. Wenn ich nun über Ovie of React spreche und darüber, warum React eigentlich erfunden wurde und warum es überhaupt existiert, gebe ich Ihnen Beispiele im Browser, wie die Dinge oder welche Probleme es gab, bevor React gekauft wurde, und als React eingeführt wurde, wie es diese Probleme gelöst hat Also das alles mit Live-Beispielen. Deshalb habe ich gesagt, dass die Vorträge praxisnah sind. Wir verbringen die meiste Zeit im Browser und in der IDE. Und dann haben wir mit Hilfe des Projekts einen Abschluss. Das ist also einer der wichtigen Vorteile bei denen Sie am Ende auch etwas erstellen können, nämlich eine Portfolio-Website. Das ist also der Überblick über den Kurs, und am Ende dieses Kurses kann ich garantieren, dass Sie ein solides kann ich garantieren, dass Sie Fundament mit React haben werden, das Ihnen genug Selbstvertrauen gibt, um viel fortgeschrittenere Konzepte in Bezug auf Webentwicklung zu erlernen viel fortgeschrittenere Konzepte . Außerdem beinhaltet dieser spezielle Kurs ein Projekt, das Sie sich im Projektbereich ansehen können. Und am Ende, wenn du mit dem Kurs fertig bist, kannst du das Projekt machen, es einreichen und mit der gesamten Klasse teilen. Worauf warten Sie also noch? Wir sehen uns in der Klasse. 2. Einführung in React: Hallo, da. Willkommen und lassen Sie uns anfangen, über React zu sprechen. Also werden wir darüber sprechen, was React ist, warum es so etwas gibt. Okay? Also hier, ich bin bei Google und gebe einfach React ein. Sobald Sie also React eingeben, wird Ihnen diese offizielle Website von React angezeigt , nämlich React-Punkt F. Lassen Sie mich nun, bevor Sie die Website besuchen, ein wenig darüber sprechen, was React ist. React ist eine Bibliothek, wie Sie hier in der Beschreibung sehen können, und es ist eine JavaScript-Bibliothek. Wenn Sie ein bisschen mit Webentwicklung vertraut sind oder Computeringenieur sind, wissen Sie, dass das Web im Wesentlichen aus SGML besteht, dann haben wir CSS und wir haben sogar JavaScript. Was ist nun HTML HTML ist nichts anderes als der Baustein des Webs. Wenn Sie also hier mit der rechten Maustaste auf etwas klicken, wie ein beliebiges Element, sind das alles Elemente, oder? Also, wenn Sie mit der rechten Maustaste auf eines der Elemente klicken, wenn Sie inspizieren sagen. Ich bin auf Chrome und habe diese Option, inspizieren. Und lass mich das runternehmen. Sie werden den ganzen Code hier sehen. Sie können alle HTML-Elemente hier sehen. Wenn Sie sich bei einem der Elemente befinden, werden Sie sehen, dass das entsprechende HTML-Element hervorgehoben wird. Das ist ein DIF. HTML besteht im Wesentlichen aus Tags, Sie können hier sehen, DIF-Tag Dann haben wir zwei H-Tags. Dies sind alles eingebaute HTML-Tags , die Browser verstehen. Dies sind moderne Browser , die diese Dinge verstehen. Okay? Also das ist HTML. Wofür wird HTML verwendet? Es wird verwendet, um die Elemente zu definieren. Was jetzt passiert, ist, dass es nicht ausreicht, die Elemente zu definieren. Okay? Du musst sie verschönern Hier siehst du zum Beispiel, dass diese Reaktion fett hervorgehoben ist, oder? Warum ist sie fett hervorgehoben? Weil ich nach React gesucht habe. Okay? Dafür gibt es ein bestimmtes Styling, oder? Sie können sehen, dass dies hellgrau hervorgehoben ist, was sich ein bisschen von diesem Ding hier unterscheidet . Das ist ein Link, oder? Das wird also anders hervorgehoben. Also, wenn ich mit der rechten Maustaste hier drüben klicke und nachschaue , werden Sie sehen, dass es sich um H-Drei und A-Tag handelt. Hier können Sie das A-Tag sehen. In HTML erstellen Sie also Links mit dem A-Tag. Wenn Sie nun ein wenig expandieren, werden Sie hier das gesamte CSS sehen. Du kannst sehen. Also A-Tag, das ist das A-Tag, und hier können Sie das CSS sehen, die Farbe ist als Blau definiert. Wenn ich die Farbe ändere , sagen wir in Rosa, Rot, werden Sie sehen, dass die Farbe im Browser geändert wird. Sie können sehen, dass das komplett in Echtzeit ist. Wenn ich das ändern möchte, sagen wir mal gelb, welche Farbe möchtest du? Okay. Also kannst du die Farbe ändern. Auf diese Weise werden Webseiten verschönert. Okay. Sie können also sehen, Verschönerung durch CSS gesteuert wird Was dieser Code ist, können Sie hier sehen, dieser Code ist CSS Du meinst also für ein Tag. Was ist nun ein Tag? Ein Tag befindet sich hier. Wenn ich den Mauszeiger über ein Tag bewege, wird das entsprechende Tag hervorgehoben oder das entsprechende Element wird auf der linken Seite hervorgehoben, wenn Sie mit der Maus auf das Es ist also der React, dieser React-Text. Das ist was es ist. Hier hast du CSS für dasselbe. Ein Tag, da steht das ganze Etag. ich mit der Maus auf Etag fahre, siehst du, dass alle E-Tags auf der linken Seite hervorgehoben sind, oder? Dort werden also alle Tags verwendet, was bedeutet, dass dort alle Links gerendert werden, weil das alles Links sind, oder? Ich möchte also, dass alle E-Tags diese Farbe haben. Ich möchte keine Art von Textdekoration. Das definierst du hier drüben. Okay? Der Cursor wird in einen Zeiger geändert. Wenn ich also mit der Maus darüber fahre, können Sie sehen, dass der Cursor geändert wird, oder? Es wird in einen Zeiger umgewandelt. Das kann ich deaktivieren. Okay. Okay, es erlaubt mir nicht, das zu überschreiben, aber das ist in Ordnung. Es geht darum zu verstehen, was CSS ist? Das kannst du hier live sehen, oder? Also werde ich versuchen, es auf die Standardfarbe zu bringen . Es war so etwas. Okay. Gelb und Grün sehen nicht so natürlich aus. Aber du verstehst, das ist CSS, oder? Dann hast du etwas, das als JavaScript bezeichnet wird. Was ist jetzt JavaScript? JavaScript erweckt die Webseiten zum Leben. Also jede Art von Validierung Sie auf den Webseiten durchführen möchten, jede Art von Pop-up, das Sie anzeigen möchten , Sie können all das tun. Okay. Wenn Sie also JavaScript in Aktion sehen möchten, können wir hier oben zum Tab Konsole gehen. Okay. Und das ist die Browser-Konsole. Also hier kann ich Alarm sagen, und ich kann hier einfach Hallo sagen, so etwas in der Art. Du kannst ihn sehen. Das ist die Warnung. Sie können also jede Art von Validierungen, Popups oder jede Art von dynamischen Dingen, die Sie tun möchten, Ja Script verwenden Okay? Ja Script verleiht Ihren Webseiten also Leben. Okay? Nun, was React React ist, ist eine JavaScript-Bibliothek. Okay? Gehen wir zur Website von React und lassen Sie uns verstehen, warum dieses Ding existiert. 3. Wie funktionierte das Web vor React?: Lassen Sie uns nun verstehen, wie das Internet vor React funktionierte. Okay? Also, was früher passiert ist, das ist eine Webseite und du hast hier verschiedene interaktive Elemente. Ich kann auf die NAF-Leiste klicken und zu einer anderen Seite gehen. Wenn Sie jetzt eine Webseite laden, wird HTML geladen, CSS wird geladen, Ja-Skript wird geladen Wenn Sie jetzt hier zu einem anderen Tab wechseln, wird das Ganze erneut geladen HTML wird neu geladen. CSS wird neu geladen und Jascript wird neu geladen. Wenn ich nochmal hierher gehe, wird alles neu geladen. Klicken Sie erneut auf Community, alles wird neu geladen. Das ist also nicht effizient. Weißt du, jedes Mal, obwohl CSS und JavaScript sich nicht ändern und es überall konstant ist, laden wir es neu Okay? Und das ist nicht gut, oder? Das ist nicht der effiziente Weg, und wir Menschen lieben es, effizient zu sein, oder? Und deshalb gibt es React. Also werde ich dir sagen, wie sich React unterscheidet. React wird also verwendet, um einseitige Webanwendungen zu erstellen. Was bedeutet das? Was passiert, ist, dass Sie diese Webanwendung haben, das ist eine Webanwendung. Ist eine Webseite. Es ist eine Webanwendung. Es wird draußen einen Rahmen haben. Dies ist ein Rahmen und innen wird er zum Beispiel Komponenten enthalten. Zum Beispiel ist die Suche eine Komponente. Diese Registerkarten sind eine Komponente der Navigationsleiste. Sie können eine Navigationsleiste erstellen und dort vier Schaltflächen hinzufügen. Okay? Diese Schaltfläche ist auch eine Komponente. Dies ist auch eine Komponente. Dann ist der Mittelteil auch eine Komponente. gesamte Seite hat einen Rahmen und innerhalb dieses Rahmens befinden sich Komponenten. Okay? Nun, was passiert ist, wenn du zu Learn hier wechseln willst, kannst du sehen, dass sich das Wichtigste auf der gesamten Website nicht ändert, oder? Warum willst du das also neu laden? Du willst das nicht neu laden? Du kannst diesen unteren Teil einfach neu laden, oder? Mit Hilfe dieser komponentenbasierten Architektur wurde dies also möglich Anstatt also die gesamte Webseite neu zu laden, obwohl Navbar konstant ist, laden Sie das Ganze neu, oder? Es ist nicht effizient, oder? Es verbraucht Ihre Daten, es verbraucht Netzwerkaktivitäten. Es verbraucht auch Rechenleistung. Es ist nicht effizient. Aus diesem Grund kam diese komponentenbasierte Sache ins Spiel, bei der früher nur die Komponente neu geladen wurde, bei der es eine Änderung gab Wenn Sie also zur Referenz gehen, wird nur dieser Teil neu geladen Wenn ich darauf umsteige, wird nur dieser Teil neu geladen. Das ist also eine einseitige Anwendung. Es handelt sich also tatsächlich um eine einseitige Anwendung wie eine Seite, und die Komponenten werden neu geladen Okay? Und sie werden neu geladen, je nachdem, wo Sie interagieren und wie die Anwendung erstellt wurde Okay. Das sind also einseitige Webanwendungen, und React wird verwendet, um diese Art von einseitigen Webanwendungen zu erstellen. Okay? Was Sie mit Reacts tun können, können Sie hier sehen, es ermöglicht Ihnen, Komponenten zu erstellen. Okay? Also, wie ich schon sagte, dieses Ding ist eine Komponente, dieses Ding ist eine Komponente. All diese Dinge können Komponenten sein, die Sie definiert haben, und dann können Sie einen Rahmen haben, und innerhalb dieses Rahmens können Sie alle Komponenten laden. Das ist es, was React Ihnen ermöglicht. Okay. Und warum erlaubt es dir das? Also habe ich es gerade erklärt. Denn wenn du zur Referenz gehst, lade ich gerade diesen unteren Teil neu Ich lade diese Navbar nicht neu. Ich lade diese Nachricht oben nicht neu, oder? Nur dieser untere Teil wird neu geladen. Wenn ich hier drüben klicke, werden nur die Dinge auf der rechten Seite neu geladen Sie müssen nicht jedes Mal die gesamte Webseite neu laden , Das ist es also, was React Ihnen ermöglicht. Es ermöglicht Ihnen, Komponenten zu erstellen. Sie können Komponenten erstellen, okay? Sie können zum Beispiel eine Suchleiste mit re erstellen, Sie können Navbar mit React erstellen, und dann können Sie einen Frame definieren, und innerhalb dieses Frames können Sie alle Komponenten nach Belieben zusammenstellen Belieben zusammenstellen Okay? Also das ist es, worüber dieses Ding spricht. Okay? Damit können Sie Benutzeroberflächen aus einzelnen Teilen, sogenannten Komponenten, erstellen, und es gibt auch eine tolle Demo hier auf der Website, okay? Diese Website kann sich also ändern die Benutzeroberfläche kann sich ändern je nachdem, wann Sie sich dieses Video ansehen. Aber im Moment sehe ich eine solche Oberfläche auf der Website. Okay, wenn du vorbeikommst, haben sie dieses tolle Beispiel. Mach dir keine Sorgen, wenn du diesen Code nicht verstehst. Was dieses Ding hier hervorzuheben versucht, ist, dass es hier Komponenten gibt. Sie können sehen, dass dies eine Schnittstelle ist. Unsere Oberfläche, die Sie zeigen möchten. Dies ist ein Video-Thumbnail. Dann haben Sie den Videotitel, die Beschreibung, die Schaltfläche „Gefällt mir“ und so weiter Okay? Nun, was Sie getan haben ist, dass Sie eine Komponente namens Thumbnail erstellt haben, sodass Sie hier ein Vorschaubild sehen können, oder Dann haben Sie eine Komponente namens Button erstellt. Schaltfläche „Gefällt mir“. Sie haben eine Komponente namens Video. Du kannst es sehen. Das ist das gesamte Komponentenvideo, du kannst es sehen, oder? Das ist also wiederverwendbar, wie Sie sich vorstellen können, wie ein Button Wenn ich ihn an einem anderen Ort verwenden möchte, brauche ich nur diesen Tag. Okay? Vorschaubild, ich muss eine andere Stelle verwenden, ich kann einfach dieses Tag verwenden. Wenn es morgen eine Änderung an der Miniaturansicht gibt, muss ich diese Änderung nur an einer Stelle vornehmen und sie wird auf der gesamten Registerkarte wiedergegeben Wenn ich morgen ändern möchte, wie die Animation dieser Schaltfläche funktioniert, oder irgendeine Art von Änderung der Benutzeroberfläche hier, möchte ich die Farbe der Like-Schaltfläche ändern Sie nehmen einfach Änderungen vor, wo immer Sie diese Schaltfläche definiert haben. Wo auch immer Sie es wie eine Schaltfläche definiert haben, Sie nehmen diese kleine Änderung vor und speichern sie. Sie wird in der gesamten App bereitgestellt. Das ist die Magie. Wiederverwendbarkeit ist, wie Sie sich vorstellen können, eines der wichtigsten Dinge , die uns begegnen. Sie können es hier sehen. Okay. Sie können sehen , ob Sie alleine oder Tausende anderer Entwickler arbeiten. Die Verwendung von React fühlt sich genauso an. Es ermöglicht Ihnen, Komponenten, die von unabhängigen Personen geschrieben wurden, nahtlos zu kombinieren . Und hier kannst du sehen, das ist unglaublich, du kannst es hier sehen. Mit ein bisschen JavaScript wurde es gerendert. Du hast hier ein Video erstellt. Das war ein Video, das du mit JavaScript erstellt Du renderst das Video dreimal, du kannst es sehen. Drei Videos. Okay? Und Syntax, das ist eine Markup-Syntax , die als SX bekannt ist JSX ist also etwas , das Sie oft hören werden , wenn Sie mit React arbeiten, okay? Es geht also um React und wie es funktioniert. Okay. Also würde ich Sie alle ermutigen, einfach diese Website zu besuchen. Um Ihnen noch ein Beispiel zu geben, ein bisschen interaktives. Wir können hier Geld verdienen. Und wenn ich hier runter scrolle, kannst du das sehen. Okay. Also hier haben wir im Wesentlichen eine Funktion geschaffen. Das ist also eine Funktion , die zurückkehrt. Und sagen wir, das kann eine beliebige Taste sein. Im Moment ist es also ein sehr einfacher Knopf, auf steht: Ich bin ein Knopf. Okay. Aber nehmen wir an, wenn Sie eine Art von Schaltfläche benötigen, die in Bezug auf Benutzeroberfläche und Botschaft für Ihre Anwendung spezifisch ist , können Sie sie so definieren. Und hier, was Sie getan haben, ist hier, ich rendere diese Schaltfläche hier drüben. Du kannst meinen Button sehen. Ich werde Ihnen also sagen, was passiert, wenn Sie mit HTML entwickeln, haben Sie eingebaute Tags Sie haben dieses H ein Tag, Sie haben H zwei Tags, Sie haben H drei Tags Und jedes Etikett hat eine Bedeutung, oder? H one Tag hat eine Bedeutung, wenn du etwas mit H one Tag schreibst, wird es auf diese Weise im Header angezeigt. Wenn ich das ersetze und das ist wie ein richtiger Editor, also darf ich den Code hier ändern. Wenn ich das also auf H zwei ändere, kannst du sehen, dass das die Dinge auf eine andere Art zeigt , okay? Die Schriftgröße ist ein bisschen kleiner, okay? Jedes Tag, das in HTML eingebaut ist, hat also seine eigene Bedeutung. Hier können Sie also sehen, dass dies unser eigenes benutzerdefiniertes Tag ist. Mit React können Sie hier also Ihr eigenes benutzerdefiniertes Tag erstellen. Wir haben unser eigenes benutzerdefiniertes Tag, Meine Schaltfläche, definiert. Dies ist die Funktion, M-Taste, die wir definiert haben. Was ist die Definition von MyButton? Das ist die Definition. Also wann immer du MyButon anrufst , rufen wir Mbiton an, wir benutzen Mbiton hier drüben Immer wenn du Meine Schaltfläche hier drüben verwendest, wird das zurückgegeben und wird hier in gewisser Weise ersetzt Also, das Ganze wird hier so ersetzt, wenn es in den Browser gerendert wird. Ich mache einfach Control Set. Ich kann es dir sogar beweisen. Wenn ich also mit der rechten Maustaste hier drüben klicke und Inspizieren sage, lassen Sie uns hier sehen, was passiert. Also nehme ich das einfach ein bisschen runter. Ich scrolle nach rechts. Du kannst es sehen. Hier siehst du meinen Button nicht. Also hier schreiben wir tatsächlich Mbton in den Code. Aber hier siehst du Mybton nicht. Hier sehen Sie, wie dieser Code gerendert wird. Sie können sehen, was passiert, ist, dass , wo auch immer Sie Meine Schaltfläche verwenden, während der Laufzeit gerendert wird. Die Definition von M-Button wird gerendert. Also lass mich das replizieren. Ich werde das replizieren und Sie können sehen, dass eine weitere Schaltfläche hinzugefügt wurde Okay. Wenn ich jetzt die Definition ändere, bin ich A, lass mich sagen, ich bin super Button. Sie können sehen, es spiegelt sich überall wider. Kannst du dir diese Magie vorstellen? Als ob du dich an einer Sache änderst, änderst du dich an einem Ort. Es tut mir leid, Sie ändern sich an einer Stelle und das spiegelt sich in der gesamten Anwendung wider. Wenn Sie also benutzerdefinierte Schaltflächen oder benutzerdefinierte Likes haben, stellen Sie sich vor, Sie erstellen Instagram. Sie verwenden Buttons an mehreren Stellen, oder? Und Sie müssen dieses Thema beibehalten. Sie erstellen also eine Komponente. Okay? Sie verwenden es an mehreren Orten, an tausend Orten, an denen Sie es benutzen. Sie müssen eine Änderung an der Komponente vornehmen. Kein Problem. Du kommst und änderst hier drüben etwas. Und das spiegelt sich in der gesamten Anwendung wider. Okay? Also das ist es, was Sie von dieser Komponente beliebig oft verwenden können. Ich kann das einfach weiter rendern und Sie werden sehen die Definition hier ersetzt wird. Das ist also der Vorteil von React. So wie wir das verstanden haben, fördert React die Verwendung von Single-Page-Anwendungen. Sie können einseitige Webanwendungen erstellen. Sie können im Wesentlichen Ihre eigenen Komponenten erstellen. Sie können diese Komponenten wiederverwenden. Es fördert also die Wiederverwendbarkeit. Es ermöglicht Ihnen auch, Ihren Code einfach zu verwalten. Wenn Sie also eine Änderung vornehmen möchten, Sie die Änderung an einer Stelle vor, sie spiegelt sich überall wider. Es sorgt also für Ordnung, okay? Außerdem ist React heutzutage sehr beliebt. Wenn Sie also an Ihrem Standort nach einem Gehalt für React suchen, wo auch immer Sie herkommen, können Sie es sehen Das ist also Payscale.com für die Vereinigten Staaten und Sie können sehen, dass dies das Gehalt ist, das derzeit für React-Entwickler bezahlt wird, oder sogar Full-Stack-Entwickler werden gut bezahlt Es gibt viele Jobs , die diese Fähigkeiten erfordern, und es ist wichtig, dass Sie dies als Softwareentwickler lernen Egal, ob Sie ein Backend-Ingenieur sind oder wer auch immer Sie sind, React wird heutzutage auch zur Erstellung mobiler Anwendungen verwendet Okay. Also ja, es ist wirklich wichtig, dass du dieses Zeug verstehst und anfängst, Dinge mit dieser Technologie zu bauen . Also das ist React. Nun, wie schreiben wir Code in React? Um Code zu schreiben und zu reagieren, benötigen Sie also NodJS. Nun, was ist Nogs? NoDGS ist also nichts anderes als eine Jascript-Laufzeit und ermöglicht es Ihnen, Jascript-Code auf der Serverseite auszuführen Das ist also etwas, das wir für Gs brauchen. Wir brauchen auch etwas namens NPM. Was ist nun NPM? NPM ist also nichts anderes als ein Paketmanager für JavaScript, okay? Es wird verwendet, um die verschiedenen Pakete zu verwalten , die Sie mit JavaScript verwenden Ebenso wird es verwendet, um Bibliotheken, Tools und Frameworks zu installieren. Wenn Sie also React verwenden möchten , müssen Sie diesen Paketmanager verwenden. Okay. Außerdem benötigen wir etwas, das als Visual Studio-Code bezeichnet wird. Also das wird die IDE sein, okay? Und wir werden davon Gebrauch machen und es bietet auch eine wunderbare Unterstützung für die Webentwicklung. Also werden wir dafür Visual Studio-Code verwenden . also zu unserem Browser kommen, Wenn wir also zu unserem Browser kommen, werden wir zu Google gehen und nach NodeGs suchen Das werden wir brauchen. Ich werde darauf klicken und du kannst es hier sehen. Hier müssen wir den Node JS installieren. Sie können die NodeJS LTS-Version herunterladen. Sie können es von hier herunterladen. Und Sie können sogar zur Download-Seite gehen. Und wenn Sie etwas Benutzerdefiniertes wie für Windows oder Mac benötigen , können Sie die Auswahl hier treffen. Okay? Der Installationsvorgang ist sehr einfach. Sie laden es wie jedes normale Softwareprogramm und folgen einfach den Installations- und Installationsanweisungen. Okay? Sobald Sie heruntergeladen haben, können Sie zu Ihrem Terminal gehen und überprüfen ob die Installation erfolgreich war. Sie können also Knotenbindestrich V sagen . Sie sollten sehen, dass diese Version gedruckt wird Ihre Versionsnummer könnte sich also ein wenig von meiner unterscheiden Dies kann nämlich davon abhängen, wann Sie sich dieses Video ansehen und ob eine neuere Version verfügbar ist. Aber mach dir keine Sorgen über unterschiedliche Versionsnummern. Eine Nummer sollte gedruckt werden. Darüber sollten Sie sich Sorgen machen. Dann tippst du NPM ein. Also brauchen wir auch diesen Node-Paketmanager. Und du kannst Bindestrich sagen. Das sollte also auch eine Vision-Nummer drucken. Es ist okay, wenn es anders ist als das von mir. Aber wir müssen diese beiden Dinge auf Ihrem System installieren. Eines ist also Node JS, die JavaScript-Laufzeit, und dann haben wir NPM , ein Paketmanager Stellen Sie einfach sicher, dass Sie beides haben. 4. Erstes React-Projekt erstellen: Hallo, da. Jetzt ist es an der Zeit, dass wir mit der Erstellung unserer React-Anwendung beginnen, und das werden wir mit Hilfe der Befehlszeile tun . Also als Erstes gehe ich zum Projektordner oder navigiere über die Befehlszeile zum Projektordner. Was ich mit Projektordner meine, ist es ein Ordner meiner Wahl ist, in dem ich meine React-Projekte organisieren möchte, okay? Sie können also zum Finder gehen. Wenn Sie beispielsweise auf einem Mac sind, können Sie zum Finder oder wenn Sie wie ich Windows verwenden, können Sie zum Explorer gehen erstellen In Ordnung und einen Ordner an einem Ort Ihrer Wahl Sie können den Ordner nennen, wie auch immer Sie möchten Ich würde es React nennen. Und dann können Sie von der Befehlszeile aus einfach zu dem Ort navigieren, können Sie von der Befehlszeile aus einfach zu dem Ort navigieren an dem Sie den Ordner erstellt haben. Also habe ich diesen React-Ordner hier an diesem bestimmten Ort erstellt , und CD ist der Befehl, das heißt Verzeichnis ändern, und er hilft mir, zu diesem bestimmten Ordner zu navigieren oder zu diesem bestimmten Ordner oder von der Befehlszeile aus in diesem Ordner zu sein. Jetzt bin ich in diesem speziellen Ordner, ich werde alles andere löschen. Ordnung. Jetzt werde ich in diesem speziellen Ordner mit der Erstellung meiner React-Anwendung beginnen. Und dafür werde ich NPX verwenden, okay? Ups. Ich habe also schon einige React-Anwendungen erstellt Sie können diesen Vorschlag also hier sehen, okay, aber ich kann nichts gegen den Vorschlag tun. Okay? Ignoriere diesen Vorschlag vorerst, denn was dieses spezielle Terminal tut, ist, was auch immer es in deiner Geschichte sieht, es schlägt dich immer wieder vor, was gut ist. Ihnen den gesamten Befehl zu zeigen, das ist völlig in Ordnung. Also NPX Ich werde NPX benutzen, okay? Nun, NPX ist eine Syntax, richtig. Es wird verwendet, um die Node-Pakete auszuführen, oder es wird verwendet, um die Pakete auszuführen Und dann werden wir die Create React App verwenden. Ordnung. Was ist nun die Create React-App. Create React App ist eine Art Tool , mit dem Sie die gesamte React-Anwendung erstellen können. Nun, warum machen wir uns das zunutze? Weil das React-Projekt auf eine bestimmte Art organisiert sein muss, braucht es den SRC-Ordner, es braucht einige Dateien, und all das kommt zusammen und sie ermöglichen es Ihnen, und all das kommt zusammen und sie oder sie ermöglichen es Ihrer Anwendung, reibungslos zu funktionieren, oder sie ermöglichen Ihrer Anwendung, reibungslos zu funktionieren , oder? Sie können diese Dateien also auch manuell erstellen, aber mit diesem Tool können Sie die erstellen oder Anwendungsstruktur auf die richtige Weise erstellen oder einrichten. Okay? Und danach nenne ich einfach meinen Anwendungsnamen, damit ich sie MyRact App nennen kann, ungefähr so Okay. Und was ich tun kann, ist einfach Enter zu drücken. Sobald ich die Eingabetaste drücke, wird dadurch ein Ordner an diesem bestimmten Ort erstellt. An diesem bestimmten Ort wird also dieser Ordner erstellt. Warum wird an diesem Ort ein Ordner erstellt? Weil ich vom Terminal aus zu diesem Ordner navigiert habe und dies der Ordnername sein wird, unter dem alle Dateien meines React-Projekts existieren werden Okay? Sie können also die Eingabetaste drücken und Sie sollten sehen, dass irgendeine Art von Verarbeitung stattfindet. Sie können also sehen, wie an diesem bestimmten Ort eine neue React-App erstellt wird. Es werden einige Pakete installiert, und das kann ein paar Minuten dauern. Es installiert es also sagt dir auch, was es installiert. Es installiert React, React Dom, React-Skripte und alles, was es braucht. Wir werden also eine Weile warten, bis gesamte Vorgang abgeschlossen ist und wir eine Bestätigung sehen. Ich habe also die Bestätigung erhalten, und ich habe auch eine kleine Nachricht erhalten. Okay. Als ich anfing, dieses Video aufzunehmen, gab es eine neue Nebenversion, da steht, dass NPM verfügbar ist, und sie fragt mich, ob ich ein Upgrade durchführen kann Okay, ich werde später upgraden. Du wirst das vielleicht nicht sehen, okay, aber ja, ich werde es vorerst einfach ignorieren. Es ist nur eine Upgrade-Benachrichtigung. Sie können die Bestätigung hier sehen, viel Spaß beim Hacken. In Ordnung. Und wenn du hier nach oben scrollst, siehst du den gesamten Prozess dessen, was passiert ist. Also haben wir diesen Befehl hier ausgeführt. Ups. Lass mich nach oben scrollen. Also haben wir diesen Befehl hier ausgeführt. Okay? Wenn du herkommst, kannst du sehen, dass es so viele Pakete hinzugefügt hat. Es hat 36 Sekunden gedauert. Wenn Sie hierher kommen, okay, es heißt, dass diese spezielle Anwendung erfolgreich an diesem Ort und in diesem Verzeichnis erstellt wurde diese spezielle Anwendung erfolgreich an . Sie müssen also zu diesem Verzeichnis navigieren, und darin können Sie all diese Befehle hier ausführen . Okay? Sobald Sie navigiert haben, stehen Ihnen vorgefertigte Befehle wie NPN Start Es wird auf dem Entwicklungsserver gestartet. Die von Ihnen erstellte React-Anwendung verfügt also über einen eingebetteten Inbilt-Server. Sie können diesen Befehl ausführen, um die Anwendung zu bündeln und in statische Dateien zu speichern, hauptsächlich für die Produktionsbereitstellung. Dadurch wird der Test-Runner gestartet, falls Sie Testfälle ausführen möchten , NPM run Das können Sie ausführen. Der Vorschlag ist also, Sie damit beginnen können dies hier auszuführen. Ich kopiere das. Okay? Ich füge es hier ein. Ich gehe in dieses Verzeichnis, okay und dann sagt es dir NPM Start Nun, das ist ein Befehl, mit dem Sie einen Entwicklungsserver auf Ihrem lokalen Computer starten können einen Entwicklungsserver auf Ihrem lokalen Computer starten Also kann ich diesen Befehl auch ausführen, okay? Und Sie konnten sehen, wie die Anwendung lief. Das ist also die Anwendung, okay? Sie können sehen, dass der Browser automatisch geöffnet wird, und Sie können sehen, dass dies und Sie können sehen, dass dies die Anwendung ist, die läuft. Nun, das ist ein Server , der Ihnen Ihre Inhalte zeigt Ihre Inhalte Ihre React-Anwendung im Browser ausführt. Jetzt werden Sie bei jeder Änderung, die Sie an den Dateien vornehmen, Live-Reloads hier sehen. Alles klar? Nun können Sie die Nachricht hier sehen, als ob Sie diese bestimmte Datei bearbeiten und speichern müssen , um sie erneut zu laden Okay? Also, diese Schnittstelle kommt aus dieser speziellen Datei, so steht es da. Und wenn Sie hier klicken, ist dies der Link zur offiziellen Website von React. Darauf hat es verlinkt. Okay? Also kannst du auf diese Website gehen und dir auch ein paar Sachen ansehen oder lesen. In Ordnung. Aber ein paar Dinge, die ich hier erwähnen möchte: Sobald Sie den Entwicklungsserver gestartet haben, können Sie ihn beenden, indem Sie unter Windows auf Strg und C oder auf Mac auf Befehl und C drücken . Okay? Ich verwende Windows, also drücke ich Strg C und Sie können sehen, dass dieser spezielle Job beendet wurde. Und jetzt kommst du, wenn du versuchst zu aktualisieren, das wird nicht funktionieren. Okay, weil der Server ausgefallen ist, oder? Nun, um Ihren Server zum Laufen zu bringen, müssen Sie NBM Start in diesem speziellen Ordner ausführen Okay? Erst dann ist dein Server betriebsbereit. Während der Entwicklung können Sie also den Server eingeschaltet lassen und die Dateien tatsächlich ändern und die Änderungen speichern und live verfolgen. Okay? Jetzt werde ich etwas mehr über diesen Befehl erfahren. Also haben wir die React-App oder die gesamte Anwendung mit diesem speziellen Befehl erstellt . Jetzt können Sie hier am Ende auch Optionen hinzufügen. Okay? Was Sie also tun können ist, hier Vorlagen zu verwenden. Okay? Nehmen wir an, wenn Sie mit React arbeiten, möchten Sie auch Typoskript verwenden Okay? Also, wenn Sie Typoskript verwenden, können Sie so etwas hinzufügen Sie können hier Vorlage sagen und Sie können Typskript sagen Ich werde das nicht ausführen, aber das ist nur eine zusätzliche Information. Dadurch wird die Typoskript-Vorlage verwendet , um Ihre Anwendung zu erstellen, und die Typoskript-Unterstützung wird von Anfang an hinzugefügt. Dies ist hilfreich , wenn Sie an einem größeren Projekt arbeiten, das von einer strengen Typprüfung wird von Anfang an hinzugefügt. Dies ist hilfreich , wenn Sie an einem größeren Projekt arbeiten profitieren kann profitieren In Ordnung. Also können Sie diesen Befehl auf diese Weise verwenden , in Ordnung. Ich hoffe, dieser Befehl ist klar. NPX erstellt React Tap , sodass der Server nicht geöffnet ist. Sie können den Server jetzt jedoch erneut starten, indem NPM run NPM start sagen Es tut mir leid. Es ist also NPM-Start, so etwas Und wenn Sie es starten, wird der Server erneut gestartet. Ordnung. Also ich hoffe, das ist nützlich und ich hoffe, Sie konnten es verfolgen. 5. Visual Studio-Code installieren: Dies ist unsere erste react-basierte Anwendung, die wir erstellt haben, okay? Oder ich sollte sagen, wir haben es nicht erstellt. Okay. Das ist also ein automatisch generiertes Projekt mit der Create React-App. Okay, und es gibt uns hier auch einen Hinweis. Sie können App Dot qs bearbeiten und speichern, um sie erneut zu laden. Okay? Es gibt einen Link zum Lernen von React , der Sie zur offiziellen Website von React führt. In Ordnung, so weit so gut. Also das ist unsere Anwendung , die läuft. Was müssen wir jetzt tun? Wir müssen anfangen , Dinge zu programmieren und zu modifizieren. Und was werden wir dafür tun? Wir werden eine IDE installieren , die der ID Visual Studio-Code ist. Okay. Also so sieht es aus. Wenn Sie es schon auf dem Computer haben, gut und gut, wenn nicht, dann besuchen Sie diese offizielle Website. Es ist ein kostenloses Tool. Es ist kostenlos, basiert auf Open Source und läuft überall. Da ich Windows verwende , werde ich aufgefordert , eine für Windows erstellte Version herunterzuladen Sie können zu dem Betriebssystem wechseln, das Sie benötigen. Aber wenn Ihr Betriebssystem hier ein Installationsprogramm hat, wird es automatisch Wenn Sie sich also hier von einem Mac aus anmelden, wird Ihnen der Download vom Mac angezeigt. Okay? Also, von welcher Plattform aus Sie das öffnen, es wird Ihnen diese Schaltfläche zeigen und Sie können das durchgehen wenn Sie nicht wissen, was Visual Studio-Code ist Aber laden Sie es einfach herunter und installieren Sie es wie jedes andere Softwareprogramm Ich habe es bereits installiert, daher werde ich Ihnen die Installationsschritte nicht zeigen, aber die Installationsschritte sind überhaupt nicht komplex. Es ist sehr einfach und unkompliziert. 6. Umstieg auf Visual Studio Code: Sobald Sie Visual Studio-Code erfolgreich installiert haben , Ihnen eine Seite wie diese angezeigt. Wenn Sie also Visual Studio-Code zum ersten Mal öffnen , wird diese Willkommensseite angezeigt. Nun, ich bin schon eine Weile ein Visual Studio-Code-Benutzer, okay? Und Sie sehen all diese aktuellen Projekte. Es ist also wahrscheinlich, dass Sie die Liste der letzten Projekte erst sehen , wenn Sie ein Benutzer sind, okay? Aber da ich ein Benutzer bin, sehe ich, wie gesagt, die Liste der letzten Projekte, die ich in der Vergangenheit verwendet oder erstellt habe. Außerdem werden Sie diese Optionen hier sehen: Neue Datei, Datei öffnen, Ordner öffnen, Git-Repository klonen, Verbindung zu all dem herstellen. Es ist ein sehr nützliches Tool. Visual Studio-Code, ich benutze ihn ständig. Nun, um das Projekt zu öffnen, kennen Sie den Ordner, in dem Sie das Projekt erstellt haben. Sie können also einfach hier auf Ordner öffnen klicken und zu dem Ordner navigieren , in dem Sie das Projekt erstellt haben. Wenn Sie dies aus irgendeinem Grund nicht sehen, können Sie alternativ Sie dies aus irgendeinem Grund nicht sehen, in den Menüoptionen hier zur Datei wechseln und Ordner öffnen sagen. Beide sind gleich. Ich werde also Ordner öffnen auswählen. Ich navigiere zu dem Verzeichnis meiner Wahl und öffne das Projekt hier. Als ich jetzt Ordner öffnen auswählte, sah ich dieses Ordnerfenster, das heißt, ich navigiere es zu dem Ordner, in dem ich die React-App erstellt habe Und ich wähle diesen speziellen Ordner aus. Dies ist mein React-App-Projekt , das wir erstellt haben. Darin werden Sie einige Dateien sehen, aber Sie müssen den Stammordner auswählen. Ich sage auswählen und es öffnet diesen speziellen Ordner für mich. Jetzt kann ich diese Willkommensseite hier schließen, okay? Also kannst du das Projekt hier auf der linken Seite sehen , okay? Sie können den gesamten Ordner sehen. Wenn Sie diesen Bereich erweitern, werden Sie die darin enthaltenen Dateien sehen. Okay? Also, als du den Befehl Create React App ausgeführt hast, okay mit Create React App, hat er all das für dich erstellt. Sie können es auch manuell erstellen. Aber wie Sie sich vorstellen können, wird das sehr mühsam sein, oder Dieses spezielle Tool, Create React App, erledigt die Arbeit für Sie, wobei es die gesamte Projektstruktur für Sie einrichtet . Okay? Wir werden diese Projektstruktur bald durchgehen , aber im Moment möchte ich auch erklären, dass wir den Server vom Terminal aus betriebsbereit haben . Was ich jetzt tun kann, ist dass ich kein externes Terminal verwenden muss. Visual Studio-Code bietet eine Möglichkeit, mit der ich tatsächlich ein Terminal innerhalb von Visual Studio-Code haben kann. Auf diese Weise muss ich Visual Studio-Code nie verlassen und zu einem lokalen Terminal wechseln. Hier oben in den Optionen werde ich das Terminal hier sehen. Sie können neues Terminal sagen, und Sie können sehen, dass dies ein integriertes Terminal im Visual Studio-Code ist . Und wenn Sie PWD sagen, was das aktuelle Arbeitsverzeichnis ist, wird das Terminal automatisch in dem Ordner geöffnet , den Sie im Visual Studio-Code geöffnet haben , dem Projektordner Sie müssen also nicht auch navigieren, Sie müssen nicht den Befehl, die CD und alles ausführen und navigieren, das funktioniert einfach wie ein lokales Terminal Also hier kann ich sagen, dass NPM hier drüben anfängt. In dem Moment, in dem ich sage, dass ich eine Fehlermeldung erhalte, können Sie sehen, dass auf Port 3.000 bereits etwas läuft Und was läuft, unsere Anwendung selbst läuft und sie fragt uns, ob Sie die App stattdessen auf einem anderen Port ausführen möchten . Das möchte ich nicht tun. Ich werde nein sagen. Okay, und es wird einfach die Hinrichtung beenden. Okay? Aber ich werde diesen Server schließen, weil ich kein externes, du weißt schon, externes Terminal hier drüben mehr benutzen will. Okay? Ich möchte mich an das von Visual Studio Code bereitgestellte Terminal halten, und ich werde NPM starten, und das sollte jetzt den Entwicklungsserver für Sie ausführen Okay? Also auf diese Weise können wir das in ein neues Fenster verschieben. Also hier sind wir in dem neuen Fenster, und ich habe Visual Studio-Code, der in dem neuen Fenster ausgeführt wird. Auf diese Weise muss ich Visual Studio-Code niemals verlassen. Ich kann das hier sogar so minimieren. Okay? Ich kann von hier aus sogar ein neues Terminal erstellen, sodass Sie Plus sehen können, und Sie können mehrere Terminals hier laufen lassen. Okay? Es ist sehr nützlich, und das ist der Grund dafür. Diese Art von Tools, die Visual Studio Code bietet , ist der Grund, warum er in der Entwickler-Community so beliebt ist . Jetzt zeige ich Ihnen auch die Liste der Erweiterungen, die ich habe. Also hier, wenn du zu diesem Erweiterungs-Tab auf der linken Seite gehst , hast du einige Optionen wie Suchen, Quellcodeverwaltung, Ausführen und Debuggen, all das, okay? Ich verwende Docker auch in einigen meiner Projekte, sodass Sie Docker auch hier sehen können Aber vielleicht siehst du das nicht. Okay? Das braucht eine separate Erweiterung, okay? Aber wenn du zur Verlängerung gehst. Was sind nun Erweiterungen? Mit Erweiterungen können Sie also die Standardfunktionen, die Visual Studio-Code bereits bietet, verbessern oder erweitern Standardfunktionen, die . Sie können also sehen, dass ich eine Erweiterung für das Jupiter-Notebook habe. Okay. Immer wenn ich in Python programmiere und Notebook-Unterstützung benötige, verwende ich diese Erweiterung. Okay. Also habe ich diese Erweiterung. Dies wird für React nicht benötigt. Ich habe eine Python-Erweiterung. Okay. Nun, dieses automatisch umbenannte Tag, könnte für React hilfreich sein, denn wissen Sie, wenn Sie ein Tag umbenennen, okay, und wenn es ein schließendes Tag gibt wird dadurch die kostenpflichtige Version dieses okay, und wenn es ein schließendes Tag gibt , wird dadurch die kostenpflichtige Version dieses bestimmten Tags Okay, das ist also etwas, das du haben kannst. Es ist hilfreich. Wenn ich Ihnen zum Beispiel ein Beispiel geben muss , lassen Sie mich Ihnen ein Beispiel geben. Sagen wir also, ob ich hier eine Datei erstelle oder öffnen lasse. Okay, lass mich eine HTML-Datei öffnen. Nun, dieses Ding hier drüben, du kannst sehen, lass mich rüber gehen, nach unten scrollen. Dieser Titel hat also ein öffnendes und ein schließendes Tag. also das öffnende Tag umbenenne, können Sie aufgrund dieser speziellen Erweiterung Wenn ich also das öffnende Tag umbenenne, können Sie aufgrund dieser speziellen Erweiterung sehen, dass auch das schließende Tag umbenannt wird. Okay? Das ist also der Vorteil dieses automatisch umbenannten Tags. Sie müssen nicht zuerst das öffnende Tag und dann das schließende Tag umbenennen, oder? Betafärbung, Die Betafärbung, wie Sie am Symbol selbst erkennen können, ist daran gewöhnt, dass das schließende Paar der Klammer farblich hervorgehoben Das ist nützlich, wenn Sie viele Klammern in Ihrem Okay, Debugger für Java, Dev-Container, Jango Doco verwenden viele Klammern in Ihrem Okay, Debugger für Java, , all das verwende ich für andere Sprachen, Extension Back für Java, Gradle für Java, Intel-Code. Okay? Das ist für KI-gestützte Entwicklung. Dies gilt auch für die Verwendung der Intelicode-API. Okay. Ich habe welche für Python. Das sind also alles Python-bezogen. Ich scrolle nach unten, ein Live-Server. Wir brauchen diesen Maven nicht für Java. Das wird auch nicht benötigt. Prettier ist etwas , das du benutzen kannst. Dadurch wird der Code formatiert. Okay. Ich organisiere den Code für dich Okay. Und ja, das haben wir, okay. Ich werde jetzt auch einige Erweiterungen hier hinzufügen. Okay? Also was Sie tun können, ist, hier nach React-Codefragmenten zu suchen, etwa so Okay. Okay, du kannst also nach ES 7 und React suchen, etwa so. Und Sie werden diese Erweiterung mit fast Millionen von Installationen sehen . Das sind also 12,9 Millionen, während ich dieses Video aufnehme. Natürlich wird das weiter zunehmen und Sie vielleicht eine andere Zahl sehen, wenn Sie sich das ansehen Das ist also eine Verlängerung. Das ist der Name ES Seven plus React Redux React Native Also, das gibt dir Vorlagen, okay? Zum Beispiel, wenn Sie eine Funktion erstellen möchten, sodass Sie RAFC sagen können Sie können das einfach eingeben und Sie erhalten die gesamte Funktionsdefinition Okay. Also diese Art von Abkürzungen hat es, die dir helfen, Zeit zu sparen. Also kannst du das installieren. Ich klicke einfach auf Installieren und füge es zu meiner Liste der Erweiterungen hinzu. Okay? Also ja, wir haben es jetzt installiert, okay? Sie können hier weitere React-Plugins oder -Erweiterungen auf dem Marktplatz entdecken -Erweiterungen auf dem Marktplatz und damit herumspielen. Und Sie können die Standardfunktionen erweitern , die Ihnen Visual Studio-Code bereits bietet. Ordnung. Also ja , hier geht es darum, Visual Studio-Code einzurichten, und ich hoffe, Sie fanden ihn nützlich. 7. Die Projektstruktur erkunden: Jetzt ist es an der Zeit, dass wir beginnen die React-Projektstruktur zu verstehen. Wenn Sie jetzt die von Ihnen erstellte React-Anwendung öffnen oder analysieren, werden Sie viele Dateien sehen. Einige davon sind auch Ordner. Okay? Also hier siehst du diesen Knotenmodul-Ordner. Okay? Und was ist ein Node-Modul? Dies ist ein Verzeichnis, das alle NPM-Pakete wie Bibliotheken und Abhängigkeiten enthält , auf die Ihr Projekt angewiesen ist Und im Allgemeinen müssen Sie während der Entwicklung Ihrer React-Anwendung der Entwicklung Ihrer React-Anwendung nicht direkt mit diesem speziellen Ordner interagieren . Okay. Also ja, das ist da, du musst wissen, was es ist, aber du wirst nicht daran arbeiten. Öffentlicher Ordner. Dieser Ordner enthält nun alle statischen Dateien wie den Haupt-Indexpunkt HTML, der das Root-Div enthält, in das Ihr React-Tap eingefügt wird. Okay? Wenn du das nicht verstehst , mach dir keine Sorgen. Ich werde das erklären, aber das hat im Wesentlichen eine Liste für alle statischen Dateien. So wie Sie den Hersteller sehen können, können Sie ein paar Logos sehen, Manifest Jason Robot Dot HD und Indexpunkt-HTML Okay. Was ist nun Indexpunkt-HTML? Nun, das ist die Datei in die Ihre React-Anwendung eingefügt wird. Also hier, das ist das Standard-HTML, du kannst sehen, okay, alles. Und hier siehst du den Titel als React Tap. Wenn Sie also die Anwendung ausführen, sehen Sie den Titel als React Tap. Wenn Sie den Titel ändern, kann ich sagen die React-App hier geändert hat, ungefähr so. Und wenn ich das speichere, wenn du hierher kommst, wirst du sehen, dass die React-App geändert wurde, oder? Und wann immer Sie eine Änderung vornehmen, lädt sich der Server von selbst neu Wenn ich also drei Gedanken hinzufüge und das speichere, wirst du sehen, dass es aktualisiert wurde, oder? Und wenn Sie hierher kommen, werden die Änderungen sofort auch im Browser widergespiegelt Also werde ich das loswerden. Ich werde das speichern, und wenn du zurückkommst, wirst du sehen, dass es jetzt die React-App ist, oder? Das ist also die Datei, in Ihre React-Anwendung eingefügt wird, okay? Und hier, wenn du in den Körper hineinschaust, hast du dieses DIF Okay? Nun verwenden wir dieses Root-Div, um die React-Anwendung hier drüben einzufügen Okay? Und wie wir das machen, erkläre ich gleich. Verstehen Sie vorerst einfach, dass Index oder HTML eine Datei ist, in die Ihre React-Anwendung eingefügt wird und die sich dort im öffentlichen Verzeichnis befindet. Sie haben den SRC-Ordner. Jetzt ist der SRC-Ordner der Ordner, in dem die ganze Magie passiert. Es enthält alle JavaScript-Dateien für Ihre React-Komponente, Stylesheets und Bilder, die alle in diesem speziellen Ordner vorhanden sind Im Wesentlichen befindet sich der gesamte Quellcode, der sich auf Ihre React-Anwendung bezieht , an der Sie arbeiten werden , im SRC-Ordner Sie als React-Entwickler werden also eine Anwendung erstellen und meiste Zeit in diesem speziellen Ordner verbringen Okay? Sie haben natürlich Get Ignorieren, falls Sie es hier konfiguriert haben, Package Log Package JCN Okay? Also das ist das JCNFle Man kann also sagen, dass dies das Herzstück des Projekts ist , wenn es um Node Package Manager, NPM, geht, okay? Das ist also eine Datei , die alle Abhängigkeiten auflistet , die Ihre Anwendung verwendet, okay? Und je nachdem, welche Abhängigkeiten diese bestimmte Datei hat, okay, alle Abhängigkeiten werden alle Abhängigkeiten remote abgerufen und dem Knotenmodulordner hinzugefügt So wird es funktionieren. Okay. Wenn Sie also eine neue Abhängigkeit hinzufügen, wird das Paket JCN immer aktualisiert Das ist es also, was Package GSN tut. Okay. Aber jetzt schauen wir uns den SRC-Ordner an Im SRC-Ordner finden Sie also diese Datei namens App Dot Okay, bevor wir uns mit App Dot JS befassen, gehen wir zu Index Dot Gs Index Dot JS ist der Ausgangspunkt unserer React-Anwendung, oder? Und hier wird die App-Komponente gerendert. Also öffne ich Index Dot JS, ich öffne App Dot JS und ich werde das einfach zusammenklappen. Okay? Nun, wenn du dir den Indexpunkt js ansiehst, was das macht, ist, es die Wurzel hier drüben findet. Sie können den Dokumentpunkt Element nach ID abrufen, Stamm sehen. Was ist nun Root? Root haben wir hier gesehen. Das kommt aus dem Indexpunkt-HTML. Index Dot JS bekommt also dieses Root und es wird gerendert. Sie können das Rendern von Root Dot hier sehen. Okay? Es erstellt zuerst das Stammverzeichnis von React mit React Dom und rendert die App hier drüben. Sie können die App sehen. Alles klar? Also, was ist App? App ist also nichts anderes als App Dot Choir. Sie können also oben die Liste der Eingaben sehen App aus Dot App importieren. Nun, was ist das? Das ist App Dot Chos. Okay? Also hier haben wir eine Komponente definiert , die vordefiniert war, wir haben sie nicht definiert. Sie wurde definiert. Es war uns standardmäßig verfügbar. Und das hat einen Code , der auf die Schnittstelle gerendert wird. Okay? Also rendern wir diese Komponente hier drüben. Okay? Und wenn du herkommst, siehst du das auf der Benutzeroberfläche. Sie können den Punkt Gs in der App mit dem Schrägstrich bearbeiten und speichern, um sie erneut zu laden. Du kannst sehen Wenn Sie also die Oberfläche ändern möchten, müssen Sie App Dot JS bearbeiten. Tippen Sie also auf Punkt js, denn genau das wird gerendert. Und gemäß den Anweisungen können Sie dies ändern. So können Sie App Js bearbeiten und speichern, um sie erneut zu laden. Das ist die Nachricht, die Sie hier sehen, und diese Nachricht kommt von hier. Stimmt das? Also, welche Änderungen Sie hier vornehmen, Sie werden es sofort sehen. Also reflektiere es. Also ich kann Reload sagen und ich kann hier Update, Tastatur aktualisieren sagen hier Update, Tastatur aktualisieren Und du wirst es 1 Sekunde hier sehen. Ich habe es nicht getan. Okay. Aktualisieren. Sie können sehen, dass das Update hier hinzugefügt wurde. Ich aktualisiere also live und sehe die Änderungen. Wenn ich erneut speichere, wenn ich hierher gehe, wird das Update entfernt, oder? Also alle Änderungen, die Sie an der Benutzeroberfläche vornehmen möchten, können Sie in APD vornehmen, okay? Sie können sogar weitere Komponenten hinzufügen, als würden wir hier nur eine App rendern Als ob App die aus APD definierte Komponente hat. Sie können sehen, dass wir es hier exportieren. Okay. Also exportieren wir es hierher und es wird in diese Datei importiert und es wird hier gerendert. Okay? Jede Art von Änderungen Sie vornehmen möchten, können Sie hier vornehmen. Und wenn Sie weitere Komponenten hinzufügen möchten, können wir das natürlich auch tun. Das wirst du lernen, wenn wir ein bisschen tiefer gehen. Aber ja, ich hoffe, das gibt dir eine vollständige Klarheit darüber was passiert, warum es passiert. Und du wirst noch mehr Dateien wie Index Dot CSS finden. Sie können in den App-Punkten sehen, dass App-CSS verwendet wird. Das sind also alles CSS-Dateien, okay, die existieren und sie werden verwendet. Sie haben den Logopunkt SVG. Okay? Das ist die Logo-Datei. Okay. Also ja, es geht um die Projektstruktur. Es ist ziemlich einfach und gibt Ihnen einen Einblick in das, was passiert, wenn Ihre React-Anwendung erstellt wurde, wenn Sie sie zum ersten Mal ausführen Ordnung. Ich hoffe, Sie haben Klarheit darüber , wie diese Schnittstelle gerendert wird, und ich hoffe, das war nützlich. 8. Unser erstes React-Projekt: Jetzt ist es an der Zeit, dass wir ein bisschen mit unserem Projekt experimentieren, das wir erstellt haben Wir werden also Sprache ein wenig modifizieren, um eine benutzerdefinierte Nachricht unserer Wahl zu drucken, und die Nachricht, die wir drucken können, ist willkommen bei React, und das ist meine erste React-Anwendung Das ist also eine Nachricht, die wir drucken werden. Wenn du denkst, dass du das als Herausforderung annehmen kannst, okay, je nachdem, was wir bisher verstanden haben, würde ich mich freuen, wenn du das tust. Okay? Halten Sie das Video jetzt an und versuchen Sie es als Herausforderung bei der Sie den Inhalt, den Sie sehen, ersetzen und ihn durch die Nachricht ersetzen , die ich gerade gesagt habe, okay? Um die Anweisungen zu ersetzen, die auch hier gegeben sind, müssen Sie diese spezielle Datei bearbeiten, Arc Slash App Punkt CHS, um Änderungen vorzunehmen Alles klar? Also probier das aus. Und wenn du das nicht kannst, mach dir keine Sorgen, du kommst zurück. Sie können zurückkommen und dieses Video abspielen und sich diese Lösung ansehen. Ich hoffe, Sie hatten die Gelegenheit , dies als Herausforderung auszuprobieren. Ich würde hier mit dieser speziellen Sache beginnen. Ich gehe zu SRC und gehe zu App Dot Hs. Okay? Jetzt wird App Dot JS gerendert. Diese App-Komponente wird also in Indexpunkt-Chas gerendert Okay? Und das ist momentan die Hauptkomponente, okay? Also was ich tun werde, ist , hierher zu kommen. Okay. Ich kann das hier sogar minimieren. Der Server läuft. Also hier, ich gebe dieses DIF zurück Also ich brauche das alles nicht, also kann ich das einfach loswerden. Alles klar? Hier drüben. Und dann kann ich hier eine Nachricht haben. Okay? Also kann ich H eins sagen. Ich kann sagen, willkommen bei React, so etwas. Und du kannst das EP-Tag hier drüben haben und du kannst sagen, das ist okay, das ist meine erste React-App. So etwas, und du kannst es speichern. Sobald du es speicherst und wenn du hierher kommst, wirst du diese Nachricht sehen. Okay? Nun, Sie können sehen, dass das komplett im Breitbildformat ist, weil wir hier eine Menge Elemente entfernt haben , oder? Das müssen Sie also tun. Eine andere Sache ist, ich werde hier erwähnen, ich diese beiden Elemente oder diese beiden HTML-Elemente in einem übergeordneten TIF Okay? Also, was hier passiert beobachte einfach, das ist eine Funktion , eine normale JavaScript-Funktion, und ich verwende hier das Logo, was ich eigentlich nicht weiß. Ich werde ein bisschen aufräumen. Okay. Jetzt verwende ich App Dot CSS, diese CSS-Datei. Das ist eine Funktion, die etwas zurückgibt. Okay, es gibt das zurück und ich exportiere diese spezielle Funktion. Und das wird im Index verwendet, Indexpunkt Qs. Das kannst du hier sehen. Es wird hier benutzt. Das heißt, es wird hier gerendert und es wird in Root-Def gerendert. Okay? Also, was passiert ist, dass ich diesen Code zurückgebe, okay, diesen Code hier drüben. Dieser Code sieht aus wie HTML, okay? Aber es ist eigentlich kein HTML. Es ist bekannt als JSX, okay? Also Ja Script XML-Syntax, weil Sie in HTML sehen können, wenn Sie einen Klassennamen schreiben möchten, haben Sie hier ein anderes Attribut. Du wirst den Klassennamen hier nicht verwenden, okay? Also statt des Klassennamens werden Sie die Klasse in HTML schreiben. Okay? Aber in Jx werden Sie den Klassennamen verwenden. Okay. Und die Syntax ist HTML sehr ähnlich. Wenn Sie also HTML kennen, wäre das ziemlich einfach. Okay. Und es gibt eine Regel , von der Sie wissen müssen, dass sie hier ist, wenn Sie das Interface zurückgeben. Sie konstruieren also eine Schnittstelle und geben sie von der Komponente zurück Wenn Sie dies zurückgeben, müssen Sie also sicherstellen, dass das gesamte UI-Element unter einem einzigen Element zusammengefasst ist Sie können also nur ein einzelnes Element zurückgeben und nicht mehrere. Ich werde dir das zeigen. Also, wenn ich das entferne Okay, du kannst sehen, dass ich anfange, eine Fehlermeldung zu bekommen. Sie können sehen, dass JSX-Ausdrücke ein übergeordnetes Element haben müssen. Und wenn ich versuche, das zu speichern und hierher zu gehen, können Sie hier alle möglichen Fehler sehen. Du kannst es sehen. Und es gibt dir auch die Fehlermeldung. Okay, es heißt, es muss in umschließende Tags verpackt sein und du brauchst ein Fragment hier drüben. Okay. Also das ist die Erklärung, die es gibt. Ich mache einfach Control S und bringe das TIF zurück und speichere es, um es wieder in seine ursprüngliche Arbeitsform zu versetzen. Ordnung. Also ich hoffe , Sie haben das verstanden und ich hoffe, Sie haben es geschafft. Okay? Sie können hier sogar Ihre Einführung hinzufügen. Wie, Hey, ich bin, wie auch immer du heißt, du kannst das hinzufügen. Sie können die Datei speichern und die Ausgabe wird auf der Webseite angezeigt. Ordnung? Also ich hoffe, du konntest mir folgen, und ich hoffe, das war nützlich 9. Einführung in Vite und Einrichten: Ich bin also hier auf meinem Terminal, okay, und ich habe zu meinem Ordner navigiert , in dem ich die React-Projekte erstelle Wenn ich also LS sage, werde ich sehen, dass hier bereits ein React-Projekt erstellt wurde. Okay? Also, was ich hier machen möchte, ist, über Weizen zu sprechen. Also, was ist Essen? WT ist also eine weitere Möglichkeit, React-Projekte zu erstellen, und WT ist eigentlich ein modernes Build-Tool, das eine schnelle und effiziente Entwicklungserfahrung für moderne Webanwendungen bietet eine schnelle und effiziente Entwicklungserfahrung , okay? Und es beschleunigt die Entwicklungszeit für Entwickler, und zwar dadurch, dass Dateien nur verarbeitet werden , wenn sie tatsächlich importiert werden, und das ist viel schneller. Es hat auch einen viel schnelleren Entwicklungsserver, okay? Wenn Sie heute also React-Entwicklung betreiben, wird Weizen häufig verwendet. Okay? Und wenn du zum Browser gehst hier so nach Weizen suchst, okay, du wirst sehen, dass es ein lokaler Entwicklungsserver ist. Okay? Es ist ein Frontend-Tool. Und wenn Sie hier auf die Website gehen, werden Sie sehen, dass es sich um ein Biltol for Okay, und es ist unglaublich schnell, das Frontend-Build-Tool, das die nächste Generation von Webanwendungen Und du kannst es durchziehen. Sie können sehen, wie der Server blitzschnell startet, HMR. Es unterstützt viele Dinge: Ja, Skript, Typoskript. Okay. Und ja, Sie können auf der Website mehr darüber erfahren, was Sie damit tun können. Ordnung. Um mehr zu erfahren, können Sie auch hier auf Erste Schritte klicken. Okay. Und Sie können mehr über Weizen erfahren. Sie können sehen, wie es ausgesprochen wird. Es wird als Wheat Okay ausgesprochen. Und Sie können sehen, das sind die Vorlagen, die es unterstützt, okay, Vanilla, Vanilla TypeScript, View, es unterstützt All das unterstützt es. Alles klar? Wenn du also ein bisschen nach unten scrollst, siehst du auch die Befehle, die NPM, Garn, PNPM und B verwenden . Aber wir verwenden NPN, also können wir diesen Befehl verwenden Ich werde Ihnen also zeigen, wie Sie mit VT ein Projekt erstellen können Okay. Sie können sogar ein Projekt mit der Create React-App erstellen, aber ich würde sagen, es ist eine modernere Methode, React-Projekte zu erstellen und an der Webentwicklung zu arbeiten. Alles klar? Das macht heutzutage jeder. Okay, Sie sollten also wissen, was IT ist und wie Sie es nutzen können. Sie können also diesen Befehl NPM create Wet latest sehen. Okay? Also kann ich das kopieren. Okay? Es gibt noch eine Version. Von diesem speziellen Befehl. Sobald Sie den Befehl ausgeführt haben, werden Sie gefragt, welche Art von Projekt Sie erstellen möchten. Wie lautet der Name des Projekts? Ich sage dir, welche Vorlage du verwenden möchtest. Okay. Also all das, es wird Sie dazu auffordern und Sie können die Optionen auswählen. Aber wenn Sie die Optionen vorher mit diesem Befehl selbst angeben möchten vorher mit diesem Befehl , ohne die Eingabeaufforderung zu durchlaufen. Sie können also direkt NTM create Wet latest sagen , den Projektnamen angeben und auch die Vorlage Es wurde also angegeben, dass die Vorlage View ist. Sie können die Vorlage als React angeben , wenn Sie hier an React arbeiten. Okay. Oder wenn Sie an React mit TypeScript-Unterstützung arbeiten, können Sie React Hyphen Ts sagen Je nachdem, was Sie tun möchten oder welche Art von Projekt Sie erstellen, können Sie die Vorlage angeben Okay. Aber ich werde mit diesem Ansatz weitermachen. Okay. Ich zeige dir alle Optionen , nach denen es uns fragt. Okay? jetzt sicher, dass Sie sich in dem Ordner befinden, dem es sich nicht um eine React-Anwendung handelt. Okay? Also ich bin hier in diesem Ordner , in dem ich alle React-Anwendungen erstelle, oder? Das ist also eine React-Anwendung, die ich habe. Jetzt führe ich diesen Befehl aus. Okay? Ups, nicht dieser Okay? Der, den ich kopiert habe, sollte entweder dieser sein. Okay. Ich füge es hier ein. Also erstellt NPM spätestens Wheat. Sobald Sie die Eingabetaste drücken, werden Sie darüber informiert, dass, Hey, die folgenden Pakete installiert werden müssen Okay, um fortzufahren? Ich sage ja. Okay. Und es wird alle Pakete installieren und mich fragen, wie mein Projektname sein soll. Okay? Also kann ich meinen Projektnamen eingeben. Ich kann eintreten. Ich kann sagen, reagieren oder 1 Sekunde. Ich habe also meinen React-Tab, oder? Ich kann also sehen, ob mein React-Tap reagiert oder es sollte nicht mein React-Tap sein, also kann ich sagen, was reagiert, so etwas in der Art. Okay? Und ich drücke einfach die Eingabetaste und Sie können sehen, dass es mich nach dem Framework fragt. Also welches Framework möchte ich hier wählen? Okay? Willst du Vanilla, willst du React nutzen. Da wir also React verwenden, wähle ich hier React aus. Es fragt mich, ob ich die TypeScript-Unterstützung oder etwas Ähnliches haben möchte Also wähle ich hier einfach JavaScript aus. Okay. Und ja, wir sind fertig, Sie können sehen, wie schnell das ging. Okay? Du kannst es sehen. Die folgenden Pakete müssen nicht installiert werden. Okay, tut mir leid, ich muss die folgenden Pakete installieren. Und es stellte mir ein paar Fragen, auf die ich geantwortet hatte. Sie können diese Aufforderung auch überspringen, wie gesagt, indem Sie sie dem Befehl hinzufügen. Sie können den Projektnamen angeben, und Sie können hier Dinge wie Vorlage und alles andere angeben . Okay? Das ist auch machbar. Alles klar? Aber ich entschied mich für den interaktiven Weg und dann wurde dieses Projekt hier drüben erstellt, okay? Und es sagt dir, du sollst eine CD machen, was reagiert. Und wenn Sie NPM installieren, können Sie NPM ausführen und Tf ausführen Lassen Sie uns also diese Befehle ausführen und sehen, was passiert Ich werde bei React auf CD gehen. Ich sage NPM install, wodurch alle Abhängigkeiten installiert werden , die mein Projekt benötigt, und ich kopiere diesen NPM-Run Def hierher Okay, ja, es installiert alles . Es wird ein paar Sekunden dauern. Es ist in 10 Sekunden erledigt, und ich sage NPM run def Und jetzt können Sie sehen, dass der Server auf dem lokalen Host 5173 gestartet wurde der Server auf dem lokalen Host Das ist also ein Standardport hier drüben. Okay, das wird verwendet, um diese Projekte auszuführen, okay? Und wenn Sie dazu übergehen, okay, lassen Sie mich das neu einstellen, damit Sie sehen können, dass ich stark herangezoomt wurde Okay? Sie können also sehen, dass dies die Standardseite ist. Es heißt also Wt plus React, und Sie können hier einen Zähler sehen, auf den Sie klicken und die Anzahl erhöhen können . Okay? Und Sie haben die App Dot Jx, die Sie erkunden und bearbeiten können , um diese spezielle Benutzeroberfläche hier zu aktualisieren Okay? Und Sie können auf IT- und React-Logos klicken , um mehr zu erfahren. Wenn du also auf React klickst, wirst du zur React-Seite weitergeleitet. Wenn Sie auf das Wet-Logo klicken, werden Sie zur Wet-Seite weitergeleitet. In Ordnung. Also ich hoffe, Sie konnten einem folgen und ich hoffe, das war nützlich. 10. Umstieg auf Visual Studio Code und Ports ändern: Jetzt werde ich diese Heat-App laufen lassen, aber ich führe sie tatsächlich von meinem nativen Terminal aus. Ich würde also zu Visual Studio Code wechseln und einfach das Heat-Projekt in Visual Studio-Code öffnen , damit ich daran arbeiten kann. Also gehe ich zu File. Ich sage Ordner öffnen, okay. Und hier wähle ich Eat React. Okay? Also Wheat React ist der Name meines Projekts, richtig? Ich werde auch das Terminal öffnen. Hier. Okay. Jetzt kann ich den Server von hier aus betreiben. Ich kann den Server also tatsächlich betreiben, aber hier werden Sie feststellen, dass ein Server auf dem Port 5173 läuft Okay. Also werde ich diesen Server einfach beenden. Okay? Also haben wir NPM auf Run Deep gesetzt und es läuft auf 5173, dem Standardport für Weizenprojekte Nehmen wir nun an, ich möchte diesen Port auf Loose 3.000 anpassen diesen Port auf Loose Okay? Also was ich tun kann ist, dass ich herkomme. Äh, Sie können die Projektstruktur sehen. Okay? Es ist fast ähnlich wie die React-Anwendung hier drüben. Du kannst sehen. Okay? Was wir essen. Das ist die Konfigurationsdatei, die wir haben. Okay. Also, was ich tun werde, ist, in diese Konfiguration zu kommen. Okay. Dadurch kann ich eine benutzerdefinierte Konfiguration für Wheat vornehmen. Ich öffne das und hier drüben kannst du das sehen. Okay, das ist die Konfiguration. Also habe ich Plug-ins von React. Jetzt sage ich hier unter diesem Punkt Server. Okay, und ich sage Doppelpunkt und füge ein lockiges Lob hinzu. Ich füge ein Komma Ich werde das mit einem Komma beenden. Und hier sage ich Port, Colin, ich sage 3.000 und ich beende das mit einem Okay? Das ist erledigt. Ich speichere diese Datei hier drüben, o und wir können sagen, NPM, run deaf now Okay? Wenn Sie das tun, werden Sie sehen, dass der Server auf dem lokalen Host 3.000 läuft. Ups, ich habe den Server versehentlich beendet, aber er läuft auf 3.000 Wenn Sie jetzt 5173 aktualisieren, werden Sie hier nichts finden. Hier auf 3.000, wenn du das aktualisierst, ist das unsere alte App , die wir erstellt haben Ihr werdet sehen, dass t plus React hier drüben läuft. Okay? Also ja, du hast einen Zähler. Sie können sehen, dass alles gleich ist. Okay. So können Sie den Port ändern, indem Sie eine einfache Konfiguration in et config chas hinzufügen, und Sie können es so machen, wie ich es Ihnen gezeigt habe Okay? Hier sehen Sie nun alle Ordner und alles, was erstellt wurde. Ich sollte sagen, denen ähneln, die wir in dem Projekt gesehen haben , das wir mit der Create React-App generiert haben. Du wirst den Hauptmittelpunkt SX sehen. Okay? oder dem früheren Projekt, das wir hatten, Wenn Sie also in der React-Datei oder dem früheren Projekt, das wir hatten, ein Projekt mit Create React App erstellen, werden Sie sehen, dass es Mean Dot JS und nicht JSX heißt Hier hast du App Dot JSX und nicht App Dot Gs. Okay? Also hier wird alles in der GSX-Erweiterung definiert Und der Grund dafür ist, dass es JSX-Code hat. Okay? Also dieser Code hier, den Sie sehen, ist kein HTML. Okay, lassen Sie mich das minimieren. Das ist also kein HTML. In der Tat ist das tatsächlich JSX-Code. Okay, was HTML ähnlich ist. Fast ähnlich würde ich sagen, wenn Sie HTML kennen, können Sie diesen Code tatsächlich lesen. Aber es gibt kleine Unterschiede wie den Klassennamen. So definierst du Klassen. In HTML werden Sie also eine Klasse wie diese haben, richtig, mit diesem Klassen-Tag. Aber hier hast du einen Klassennamen, okay? Und du kannst sehen, alles sieht ähnlich aus wie HTML. Okay? Also das ist das JavaScript-XML, JSX, okay? Und Sie finden die Dateinamen als jsx dot JSX hier. Okay? Also das ist etwas , das du wissen musst, oder? Und bei jedem RRS ist alles ähnlich. Index oder TML haben Sie außerhalb des öffentlichen Ordners hier drüben Du kannst es sehen. Sie haben das Paket Dot JCN, das im Grunde genommen zum Paketieren oder nicht zum Paketieren verwendet wird. Ich sollte sagen, es wird hauptsächlich verwendet, um Abhängigkeiten für Ihr Projekt hier zu verwalten , um Abhängigkeiten für Ihr Projekt hier Und alle Abhängigkeiten , die Sie hinzufügen werden in Knotenmodulen bereitgestellt, die wir nicht anfassen werden Ihr öffentlicher Ordner , der eine SVG-Datei enthält. Okay? Also es ist eine ähnliche Struktur, fast dieselbe, würde ich sagen. Und wenn Sie mit dem Create React-App-Tool erstellte Projekt verstehen, werden Sie es auch verstehen. Ordnung. Also ja, ich hoffe, das ist nützlich und ich hoffe, du konntest mir folgen. 11. Einführung in JSX-Syntax und Regeln: Jetzt ist es an der Zeit, dass wir anfangen, über JSX zu sprechen. Nun, was ist JSX? Also habe ich einige Kommentare zu dieser App oder JSX-Datei hinzugefügt . In Ordnung. Sie können also hier sehen, dass JSX eine Syntaxerweiterung für JavaScript ist , die wie HTML aussieht Okay? Und mit Hilfe von JSX können Sie HTML-ähnlichen Code in JavaScript schreiben HTML-ähnlichen Code in JavaScript Kannst du also HTML-Code in JavaScript schreiben? Nein, aber mit Hilfe von JSX können Sie schreiben, und diese Reaktion wandelt dies in JavaScript-Objekte um. Okay. Also das ist es, was GSSIx ist, und deshalb wird es verwendet, richtig Also schauen wir uns hier ein paar Beispiele an, okay? Sie können sehen, dass bereits Code in Gasix geschrieben wurde, als wir das Projekt erstellt haben, und das ist es, was gerendert wird, okay, mit dessen Hilfe Okay? Aber wir werden es ausräumen und auf viel einfachere Beispiele zurückkommen. Okay. Aber eins sollten Sie sich merken: Daran sollten Sie sich erinnern. Es sieht aus wie HTML, ist aber kein HTML. Okay, wenn Sie HTML kennen, können Sie es leicht verstehen und lesen und schreiben, tut mir leid, nicht Ja Script, GSX, und es ermöglicht Ihnen im Grunde, Ihnen beim Erstellen von Reaktionskomponenten zu helfen, und Sie können direkt in Ihrem Code sehen, wie Ihre Benutzeroberfläche aussehen wird , weil sie HTML-ähnlich ist. Okay? Also, was ich tun werde, ist, Sie können hier sehen, dass es ein paar Variablen gibt und alles wurde erstellt, also werde ich das einfach los , all das. Okay. Ich werde das alles einfach loswerden. Okay. Und ich werde das speichern. Also gibt es jetzt buchstäblich nichts auf der Seite. Okay. Es ist völlig leer, wie Sie sehen können. Okay. Ich werde diese Importe auch loswerden, okay? Ich behalte einfach die CSS-Datei. Wenn du zur CSS-Datei gehst. Okay, es ist ziemlich ordentliches CSS, richtig. Also wurde da drüben etwas geschrieben. Okay. Also bleibe ich einfach bei dieser Akte. Wir werden das CSS noch nicht anfassen, oder? Aber wir werden anfangen, etwa sechs Codes zu schreiben. Okay? Also, was ich tun würde, ist , hier drüben zu sagen, hier in diesem. Okay? Also hier, nehmen wir an , das ist DIF Okay, also ich werde ein TF-Element haben. Oder es war ein leeres Etikett. Ich kann sagen, er ist weg, nein. Und ich kann sagen, wie ich Welt sagen kann, so etwas in der Art. Und Sie werden sehen, wie Hello World hier als Ausgabe gedruckt wird . Okay? Nun, das ist JavaScript. Dieses ausgefallene Ding ist komplett JavaScript, oder? Und innerhalb von JavaScript darfst du HTML-ähnlichen Code schreiben, und das sieht aus wie HTML, aber in Wirklichkeit ist es JSX Okay? Sie können diese Div-Tags sogar überspringen, wenn Sie möchten. Ich werde erklären, wie wichtig es ist, ein DIV zu haben, wie alles, was in einem TIF verpackt ist. Aber Sie können sehen, dass das auch absolut einwandfrei funktioniert. Okay? Also, was du sogar tun kannst, ist, das hier rüber zu nehmen, okay? Ich kann hier Const Ligment sagen und ich kann das hier drüben zuordnen, etwa so Okay. Also hier drüben kannst du einfach sagen, okay, Klagen innerhalb des Paares oder im Gegenzug Okay? Also, wenn du das speicherst und wenn du kommst , okay, du siehst keine Ausgabe. Der Grund, warum du keine Ausgabe siehst, ist, dass das in ein TIF-Format verpackt werden muss, okay? Also schneide ich das aus und füge es hier ein. Okay? Sowas in der Art. Okay. Und ich werde das speichern. Und wenn du herkommst, wirst du Hello World als Ausgabe sehen. Okay? Also ja, das ist eine andere Art, dasselbe zu rendern. Sie können das sogar ausschneiden und hier einfügen , wie wir es schon früh getan haben. Okay? Aber ja, es gibt einige Regeln, wenn Sie GSX verwenden, es gibt einige Regeln, über die ich sprechen möchte . In Ordnung. Nun, die erste Regel sind die GSX-Elemente. Sie geben hier also JSX-Elemente als Teil der Rückgabeanweisung zurück Okay? Schauen Sie sich also die Struktur dieses Codes an, okay? Sie haben diese Funktion. Das ist die Rückgabe der JSX-Elemente. Was auch immer Sie hier zurückgeben , wird auf der Schnittstelle gerendert, oder? Wenn Sie also von hier aus nichts zurückgeben, wenn ich das Element nicht zurückgebe, wird es nicht auf die Schnittstelle gerendert, Sie können sehen, oder? Wenn ich die Datei speichere, wird sie nicht gerendert. Wenn ich die Datei erneut speichere, wird sie gerendert. Was auch immer Sie hier zurückgeben wird auf der Oberfläche gerendert, und das ist es, was Sie hier exportieren. Und der Grund, warum es gerendert wird, ist , dass Sie in Main Dot Jx die App hier als Teil des Stammelements rendern hier als Teil des Stammelements Und von hier kommt die App-App rein, es ist diese Komponente Okay. Was auch immer Sie rendern, welche Elemente Sie auch immer hier als Teil der Rückgabeanweisung zurückgeben, müssen in einem einzigen übergeordneten Element enthalten sein . Okay? Also lass mich das besser erklären. Okay? Also, was ich tun werde, ist, das für eine Weile zu kommentieren, okay? Und ich werde Hello World hier haben, okay? Direkt, anstatt dieses Element zu haben. Okay? Nehmen wir an, ich habe Hello World Simple. Okay? Jetzt, ohne dieses übergeordnete Element, kann ich Hello World haben. Es gibt keine Probleme als solche. Du kannst sehen. Wenn ich das habe, wird es gut funktionieren. Okay? Aber sobald ich hier ein weiteres Element hinzufüge, sagen wir, ich sage hier hoch. Okay. Zuallererst siehst du, dass ich eine Fehlermeldung erhalte. Okay, Sie können also sehen, dass JSix-Ausdrücke ein übergeordnetes Element haben müssen Und wenn ich hierher komme, kannst du den Fehler hier sehen. Sie können sehen, dass es mit einem abschließenden Etikett versehen sein muss und Sie können sehen, dass es nicht funktioniert, oder? Es muss also ein übergeordnetes Element geben. Und wenn Sie mehrere Elemente zurückgeben, die Sie zurückgeben, mehrere J-Sechs-Elemente, können Sie sie in ein einziges übergeordnetes Element packen , der Fehler verschwindet und Sie sehen die Ausgabe hier. Sie sehen also Hello World und dann High, was im P-Tag steht. Ordnung. Also hoffe ich, dass das Sinn macht. Das ist Regel Nummer eins, okay? JSX-Elemente müssen in ein einzelnes übergeordnetes Element eingeschlossen werden. Sie werden viel mit JSX arbeiten, wenn Sie React-Entwicklung betreiben und sich an diese Regel erinnern, denn die Leute fragen sich immer warum Sie alles in einem einzigen Tipp zusammenfassen müssen und all Okay? Also das ist eine der Regeln. Okay? Eine andere Regel ist in HTML, man benutzt Klasse, richtig, um einem bestimmten Element einen Klassennamen zuzuweisen , richtig? Aber bei JSX müssen Sie den Klassennamen verwenden . Und keine Klasse Also wird Klassenname anstelle von Klasse verwendet, und Klasse wird nicht verwendet, weil Klasse in Ja Script natürlich ein Reservewort ist . Okay, also verwenden wir hier den Klassennamen. Okay? Also das ist etwas , das du im Hinterkopf behalten musst. Wenn Sie also Klassennamen hinzufügen möchten , damit sie richtig formatiert werden können, müssen Sie den Klassennamen verwenden Okay? Und erinnere dich an die Syntax hier drüben. Ups. Denken Sie also an die Syntax, es muss der Klassenname sein Also N, du kannst den Fall Camel hier in Aktion sehen , okay? Also das ist eine weitere Regel, dann gibt es eine Regel über selbstschließende Tags Okay? Nun wird es Tags geben , die keinerlei untergeordnete Elemente benötigen, zum Beispiel Image-Tags. Okay, sie müssen also von selbst geschlossen sein. Okay? Zum Beispiel brauche ich Reifen Ich kann also sagen, dass ich ein solches Bild verwenden Ich kann SRC und alles hier hinzufügen. Okay? Aber das Etikett muss ein selbstschließendes Etikett sein. Es schließt sich von selbst, oder? Das ist also etwas, das Sie im Hinterkopf behalten müssen. Okay. Also das sind einige der Regeln für GSX, okay Aber denken Sie daran, die wichtigsten Punkte dieses speziellen Videos sind, dass JSX kein HTML ist Okay, es sieht sehr, sehr ähnlich aus, ist aber kein TML. Sie können JavaScript auch in JSX verwenden , indem Sie es in geschweifte Klammern einbetten Okay, hier drüben, so etwas. Sie können hier sieben plus sechs plus sieben sagen, so etwas in der Art, und Sie werden 13 als A-Ausgang sehen. Sie können also JavaScript-Code in ein einzelnes Urbass-Paar einbetten Das ist etwas, das getan werden kann. Okay? Und JSX-Elemente müssen in ein einziges übergeordnetes Element wie DV hier eingeschlossen werden ein einziges übergeordnetes Element wie DV hier Okay? Also ja, hier geht es um J Six, um die Einführung in JSix Ich hoffe, das ist klar und ich hoffe, dass sich das als nützlich herausstellt 12. Expressions und Attribute mit JSX: Fangen wir also an, mit Jax über Ausdrücke und Attribute zu sprechen mit Jax über Ausdrücke und Attribute Also habe ich hier ein paar Kommentare. Okay, du kannst dir den ersten ansehen. Der erste Punkt besagt, dass Sie jeden gültigen JavaScript-Ausdruck in die Curly Prese in JA Six einbetten können jeden gültigen JavaScript-Ausdruck , okay? Und JSix-Attribute verwenden die Camel-Groß-/Kleinschreibung. Das sind also die beiden Punkte , die wir behandeln werden. Okay? Also, was ich tun werde, ist , hier ein bisschen aufzuräumen. Ich werde nur einen einzigen Tiff hier haben. Okay. Also, erster Punkt C, du kannst einen beliebigen gültigen JavaScript-Ausdruck in Curly Pres haben oder einbetten , okay? Und das ist in JSX. Nun, das heißt hier, wenn ich eine Ausgabe von zwei Zahlen drucken möchte, okay, zehn plus zwei, kann ich das absolut tun, weil das ein gültiger Java-Ausdruck ist, okay? Das ist völlig erlaubt. Anstatt nur die Summe hier drüben auszudrucken , kann ich H auf ein Etikett setzen, so etwas in der Art. Okay, 1 Sekunde. Also nehme ich jeden einzelnen. Ich sage Hallo. Okay, und ich werde hier drüben einen Namen haben, etwa diesen. Okay. Und hier drüben kann ich Const, Name sagen und ich kann ALS sagen, so etwas Okay. Also, du kannst sehen, dass wir Alice begrüßen, okay? Und hier haben wir eine JA-Script-Variable oder JA-Konstante, ich kann sagen, namens Name erstellt . Und dann verwende ich das innerhalb der JSX-Syntax. Okay? Also, das ist ein Ausdruck, der ausgewertet wird, okay? Das Ergebnis wird also Hello Alice sein, und das ist es, was wir als Ausgabe sehen. Okay? Nun, eine Sache, die ich hier erwähnen möchte, ist, dass ich ein paar Mal erwähnt habe , dass G six kein HTML ist. Okay. Dann ist die Frage, wie wird es in den Browser gerendert? Es wird also von React in HTML umgewandelt und im Browser angezeigt. So funktioniert das Rendern für JSX. Jetzt geht es um Ausdrücke. Okay. Nehmen wir ein Beispiel für die sechs J-Attribute. Okay? Nun, wann immer Sie Elemente verwenden, ist es natürlich offensichtlich, dass Sie auch Attribute verwenden werden, oder? Ein solches Attribut ist zum Beispiel hier drüben, ein solches Attribut wäre Klassenname, okay? Oder wenn du H ein Tag einer Klasse zuweisen möchtest, würdest du hier den Klassennamen hinzufügen. So weisen Sie einem Element in JSX eine Klasse zu, okay? Und das kannst du hier als Begrüßung bezeichnen. Okay. Okay, denk dran, das ist Camel Case, okay? Und du kannst hier keinen Unterricht haben, okay, weil das HTML ist, oder? Und das ist JSX. Ordnung. Also behalte das im Hinterkopf, okay? Du kannst sogar Inline haben. Sie können sogar Attribute verwenden, mit denen Sie das Inline-Styling verwenden können. Okay? Lassen Sie mich Ihnen auch dafür ein Beispiel geben. Okay? Nehmen wir an, ich hätte gerne einen Button hier drüben, okay? Und ich sage, klicken Sie auf M, so etwas Ähnliches hier drüben. Okay. Nehmen wir an, ich hätte gerne Stil hier drüben. Okay, also ich sage Stil. Okay. Und ich füge Double Curly Pears hinzu und ich werde sehen. Also, ohne Stil, lass uns sehen, wie dieser Button reinkommt Also kommt es auf diese Weise. Du kannst es sehen, klick mich an. Okay. Und hier kann ich jetzt stattdessen die Hintergrundfarbe sehen. Okay. Hintergrundfarbe. Sie können das hier sehen und ich gebe, sagen wir, Grün zu. Okay. Sie können jede Farbe zuweisen, die Sie möchten. Okay. Und ich werde Farbe wählen, die der von Weiß entspricht. Oder hier. Etwas wie das hier. Okay. Ich werde das speichern. Und wenn ich herkomme, kannst du es sehen, klick mich an. Okay. Sie können sehen, wie das gerendert wurde. Okay. Lassen Sie mich diese beiden separaten Zeilen verschieben , sodass sie für alle sichtbar sind. Okay. In Ordnung. Damit du sehen kannst. Ich verwende hier Inline-Styles anstelle eines externen Stylings. Okay? Und ich kann das sogar entfernen, diesen Text loswerden. Okay? Ich kann das als Ausdruck hinzufügen. Ich kann also const button, label, so etwas sagen , und ich kann hier in einzelnen Codes als Zeichenfolge auf M klicken hier in einzelnen Codes als Zeichenfolge Oder Sie können Doppelcodes verwenden . Das wäre besser. Okay. Und hier können Sie sich das Label als Ausdruck zuweisen lassen, und Sie werden dieselbe Ausgabe sehen. Sie können sehen. Okay? Also so kannst du Attribute nutzen , okay? Sie können sogar einen weiteren Knopf haben. Okay, lass mich einen Knopf holen, ups. Ich kopiere diesen Button. Ich füge es hier hinzu. Okay. Und hier drüben kannst du sagen, gib mir Bescheid, oder das ist der Text. Okay. Und hier drüben, kannst du sagen. Also hier, was ich jetzt mache, ist ein On-Click-Event zuzuweisen. Okay? Also habe ich einen Button erstellt. Sie können eine Warnung für mich sehen. Okay. Aber nehmen wir an, ich möchte hier ein On-Click-Event haben. Okay? Jetzt ist ein Klick in HTML ein Klick wie dieser, oder? Aber in J 6 folgt es, wie ich schon sagte, der Camel-Kaye-Syntax, oder Also C wird hier die Hauptstadt sein. Behalte das einfach im Hinterkopf. Okay, C wird hier groß sein, und dann können Sie innerhalb der beiden geschweiften Klammern diese Art von Funktion hier erstellen lassen, und Sie erhalten einen Alarm, und ich kann sagen, Backticks, klicken, so etwas Okay? Wenn ich das speichere, lass uns sehen, wie das funktioniert. Okay. Sie können sehen, wie auf die Schaltfläche geklickt wurde Das funktioniert absolut einwandfrei. Okay? Also das sind kleine Dinge über JA Six, über die sich die Leute immer wundern. Wenn Sie also ein Anfänger sind, wenn Sie das überspringen und direkt zum React-Code gehen und wenn Sie einen Code sehen, der so geschrieben ist, werden Sie sich zunächst fragen, warum das Großbuchstaben sind. Okay? Also musst du verstehen, wie es in JA Six verwendet wird. Okay? Denken Sie also an diese beiden Dinge Sie können jeden gültigen Jascript-Ausdruck in einen Curly Breeze in JSix-Code einbetten , und JSix-Attribute verwenden die Camel-Key-Syntax Ich hoffe also, dass Sie mir folgen konnten Ich gebe Ihnen hier ein letztes Beispiel für die Anzeige eines Bildes. Okay. Also was ich tun werde, ist IMG-Tag hier drüben zu verwenden. Okay. Und wir zeigen ein Bild an. Wir sagen hier SRC. Okay. Und was ich tun werde, ist, dass wir ein Bild hier brauchen, also sage ich, bitte halten Sie das Bild, so etwas in der Art. Okay. Und ich komme auf diese Website und wir bekommen das Platzhalterbild von 600 mal 400 Das ist also eine Website , die Ihnen jede Art von Platzhalterbild Okay. Also sage ich SRC, das ist der Bildteil Und wenn ich das speichere und hierher komme, um mir die Ausgabe anzusehen, kannst du es sehen Okay. Okay, 600 mal 400 sind super groß. Also ändere ich das einfach auf hundert mal 100. Wenn das hier rüber kommt, kannst du ein Bild von 100 mal 100 sehen. Und das kann sogar in einen Ausdruck umgewandelt werden . Also kann ich das schneiden. Okay, ich kann hierher gehen. Ich kann Consimage-URL sagen, ungefähr so. Ich kann das hier hinzufügen, und ich kann hierher kommen und ich kann Bildpfad hier haben, Bild-URL. So wie es ist. Okay? Ich kann sogar einen Platzhalter hinzufügen Ich kann Alt sehen und das ist ein dynamisches Bild. So wie es ist. Okay. Du kannst sehen. Die Ausgabe hat sich nicht geändert, okay? Es funktioniert absolut einwandfrei. Okay, so können Sie also mit Bildern arbeiten. Sie können diese Deklaration sogar hierher verschieben, mal sehen. Okay. Ups, das kannst du nicht. Das kannst du nicht In Anbetracht dessen muss es hier oben sein, okay? Kurz vor der Rückkehr, okay? Das kann nicht Teil des Schriftlichen sein. Das tut mir leid. Okay. Also ja, das ist J Six, und ich hoffe, das ist dir ziemlich klar und ich hoffe, du fandest das nützlich. 13. Bedingtes Rendering: Ordnung, lassen Sie uns jetzt über bedingtes Rendern und Reagieren sprechen . Jetzt wird bedingtes Rendern verwendet, wenn Sie verschiedene UI-Elemente basierend auf bestimmten Bedingungen rendern möchten verschiedene UI-Elemente basierend auf bestimmten Bedingungen rendern , und in React können Sie bedingtes Rendern auf verschiedene Arten verwenden. Es gibt also mehrere Möglichkeiten, bedingtes Rendern zu implementieren. Okay? Der erste Weg ist die Verwendung von IL-Kontoauszügen. Wenn Sie nun JavaScript kennen, müssen Sie sich der FL-Anweisung bewusst sein. Sie können also die FFL-Anweisung verwenden um bedingtes Rendern durchzuführen Sie können auch den ternären Operator verwenden, und Sie können auch den Operator verwenden Lassen Sie mich Ihnen zeigen, wie es funktioniert. Also hier habe ich diese Funktion, die ein leeres TIF zurückgibt. Es gibt noch nichts zurück. Und wenn du herkommst, wirst du keinerlei Ausgabe sehen. Nehmen wir nun an, ob ich überprüfen möchte , ob ein Benutzer gesperrt ist oder nicht. Und je nachdem, ob der Benutzer gesperrt ist oder nicht, möchte ich eine Nachricht anzeigen, oder? Also was ich tun kann, ist, dass ich hier eine Variable haben kann. Ich kann sagen, es ist gesperrt, nein, und ich kann sagen, wahr. Okay? Also ist der Benutzer eingesperrt. Ich kann sagen, ob es gesperrt ist. Okay. Dann ist das, was du tun kannst , okay, das kommt hier nicht rüber. Okay. Also muss ich es hier hinzufügen. Okay. Also, wenn der Benutzer gesperrt ist, dann kannst du zurückkehren. Okay? Also werde ich diese Rückgabe hier entfernen. Ich kann zurückkehren und ich kann jeden einzelnen hier sehen. Okay? Willkommen zurück. So etwas wie das hier. Ich brauche diese Rückkehr hier nicht. Okay. Also das ist es, was meine Rückkehr wird, okay? Und wenn er nicht eingesperrt ist, okay, dann kann ich zurück sagen, und ich kann H eins sagen und ich kann sagen, bitte logge dich ein. Zum Beispiel, und ich werde das speichern. Okay. Also hier kannst du sehen, willkommen zurück. Und wenn ich die Flagge auf Falsch ändere und wenn ich speichere, wirst du sehen, bitte logge dich ein. Also abhängig von der Bedingung, also steuert diese Variable die Bedingung. Abhängig von dieser Variablen geben Sie den Wert ein, den diese Variable hat, ob er wahr oder falsch ist , Sie rendern tatsächlich unterschiedliche Nachrichten auf der Schnittstelle. Okay? Und so funktioniert bedingtes Rendern. Sie können sehen, ob wir zwei Rückmeldungen verwenden , was absolut in Ordnung ist. Ich habe sogar die runden Klammern übersprungen. Okay. Also diese runden Klammern werden übersprungen Du kannst es hinzufügen, wenn du willst, aber ich wollte es mir hier nur genauer ansehen. Okay? Etwas wie das hier. Es ist absolut okay. Okay. Ich werde einfach diese runden Klammern loswerden. So funktioniert bedingtes Rendern mit der if-Anweisung. Okay. Ich hoffe, das macht Sinn. Jetzt können Sie das Ganze auch so umwandeln , dass Sie einen Turnary-Operator verwenden Okay? Also, was ich tun würde, ist den Kommentar hier drüben hinzuzufügen. Okay. Ich wandle das einfach in einen Kommentar um. Und jetzt werde ich den Toner-Operator benutzen. Okay? Also was ich tun kann, ist , hier Const zu sagen Okay, ich kann Aliment sagen. Okay. Und ich kann jeden einzelnen sehen. Okay. Nun, wenn dem so ist, werde ich das als Ausdruck haben. Okay. Nun, der Ausdruck sagt, wenn er eingesperrt ist, okay, dann bin ich willkommen. Zurück. Okay, so etwas in der Art, oder ich sage: Was ist die Botschaft? Bitte logge dich ein. Also nehme ich das hier drüben. Okay. Jetzt kann ich T zurückgeben, also ich kann hier zurückkehren und ich kann einfach H zurückgeben oder ich kann einfach das Element hier zurückgeben , etwa so. Und ich kann das speichern. Okay. Ups, das wird also nicht funktionieren Ich muss es in ein TIF einwickeln. Okay. Also das sollte dir die Ausgabe geben. Okay, du kannst sehen, bitte logge dich und ob ich das hier auf true ändere. Hoppla. Stimmt hier drüben. In diesem Fall siehst du dann Willkommen zurück. Okay? Also verwenden wir den ternären Operator, okay? Ich werde das auf neue Zeilen bringen, damit es für alle sichtbar ist Du kannst sehen, wie das benutzt wird, okay? Das konstante Element ist gleich H, wenn man angemeldet ist. Okay? Also hier verwenden wir diesen Ausdruck ist gesperrt. Willkommen zurück, bitte melden Sie sich an und ich schließe das H-One-Tag. Und auf dieser Grundlage geben wir dieses Element hier zurück. Okay, hier verwenden wir also den ternären Operator, im Wesentlichen, um bedingtes Rendern durchzuführen , würde ich sagen Okay? Also ich hoffe, das ergibt Sinn, okay? Lassen Sie mich Ihnen noch ein Beispiel geben. Bei diesem Beispiel handelt es sich bedingtes Rendern mit einem Operator. Okay, was ist jetzt Operator? Benutzt und zweimal? Okay, Sie können das auch verwenden, im Grunde genommen, um ein Element nur dann zu rendern , wenn eine Bedingung wahr ist. Richtig? Lassen Sie mich Ihnen auch dafür ein Beispiel geben. Okay? Also sagen wir mal, was ich tun kann, ist direkt oben geschrieben, ich kann konstante Nachrichten haben Nehmen wir an, ich führe eine Liste von Nachrichten, okay? Nehmen wir an, es ist eine Chat-Anwendung. Nun, wenn es eine beliebige Anzahl von hundert Nachrichten gibt. Okay, das sind also 100 Nachrichten, sagen wir, okay? Es gibt eine Reihe von hundert Nachrichten. Nun, wenn es hundert Nachrichten gibt, möchte ich dem Benutzer eine Benachrichtigung zeigen, dass, Hey, du hast hier Xhundert Nachrichten . Okay? Wie würde ich das machen? Also hier würde ich einfach sagen, Nachrichten-Punktlänge. Wenn die Punktlänge der Nachrichten größer als Null ist. Okay, und ich werde es hier haben und operieren. Ich sage H zwei, so etwas in der Art. Okay. Und ich würde sagen, Nachrichten haben Punktlänge. Okay. Hundert Nachrichten, so etwas in der Art. Okay? Wenn ich das speichere, wirst du sehen, dass nichts angezeigt wird. Okay, weil die Länge der Nachrichten Null ist. Nun, wenn ich eine Nachricht hinzufüge. Okay, Sie können sehen, dass Sie 100 Nachrichten haben. Wenn ich noch eine Nachricht hinzufüge, okay? Irgendeine Nachricht, okay, wir schauen uns nur die Anzahl an. Sie können sehen, dass Sie 200 Nachrichten haben. Okay? Wie funktioniert das? Das berücksichtigt also tatsächlich diese Array-Länge und es wird geprüft, ob die Array-Länge größer als Null ist. Lassen Sie mich Ihnen nun erklären, wie diese Zeile funktioniert und wie sie die Botschaft für uns bedingt wiedergibt, okay? Also verwenden wir hier logisches und. Und wenn Sie mit JavaScript vertraut sind, müssen Sie sich des logischen Operators bewusst sein. Wenn also und verwendet wird, wird zuerst die linke Seite ausgewertet. Das ist also der Ausdruck auf der linken Seite. Die Nachricht hat eine Länge von mehr als Null. Okay. Also bewertet es und wenn dieser Ausdruck wahr ist, wertet es die rechte Seite aus und gibt sie zurück Okay? Wenn das stimmt, wird es ausgewertet und die rechte Seite zurückgegeben Und wenn das falsch ist, ist die linke Seite falsch, sie kehrt nicht zur rechten Seite zurück und es kommt quasi zu Kurzschlüssen Und das nennt man Kurzschluss, okay? Wo es die rechte Seite nicht bewertet, und im Grunde gibt es dann hier nichts wieder Okay? Also ja, so funktioniert es hier drüben, okay? Und das wird für bedingtes Rendern verwendet. Und du wirst diese Art von Ausdrücken oft sehen, okay? Also, wenn Sie hier etwas Kondition haben und dann, was auch immer Sie rendern wollen, auf der rechten Seite benutzen . Okay? Also, so wird dieser Kurzschluss hier ausgenutzt, um bedingte Meldungen anzuzeigen Und ich würde sagen, das ist meiner Meinung nach viel prägnanter als Schreiben von FL-Statements und ternären Operatoren Okay? Also kannst du auch diesen ganzen Ausdruck, äh, in etwas Ähnliches umwandeln, okay? Aber der ternäre Operator ist tatsächlich nützlich , wenn Sie auch eine Fehlermeldung haben möchten Okay, Sie haben also zwei Nachrichten. Willkommen zurück und bitte melde dich an, okay? Also hier hast du nur eine Nachricht, okay? Aber hier haben Sie zwei Nachrichten, die wiedergegeben werden , wenn etwas zutrifft. Also eigentlich sind sie beide nicht dasselbe, okay? Aber ja, wenn Sie nur eine Sache anzeigen, okay, dann könnte dies die beste Option sein, die es gibt. Ordnung. Also ja, hier geht es um bedingtes Rendern. Also haben wir uns das bedingte Rendern auf verschiedene Arten angesehen. Zuerst wird FL verwendet. Dann haben wir den ternären Operator verwendet, und dann haben wir es mit Hilfe des logischen Operators und gesehen . In Ordnung. Also ich hoffe, Sie konnten dem folgen, und ich hoffe, das war hilfreich. 14. JSX und Funktionen: Lassen Sie uns jetzt über J Six und Funktionen sprechen. JSix können Sie nun Funktionen dynamisch verwenden, um Elemente oder Komponenten zu generieren und zurückzugeben. Dies könnte nützlich sein, wenn Sie eine Logik in einer Funktion kapseln und in Ihrer Anwendung wiederverwenden möchten eine Logik in einer Funktion kapseln . Lassen Sie mich Ihnen dafür ein Beispiel geben. Nehmen wir an, ich habe diesen Gruß hier drüben , der ein einfacher Gruß ist, hallo, richtig? Nehmen wir an, ich füge einen Namen hinzu und personalisiere ihn, sodass ich Alice sagen kann Hallo, Alice hier drüben. Okay. Nehmen wir an, ich möchte mehrere Benutzer begrüßen, die ihren Namen eingegeben haben, damit ich das duplizieren kann Hallo Alice, hallo Bob, sagen wir mal. Okay. Okay, das wird nicht funktionieren, weil ich laut den Regeln ein Elternteil brauche, oder? Also muss ich das verschieben. Ich schneide das aus und füge es hier ein, etwa so. Okay. Also, das würde funktionieren. Hallo Alice, Hallo Bob. Jetzt gibt es einen besseren Weg, damit umzugehen. Okay? Was ich mache, ist, dass ich die Art und Weise, wie ich Benutzer begrüße, im Wesentlichen in mehreren Blöcken replizieren . Okay? Aber dieses Ding kann auch mit Hilfe von Funktionen generiert werden . In Ordnung. Alles, was ich hier machen kann, ist, Funktion zu sagen. Ups, ich muss die Caps deaktivieren. Ich kann Funktion sagen. Ich kann hier Willkommensnachricht sagen. Okay. Und ich kann hier den Namen als Parameter angeben, o, und ich kann das schneiden, ich brauche das. Und hier kann ich zurück sagen. Ich kann das hier hinzufügen. Anstatt Alice hier drüben sage ich einfach den Namen. Okay? Also generiere ich JSX mit Hilfe dieser Funktion Wie benutze ich es jetzt? Ich kann es mit Hilfe der Ausdruckssyntax verwenden. Ich kann Willkommensnachricht sagen und Alice hier drüben weitergeben. Etwas wie das hier. Okay. Und ich kann es speichern und du wirst Hello Alice, Hello Boop sehen Also ich habe das noch nicht für Pop geändert, okay, aber ich werde Pops Gruß hier loswerden und den Gruß von Bob in den Gruß von Pop umwandeln Okay? Jetzt wirst du Hello Alice, Hello Bob sehen. Ich kann sogar noch einen hinzufügen. Hallo, John. Okay. Du kannst sehen. So können Sie also eine Funktion verwenden, die sechs zurückgibt, und diese Aix kann dann in eine Komponente innerhalb einer Komponente gerendert werden Ordnung. Also ja, es funktioniert so, dass wir hier eine Willkommensnachricht-Funktion haben, einfache Ja-Script-Funktion, die den Namen als Parameter verwendet und eine Begrüßungsnachricht zurückgibt . Das ist eine Begrüßungsnachricht. Und in der App-Komponente können Sie diese Funktion aufrufen und den Namen als Argument übergeben, und Sie können verschiedene Namen eingeben personalisierte Grüße zu rendern. Ich hoffe, das macht Sinn, okay, jetzt kannst du das sogar unter bestimmten Bedingungen machen. Okay? Sie können also bedingt oder Funktionen verwenden, um zu entscheiden, welche JSX-Elemente basierend auf bestimmten Bedingungen gerendert werden sollen Das meine ich also mit bedingtem Rendern. Okay? Lassen Sie mich Ihnen ein Beispiel geben. Nehmen wir an, je nach Tageszeit möchte ich auf Guten Morgen oder Guten Abend setzen. Okay? Also was ich tun kann, ist dass ich hier drüben eine Funktion haben kann. Ich sage Funktion. Okay. Ich sage Begrüßung, ich sage, es ist Morgen. Okay? Also, wenn es Morgen ist, wenn es Morgen ist, okay. Was machen wir dann? Ich gebe jeden zurück. Hier drüben, so etwas. Ich kann sagen, gut. Ups, guten Morgen, so etwas Okay. Und wenn diese Bedingung nicht erfüllt ist, kann ich guten Abend zurückkommen, ungefähr so. Okay. Nun, was ich hier tun kann, ist hier, ich kann Const verwenden, das jetzt der neuen Acht entspricht, ungefähr so Ich kann sagen, dass Const hier drüben trauert, und ich kann sagen, jetzt unterrichtet Also das ist Logik, mit der ich überprüfe, ob es hier Lektion 12 oder mehr als zehn ist, was ich hier mache, was ich tun muss, ist, innerhalb eines Ausdrucks sagen zu können, ich kann grüßen, und ich kann seine Trauer hier drüben weitergeben, so etwas in Trauer hier drüben weitergeben, so etwas Jetzt sehe ich guten Abend , weil es hier Abend ist, okay? Ich habe hier also tatsächlich Zeit, oder? Aber ja, wenn es ein Morgen für dich ist, dann wird diese Logik hier wieder guten Morgen bedeuten. Okay. Also, es nimmt das aktuelle Datum, okay, das aktuelle, und dann bekommt es die Rs. Okay, also wenn RS weniger als 12 ist, bedeutet das, dass es Morgen ist. Wenn nicht, bedeutet das, dass es Abend ist. diesem Fall wird das hier falsch sein In diesem Fall wird das hier falsch sein, und abhängig davon, ob es darum geht, ob der boolesche Wert wahr oder falsch ist, oder ob wir die Begrüßung hier wiedergeben , okay? Also ja, das kann gemacht werden, und Sie können sogar ich möchte Ihnen noch ein Beispiel zeigen, in dem Sie noch ein Beispiel Funktionen haben können, die JSX zurückgeben und auch als Argument an andere Funktionen übergeben werden können als Argument an andere Funktionen übergeben eine komplexere UI-Logik ermöglicht Nehmen wir also an, wir möchten abhängig von einer Bedingung ein Warnfeld anzeigen abhängig von einer Bedingung ein Warnfeld Okay. Was ich tun würde, ist eine weitere Funktion zu erstellen. Okay? Ich sage hier Alarm anzeigen. Okay. Ich werde die Krankheit hier drüben haben und eine Nachricht haben. Nun, dieser Zustand, Hoppla, keine Willkommensnachricht. Es wird eine Nachricht sein Also, diese Bedingung, die ich als Parameter habe, das ist ein boolescher Wert, okay? Also werde ich dafür einen booleschen Check durchführen lassen. Wenn Zustand, dann kehre zurück. Okay. Und ich kann hier den Alarm zurückgeben. Okay? Also ich kann TIF sagen und ich kann hier drüben eine Nachricht hinzufügen, etwa so. Also so. Okay. Und ich kann es sogar stylen oder was auch immer ich will. Okay? Also das kann gemacht werden. In Ordnung. Und andernfalls gebe ich Null zurück, oder? Lassen Sie mich das hier nennen. Also hier, was Sie tun können, ist, Sie können eine Art Ausdruckssyntax haben. Sie können „Warnung anzeigen“ sagen. Stimmt. Okay. Und dann kannst du sagen, dass das wichtig ist, so etwas in der Art. Das könnte deine Botschaft sein. Ich werde das speichern und du siehst, dass es wichtig ist. Das siehst du hier, oder? Hier, was wir tun können ist, innerhalb dieser speziellen Funktion kann ich einen weiteren Funktionsaufruf durchführen. Okay? Also hier rendern wir diese Warnung, wir erstellen diese Warnung innerhalb dieser speziellen Funktion. Okay? Also, was ich stattdessen tun werde ist hier, wo ich funktionieren kann. Okay, ich kann Alert Box sagen, also okay. Und hier kann ich eine Nachricht haben. Okay. Und hier drüben kann ich sagen, zurück und es ist das. Okay. Jetzt kann ich es hier zusätzlich stylen. Ich kann die Warnung etwas komplex machen, weil ich den Code in eine separate Funktion aufgeteilt habe Und hier kann ich einfach diese Alert-Box mit Nachricht aufrufen , und das hat keinen Einfluss auf die Ausgabe hier drüben oder auf die Ausgabe, die ich erhalte Okay. Und wenn du herkommst, wirst du sehen, dass das wichtig ist. Also sehen wir uns das Ergebnis an, okay? Das ist wichtig, und Sie können sehen, wie das reinkommt. Wir haben eine separate Funktion zum Generieren der gestalteten Warnbox Du kannst sagen, okay, das ist nicht wirklich Stil. Wir müssen CSS dafür schreiben, aber du verstehst, was ich hier erkläre. Okay? Ich muss hier auf den Kontoauszügen ein Semikolon hinzufügen. Okay? Also werden alle Rückmeldungen Semikolons haben. Okay, mir wurde klar, dass ich ein paar verpasst habe. Okay. Ich schätze, ja, das sollte gut sein hier drüben. Okay. Also ja, diese spezielle Funktion wird dann von dieser Funktion hier aufgerufen. Wir führen also einen Funktionsaufruf innerhalb eines Funktionsaufrufs und geben den Jx von hier aus abhängig von der Bedingung zurück von hier aus abhängig von der Bedingung Und dann wird diese Bedingung hier wiedergegeben. Okay? Also das ist auch erlaubt, und so würde es funktionieren. Wenn ich das speichere, kannst du sehen, dass die Ausgabe hier drüben ist. Ordnung. Also ich hoffe, das war nützlich und ich hoffe, Sie konnten mitmachen. 15. Kommentare in JSX: Jetzt ist es an der Zeit, dass wir anfangen, über Commons in JSX zu sprechen über Commons in JSX zu Das ist also eine einfache App-Dot-JSX-Datei. Okay? Hier drüben steht JSix-Code Das ist also der JSix-Code , den ich zurückgebe, Sie sehen können, und der Rest der Datei enthält JavaScript-Code Okay? Also, ich sehe diese Ausgabe hier drüben. Es funktioniert gut. Nun, wenn ich Commons hinzufügen will, okay? Nun, hier gibt es zwei Stellen oder es gibt zwei Arten von Code. Einer ist der JSX-Code , der sich hier befindet, und dann haben wir JavaScript-Code , der im Rest der Datei vorhanden ist Im Ja Script-Code können Sie also die regulären Kommentare verwenden , die Sie normalerweise verwenden Das ist also ein einzeiliger Kommentar. Dies ist ein Kommentar, und Sie können den mehrzeiligen Kommentar auch im JavaScript-Code haben den mehrzeiligen Kommentar auch im JavaScript-Code So, das ist ein mehrzeiliger Kommentar, ungefähr so So schreibt man Kommentare in JavaScript, okay? Aber das kannst du nicht tun , wenn es um JA Six geht. also innerhalb von J Six-Code Wenn Sie also innerhalb von J Six-Code versuchen, wird es nicht funktionieren, oder? Also, wie schreibt man hier einen Kommentar? Sie können also Kommentare wie diesen hinzufügen. Also habe ich einfach die Tastenkombination Control und den Schrägstrich verwendet , also wurden diese Tags für mich hinzugefügt Okay? Wenn Sie also Kommentare in Jasix hinzufügen möchten, würden Sie es so machen Okay. Du siehst, das ist ein Kommentar. Okay. Und Sie können einen einzeiligen Kommentar oder je nach Bedarf einen einzeiligen Kommentar oder einen mehrzeiligen Kommentar hinzufügen Okay. Also eigentlich ist das ein einzeiliger Kommentar. Ich kann hier sogar einen mehrzeiligen Kommentar hinzufügen. Okay. Ich kann das sagen. Ich werde sehen, das ist ein einzeiliger Kommentar, und das ist ein mehrzeiliger Kommentar, ich kann sagen, notieren Sie sich das hier, ungefähr so Ich hoffe, das macht Sinn für die Funktionsweise Kommentaren in der GSX-Datei, und ich hoffe, das ist nützlich 16. PROJEKT: Eine Portfolio-Website mit React erstellen: Jetzt ist es an der Zeit, dass wir ein Projekt mit dem, was wir bisher gelernt haben, durchführen ein Projekt mit dem, was und darauf reagieren. Und was werden wir bauen? Wir werden eine einfache Portfolio-Webseite erstellen. Ordnung. Also kannst du dir dieses Portfolio hier ansehen. Das werden wir bauen. So können Sie den Namen und den Slogan sehen. Sie haben Bereiche wie „ Über Projekte“ in Kontakt. Dies ist der A-Bereich, du kannst hier klicken und auch zu „ Über uns“ gehen. Okay. Und hier hast du Projekte. Sie können also auf Projekte und Gute Projekte klicken. Sie haben dieses erste Projekt, eine Beschreibung des Projekts und den Link zum Projekt, Projekt zwei, Projekt drei und so weiter. Und dann haben Sie die Möglichkeit, hier Kontakt aufzunehmen, und dann die FUTA, okay? Ziemlich einfach Okay? einseitige Anwendung, eine einseitige Webanwendung Ich sollte sagen, es ist eine einseitige Anwendung, eine einseitige Webanwendung, in der wir React J verwenden Also genau das werden wir erstellen. Wir werden es wirklich einfach halten, und das Ziel ist es, alles, was wir bisher gelernt haben , zu lernen und in die Erstellung dieser Anwendung einfließen und in die Erstellung zu lassen, sodass wir einige praktische Erfahrungen sammeln können. Lassen Sie uns also anfangen. Also ich bin hier im Visual Studio-Code und habe die App Dot JS geöffnet, okay? Und es druckt einfach eine sehr einfache Nachricht namens Hallo. Ordnung. Also, was ich tun werde, ist, dass wir herkommen werden. Und in der Funktions-App, okay, wir werden einige Variablen erstellen lassen. Okay. Nun, das sind die Variablen, die uns helfen werden, alle Informationen, die wir anzeigen möchten, in der einseitigen Anwendung anzuzeigen anzeigen möchten, in , die wir erstellen, okay? Die erste Variable, die wir haben werden , ist natürlich der Name. Okay, du kannst hier einen Namen deiner Wahl haben. Ich nehme einfach diesen dummen Namen namens John Doe. Du kannst hier einen Beruf ausüben. Okay. Und du kannst Full-Stack-Entwickler sagen. So etwas wie das. Okay. Du kannst hier Projekte haben, so etwas. Und hier werden wir das in einer Art JCN-Format Okay, ich kann Titel sagen. Ups, Titel Colin und ich nehme Projekt eins. Sie können hier jede Art von Projektdetail hinzufügen lassen , okay? Beschreibung hier drüben, ungefähr so, und Sie können die Webanwendung sehen. Mit React und Node Chase gebaut, ungefähr so. Jede Art von Beschreibung, die Sie haben können. Okay. Ich werde auch einen Titel haben. Entschuldigung, kein Titel. Es sollte ein Link hier drüben sein. Der Link, ich behalte ihn als Hash. Okay. Es ist jetzt nicht nötig, einen Link hinzuzufügen, okay? Das denke ich, weil es kein echtes Projekt ist, oder? Also ad comma, und deshalb bekommen wir den Fehler. Ich denke, das ist erledigt, okay? Sie können das für ein weiteres Projekt duplizieren, Aada-Komma, ein weiteres Projekt, Projekt zwei Okay. Und man kann sagen, eine E-Commerce-Plattform. Ups, also habe ich Mist gebaut. Ordnung. Es ist also eine E-Commerce-Plattform. Wir können sagen, dass es sich um eine E-Commerce-Plattform handelt. Mit Gingo gebaut. Du kannst so etwas sagen Okay? Ich werde vorerst nur zwei Projekte haben, okay. Und jetzt können wir herkommen. Okay? Also das ist ein erneutes Hallo. Okay. Ich muss hier nicht Hallo erwidern. Okay. Also was wir tun können ist, dass ich das verschiebe. Okay. Zuallererst für diesen speziellen Tab werde ich für diesen speziellen Tab den Klassennamen als App haben. Und ich mache das, weil ich es später auch stylen möchte. Okay? Jetzt habe ich hier einen Header. Okay. Also das ist ein HTML-Header, den ich hinzufüge. Okay, lass mich hinzufügen. Nachname. Okay. Und das nennt man einen Header, so etwas wie das hier drüben. Okay. Jetzt ist dieser Header im Header. Ich werde hier ein paar Dinge haben. Ich nehme jeden einzelnen, und das wäre ein Name, das würde hier drüben einen Namen wiedergeben. Ich werde einen P-Tag haben. Das würde einen Beruf machen, in etwa so. Und dann kann ich E NAF hier drüben haben. Ich nehme NAF hier drüben. Ich kann sagen, uups, ich kann E-Tag hier sagen, und das kann ungefähr sein und das kann auf HF verweisen und das kann auf Hash hinweisen, über auf HF verweisen und das kann auf Hash hinweisen, 17. Einführung in Komponenten und das Erstellen Ihrer ersten Komponente: Hallo, da. Willkommen. Und jetzt ist es an der Zeit, dass wir darüber sprechen , was Komponenten sind und wie sie in React funktionieren. Also hier, ich bin auf der offiziellen Website von React , also React Dot TEF, und ich nehme an, wir werden diese Website analysieren und dieses verstehen und uns damit vertraut machen Konzept von Komponenten verstehen und uns damit vertraut machen, richtig Beobachten Sie jetzt diese Website, okay? Sie können jede Website beobachten, aber ich habe dieses Beispiel genommen, weil wir lernen, zu reagieren, und das ist die offizielle. Wenn du oben siehst, gibt es hier eine obere Leiste, okay? Du kannst es eine Kopfzeile oder die obere Navigationsleiste oder was auch immer du willst nennen die obere Navigationsleiste oder was auch immer du willst Nun, darin befindet sich das Logo auf der linken Seite, die Version, okay? Sie können die Suchleiste, die Navigationselemente wie die Lernreferenz, Community-Blog und einige weitere Optionen hier sehen. Okay? Du kannst durch die Website scrollen, okay? Wenn du nun die Seite hier änderst, Referenz, Community, Lernen, kannst du sehen, dass diese obere Leiste so bleibt, wie sie ist. Es ändert sich nicht, oder? Es ist auf allen Seiten statisch. Und das Gleiche gilt für die Fußzeile. Hier drüben. Okay? Also, was ich sagen wollte, ist , dass immer wenn Sie irgendeine Art von Webanwendungen oder irgendeine Art von Software erstellen , es einige Komponenten oder Dinge in Ihrer Anwendung geben wird , die identisch sind und wiederverwendet werden können, oder? In der traditionellen Webentwicklung war es früher so, es früher so Sie, wenn Sie eine solche Website erstellen , diese Seite hier erstellen. Sie werden diesen Code oben schreiben lassen, um diese Benutzeroberfläche zu rendern. Wenn Sie die Seite für das Lernen hier, auf dieser Seite, erstellen replizieren Sie erneut diesen Code , der dieses spezielle Ding oben erstellt Okay? Wenn du eine Referenzseite erstellst, baust du das oben wieder auf. Also das ist früher in der traditionellen Webentwicklung passiert , okay? Und wie Sie sich vorstellen können, gab es viele Wiederholungen, oder? Wenn Sie morgen Zeit haben, wenn ich irgendwelche Änderungen an der oberen Navigationsleiste vornehmen muss , möchte ich hier eine weitere Option hinzufügen Also muss ich daran denken, Änderungen an allen Dateien vorzunehmen, egal wo ich diese obere Leiste verwende, oder? Und das war mühsam, nicht einfach, und es war keine gute Praxis, oder? Nun zum Konzept der Wiederverwendbarkeit. Okay? Es gibt also ein Konzept der Wiederverwendbarkeit, was bedeutet, dass Sie Dinge einmal erstellen und sie während des gesamten Lebenszyklus der Anwendung mehrmals wiederverwenden gesamten Lebenszyklus der Anwendung Wiederverwendbarkeit bedeutet also , dass Sie diese Leiste oben und eine Fußzeile unten erstellt haben , und Sie können sie einfach auf allen Seiten wiederverwenden Okay? Das ist es, was Wiederverwendbarkeit bedeutet, oder? Und das ist mit Hilfe von Komponenten in React möglich Hilfe von Komponenten in React Okay. Also, was ist eine Reaktionskomponente. Also, wenn du hier Reagieren lernst, okay? Also habe ich es hier geöffnet. Okay, du kannst es hier sehen. Eine Komponente ist eine Benutzeroberfläche, die ihre eigene Logik und ihr eigenes Erscheinungsbild hat. Okay? Es kann so klein wie eine Schaltfläche oder so groß wie eine ganze Seite sein. Okay? Also lass es mich so ausdrücken. React-Komponenten sind der Baustein jeder React-Anwendung. Okay? Was es ist, es ist eine wiederverwendbare Benutzeroberfläche oder UI , die vom Entwickler definiert werden kann und es Ihnen ermöglicht, sie zu verwenden an mehreren Stellen in der einzigen Anwendung wiederzuverwenden. Also habe ich dir zum Beispiel das Beispiel dieser Leiste oben gegeben , okay? Sie erstellen es einmal und verwenden es in der gesamten Anwendung wieder, okay? Und es ist unabhängig. Es hat seinen eigenen Code. Okay. Wenn Sie morgen irgendeine Änderung vornehmen möchten, müssen Sie die Änderung nur in einer Datei vornehmen, und sie wird überall widergespiegelt. Das ist ein Vorteil von Komponenten. Okay? Nun, Sie können sehen, dass Sie auf diese Weise Komponenten erstellen können, okay? Nun, bevor ich über diesen Code spreche , lassen Sie mich Ihnen noch etwas sagen. Komponenten in React können auf zwei Arten erstellt werden. Eine Möglichkeit besteht darin, Funktionen zu nutzen, wie Sie hier auf meinem Bildschirm sehen können. Eine andere Möglichkeit besteht darin , Klassen zu nutzen. Nun, Klassen, wenn Sie den neuesten Code in React untersuchen, werden Sie dort nicht viel Verwendung von Klassen sehen. Funktionen werden also an allen Orten verwendet. Daran werden wir uns also halten. Und die mit Funktionen erstellten Komponenten werden als funktionale Komponenten bezeichnet, oder? Sie können diesen Code also hier sehen. Es ist eine Ja-Skriptfunktion. Sie können sehen, dass React-Komponenten Ja-Skriptfunktionen sind , die ein Markup zurückgeben. Richtig. Hier können Sie also sehen, dass dies eine Funktion ist , eine Ja-Skriptfunktion, die JSX, das Markup, zurückgibt, richtig? Und das ist ein sehr einfaches Beispiel eine Komponente, die nur eine Schaltfläche ist Okay? Sie können also sehen, wie diese Schaltfläche zurückgegeben wird, und Sie können diese Schaltfläche in Ihrer Anwendung verwenden, okay, wo immer Sie sie verwenden möchten. Okay. Also hier kannst du sehen, dass es das in meiner App hier benutzt, und es rendert den Button hier drüben. Okay? Nun, eine Sache musst du hier drüben beachten, es heißt, es fängt mit einem Großbuchstaben an. Okay? React-Komponentennamen müssen also immer mit einem Großbuchstaben beginnen, während HTML-Tags in Kleinbuchstaben geschrieben werden müssen Okay? Also kannst du es hier drüben sehen. Okay. Das fängt mit dem Großbuchstaben an, oder? So werden also Komponenten erstellt. Jetzt haben Sie hier auch einen Editor , mit dem Sie herumspielen können. Okay, Sie können sehen, dass dies die Schaltfläche ist , die erstellt wurde. Natürlich ist das alles in derselben Datei app dot js. Sie können mehrere Dateien erstellen lassen. So können Sie beispielsweise Button- oder MyButton-Js hier separat erstellen lassen, und Sie können myapp dot-js dort haben, wo Sie die Schaltfläche und Sie können myapp dot-js dort haben verwenden Okay? Das kann auch gemacht werden. Aber hier demonstriert das Beispiel dies in einer einzigen Datei hier drüben. Okay? Also hier, wenn du meinen Button siehst, okay? Und ich kann den Button hier wiederverwenden. Also, wenn ich will, kann ich es zehnmal benutzen oder so oft ich will. Du kannst und wenn ich den Text hier ändern will , muss ich an einer Stelle eine Änderung vornehmen, und ich bin ein Knopf, der Hallo sagt. Es tut mir leid. Sing Hallo. Du kannst es sehen. Ich habe mich in allen Nutzungen widergespiegelt Sie können sehen, dass ich es an mehreren Orten benutzt habe, oder? Sie können also sehen, dass es sich an allen Orten widerspiegelt. Das ist also ein Vorteil von Komponenten. Stellen Sie sich nun vor, wenn Sie die Komponente nicht verwenden, Sie tatsächlich diese Codeschaltfläche und rendern sie tatsächlich zehnmal auf diese Weise. Morgen, wenn Sie hier eine Änderung an der Kopie vornehmen hier eine Änderung an der Kopie vornehmen möchten, oder morgen, wenn Sie irgendeine Art von Text oder Stil aktualisieren möchten, müssen Sie das an allen Stellen tun, oder? Und das ist nicht gut, weil es die Möglichkeit eröffnet, dass es Fehler in der Anwendung gibt, weil wir Menschen sind, oder? Wir Entwickler sind Menschen. Sie könnten es verpassen, bei einem bestimmten Spiel eine Änderung vorzunehmen, oder? Und das würde zu jeder Art von Fehlern in der Anwendung führen . Das wird also nicht empfohlen, aber diese Art der Komponenten wird empfohlen, oder? Und Sie können es in Ihrer Anwendung verwenden, oder? Ich würde also da wir jetzt etwas Klarheit darüber haben , was React-Komponenten sind, okay, auf unsere Anwendung umsteigen. Ich habe diese React-Anwendung erstellt, okay, mit der sehr einfachen App Dot Jx Nun, hier in aPDT Jasix würdest du sehen, ich habe einen sehr einfachen, sehr einfachen Gruß, den ich hier ich habe einen sehr einfachen, sehr einfachen Gruß, wiedergebe, oder? Und das ist eigentlich eine Komponente, okay? Also, wenn du hier in main.j6 siehst, rendere ich die App tatsächlich hier im Root-Verzeichnis Und ich importiere die App aus App Dot Jx, und die App wird hier exportiert, du kannst sehen, oder? Also ja, das ist auch ein Beispiel für Komponenten. Okay? Wir sehen hier das Export-Semikolon von Oops IMS Ich füge es einfach hinzu. Okay. Aber du kannst sehen, wie das funktioniert. Sie können auch Komponenten hier in dieser Datei selbst hinzufügen . Okay? Also was ich tun kann, ist, diesen Code zu nehmen. Ich kann eine Schaltfläche erstellen. Okay. Also was ich tun werde, ist , hierher zu kommen. Okay. Ich füge auf diese Weise einen Button hinzu. Okay? Ich bin ein Button, der Hallo sagt, und ich kann tatsächlich einen Button hinzufügen. Okay? Aber bevor ich das mache, lass mich dir zeigen, wie die aktuelle Ausgabe aussieht. aktuelle Ausgabe sagt also Hallo , weil momentan keine Taste involviert ist. Ich habe die Datei noch nicht gesehen. Okay? Jetzt habe ich einen Button erstellt. Ich habe Funktion gesagt, mein Button. Ich bin ein Knopf und ich sage Hallo hier drüben. Okay. Jetzt kann ich rüberkommen und meinen Knopf sagen, so etwas, und ich werde ihn schließen und du kannst sehen, dass hier drüben ein Knopf reinkommt, oder? Und ich kann das einfach so replizieren, wie ich will, okay? Ich kann also beliebig viele Buttons hinzufügen. Sie können sehen, dass so viele Schaltflächen hinzugefügt werden, oder? Das sind alles Knöpfe. Wenn ich morgen eine Änderung an der Benutzeroberfläche vornehmen muss, wie ich schon sagte, muss ich sie an einer Stelle vornehmen, oder? Und das alles kommt in einer einzigen Datei, oder? Vielleicht möchte ich den Code modularisieren. Es ist also keine gute Praxis, mehrere Komponenten in einer einzigen Datei zu haben mehrere Komponenten in einer einzigen Datei Also, was ich tun sollte, ist, dass ich hier eine neue Datei erstellen werde. Unter SRC sage ich „Mein Button“. Habe JAX hier unterrichtet. Okay. Und ich schneide diesen Code und verschiebe ihn hierher. Okay? Sowas in der Art. Und hier sage ich Export oder Standard, und ich werde hier MyPton sagen , so etwas Und hier drüben werde ich das einfach importieren lassen. In dem Moment, in dem ich hier die Strg- und Leertaste drücke , okay, diese Zeile wird importiert. Sie können diese Zeile sogar oben eingeben. Okay? Du importierst meinen Button aus dieser Datei hier drüben, okay? Wenn Sie die Taste gedrückt halten und den Mauszeiger darüber bewegen, werden Sie sehen, dass dies in einen Link umgewandelt wird, und Sie können zu dieser Datei wechseln, wenn Sie möchten Ordnung? Und wenn du das speicherst, ändert sich die Ausgabe nicht, aber der Code ist jetzt viel modularisierter. Okay? Sie haben also eine Komponente, die Sie erstellt haben , und Sie verwenden sie in Ihrer Anwendung. Alles klar? Ich hoffe, das macht Sinn. Und ich hoffe, das ist nützlich. Ich hoffe, Sie verstehen wie wichtig Komponenten sind. Das ist also ein sehr einfaches Beispiel, das ich demonstriert habe. Aber stellen Sie sich vor, Sie erstellen eine komplexe Anwendung , in der Sie mehrere Benutzerprofile verwalten, richtig? Nun könnte es mehrere Arten von Benutzern geben, und Sie möchten die Profilinformationen möglicherweise an verschiedenen Stellen in der App anzeigen . Sie können also eine Komponente haben, oder? Sie können eine Profilbildkomponente verwenden , um das Profilbild auf eine bestimmte Weise anzuzeigen. Und Sie können es mehrmals an mehreren Orten wiederverwenden . Zum Beispiel, wenn Sie das Profilbild auf dem Startbildschirm anzeigen möchten , oder? Sie können diese Komponente also verwenden. Okay, wenn du es auf der Seite „Profil bearbeiten“ anzeigen möchtest, kannst du es mit dieser Komponente anzeigen, oder? Das ist also gültig , wenn Sie irgendwelche benutzerdefinierten Anforderungen haben. Zum Beispiel werden Profilbilder normalerweise in einem Kreis angezeigt, oder? Wann immer Sie zu einer Anwendung gehen, werden Profilbilder in einem Kreis angezeigt, oder? Vielleicht möchten Sie also eine kreisförmige Ansicht haben , in der Sie das Profilbild des Benutzers anzeigen. Sie könnten also eine Komponente dafür erstellen und sie in der gesamten Anwendung wiederverwenden , wo immer Sie das Bild anzeigen möchten. Stimmt das? Und wenn es morgen eine Änderung an der Benutzeroberfläche für die Anzeige des Profilbilds gibt, nehmen Sie die Änderung in dieser einen Datei vor, und das spiegelt sich in der gesamten Datei wider. Es ist so gut und es ist so nützlich, oder? Ich hoffe, Sie haben ein gutes Verständnis dafür wie wichtig Komponenten und Bausteine von React-Anwendungen sind , und ich hoffe, das war nützlich. 18. Einstieg in die Arbeit mit Komponenten: Es ist also an der Zeit, dass wir selbst Hand anlegen und etwas mit Komponenten üben, oder? Und hier habe ich eine React-Anwendung, die das Portfolio eines Entwicklers rendert, also können Sie sich diese Anwendung hier ansehen. Okay? Es ist eine sehr einfache App. Das Problem mit dieser Anwendung ist jedoch alles in einer einzigen Datei eingeht oder aus einer einzigen Datei gerendert wird. Also, wenn ich dir hier drüben eine Liste geben muss, okay? Äh, lass mich nach oben scrollen. Also okay, das ist App Dot JSX, das durch Main Dot JSX im Root-Element gerendert wird Main Dot JSX im Root-Element Und in app.j6 verwenden Sie diese CSS-Datei und Sie haben diese Funktions-App , die hier verwendet wird Und darin haben Sie diese Variablen. Okay, zuerst haben wir diese Variablen. Und dann geben wir dieses JSix zurück , das diese Variablen verwendet, wie die in den Variablen gespeicherten Daten, und wir rendern die Daten Wir werden das modularisieren und hier einige Komponenten vorstellen. Das wird uns also ein bisschen praktische Erfahrung mit Komponenten geben praktische Erfahrung mit Komponenten Also als Erstes werden wir den Header hier ändern. Also, was ich tun werde, ist, hierher in SRC zu kommen. Ich werde den Header-Punkt Jx hinzufügen. Okay. Okay. Ich erstelle zuerst alle Dateien. Also Header JSix ist das, was ich brauchen werde. Ich werde ungefähr bis J sechs benötigen. Okay. Ich brauche auch , sagen wir, eine Projektliste, die ich hier drüben habe. Ich brauche auch Kontakt zu Jix hier drüben, und ich brauche am Ende eine Fußzeile, die Puta tout , J sechs ist Okay. Um das besser zu organisieren, kann ich hier einen Ordner einführen und ich kann hier Komponenten sagen, und ich kann alle neu erstellten Dateien, die ich gerade erstellt habe, in diesen speziellen Ordner verschieben. Okay? Also das sieht ein bisschen sauber aus, einschließlich der Projektliste im Kontakt-Header. Ich habe alles bewegt. Ordnung. Nun, was wir tun werden, ist, dass ich in App Dot JSX hierher kommen werde, und zuerst werden wir an Header Dot JSX arbeiten Also nehme ich diesen Header-Abschnitt hierher, okay, den gesamten Header-Abschnitt hier drüben Richtig? Und ich werde das in die Komponente verschieben. Okay? Also, was ich tun werde , ist hier in der Kopfzeile. Was wir tun müssen, ist, dass ich als Erstes etwas erstellen muss. Ich brauche eine Funktion. Funktionsanweisung, ich werde Header sagen. Und hier in den Parametern brauche ich nichts. Okay. Und ich werde zurückkehren. Ordnung? Wir müssen den JSX zurückgeben Okay. Also werde ich diesen Teil hierher zurückbringen. Ich werde das einfügen. In Ordnung. Also, Name und Beruf fehlen hier drüben. Also, was ich tun muss, ist nach oben zu scrollen, ich schneide oder hole diese beiden Dinge hier drüben, und ich füge hier Namen und Beruf hinzu, ungefähr so. Okay? Also das ist erledigt, okay? Und ja, das ist es. Ich muss hier eine Export-Anweisung hinzufügen. Ich kann Export Standard sagen und ich exportiere Head Okay, so etwas. Und das ist es. Hier drüben in dieser speziellen Datei scrolle ich nach unten und hier anstelle des Header-Abschnitts kann ich Header sagen. Sie können diese Komponente sehen und ich kann die Eingabetaste drücken. Sobald ich das mache, muss ich sicherstellen , dass ich das Tag auch hier selbst schließe. In dem Moment, in dem ich das hinzugefügt oder aus dem Bestellvorschlag ausgewählt habe, können Sie sehen, dass diese Importanweisung oben hinzugefügt wurde, was bedeutet, dass wir die Komponente hier importieren . Und okay, es gibt ein Problem. Die App funktioniert nicht wie erwartet. Lassen Sie mich sehen, was das Problem hier ist. Also werde ich einfach den Fehler hier in der Konsole überprüfen. Okay? Der Fehler besagt, dass der Beruf in der App JA 626 nicht definiert ist Okay, ich habe den Fehler übrigens bekommen. Also haben wir den Beruf in die Kopfzeile verlagert, okay? Und es wird von der App Dot JSX benötigt , ich sollte sagen, hier drüben. Sie können den Beruf sehen und ich würde auch sagen, dass ein Name erforderlich ist Okay. Also behalte ich die Variablen einfach hier drüben. Wir werden diese Variablen am Ende löschen , um Probleme zu vermeiden. In Ordnung. Und wenn du jetzt herkommst, kannst du sehen, dass der Header absolut funktioniert, okay. Ohne Probleme. Das wird also absolut von hier aus gerendert. Sie können den Header-Bereich sehen. Okay? Ich werde diesen Kommentar jetzt einfach entfernen. Okay. Und ja, oder wir bleiben bei dem Kommentar. Wir werden es am Ende entfernen. Okay? Nun, lassen Sie uns dasselbe mit der A machen. Okay? Jetzt schneide ich den Abschnitt über das Thema hier drüben ab. Okay. Und für A haben wir hier bereits eine Datei namens JSX erstellt . Okay? Also werde ich eine Funktion hinzufügen, ohne Parameter, und ich werde return sagen, und ich werde return sagen, o und ich füge dieses Jx ein, ungefähr so Okay, das ist also erledigt. Okay. Und dafür drücke ich einfach die Tabulatortaste. In Ordnung. Also das ist ungefähr, und ich muss Export hier hinzufügen, Export Standard, A hier drüben, so etwas in der Art. Ordnung. Ich speichere das und wenn du herkommst, muss ich ungefähr importieren. Alles klar. Alles ist erledigt, und wenn du herkommst, okay, wir sehen wieder ein Problem. Das Problem ist, dass Name und Beruf nicht existieren. Also brauche ich auch diese beiden Schlüssel. Also nehme ich die Skier, tut mir leid, nicht diese Variablen hier drüben und ich werde es hier drüben versuchen. Okay. Ich speichere das und du solltest die Ausgabe sehen. Du kannst sehen. A wird ebenfalls in eine Komponente umgewandelt. Okay? Wenn du herkommst, scrolle runter. A ist fertig. Wir haben Projekte. Also werde ich den Projektabschnitt so nehmen. Ich gehe hier rüber. Ich füge eine Funktion hinzu, so etwas wie diese, Projekte oder Projektliste. Etwas wie das. Keine Parameter, LO, und ich hole mir einfach die Liste der Projekte , die wir hier definieren, diese Liste. Okay? Also füge ich die Liste hier hinzu. Ups. Es gibt also ein Problem Das sollte Teil der Steuererklärung sein, oder? Also sollte es zurückgegeben werden. Also schneide ich einfach so etwas ab. Okay? Also das ist erledigt. Okay, wir geben diesen GA 6 zurück und wir haben diese Projekte, um ihn an die Spitze zu bringen. Okay? Das macht Sinn, und ich mache Export Standard und ich sage Projektliste weg. Etwas in der Art. Okay. Und hier in App.j6 komme ich hierher Projektbereich, ich sage Projektliste, selbstschließendes Tag, und wir werden die Liste sehen , ob sie richtig gerendert wird , stimmt das, oder? Das Gleiche machen wir auch für den Kontakt. Okay? Es ist so ziemlich das Gleiche, wenn man das bewegt. Okay? Also kontaktiere mich, ich komme her. Ich sage Funktion, Kontakt. Ich werde das loswerden und dann sage ich, kehre hierher zurück. So wie das. Und dann habe ich es gemacht, okay? Und ich sage Standard exportieren und ich sage Kontakt. Ups. Also ich sage Kontakt hier drüben. Also so. Okay. Und du musst den Kontakt hier drüben nutzen. Okay? Also sage ich Kontakt. Und ja, Footer wird das auch tun. Ich schneide das Wir gehen zu footer.j6 und ich sage function, Futter Okay. Und dann sage ich, kehre hierher zurück. Und so. Und ich nehme das Puta T und füge das Tag**** hinzu Okay. Okay, Sie sehen **** hier nicht als Import , weil Sie es nicht exportiert haben. Okay? Also muss ich Export Default Puta sagen. Okay. Und dann hier drüben, Puta Du solltest Puta hier reinkommen sehen. Okay. Und Bräune, eine Bräune, richtig? Und wenn du herkommst, sollte alles funktionieren, absolut, okay? Du kannst es sehen. Okay, wir werden hier in dieser speziellen Datei ein wenig aufräumen, damit wir diese Variablen nicht benötigen. Ich werde sie loswerden. Okay. Und ich werde die Kommentare loswerden, okay. Also so etwas. Ordnung. Und ja, uns geht es gut. Ich werde das nur ein bisschen ausrichten. Jetzt geht es uns gut. Du kannst es sehen. Also das ist jetzt unsere App-Komponente, okay, die mehrere andere Komponenten wie Headbo Project List Contact FUTA hat wie Headbo Project List Contact FUTA Und das sind jetzt alles einzelne Komponenten, okay, die gerendert werden oder die separat erstellt werden erstellt werden Alles klar? Das sind alles Einzelkomponenten, und was ist das Wichtigste hier, okay? Wenn Sie also morgen mehrere Komponenten zu einem einzigen Projekt hinzufügen möchten , ist das absolut möglich Es ist nicht so, dass Sie eine einzelne Komponente in einem React-Projekt oder ähnlichem haben können . Eine solche Regel gibt es nicht. Sie können so viele Komponenten haben, wie Sie möchten, okay? Und du kannst es auf diese Weise verwenden. Jetzt, morgen, wenn ich die Reihenfolge hier ändern möchte, wenn ich mich unter der Projektliste bewegen möchte , kann ich das ganz einfach tun. Sie können sehen, dass es sich geändert hat. Ich kann Controls machen und es in den ursprünglichen Zustand zurückversetzen, oder? Das ist also möglich, oder? Eine Sache, an die Sie sich erinnern, ist dass die App hier eine Komponente selbst ist. Und innerhalb dieser Komponente geben wir andere Komponenten ein. Sie können sehen, dass die App eine eigenständige Komponente ist, und innerhalb dieser Komponente geben wir andere Komponenten wie Header Bow, Projektliste, Kontakt, Potter ein. Das ist also möglich, oder? Eine App selbst ist eine Komponente, sie wird hier gerendert. Wenn Sie also zum Hauptpunkt Jx gehen, wird es hier im Stammelement gerendert , oder? Also Root-Element in der Datei main.j6, was gerendert wird, App-Dot JSX, App-Komponente Und die App-Komponente rendert diese vielen Komponenten an sich selbst, oder ? Komponente kann also auch andere Komponenten rendern, was absolut gültig ist, und da ist das kein Problem, oder? Sie können sich also vorstellen, wie Komponenten modular sind. Sie ermöglichen es Ihnen also, Modularität in Ihren Code zu integrieren. Sie ermöglichen es Ihnen, Ihre gesamte Anwendung in kleine, überschaubare Teile zu zerlegen Ihre gesamte Anwendung in kleine, überschaubare Also, wenn ich morgen Änderungen an der Kopfzeile vornehmen will, okay? Header in der gesamten Anwendung. Ich muss nur an dieser einen Datei Änderungen vornehmen. Okay, wenn ich Änderungen an der FUTA in der gesamten Webanwendung vornehmen muss, muss ich die Änderung einfach hier vornehmen Das ist es, oder? Es ist also Wiederverwendbarkeit. Sobald die Komponente erstellt wurde, können Sie sie mehrmals wiederverwenden Sie können FUTA an jedem beliebigen Ort beliebig oft wiederverwenden , oder? Wartbarkeit: Aufgrund der Wiederverwendbarkeit und Modularität können Sie diese Komponenten natürlich Aufgrund der Wiederverwendbarkeit und Modularität können Sie diese Komponenten natürlich separat verwalten . Und ich würde sagen, es gibt auch eine Trennung der Bedenken, denn Komponenten helfen Ihnen dabei, den Code zu organisieren, indem sie verschiedene Dinge direkt in ihre eigenen einzelnen Dateien aufteilen, oder? denn Komponenten helfen Ihnen dabei, den Code zu organisieren, indem verschiedene Dinge direkt in ihre eigenen einzelnen Es ist also ein Individuum, es ist ein eigenständiger Block, würde ich sagen, oder? Es gibt also eine Trennung von Anliegen bei der Sie eine eigene Funktion haben. Die Komponente hat ihre eigene Funktion, ihr eigenes JSX, ihre eigene Schnittstelle in ihrer eigenen Datei selbst, oder? Es ist also eigenständig, oder? Also ja, hier geht es um Komponenten in React. Und noch etwas möchte ich erwähnen, wenn Sie die Komponente verwenden oder wiederverwenden möchten. Sie müssen diesen Export unten hinzufügen, Sie müssen diesen Export unten hinzufügen wenn Sie diese Funktion auf diese Weise erstellen, oder? Und wenn Sie den Export erst einmal hinzugefügt haben, können Sie ihn auf diese Weise in die Datei eingeben , wo immer Sie ihn verwenden möchten, oder? Also haben wir diese Eingabe nicht geschrieben , denn wenn ich sie entferne , sagen wir mal. Puta. Wenn ich das speichere, erhalte ich natürlich eine Fehlermeldung. Das wird nicht funktionieren. Und wenn Sie die Konsole sehen, wird Ihnen der Fehler angezeigt. Du kannst sehen. Potter ist nicht definiert. Um Putter einzubinden, können Sie die gesamte Eingabezeile eingeben, oder ich schlage vor, dass ich einfach Strg und Leertaste drücke Steuerung und Leertaste unter Windows, Befehl und Leertaste auf dem Mac Sie können diesen Vorschlag mit diesem Import hier sehen mit diesem Import hier Sie können sehen, dass ich das auswählen werde. Und sobald ich das auswähle, wird die Eingabe automatisch oben hinzugefügt. Es gibt keine Probleme als solche. Wenn ich das speichere, funktioniert die Anwendung wieder Sie können sehen, sie funktioniert wieder, oder? Also ja, ich hoffe, das war ziemlich gut, und ich hoffe, Sie haben ein wenig Klarheit darüber , wie Sie mehrere Komponenten erstellen und sie in einer einzigen Anwendung organisieren können mehrere Komponenten erstellen und sie in einer einzigen Anwendung organisieren . Und ich hoffe, das hat Ihnen einen Einblick gegeben , wie wichtig Komponenten bei der Arbeit mit React sind. 19. Requisiten – Eine Einführung: Willkommen, und es ist an der Zeit, dass wir über Requisiten in React sprechen. Um das Gleiche zu demonstrieren, habe ich diese sehr einfache Anwendung Also hier, wenn Sie sehen, habe ich diesen Hauptpunkt Qx, diese App auf dem Stammelement rendert Und das ist eine App hier, die hier nur Hallo wiedergibt Sie können Hello also hier als Ausgabe sehen, oder? Lassen Sie mich jetzt ein Szenario erstellen. Nehmen wir an, Sie erstellen Benutzerprofile oder zeigen sie an, richtig? Sie erstellen also eine Anwendung, in der Sie Benutzerprofile für verschiedene Benutzergruppen anzeigen möchten , oder? Jetzt würde ich eine weitere Komponente erstellen. Okay? Ich würde das hier als Profilkarte bezeichnen, oder Punkt Jx hier drüben. Okay. Und darin werde ich eine Funktion haben. Ich werde Profilkarte sagen. Ups. Also ich sage hier Karteikarte. Ich werde die Parameter loswerden. Und hier drüben werde ich etwas GSX zurückgeben. Okay? Also Interface, wir müssen zurückkehren. Nun, was ist die Schnittstelle , die du zurückgibst? Ich werde es sehr einfach halten, oder? Ich nehme ein TIF. Ich nehme H zwei. Ich sage hier den Namen. Wir zeigen den Namen und mich an. Oder lassen Sie uns hier beim Namen bleiben. Okay? Wir bleiben jetzt einfach beim Namen. Und natürlich füge ich hier Export hinzu, Standard, und ich sage Profilkarte, ungefähr so. Okay? Also, ich muss hier die Profilkarte benutzen. Was ich tun muss, ist Profilkarte sagen, so etwas, und ich lasse das importieren. Okay? So können Sie die Eingabeanweisung direkt nach oben sehen. Ich lasse das einfach zusammenklappen , damit wir mehr Platz haben. Und jetzt, wenn Sie zu der Anwendung hier kommen, können Sie sehen, dass der Name hier angezeigt wird, was bedeutet, dass unsere Komponente erfolgreich gerendert wurde. Okay? Jetzt kommen wir her. Ich muss hier den Benutzernamen zeigen, richtig? Was ich hier also tun kann, ist konstant zu sagen. Ich werde eine Variable erstellen. Ich sage Name und nenne den Namen Alice. Okay? Also das ist ein Java-Skript, das ich schreibe, und ich werde dieses JavaScript in JSX so verwenden , und ich werde sagen Okay Jetzt wirst du sagen, dass du den Namen Alice hier drüben sehen wirst , okay? Also der Einfachheit halber ändere ich das einfach auf H drei, ungefähr so. Okay? Also du kannst sehen, Name ist Alice hier drüben. Okay? Also okay, das funktioniert gut. Nehmen wir nun an, unsere Anwendung wird erweitert und es handelt sich um eine Mehrbenutzeranwendung. Nun, vielleicht möchten Sie diese Profilkarte verwenden , um Informationen von mehreren Benutzern anzuzeigen, oder? Im Moment zeigen wir hier hartcodierte ALS an. Das will ich nicht tun Ich möchte es so dynamisch wie möglich halten, und es wird Szenarien geben in denen wir Daten vom Backend abrufen könnten, wir könnten Daten aus der Benutzereingabe erhalten. Wir können Daten von überall abrufen, oder? Ich sollte also in der Lage sein, dieser speziellen Komponente eine gewisse Dynamik zu verleihen, die es mir ermöglicht, diesen Namen auf der Grundlage dessen zu rendern Namen auf der Grundlage was in der Vergangenheit ist oder was verfügbar ist, Wie können wir das also bewerkstelligen? Hier kommt also das Konzept der Requisiten ins Spiel, oder? Also Requisiten in React, was sind sie? Sie werden verwendet, um Daten von einer Komponente zur anderen zu übertragen . Stellen Sie sich das vor. Was ich damit meine, ist diese eine Komponente, das ist eine weitere Komponente, oder? Sie möchten die Profilkarte in dieser Komponente hier verwenden , oder? Nun, wo auch immer Sie es verwenden, Sie hätten irgendeine Art von Daten, oder? Zum Beispiel könnte ich hier einen EPI-Aufruf tätigen, sagen wir, API-Aufruf hier drüben, und ich könnte den Benutzernamen von diesem Server abrufen, richtig? Ich rufe den Benutzernamen ab, richtig? Nun, ich mache das eigentlich nicht, aber nehmen wir an, ich habe einen API-Aufruf, bei dem ich den Namen des Benutzers mithilfe von JavaScript vom Server Und vielleicht möchte ich diesen Namen verwenden, und ich möchte ihn vielleicht mit einer Profilkarte anzeigen, oder? Profilkarte ist eine Komponente , die ich verwenden möchte. Wie kann ich also diesen Namen weitergeben , den ich hier habe? Und zeige es mit der Profilkarte an. Das geht nicht, oder? Aber mit Hilfe von Requisiten können Sie das tun. Sie müssen also Requisiten verwenden, um diese Funktionalität zu aktivieren, oder? Was hier passiert, ist zu verstehen, dass diese App hier eine übergeordnete Komponente ist, die die Profilkarte des Kindes rendert Warum ist die Profilkarte ein Kind? Weil es in eine App gerendert wird. Und daher ist die App eine übergeordnete Komponente, und das ist eine untergeordnete Komponente, oder? Requisiten in React werden also verwendet , um Daten von einer Komponente zur anderen zu übergeben, insbesondere von einer übergeordneten Komponente an eine untergeordnete Komponente Und mit Hilfe von Requisiten tragen Requisiten dazu bei, Komponenten flexibler und wiederverwendbarer zu machen flexibler und wiederverwendbarer Im Moment haben wir Alice hier drüben fest programmiert. Also kannst du das natürlich nur verwenden , um die Informationen von Alice anzuzeigen. Okay? Aber wenn ich dieses fest codierte Ding hier drüben entferne und es dynamisch mache, etwas Dynamisches hier drüben, dann würde mir das ermöglichen diese Profilkarte zu verwenden, um jede Art von Benutzerinformationen anzuzeigen, oder? Lassen Sie mich das demonstrieren. Also werde ich das hier loswerden, okay? Und ich füge hier einen Parameter hinzu. Ich sage Requisiten, so etwas, okay? Und hier sage ich Requisiten. Name des Punktes, richtig? Also, wo kommen diese Requisiten her? Also im Moment wird nichts angezeigt, okay, weil wir nichts weitergeben Also hier muss ich bestehen. Also muss ich sagen, dass der Name gleich ist und ich kann sagen, lassen Sie uns das tun. Okay, damit ich Alice sehen kann. Du kannst Alice sehen, oder? Also, wenn ich diese Karte dupliziere, lass mich diese Karte hier duplizieren. Ich kann Joan sehen Okay. Du kannst sehen, wie John gerendert wird. Das ist es also, wovon ich gesprochen habe. Das ist die Dynamik, die Requisiten hinzufügen. Okay. Ohne das, wenn du Alice hier drüben fest codiert hast Okay, stell dir das vor. Du hast Alice hier drüben fest codiert Okay. Dann wird das nicht funktionieren. Okay? Also ich kodiere gerade nicht hart Ich mache meinen Code nicht rückgängig, okay? Aber wenn du Alice hier drüben fest codierst, kannst du dir vorstellen, wenn ich diese Profilkarte dupliziere, sehe ich Alice überall, oder Weil sie fest codiert ist. Aber im Moment übergebe ich dieses Element dynamisch hierher oder ich sollte sagen, diese Eigenschaft hierher, und das wird verwendet, um die Informationen anzuzeigen. Ordnung. Also ja, das sind Requisiten Also Requisiten ist eine Kurzform für Eigenschaften, okay? Und sie sind eine Möglichkeit, Daten in React von einer Komponente zur anderen zu übertragen , okay? Und sie werden verwendet, um Komponenten wiederverwendbarer zu machen , indem unterschiedliche Werte als Eingabe an die Komponente übergeben werden, oder? Anstatt den Namen und all die anderen Informationen innerhalb der Komponente fest zu codieren , können Sie sie als Requisiten übergeben, okay? Ich möchte noch eine Frage beantworten , von der Sie vielleicht denken, okay, ich sagte, ich werde die Benutzerinformationen in dieser Komponente verfügbar haben , oder? Weil ich einen EPA-Anruf tätige, oder vielleicht rufe ich die Datenbank hier drüben an, oder? Nun, die Frage, die Sie sich stellen könnten, ist, anstatt Requisiten zu verwenden, was ist, wenn ich den EPA-Anruf von hier nach hier verschiebe Richtig? Das ist eine sehr gute Frage. Aber ich sage dir etwas, wenn du das tust, brauchst du keine Requisiten zu benutzen, richtig, weil du die Benutzerinformationen hier hast, du kannst sie holen und hier anzeigen Okay. Aber lassen Sie mich Ihnen hier sagen, wenn Sie den API-Aufruf fest codieren, dann definieren Sie , wie diese spezielle Komponente Daten abruft. Okay? Möglicherweise möchten Sie das nicht tun, da Sie die Informationen je nach Szenario möglicherweise von verschiedenen Orten abrufen Wenn Sie hier zum Beispiel die Profilinformationen anzeigen, holen Sie sich die Daten vom Server, sagen wir mal Wenn Sie diese Profilkarte in einer anderen Datei verwenden und dort die Informationen aus der Datenbank anzeigen möchten Vielleicht haben Sie statt eines API-Aufrufs einen Datenbankaufruf hier oder einen anderen Aufruf hier. Okay? Also das Abrufen von Daten ist hier komplett von der Komponente entkoppelt Wenn Sie damit beginnen, das Abrufen von Daten in die Komponente fest zu codieren, wird dies eingeschränkt. Hier haben wir also die Datenkomponente wie den Teil zum Abrufen herausgekauft . Okay? Abrufen von Daten erfolgt außerhalb der Komponente, und wir geben nur die Daten, die wir abrufen, an die Komponente Die Komponente konzentriert sich also nur auf das Rendern der Informationen hoffe, das ist nützlich und ich hoffe, Sie können sich ein Bild davon machen. Nun, ein paar Dinge, die Sie bei Requisiten beachten müssen , sind der Fluss der Requisiten Requisiten werden also von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben Ich habe bereits besprochen, was eine übergeordnete Komponente ist. Die übergeordnete Komponente ist in unserem Fall die App hier drüben. In diesem Fall wird es also von den Eltern an das Kind weitergegeben, was bedeutet, dass die Profilkarte von App zu Profilkarte gerendert wird, da die Profilkarte in der App gerendert wird. Die Profilkarte ist also eine untergeordnete Komponente, oder? So würde der Ablauf also funktionieren. Das ist also der Fluss der Requisiten vom Elternteil zum Kind. Ein weiterer Punkt, über den ich sprechen möchte, ist die Unveränderlichkeit. Okay? Requisiten sind also nur lesbar Daran müssen Sie sich erinnern. Requisiten sind schreibgeschützt, d. h. untergeordnete Komponenten. Unabhängig davon, welche Requisiten Sie übergeben, untergeordnete Komponenten die Requisiten, die sie erhalten, nicht ändern Requisiten, die sie erhalten, Stattdessen kontrolliert das übergeordnete Objekt die Daten und gibt sie nach Bedarf weiter Alles klar? Also, wenn du versuchst, Requisiten hier zu modifizieren, sagen wir mal Wenn ich also versuche, Requisiten zu sagen , deren Name hier gleich Test ist, wenn ich zum Beispiel versuche, das zu speichern, würde die Ausgabe verschwinden Und wenn Sie zur Konsole hier drüben gehen, wenn Sie nach oben scrollen, können Sie sehen, Eigenschaft nicht schreibgeschützt zugewiesen werden kann, und Sie versuchen, dies zu ändern Das ist es, was es zu sagen versucht. Okay? Wenn Sie diese Zeile loswerden, wird der Fehler verschwinden. Wenn ich das speichere, kannst du sehen die Ausgabe da ist und der Fehler verschwunden ist. Du kannst es sehen, oder? Also ja, Requisiten sind unveränderlich. Sie sind nur lesbar. Sie können nicht durch untergeordnete Komponenten geändert werden, und sie verlassen sich darauf, dass die übergeordnete Komponente die Daten an sie weitergibt, oder? Ich hoffe, das ist nützlich und ich hoffe, Sie konnten dem folgen. 20. Mehrere Requisiten?: Ich habe also dieses Beispiel , in dem wir die Profilkarte rendern , indem wir hier den Namen als Requisite übergeben, und wir zeigen den Namen so in der Profilkarte an, und wir sehen, dass der Name hier auf der Benutzeroberfläche gerendert wird hier auf der Benutzeroberfläche gerendert Wenn wir uns dieses Beispiel ansehen, könnte es so aussehen , als würden wir hier nur eine Requisite übergeben Was ist also eine Möglichkeit? Okay? Also ich würde es dir zeigen und dir sagen wollen , dass du auch mehrere Requisiten einreichen kannst Also kann ich 23 sagen und ich kann sagen, H ist zum Beispiel 42. Okay? Also hier übergebe ich noch eine Requisite, die ich hier drüben ausstellen kann. Okay? Also ich kann H sagen und ich kann H hier drüben sagen. Okay. Etwas wie das hier. Und wenn ich herkomme, kannst du Alice und John sehen, okay, mit ihren jeweiligen Hs. Okay, das ist also durchaus möglich, wobei Sie mehrere Requisiten an eine untergeordnete Komponente übergeben können mehrere Requisiten an eine untergeordnete Komponente In unserem Beispiel wird H, das wir hier übergeben , als Zeichenfolge übergeben Es wird ein Szenario geben , in dem Sie die Daten möglicherweise als Ganzzahl oder Zahl übergeben möchten . Was Sie in diesem Fall tun können, ist, hier Num zu sagen, ich übergebe einen anderen Parameter. Ich sage hier Num als zwei. Okay? Oder lass es mich als Zeichenfolge weitergeben, okay? Ich werde an einer Stelle an einer Schnur und an einer anderen Stelle hier drüben auf diese Weise vorbeigehen . Okay. So kannst du also als Zahl weitergeben. Okay. Das ist keine Zeichenfolge. Okay. Und hier drüben, lass mich etwas ausprobieren. Ich kann sagen, dass die konstante Summe der gelehrten Requisiten ist , Zahl plus eins. Okay? Und ich zeige die Daten hier drüben an. Okay? Also hier, du kannst sagen , Num ist, also brauche ich nicht, ich brauche das nicht, ich werde die Summe hier sehen. Okay? Wenn Sie hierher kommen, können Sie sehen, dass Zahl hier 21 ist , also zwei plus eins, es wurde 21, weil es in diesem Fall hier als Zeichenfolge übergeben wurde . Okay? Im zweiten Beispiel haben wir es auf diese Weise übergeben, und hier wird es als Drei angezeigt, was bedeutet, dass es als Ganzzahl übergeben wird, okay? Ich hoffe, das macht Sinn, wie Sie mit Daten arbeiten und mehrere Requisiten in eine einzige Komponente einfügen können mehrere Requisiten in eine einzige Komponente einfügen Alles klar? Ich hoffe, das war nützlich. 21. Boolesche Werte und Prop-Typen verwalten: Lassen Sie uns nun darüber sprechen, wie Sie Pollans bei der Arbeit mit Requisiten verwenden können Pollans bei der Arbeit mit Requisiten verwenden Hier in unserem Beispiel haben wir also eine Profilkarte, die wir anzeigen. Ich übergebe sie an Zeichenketten und Zahlen, Und ich zeige diese Zahl auf diese Weise mit Hilfe von Berechnungen an Also werde ich diese Anzeige für die Nummer loswerden. Wir brauchen es nicht. Okay. Und ich werde Num auch hier loswerden. Okay. Lassen Sie uns jetzt über Boolean sprechen. Nehmen wir an, ich möchte eine boolesche Requisite weitergeben, ich sage hier, ich sage hier Okay, und ich sage hier wahr. Okay. Und ich werde hier auch etwas Ähnliches weitergeben. Ups, ich muss das hier schließen . Okay. Ich gebe sein Mitglied weiter und sage, fällt hier drüben ab. Etwas wie das hier. Okay. Nun, ich übergebe hier Boolean, aber das wird als Zeichenfolge übergeben Okay. Lass es mich dir zeigen. Also wenn ich das dupliziere, wenn ich sage, ist Mitglied hier drüben, tut es mir leid. Ist Mitglied? Okay. So etwas wie dieser Requisitenstart ist ein Memo Okay. Also, wenn du hier drüben Wahr und Falsch siehst, wird es als E-Zeichenfolge gedruckt. Okay. Nun, um es hier als E boolean zu übergeben, muss ich diese runden Klammern hier entfernen Entschuldigung, diese Anführungszeichen, und ich muss die Kobras hinzufügen. Okay. Das Gleiche gilt auch für ganze Zahlen. Wenn ich das jetzt speichere und hierher komme, werden Sie feststellen, dass Sie die booleschen Werte nicht sehen können Okay? Also, was ist der Zweck der Übergabe der booleschen Werte Boolesche Werte werden also für die Entscheidungsfindung verwendet. Okay? Nehmen wir an, Sie möchten eine Präsentation oder eine Nachricht anzeigen je nachdem, ob der Benutzer Mitglied ist oder nicht. Sie können also dieses Boolesche Is-Mitglied hier verwenden und das können Sie anzeigen Okay, lass mich dir das zeigen. Also ich kann hier den Status sagen. Status. Und wenn Sie sich jetzt den Status ansehen, ist da nichts, weil es sich um einen booleschen Wert Ich kann also sagen, ob ich ternären Operator hier tatsächlich verwenden kann Okay? Also kann ich sagen, dass Props Mitglied ist Wenn das stimmt, dann würde ich sagen aktives Mitglied oder ich würde raten sagen. Etwas in der Art. Ich speichere das und du kannst aktive Mitglieder und Gäste sehen. Alice ist also aktives Mitglied, weil wir hier die Wahrheit für Alice bestanden haben. Sie können sehen, dass Alice wahr war. Und John ist kein aktives Mitglied, also kannst du hier Gast sehen , weil wir falsch eingegeben haben. Okay, wenn du willst, dass das auch wahr ist, kannst du es auf diese Weise als wahr übergeben. Hoppla. Also wähle ich das aus, speichere es und du siehst das aktive Mitglied Okay. Nur ein Wort, du wirst Johns raten sehen Okay. So können Sie also boolesche Werte in Requisiten verwenden Also Requisiten außer dem booleschen Prop-Mitglied, okay, und es ermöglicht Ihnen, den Status innerhalb der Komponente zu verwalten . Wenn Sie also eine Art bedingte Anzeige oder ähnliches hinzufügen möchten , können Sie boolesche Requisiten verwenden , können Sie boolesche Requisiten verwenden oder? Und wie besteht man es? Sie übergeben es in einem Paar geschweifter Pässe und nicht in Anführungszeichen wie diesem Auf diese Weise können Sie hier eine Zeichenfolge übergeben. Ordnung. Also ich hoffe, das ist nützlich. 22. Requisiten destrukturieren: Fangen wir also an, über die Destrukturierung von Requisiten zu sprechen. Also hier habe ich ein Beispiel, in dem ich diese App-Komponente habe, die die Profilkarte zweimal verwendet, oder? Sie können sehen, dass es die Profilkarte zweimal rendert und diese Daten hier weitergibt, und diese Daten werden in Form von Requisiten weitergegeben, und diese Profilkartenkomponente verwendet diese Daten Mit Hilfe der Punktnotation. So können Sie sehen, wie es es benutzt. Nun, was ich mit Punktnotation meine die Daten, die Sie von hier aus weitergeben, Name, H ist Mitglied. Diese Attribute werden hier in Form eines Objekts übergeben. Okay? Also werden Requisiten zu einem Objekt, und Sie können mit Hilfe der Punktnotation auf alles zugreifen, was übergeben wurde, was bedeutet, diesen Punkt hier zu verwenden Richtig, sodass Sie den Punktnamen der Requisiten, den Punkt h und das Element der Requisiten als Punkt sehen können h und das Element der Requisiten als Punkt Diese Art, auf Dinge zuzugreifen, wird als Punktnotation bezeichnet, und wir können hier die Punktnotation verwenden , weil Requisiten hier weil Requisiten hier Okay? Es ist in einem JavaScript-Objekt, oder? Nun, in JavaScript ist es üblich, Destrukturierung zu verwenden , oder? Und wenn Sie Requisiten in React verwenden, wird Destrukturierung häufig verwendet, um den Code sauberer und lesbarer zu machen . Lassen Sie mich Ihnen ein Beispiel geben Zunächst gebe ich Ihnen einen Überblick was Destrukturierung ist Also stell es dir so vor, okay? Sie haben hier ein JavaScript-Objekt. Okay? Das ist keine Reaktion. Das ist ein einfaches Java-Skript , das ich hier schreibe. Okay, ich sage Namen, John. Okay. Und es muss, es hat zwei Dinge in sich. Es hat einen Namen und beides. Also jeder hier drüben ist 30. Okay? Nun, eine Möglichkeit die Daten aus diesem Objekt zu extrahieren , ist eine Art des Entpackens Sie können hier Name, Person, Taut, Name sagen . Das ist eine Möglichkeit Okay. Also das ist ohne Destrukturierung, okay? Und das mit Punktnotation, richtig? Das ist es, was du benutzt, okay? Du kannst hier G sagen und du kannst Person Punkt Alter sagen. Das ist eine Art, Dinge zu tun, oder? Eine andere Art, Dinge zu tun, ist mit Hilfe der T-Strukturierung, mit Destrukturierung Wie würdest du es machen? Also kannst du Const sagen, okay? Du kannst einen Namen sagen, geh hierher. Okay? Und du kannst ihm eine Person zuweisen. Ups. Das würde also alle Werte , die im Personenobjekt existieren, und es diesen beiden Variablen zuweisen Jetzt erhalte ich eine Fehlermeldung , weil das überflüssig ist, oder? Name und Alter sind bereits erstellt, also werde ich das einfach auskommentieren, okay, damit wir den Fehler nicht sehen. Aber Sie haben das Gefühl, dass es sich um eine Umstrukturierung handelt , bei der Sie die Person nach Namen und jedem einzelnen auspacken, oder? Und was sind Name und Alter Name und jedes sind Attribute, die Sie hier innerhalb des Objekts hier sehen können . Also haben wir die Eigenschaften entpackt , die in diesem Objekt vorhanden waren Sie können sehen, dass das entpackt wurde. Das nennt man jetzt Destrukturierung. Es ist eine bessere Syntax als diese. Okay? Das ist auch machbar Du kannst das tun, aber das ist nicht so lesbar. Es ist ein etwas langwieriger und umständlicher Prozess, oder? Also, ich sagte, das wird als Objekt übergeben, okay? Und das sind alle Immobilien hier drüben. Also hier, wenn Sie sehen, dass Sie Requisiten haben, haben Sie Requisiten Punktname, Requisiten Punkt H. Also Name, Alter und Mitglied sind nichts anderes als Eigenschaften Sie können also das ähnliche D-Strukturierungsmuster auch hier anwenden das ähnliche D-Strukturierungsmuster Okay. Und um das zu tun , würdest du das hier loswerden. Okay? Wir können die ähnliche Syntax verwenden, oder? Du brauchst diese geschweiften Klammern, also kopiere ich das, füge es hier ein, und hier kann ich den Namen H haben und ich habe noch ein weiteres Mitglied, ungefähr so In dem Moment, in dem ich das mache, muss ich nicht auf all diese Attribute oder all diese Eigenschaften zugreifen , nicht auf Attribute, auf all diese Eigenschaften in Punktnotation Also kann ich den Punktnamen und Punkt H loswerden und alles ist hier drüben. Okay. Ich speichere das und das kann auch gespeichert werden, und Sie werden sehen, dass sich an der Ausgabe nichts geändert hat. Es wird auch keine Fehler geben. Okay. Es ist alles gut, oder? Das ist also JavaScript-Destrukturierung, und ich glaube, Sie kennen sich mit JavaScript-Destrukturierung Aber das war nur eine Auffrischung. Ich hoffe, Sie verstehen, was das ist und wie es zur Destrukturierung Requisiten verwendet wird Denken Sie daran, dass die Destrukturierung in JavaScript eine bequeme Möglichkeit ist , Werte aus Arrays oder Objekten in Variablen zu extrahieren , oder Es wird sehr häufig verwendet und der verwendete Begriff Destrukturierung ermöglicht das Entpacken Auspacken ist also der Begriff, der überall verwendet wird , oder? Also, was wir hier tun, ist, die Requisiten auszupacken Wir entpacken hier die Requisiten in die einzelnen Variablen, okay ? Und wir verwenden diese Variablen innerhalb der Komponente, oder? Hier werden also direkt Variablen verwendet, und das ist viel besser lesbar als die Tot-Notation zu verwenden, oder? Wenn Sie also mit React-Komponenten, dieser Art von Syntax, arbeiten , werden Sie eine Menge sehen , bei der die Attribute auf diese Weise übergeben werden. Eigenschaften werden auf diese Weise übergeben, und hier werden sie auf diese Weise destrukturiert. Lassen Sie sich also nicht verwirren Das ist normale Objektdestrukturierung mit Java-Skript. Also Javascript, das Konzept von JavaScript, wird hier verwendet, oder? Ich hoffe, das ist nützlich und ich hoffe, Sie konnten mitmachen. 23. Requisiten mit PropTypes in React validieren: Lassen Sie uns anfangen, über Requisitenvalidierungen zu sprechen und darüber, wie sie verwendet werden können, um die Eigenschaften zu validieren, die Sie übergeben, oder? Also ich habe diese Komponente hier drüben, App, die die Profilkarte zweimal verwendet, und wir geben hier ein paar Requisiten ein, Sie können sehen, und diese Requisite wird hier von uns destrukturiert, und wir verwenden die destrukturierten Daten innerhalb der Anlage hier drüben und wir verwenden die destrukturierten Daten innerhalb der die destrukturierten Daten innerhalb der die die Profilkarte zweimal verwendet, und wir geben hier ein paar Requisiten ein, Sie können sehen, und diese Requisite wird hier von uns destrukturiert, und wir verwenden die destrukturierten Daten innerhalb der Anlage hier drüben, richtig? Lassen Sie mich Ihnen nun ein Szenario geben. Hier übergeben wir H und wir übergeben H als Zeichenfolge, richtig? Nun, es gibt keine Art von Validierung als solche, okay? Es gibt keine Art von Validierung, die wir gerade durchführen, die uns helfen könnte, einem Entwickler oder wem auch immer , der diese spezielle Komponente verwendet, dieses Highlight hervorzuheben einem Entwickler oder wem auch immer , dass , hey, g eine Zahl sein soll und keine Zeichenfolge, oder? Im Moment bekommen wir also keinerlei Fehler. Wir sind alle gut, aber es wird Szenarien geben , in denen Sie eine Komponente entworfen haben und möchten , dass jeder, der an dieser Komponente arbeitet oder diese Komponente in seiner Datei verwendet, Daten auf eine bestimmte Weise weitergibt, oder? Denn normalerweise arbeitet man in einem Team an einer Komponente, schreibt eine Komponente und diese Komponente wird von einer beliebigen Anzahl von Entwicklern verwendet . Wie kommuniziert man das? Hier kommt also die Validierung von Requisiten ins Spiel. Mit Hilfe von Requisitentypen ist Prop Type nun ein Tool, mit dem die Requisiten validiert werden können , die übergeben werden oder die eine Komponente empfängt Okay? Mit Hilfe von Requisitentypen können Sie also helfen, Fehler schon früh in der Entwicklung zu erkennen schon früh in der Entwicklung zu wenn die Daten übergeben werden, und so sicherstellen, dass der aktuelle Datentyp an die Komponente übergeben wird Und wenn eine Komponente Requisiten erhält , die nicht den erwarteten Typen entsprechen, gibt React im Entwicklungsmodus eine Warnung in der Konsole Richtig? Das ist also etwas, das Sie wissen sollten, und lassen Sie uns sehen, wie Sie Validierungen hinzufügen können Ich würde also zuerst eine Eingabeanweisung verwenden müssen , also sage ich Eingabe, Prop-Typen Okay? Ich schreibe das in der Profilkarte Punkt Qx, und ich sage von, ich sage Requisitentypen hier drüben Okay, also ich mache diese Eingabeerklärung oben. Nun, was ich tun würde, ist hier, ich würde die Bestätigung einschreiben , die ich benötige. Um die Validierung hinzuzufügen, würden wir hier drüben sagen, wir würden Profilkarte sagen. Okay, das ist der Name der Komponente. Wir würden sagen tot, ich würde Requisitentypen oder so etwas Ähnliches sagen Okay. Und dann werde ich ein paar lockige Lobeshymnen öffnen. Okay, richte das mit einem Semikolon aus. Und hier drüben werde ich eine Bestätigung schreiben , was auch immer ich haben möchte. Damit ich einen Namen sagen kann. Als Namen muss ich Prop Types, tot string sagen. Okay. Also das ist einer. Okay. Ich kann für jeden Requisitentyp sagen, dachte ich, sagen wir Nummer. Wir wollen, dass es Zahl ist, richtig, also sage ich Zahl. Okay. Und für ein Mitglied, okay, ich sage Requisitentypen und gebe Punkt Bool hier drüben Okay. Und ich werde im Koma fallen. Okay? Ich habe diese Datei noch nicht gespeichert, aber vor dem Speichern möchte ich Ihnen zeigen, dass wir gerade eine Zeichenfolge übergeben und keine Fehler erhalten, oder? Also hier, wenn Sie aus app.j6 sehen, übergeben wir jeweils eine Zeichenfolge Wir bekommen keine Fehler auf der Konsole. Sobald ich das speichere und wenn ich hierher komme, werden Sie diese Warnungen hier sehen. Fehlgeschlagener Requisitentyp, ungültiges Alter vom Typ Zeichenfolge, das auf die Profilkarte angewendet wurde, erwartete Anzahl Okay? Sie erhalten diese Art von Warnungen also nur im Entwicklungsmodus , wenn Sie die Validierung von Requisitentypen verwenden Okay? Nun, was passieren wird, ist, wenn ein Entwickler die Profilkartenkomponente verwendet. Nehmen wir an, die Profilkartenkomponente wurde von Ihnen und mir als Entwickler entwickelt , ich bin Ihr Teamkollege, und ich verwende diese Profilkarte und bestehe zufällig H S 23. Welches ist eine Zeichenfolge Es würde einfach anfangen, Warnungen auf die Konsole zu werfen und der Entwickler, ich bin der Entwickler, in diesem Fall wüsste ich, dass ich es nicht als Zeichenfolge übergeben soll, sondern als Zahl. Okay? Nun, ich kann das auch hier auf Nummer ändern und die Warnung wird verschwinden. Ich kann also 23 sagen. Wenn ich das speichere, erhalte ich immer noch eine Fehlermeldung, okay, weil ich nur an einer Stelle geändert habe, oder? Also muss ich auch hier eine Änderung vornehmen. Speichere es einfach. Okay. Und jetzt werden Sie sehen, dass es keinen Fehler als solchen gibt. Okay? Also ist alles geklärt. Also, noch eine Sache, über die ich sprechen möchte , ist, wenn ich nicht Mitglied werde, schauen wir mal, was passiert, okay? Wenn ich also „Mitglied“ überspringe, wirst du sehen, dass es kein Problem an sich gibt, oder? Du siehst also, es gibt kein Problem, oder? Erhalte ich eine Fehlermeldung, dass ich dieses Mitglied bestehen soll? Nein, richtig? Sie können also auch dafür eine Validierung hinzufügen. Also, wenn irgendeine Art von Requisite verpflichtend ist, okay? Sie können jede Art von Validierung hinzufügen, Sie können diese Art von Validierung hinzufügen Fordert den Benutzer auf, den Wert für diese bestimmte Requisite zu übergeben Okay? Also hier, Boll, kann ich sagen, tot, und hier kann ich sagen, dass es erforderlich ist. Das kannst du sehen Wenn ich das speichere und hierher komme, wirst du sehen, dass die Requisite ist Mitglied auf der Profilkarte als erforderlich markiert ist, aber ihr Wert ist undefiniert, oder? Also früher habe ich diese Requisite nicht weitergegeben und ich habe auch keinen Fehler bekommen, aber jetzt muss ich das zwingend weitergeben Okay, es ist verpflichtend Es gibt kein Entkommen. Und wenn ich das speichere und eine Aktualisierung vornehme , wird der Fehler behoben. In Ordnung. Also ich hoffe, das ist klar, wie die Validierung der Requisiten funktioniert Denken Sie daran, dass dies angezeigt wird . Die Fehler, die Sie sehen, werden im Entwicklungsmodus angezeigt, und das wird als Warnung in der Browserkonsole angezeigt, was den Entwicklern helfen wird, das Problem zu beheben und zu beheben, oder Dafür gibt es also Requisitentypen, okay? Also das bedeutet, dass du eine Zeichenfolge willst. Das heißt, du willst eine Zahl. Das heißt, du willst einen booleschen Wert er ist auch erforderlich, okay? Er und sein Name sind optional, aber ein Mitglied ist erforderlich, okay? Du kannst T's auch hier erforderlich machen , indem du das hier eingibst. Wenn Sie „erforderlich“ hinzufügen, bedeutet dies, dass H ebenfalls erforderlich ist und es nicht optional ist. In Ordnung. Je nach Ihren Anforderungen können Sie also diese Art von Validierungen hinzufügen und die Dinge erledigen Alles klar? Ich hoffe, Sie konnten mir folgen, und ich hoffe, das war hilfreich. 24. Requisiten mit Arrays verwenden: Lassen Sie uns hier anfangen, darüber zu sprechen, wie Sie Arrays als Requisiten verwenden Wir haben also diese Komponenten-App, die hier zweimal die Profilkarte verwendet. Und ich habe diese Profilkarte, die die Requisiten, die ich erhalte, neu strukturiert Ich zeige die Requisiten an und ich habe hier eine Bestätigung für die Requisiten Okay? Nehmen wir an, ich möchte die Hobbys hier anzeigen, und es können mehrere Hobbies sein. Was ich also tun möchte, ist, dass Hobbys hier in Form von Arrays gespeichert werden Nehmen wir an, ich habe Hobbys, also kann ich sagen, Con-Hobby eins Okay. Ich kann Hobby eins sagen und ich kann E dieser Art haben. Okay, so etwas in der Art, und ich sage Lesen, und ich werde vorerst nur zwei Hobbys haben: Kochen. Okay. Ich werde das weitergeben. Okay. Und was ich hier machen kann, ist, ich kann hier eine Requisite hinzufügen, Hobbys, und das kann ich weitergeben Ich kann Hobby sagen. Eins. Alles klar, das wird jetzt verabschiedet, und was ich tun muss, ist, dass ich es hier drüben nutzen muss. Okay? Also ich kann hier Hobby sagen. Okay. Und ja, ich verstehe das Hobby hier drüben. Okay, Hobbys, es wird kein Hobby sein. Es werden Hobbys sein, weil du es hier als Hobby weitergibst. Okay? Also habe ich Hobbys. Also, was wir tun müssen, ist, die Hobbys anzuzeigen, richtig? Also als Erstes komme ich her. Ich sage drei Jahre oder drei Jahre, Hobbys. Okay. Und hier drüben werde ich sagen, dass ich eine ungeordnete Liste hinzufügen werde, L, und dann werde ich hier drüben ein Ja-Skript schreiben lassen Ich werde Hobbies Map sagen. Also werde ich hier die Kartenmethode verwenden. Okay, Hobbys Dot Map, und ich werde Hobby sagen. Ich werde hier zwei Parameter haben, okay. Also nur für den Fall, dass du nicht weißt, was ich mache, ich verwende Map hier drüben und ich verwende Map, um im Wesentlichen über jedes Element im Hobbys-Array zu iterieren über jedes Element im Hobbys-Array Hobbies ist also ein Array hier drüben, das ich erhalten habe. Okay, ich gebe es als Array weiter. Du kannst es hier sehen, oder? Es ist ein Array. Okay? Jetzt muss ich darüber iterieren und es dem Benutzer anzeigen Also Arrays in JavaScript. Das ist also JavaScript und Arrays in JavaScript haben diese erstaunliche Methode namens Map, die Sie verwenden können, oder? Also benutze ich Hobbies Dot Map. Nun, was Map macht, ist, dass es über jedem Element im Hobbys-Array im Hobbys-Array oder dem Array, mit dem Sie es verwenden Im Moment handelt es sich bei dem fraglichen Array also um Hobbys. Ich sage, es bewertet jedes Element im Hobbys-Array, und was Sie tun, ist für jedes Element im Array diese Pfeilfunktion auszuführen. Ich habe also diese Pfeilfunktion, die Sie sehen, also schneide ich das einfach ab. Okay, das ist eine Karte. Okay. Jetzt füge ich diese Pfeilfunktion ein. Kannst du sehen? Okay. Dies ist die Pfeilfunktion, die ich verwende, und diese Pfeilfunktion wird angewendet oder ausgeführt, und sie wird einen neuen Wert zurückgeben. Okay? Also das nimmt zwei Parameter in Anspruch, diese Pfeilfunktion, Hobby und Index. Hobby ist nun das einzelne oder das aktuelle Element im Hobbys-Array während jeder Iteration Es repräsentiert also das aktuelle Element während jeder Iteration Wenn unsere Hobbyliste zum Beispiel Lesen und Kochen lautet, wird zuerst das Hobby Lesen und dann das Kochen sein Und der entsprechende Index wird hier übergeben. Okay? Also was ich tun würde ist, hier etwas zurückzugeben. Also, was auch immer Sie hier hinzufügen , wird zurückgegeben. Also werde ich hier ein LI-Element erstellen. Okay. Und ich sage, Schlüssel ist gleich, ich füge hier Index hinzu und Hobby wird hier hinzugefügt, ungefähr so. So wie es ist. Okay? Also haben wir diese Funktion hier hinzugefügt, und diese Funktion wird im Grunde für jedes Element im Array ausgeführt. Okay? Es hat zwei Parameter. Einer ist das aktuelle Element im Hobbys-Array bei jeder Iteration. Es heißt Hobby. Und dann haben wir den Index. Das ist der Index des aktuellen Elements im Array, okay? Und was passiert, ist, dass nach Ausführung dieser Funktion ein Wert zurückgegeben wird, der Ausführung dieser Funktion ein Wert zurückgegeben wird, und der Wert, der in diesem Fall zurückgegeben wird, ist dieser Markdown, okay, oder dieser JSX-Code, den wir hier zurückgeben. Jetzt passiert das, was das macht, ist LI, okay Es ist also eine Liste, die gerade erstellt wird. Es stellt ein einzelnes Listenelement dar. Okay. Und ich habe diesen Schlüssel hier drüben. Okay. Nun, hier wird die wichtigste Stütze mit dem Wert Index hinzugefügt Für das erste Element wird der Schlüssel also eins sein. Für das zweite Element wird der Schlüssel zwei sein. Entschuldigung, für das erste Element wird der Schlüssel Null sein. Okay? Und für das zweite Element wird der Schlüssel eins sein und so weiter, weil Indizes natürlich mit Null beginnen, oder? Nun, warum fügen wir diesen Schlüssel hier hinzu? Okay? Das Hinzufügen dieses Schlüssels ist also eine der besten Methoden wenn Sie mit Listen in React arbeiten, oder? Oder wann immer Sie Arrays in React rendern. Das ist also sehr wichtig , weil der Schlüssel hier benutzt wird, um das Rendern der Liste effizient zu verwalten, okay? Und dieser Schlüssel hilft, zu reagieren, Überblick über jeden Listeneintrag zu behalten und nur diejenigen zu aktualisieren , die sich ändern und die Änderungen benötigen, wenn sich die Liste ändert. Wenn es also irgendwelche Änderungen an der Liste oder dem Array hier drüben gibt, okay, basierend auf diesem Schlüsselwert, wird es ein aktualisiertes Update durchführen, okay, weil es ein Update durchführen muss, oder? Wenn sich der Wert ändert, er nicht sofort neu geladen Basierend auf dem Schlüsselwert wird also, je nachdem, wie dieser Schlüssel zugewiesen und auf der Schnittstelle gerendert wird, der Hot-Reload durchgeführt Aus Sicht der Optimierung benötigt React also diesen Schlüssel, und es ist wichtig, ihn einzubeziehen , wann immer Sie ein Array oder eine Liste rendern , sollte ich sagen Okay, das haben wir also getan. Und wenn du herkommst, okay, wir sehen keinerlei Ergebnisse. Warum? Warum so? Okay. Also, okay, ich erhalte hier drüben eine Fehlermeldung 11, okay? Und kann die Eigenschaften von undefined nicht lesen. In Ordnung. Das liegt daran, dass ich das nur für wahrscheinlich 11 Komponente weitergebe und nicht für die andere. Also wenn ich das speichere, sollte ich die Ausgabe idealerweise hier sehen. Sie können die Ausgabe sehen, die ich sehe. Okay. Jetzt sehe ich nicht, dass hier Hobbys gezeigt werden. Hobbys werden nicht angezeigt. Okay, Hobbys werden in der Tat nicht vererbt, okay? Lassen Sie uns also sehen, warum das Hobby nicht gerendert wird. Also ich glaube, ich habe hier das Problem. Wir stellen gerade dieses LI her, aber wir geben es nicht zurück Also richtig? Wir müssen hier eine Rücksendeerklärung hinzufügen. Okay. Und sobald wir die Rücksendeerklärung hinzufügen, lassen Sie mich sie hier speichern. Ich werde das auch mit einem Semikolon schließen, okay, und ich werde es speichern Und wenn du herkommst, wirst du sehen, Lesen und Kochen Okay. Ignoriere die Schnittstelle. Ordnung. Es sieht nicht so hübsch aus, aber ich hoffe, ich kann die Konzepte , über die wir lernen, vermitteln , oder? Hier können Sie also sehen, wie Hobby, Hobby eins bestanden wird. Okay. Was Sie tun können, ist, dass ich das direkt ausschneide , anstatt eine Variable zu verwenden. Ich werde das einfach hier loswerden. Okay. Und hier drüben kann ich das Hobby einfach einfügen. Okay? Also hier kann ich lesen und wandern. Okay, und schwimmen. Also zuerst liest, kocht, ein anderer schwimmt und wandert. Und wenn du hier drüben siehst, lesen und kochen und schwimmen und wandern. Okay? Also wird es richtig angezeigt. Das ist absolut großartig hier drüben. Okay? Also hier, wir übergeben das Zeichenketten-Array hier drüben, richtig? Das String-Array wird übergeben. Jetzt können Sie hier eine Art von Validierung hinzufügen , wenn Sie möchten. Also hier komme ich zu den Requisitentypen. Und ich kann eine Bestätigung hinzufügen. Nehmen wir an, ich möchte Hobbys nur als Zeichenkette haben . Ich möchte nicht, dass andere Hobbys hinzukommen. Okay? Also was ich tun kann, ist, hier Hobbys zu sagen. Okay? Colin, ich sage Requisitentypen, so etwas Eine Reihe von hier drüben. Und hier drüben kann ich Requisiten sagen, Punkt, ich kann Zeichenfolge sagen, so etwas in der Art. Das ist also eine Syntax, der Sie folgen müssen. Okay. Wir sehen ein Array von Requisitentypen und wir sehen, dass es eine Zeichenfolge sein sollte, okay? Und das stellt sicher, dass Hobby immer aus einer Reihe von Saiten besteht Also wenn ich das speichere und hierher komme, okay, wenn ich neu bin, wirst du sehen, dass es keine Fehler als solche gibt, okay? Aber wenn ich das in Zahl ändere , und wenn ich hierher komme, können Sie sehen, dass der Requisitentyp ungültig ist, sofern eine Zahl Sie werden sehen, wie das Rendern hier passiert. Nichts verhindert das Rendern, aber es wird eine Warnung ausgegeben, okay? Das ist der Vorteil der Validierung , die wir durchführen. Alles klar? Also, ja, ich hoffe, das ist nützlich, und ich hoffe, Sie konnten nachvollziehen , wie Sie Arrays mit Requisiten in React verwenden können Arrays mit Requisiten in React verwenden 25. Callbacks einrichten: Jetzt ist es an der Zeit, über Rückrufe zu sprechen. Nun, was sind Rückrufe? Callbacks sind Funktionen, die als Argumente an andere Funktionen übergeben und ausgeführt werden nachdem eine bestimmte Aufgabe abgeschlossen ist Nun, diese spezielle Aufgabe könnte so etwas wie eine Art Rendervorgang oder eine Art asynchrone Operation wie ein API-Aufruf oder etwas Ähnliches Okay? Also werde ich dir in diesem Beispiel zeigen, wie wir Callbacks nutzen können in diesem Beispiel zeigen, wie wir Callbacks nutzen Also hier, was ich getan habe, ist diese, äh, App-Komponente, die Sie hier sehen. Okay? Dies ist die gesamte App-Komponente, die hier die Profilkarte verwendet. Okay? Und die Profilkarte ist die Komponente hier drüben, okay? Es rendert einige Daten, einige Requisiten, die es von der übergeordneten Komponente erhält Und ich habe etwas CSS hinzugefügt, nur um diese Oberfläche hier zu verschönern. Sie werden also eine etwas schöne Oberfläche sehen , eine anständige Oberfläche Okay, vorzeigbar. Ich werde nicht sagen, dass es zu gut ist, aber ich würde sagen, dass es vorzeigbar ist. In Ordnung. Und falls du herkommst, das ist das CSS, das ich dafür hinzugefügt habe. Es ist da in der App-Dot-CSS-Datei. Okay? Es ist sehr einfaches CSS, ziemlich unkompliziert. Und ich habe die Arbeit erledigt, indem ich auch ein paar Klassen hinzugefügt habe, wie App enthält hier und die Profilkarte hier drüben. Richtig. Kommen wir nun zum Thema Rückrufe, okay? Nehmen wir an, ich möchte einen On-Click-Listener für Hobbys hinzufügen, und dieser On-Click-Listener wird einen Alarm auslösen, okay Und ich möchte wissen, auf welches Hobby geklickt wurde. Ich möchte es dem Benutzer zeigen. Okay? Die Funktionalität ist also einfach. Okay, es könnte komplexer sein, aber ich bleibe einfach bei der einfachen Funktionalität. Ordnung. Also, ich würde eine Funktion definieren lassen, richtig, zuallererst, innerhalb der App, ich sage, lass uns eine Funktion haben. Also hier kannst du sagen, const handle, Hobby, klick hier drüben. Okay. Und ich werde einen Parameter haben. Okay, hier drüben. Ich benutze die Pfeilfunktion und sage Alarm. Okay, so etwas. Und hier sage ich, du hast auf „Ich sage größeres Hobby“ geklickt , okay? Hobby, so etwas in der Art. Okay? Also das ist eine Funktion , die ich erstellt habe, und ich möchte, dass diese Funktion ausgelöst wird , wenn auf Hobby geklickt wird Okay? Außerdem richte ich das einfach ab. Also das ist ziemlich lang geworden, würde ich sagen. Okay. Es verschwindet vom Bildschirm, also richte ich das Haustier einfach besser aus. Okay? Also kannst du das hier sehen. Okay. Ich hole mir den Namen hier drüben. Jeder ist ein Hobby der Mitglieder. Okay, das ist jetzt lesbar und geht jetzt nicht mehr vom Bildschirm. Ordnung. Also, was ich jetzt tun muss, ist, was ich tun kann, ich kann diese spezielle Funktion als Rückruf an diese bestimmte Komponente übergeben als Rückruf an diese bestimmte Komponente Okay? Wie mit Hilfe von Requisiten? Ordnung. Also ich kann herkommen, okay, und ich kann Enter drücken und bei Hobby sagen, klick, das ist der Name der Requisite Ich kann diese JavaScript-Syntax haben und ich kann sagen, Handle Hobby Click, so etwas Okay. Und ich kann es auch dafür weitergeben. Hier, so etwas. Okay? Also ja, ich habe beide für beide Komponenten , die ich rendere, übergeben, beide Profilkarten, ich gebe das als Requisite Nun, hier auf der Profilkarte, was ich tun muss, ist, auf Hobbie zu gehen, hier drüben was ich tun muss, ist, auf Hobbie zu gehen zu klicken Okay, so etwas in der Art. Okay? Also, was ich hier machen werde, ist hier, ich muss dem LI-Element einen Listener hinzufügen , wenn wir das LI-Element rendern, richtig Also, was ich hier tun kann, ist nach einem Schlüssel wie diesem, ich kann sagen, wenn ich hier drüben klicke, und ich kann gleich sein Okay. Und ich füge das hinzu und ich füge die Pfeilfunktion hinzu und ich sage auf Hobby, klicken Sie hier, und ich gebe das Hobby weiter, das ich habe, okay? Also hoffe ich, dass das Sinn macht. Okay? Also, wir fügen hier ein On-Click L hinzu. Wir haben Zugang zu dem Hobby. Mit Hilfe dieser Karte iteriert diese Map also über das Hobbie-Array Und für jede Iteration haben diese beiden Dinge das aktuelle Hobby und den Index Also gebe ich dieses Hobby hier weiter. Okay, immer wenn das Klick-Event ausgelöst wird und ich den On-Hobbie-Click nenne Was ist bei Hobbie-Click? Es kommt hier als Requisite rein Und was kommt hier als Requisite rein? Das Ding kommt rein. Diese Funktion. Okay. Und was passieren wird ist dieses Ding, das wir hier als Parameter übergeben. Okay. Lass mich das auch auf die neue Zeile übertragen, so etwas. Okay. Also diese Sache, die du auf dieses Ding bekommst , das du als Parameter übergibst, Hobby wird hier drüben übergeben . Okay, hier drüben zu dieser Funktion und diese Warnung wird ausgelöst. Okay? Lassen Sie uns das in Aktion sehen. Ich werde diesen Code speichern. Ich werde herkommen. Ups. Sie sehen also Schwimmen auf Klick Wandern auf Klick Beim Rendern ist ein Problem aufgetreten . Also hier drüben, wenn du auf Klick Hobby siehst. Hoppla. Wir haben einen Fehler gemacht, also werde ich das einfach streichen Okay. Ich schneide das einfach. Okay. Und, äh, also habe ich das versehentlich an der falschen Stelle hinzugefügt. Okay, es sollte also hier drüben sein. Okay? Ja, so etwas in der Art. Jetzt lass mich das auf eine neue Linie bringen. Es sollte hinter dem Schlüssel stehen und dann dieser abschließende Tag hier für HTML, und dann rendern wir die KI so, wie ich hoffe, dass das jetzt Sinn macht, okay? Es hat also funktioniert, dass das LI-Tag zwei Attribute hat. Eines ist der Schlüssel, ein anderes ist beim Klicken, das können Sie sehen. Und dann schließen wir diesen Tag hier. Wir beginnen mit dem Hobby und schließen dann das LI-Tag. Okay. Ich hoffe, das macht Sinn. Und wenn du herkommst, mache ich es frisch. Du hast auf Kochen geklickt, okay? Du hast auf Wandern geklickt. Du hast auf Schwimmen geklickt. Sie haben auf Lesen geklickt. Sie können also sehen, wie Callback funktioniert, okay? Nun, das kann so, hier sind wir in eine Komponente übergegangen. Wir haben dies als Requisite an die Komponente übergeben. Okay? Sie können das an jeden weitergeben, normalerweise werden Callbacks ausgelöst Sie sollen ausgelöst werden, wenn asynchroner Vorgang oder ein beliebiges Rendern abgeschlossen ist Okay? In solchen Szenarien können Sie also Callback verwenden Nehmen wir an, Sie haben einen API-Aufruf Sie können diese Funktion als Rückruf übergeben diese Funktion als Rückruf Und sobald der API-Aufruf abgeschlossen ist, können Sie, abhängig von einer bestimmten Operation oder einem bestimmten Ereignis, abhängig von einer bestimmten Operation oder einem bestimmten Ereignis, den Rückruf auslösen, so wie wir ihn hier auslösen Richtig? Das ist also die in der übergeordneten Komponente definierte Funktion, die von einem Element in der untergeordneten Komponente mit Hilfe von On-Click Lissner ausgelöst wird von einem Element in der untergeordneten Komponente mit Hilfe von On-Click Lissner ausgelöst der untergeordneten Komponente mit Hilfe von On-Click Lissner Ordnung. Also ich hoffe, das war klar und ich hoffe, Sie können das verfolgen. 26. Requisiten und die Spread-Syntax: Lassen Sie uns hier darüber sprechen, wie Sie den Spread-Operator verwenden können , wenn Sie mit React arbeiten und Requisiten übergeben Okay? Also, Spread Operator ist ein JavaScript-Konzept, okay? Und wir werden sehen, wie wir es hier anwenden können. Was hier passiert ist, dass ich diese App-Komponente habe, okay, mit der diese Funktion erstellt wurde, okay, diese Funktion, den Hobbyklick innerhalb der App-Komponente handhaben diese Funktion erstellt wurde, okay, diese Funktion, , und ich übergebe diesen Handle-Hobbyklick zusammen mit einigen anderen Requisiten hier an die Profilkarte, und ich rendere die Profilkarte hier drüben, okay? Und die Profilkarte ist eine sehr einfache Karte, die diese Informationen in der Alles klar? Es hat auch einige Bestätigungen Also werde ich die Requisiten auf der Profilkarte mit Hilfe des Spread-Operators weitergeben, okay? Requisiten auf der Profilkarte mit Hilfe des Spread-Operators weitergeben, okay Und was ich zuerst tun werde, ist ein Objekt mit all diesen Werten zu erstellen Nun, diese Requisiten werden an die Profilkarte weitergegeben, und das sind Requisiten für unterschiedliche Zwecke, richtig? Das sind also Eigenschaften, die in gewisser Weise Alice und John repräsentieren, richtig? Also was wir tun können, ist, diese Requisiten hier in Objekte umzuwandeln Okay? Also ich würde hier sagen, ich würde Const sagen, ich würde Ale Profile sagen Okay, ich würde hier Alice-Profil sagen, und ich würde sie hier als Objekte hinzufügen Oh, tut mir leid, als Eigenschaften. Okay. Also hier, ich konstruiere ein Objekt, okay, ich brauche diese lockige Klammer nicht Okay. Und hier, dann habe ich, äh, dieses Mitglied, okay, so etwas. Ich brauche True nicht, so etwas. Ich werde Hobbys haben. Und wenn du diese lockigen Zahnspangen loswirst, war das bei GSX nötig, aber nicht hier drüben, okay? Und ich nehme Komma Und, äh, ich füge das hinzu. Okay. Und ja, ich bekomme immer noch Fehler, ich weiß. Und der Grund dafür ist , dass es Schlüssel-Wert-Paare sein sollten und nicht gleich sein sollten, okay? Also ich werde Ups. Ich werde Ups. Ich mache Mist mit der Tastatur. Okay. Also kopiere ich das einfach. Okay. Ich kopiere das einfach und füge es wieder ein. Ups. Also ja, so etwas Okay. Und ja. So sieht das Alice-Profil aus. Okay? Also geben wir die Daten für die Alice hier drüben weiter. Okay? Wir müssen dasselbe auch für John tun. Also schneide ich das. Okay, schneide das hier drüben ab. Ich komme her. Okay. Das ist erledigt. Ich sage Const, John, Profil Okay. Und hier, lass uns das haben. Okay. Als Erstes bringe ich das hier mit einem Komma rüber. Okay. Und wir müssen das ein bisschen formatieren, okay? Also 42, ich brauche keine lockige Zahnspange. Die wurden für zähen Sex benötigt. Und ich füge Doppelpunkt hinzu. Okay, Koma. Und auch hier füge ich Doppelpunkt hinzu und diese lockigen Zahnspangen werden nicht benötigt Ich füge Koma hinzu und das wird Doppelpunkt sein. Die geschweiften Klammern werden nicht benötigt, und dann richte ich das aus. Das ist erledigt. Alles klar. Wir haben ein John-Profil und wir haben ein Alice-Profil. Wir können jetzt hierher kommen , auf der Profilkarte. Okay, wir müssen sie als Requisiten übergeben, diese Objekte als Requisiten Was ich tun kann, ist, eine lockige Basis hinzuzufügen. Ich kann drei Punkte sagen und ich kann hier Alice-Profil sagen. Und hier drüben sehe ich drei Punkte und das Profil von John. Ich kann sehen, ob das ist. Wenn Sie sich nun die Ausgabe ansehen, hat sie sich nicht geändert. Es gibt keine Änderung an der Ausgabe, keine Fehler als solche, okay? Alles ist gleich. Es ist nur so, dass wir die Dinge ein bisschen besser gemacht haben , indem wir zuerst Profile für jedes Mitglied erstellen , was wir alles weitergeben wollen, und wir geben das mit dem Spread-Operator an diese spezielle Komponente weiter. Der Spread-Operator wird also verwendet, um alle wichtigen Zahler im Objekt als Requisiten an die Profilkartenkomponente weiterzuleiten Objekt als Requisiten an die Profilkartenkomponente Auf diese Weise verteilen Sie das Objekt, anstatt jede Requisite manuell aufzulisten, und die Komponente erhält den entsprechenden Wert Ordnung. Slide bietet Vorteile gegenüber dem älteren Ansatz. Viele Leute würden auch den älteren Ansatz bevorzugen, aber einige Vorteile hier sind sauberer Code. Sie reduzieren den Ruf und haben im Grunde genommen Objekte erstellt, die auf den Daten basieren, die Sie weitergeben möchten. Nun, dieses Objekt bauen wir im Handumdrehen, richtig? Wir konstruieren, wir codieren alle Werte fest. Es wird Szenarien geben, in denen Sie dieses Objekt direkt von der API bekommen . Okay, Sie erhalten einige Daten von der EPI, Sie konvertieren sie in diese Objektsorten und geben sie dann auf diese Weise an die Requisiten weiter Entschuldigung, für die Komponente in Form von Requisiten. Okay. Lassen Sie sich also nicht mit dieser Art von Syntax verwechseln. Es ist ein und dasselbe, oder? Es macht den gleichen Job. Es sind nur die verschiedenen Arten, Dinge zu tun. Okay? Das ist sehr nützlich, wenn Sie Daten aus einem EPI-Aufruf oder einem Datenbankaufruf abrufen und sie dann in Form von Objekten haben, okay? Anstatt hier die gesamten Requisiten manuell zu konstruieren, verwenden Sie einfach den Spread-Operator und übergeben ihn, weil Sie ihn bereits in Form von ihn, weil Sie ihn bereits Objekten erhalten Richtig? Ich hoffe, das ist nützlich und ich hoffe, Sie konnten mitmachen. 27. Schlussbemerkung zum Kurs: Und damit sind wir am Ende dieser aufregenden Reise in die Welt der React-Grundlagen angelangt Gemeinsam haben wir die Kernkonzepte von React untersucht, angefangen bei der Einrichtung Ihres ersten Projekts Mastering Chair sX bis hin zu Komponenten, Requisiten und vielem Im Laufe der Zeit haben wir praktische Fähigkeiten aufgebaut und sogar ein Projekt abgeschlossen, um Ihr Wissen zu festigen Aber denken Sie daran, das ist erst der Anfang. React ist ein leistungsstarkes und sehr vielseitiges Tool mit endlosen Möglichkeiten, dynamische Webanwendungen zu erstellen dynamische Webanwendungen wie Sie es bisher verstanden haben. Ich ermutige Sie, weiter zu experimentieren, erforschen, Themen weiterzuentwickeln und das Gelernte auf Ihre eigenen Projekte anzuwenden Ich freue mich sehr zu sehen, wie Sie React verwenden, um fantastische Anwendungen für Ihr Portfolio zu erstellen ob es sich um ein persönliches Projekt, berufliche Aufgabe oder etwas anderes , Sie können React gerne verwenden, und es wird als Grundlage für eine große Anwendung dienen . Die Fähigkeiten, die Sie hier erworben haben, werden Ihnen als Sprungbrett für Ihre weitere Karriere dienen als Sprungbrett für Ihre weitere Karriere Vielen Dank, dass Sie eine so engagierte und motivierte Lerngruppe sind Ich hoffe, dieser Kurs hat Ihnen nicht nur neue Fähigkeiten beigebracht, sondern Sie auch ermutigt, die Webentwicklung aus einer völlig anderen Perspektive und Dimension zu betrachten einer völlig anderen Perspektive Webentwicklung aus einer völlig anderen Perspektive und Dimension zu Vergessen Sie auch nicht, sich den Projektbereich dieses Kurses anzusehen in dem wir ein Projekt haben, das Sie abschließen und mit der gesamten Klasse teilen können . Danke, dass du uns auf dieser Reise begleitet hast. Viel Spaß beim Programmieren, alles Gute.