React lernen: Von Anfängerkonzepten zur Erstellung einer vollständigen React-App

1. Intro: Wissen Sie, was die beliebteste Frontend-Interview-Frage ist Es, kannst du einen Zähler bauen? Heute? Wir werden alles durchgehen, was Sie wissen müssen, um Ihr eigenes Projekt mit React zu erstellen, einschließlich der Erstellung dieses Zählers damit Sie Ihr nächstes Vorstellungsgespräch bestehen können. Hi, ich heiße Zoe. Ich bin Softwareingenieur und ehemaliger Professor , der es liebt, anderen beizubringen , wie man Programmieren lernt Ich habe Unmengen von Websites und Web-Apps mit React, CSS, HTML und anderen Technologien erstellt CSS, HTML und anderen Technologien Am Ende dieses Kurses werden Sie in der Lage sein, dies selbst zu tun . Lass uns anfangen. 2. Kursprojekt: Klassenprojekt. Das Projekt für diese Klasse besteht darin, einen voll funktionsfähigen Zähler zu erstellen , der dafür React verwendet. Sie benötigen Zugriff auf einen Computer und einen Code-Editor wie Visual Studio Code. Sie sollten auch ein gewisses Verständnis von Java-Skript sowie HTML und CSS haben. Ich hinterlasse Links zu allen Ressourcen und Ressourcen, die Sie benötigen, auf der Registerkarte Projekt und Ressourcen unten. 3. Warum reagieren?: Warum React? React wurde bei Facebook entwickelt und 2013 der Öffentlichkeit zugänglich gemacht. Es wurde ursprünglich entwickelt , um ineffiziente Seitenneuladungen und -aktualisierungen zu bewältigen , bei denen Zeitpunkt das gesamte Dom- oder Dokumentobjektmodell neu gezeichnet werden musste . Bei jedem Update behebt React dieses Problem, indem das sogenannte virtuelle Do erstellt wird, eine Darstellung des Dadurch konnte React nur die Aspekte oder Komponenten des Doms aktualisieren , die sich geändert haben, und nicht die gesamte Seite, was zu einer besseren Leistung führte React hat die Webentwicklung grundlegend verändert und ist immer noch eine der beliebtesten Bibliotheken auf dem Markt Durch die Verwendung von Komponenten können Entwickler jetzt modularen Code viel einfacher schreiben , wodurch sie viel effizienter und effektiver entwickeln viel effizienter und effektiver Andere beliebte Frameworks, die oft mit React verglichen werden, sind View und Angular. 4. Komponenten: Komponenten. Komponenten sind wiederverwendbare Codeteile, die reagieren und nutzen, um ihre Modularität aufrechtzuerhalten Stellen Sie sich sie als die Bausteine , die Entwickler verwenden, um Apps zu erstellen Eine Komponente ist ein eigenständiger, wiederverwendbarer Code, der seine eigene Funktionalität, seinen eigenen Status und seine eigene Struktur kapselt Diese Komponenten können als eine Kombination aus HTML und Javascript oder JS betrachtet werden, die in React verwendet wird Jede Komponente kann ihren eigenen Status haben, der Daten darstellt, die sich im Laufe der Zeit ändern können, und eine Reihe von Eigenschaften oder Requisiten, die es übergeordneten Komponenten ermöglichen, Daten an ihre untergeordneten Komponenten weiterzugeben So wie HTML Elemente innerhalb anderer Elemente hat, hat React Komponenten innerhalb anderer Komponenten Diese internen Komponenten werden als untergeordnete Elemente der äußeren Komponenten betrachtet. 5. Requisiten und Staat: Requisiten und Staat. Um React wirklich zu verstehen und in vollem Umfang nutzen zu können, müssen wir über Status und Eigenschaften sprechen Oder wie sie Requisiten genannt werden. Schauen wir uns eine grundlegende Komponente an. Diese Komponenten sind eigentlich ihre Basis, nur Funktionen. Sie können Argumente annehmen, sie können Variablen ändern und sie können einen Wert zurückgeben. Einfach ausgedrückt können wir uns Requisiten als die Argumente vorstellen , die an unsere Funktion übergeben werden , wenn sie state heißt, als lokale Variablen, die nur innerhalb unserer gegebenen Komponente existieren Wir werden diese Definition später näher erläutern, aber es ist wichtig, zuerst zu verstehen, wie sie funktioniert 6. React-App erstellen: React-App erstellen. Es gibt verschiedene Möglichkeiten , eine React-App einzurichten. In diesem Kurs gehen wir auf die beliebtesten ein. Die ursprüngliche Methode, eine React-App einzurichten war die Verwendung von Create React App (CRA). Da React eine Bibliothek und kein voll funktionsfähiges Framework ist , es mehrere andere Teile wie Build-Tools, damit es vollständig funktioniert benötigt es mehrere andere Teile wie Build-Tools, damit es vollständig funktioniert. Create React-App wurde ebenfalls von Facebook entwickelt, um einen Großteil dieser Komplexität zu beseitigen und sie in einen einfachen, aber leistungsstarken Befehl umzuwandeln . Durch die Verwendung der Create React-App ersparen Sie sich stundenlange Kopfschmerzen , wenn Sie zum ersten Mal versuchen, ein neues React-Projekt zu starten . Um Create React App auszuführen, geben Sie einfach px, create react app, gefolgt vom Namen Ihrer App in das Terminal ein und drücken Sie die Eingabetaste. Nach ein paar Minuten sind Sie startklar. Sie können den Befehl selbst in Ihrem Terminal ausführen, wenn Sie sehen möchten, wie die Create React-App aussieht. Wir werden es in unserem Projekt verwenden. Die Verwendung der Create React App ist für ein kleines Projekt wie diesen Zähler in Ordnung . Ich möchte Sie jedoch davor warnen, damit etwas Größeres zu bauen , da es nicht mehr gewartet wird. 7. Bootstrap: Bootstrap. Bootstrap ist eines der beliebtesten CSS-Frameworks für die Entwicklung responsiver Websites Verwendung von Open Source ist kostenlos und eignet sich besonders gut zum Erstellen mobiler Websites, die zuerst reagieren Bootstrap basiert auf HTML, CSS und Javascript. Und bietet tatsächlich eine Reihe von vorgefertigten Komponenten, Vorlagen und Stilen, mit denen Entwickler schnell erstellen und iterieren Es ist auch so konzipiert, dass es in allen Browsern funktioniert, was hervorragend ist, um sicherzustellen, dass Ihre App für alle Zielgruppen korrekt angezeigt wird Wir werden heute React Bootstrap verwenden, um unseren Entwicklungsprozess zu beschleunigen 8. React-Setup: Ordnung, jetzt, wo wir ein bisschen mehr über React wissen, wollen wir weitermachen und unseren eigenen Zähler aufbauen . Wie ich bereits erwähnt habe, ist es wirklich wichtig zu verstehen, wie man baut, , zu verstehen, wie man baut, denn das ist eines der Dinge, die Sie in einigen Vorstellungsgesprächen gefragt werden und ob Sie sich dafür entscheiden die Karriere eines Frontend-Entwicklers fortzusetzen. Lassen Sie uns also loslegen. Also genau hier kannst du sehen, wie ein fertiger Zähler aussehen könnte. Es gibt nicht viele Stile und Designs, aber es ist ziemlich einfach. Aber was die Logik angeht, ist es funktional. Sie würden von Ihnen erwarten , etwas zu erstellen, das eine Zahl anzeigt und Sie diese dann ergänzen können. Sie können also eine hinzufügen oder eine davon subtrahieren. Ziemlich einfach, aber lassen Sie uns darauf eingehen, wie wir das tatsächlich bauen können Wenn wir zu Visual Studio Code wechseln, möchten wir als Erstes eine React-App erstellen. Wie ich bereits erwähnt habe, können wir die Create React-App für dieses Projekt verwenden , da es so klein ist. Aber in Zukunft werden wir über die Verwendung von Lösungen wie sprechen . Als Nächstes starten wir unsere Create React-App, PX createapp Und dann werden wir es Counter nennen. Das wird ein paar Minuten dauern, bis es losgeht. Lassen Sie uns wieder hineinspringen, sobald der Bau fertig ist. Jetzt, da unsere Create React-App den Ordner endlich erstellt hat, wir weitermachen und anfangen, damit zu arbeiten. Ich ändere das Verzeichnis in den Ordner. Und los geht's, wir haben es geöffnet. Ordnung, also lass uns weitermachen und das öffnen und sehen, mit welcher Art von Dateien und Ordnern wir arbeiten. Auf der linken Seite sehen Sie also, dass wir eine Reihe verschiedener Ordner haben , die im Grunde genommen durch die Verwendung der Create React-App für uns erstellt wurden . Wie ich bereits erwähnt habe, ist React eine Bibliothek und kein Framework. Es müssen also mehrere andere Build-Tools installiert werden, damit es ordnungsgemäß funktioniert. Wenn wir uns also das Read Me ansehen, erfahren wir ein bisschen mehr darüber, wie man mit der Create, React App arbeitet , welche Dinge wir tun können, welche Befehle wir ausführen können. Wenn Sie in der Vergangenheit jemals mit NPM oder Note gearbeitet haben, sollten Sie mit einigen dieser Befehle vertraut sein Falls nicht, lassen Sie uns kurz wissen ob Sie in der Vergangenheit jemals mit Node oder NPM gearbeitet haben, sollten Sie mit einigen dieser Befehle vertraut sein Schauen wir uns die an, die React-App-Angebote für uns erstellen React-App-Angebote für uns Wir haben also NPM Start , das die App im Entwicklungsmodus auf lokalen Host 3.000 ausführt. Lokaler Host 3.000 ist der bevorzugte Ort für die Ausführung der App Dies basiert nur auf einer Konfiguration , die vom Create React-Team festgelegt wurde Dann haben Sie einen weiteren Befehl namens NPM test. Auf diese Weise können Sie Tests in Ihrer React-App ausführen, und wir werden uns diese Tests in einer Sekunde ansehen Wir haben auch eine Produktionsrechnung , mit der ein produktionsoptimierter Build erstellt werden soll. Wir haben Eject, das ich persönlich nicht oft benutzt habe, und dann haben wir ein bisschen mehr darüber, was React ist, wie es gebaut wurde, wie man es richtig benutzt, solche Dinge Deshalb ermutige ich Sie, sich das durchzulesen. Lesen Sie mich, wenn Sie es noch nicht gelesen Es enthält einige Informationen , die nützlich sein könnten. Wie ich bereits erwähnt habe, wird Create React App derzeit nicht für die Zukunft beibehalten. Es kann also sein, dass die Informationen zum Zeitpunkt, zu dem Sie sich dieses Video ansehen, aktuell sind oder auch nicht . In Ordnung, jetzt schauen wir uns das Paket Json an. Also nochmal, wenn Sie schon einmal mit NPM oder Jason gearbeitet haben, Sie vielleicht zumindest mit dem Format vertraut ist sind Sie vielleicht zumindest mit dem Format vertraut und wissen, dass dies quasi eine der notwendigen Dateien wenn Sie ein Projekt erstellen Die Package Dot Json-Datei enthält also verschiedene Elemente , die uns helfen, unser Projekt zu identifizieren und zu verstehen , mit welchen Versionen der verschiedenen Abhängigkeiten wir arbeiten , die wir installiert haben Also oben steht der Name unseres Paketzählers. Wir können das jederzeit ändern, wenn es uns nicht gefällt, wir haben unsere eigene Version, also nur unsere erste Version, egal ob sie privat ist oder nicht. Und dann die Abhängigkeiten, die wir haben und die bereits installiert sind. Wir haben also die Testbibliothek, wir haben React, React usw. Jetzt haben wir unsere Skripte. Die Skripte, die wir gerade in der Readme-Datei durchgesehen haben. Ähm, also im Grunde haben sie hier ein Skript erstellt , das NPM-Start ist Aber was NPM Start wirklich ausführt, ist der Start von React-Skripten. Es ist also eine Art Verkürzung eines längeren Befehls, nur der Einfachheit halber als Entwickler Wir haben dann einige ES-Link-Konfigurationen. Es Link ist mit der Create React App vorinstalliert. Wir haben eine Liste der Browser , mit denen wir in der Produktion und auch in der Entwicklung arbeiten möchten Produktion und auch in . Das ist so ziemlich alles. Das Paket Jason ist in Create React App nicht sehr aufwändig. Es gibt ein paar wichtige Dinge , mit denen wir arbeiten müssen. Aber es wird je nach Größe Ihres Projekts, an dem Sie arbeiten, wachsen je nach Größe Ihres Projekts, an dem . Und wenn wir neue Dinge installieren. Apropos Installation neuer Dinge, wenn wir schon hier sind, lasst uns weitermachen und installieren, reagieren, Bootstrap und schauen, wie es unsere Pakete aktualisiert Wenn wir hier zurück zum Terminal gehen, geben wir NPM install Und wir werden zwei Pakete installieren. Eines ist React Bootstrap und das andere ist nur Bootstrap selbst Diese beiden Pakete zusammen ermöglichen es uns, mit der vollen Bootstrap-Funktionalität zu arbeiten , die uns in React zur Verfügung steht Wir werden einfach hier sitzen und warten, bis das installiert ist. Ich glaube, wir brauchen noch eine Codezeile, also lassen Sie mich weitermachen und diese aus der Bootstraps-Dokumentation holen diese aus der Bootstraps-Dokumentation holen Wenn wir zu Bootstrap React gehen und auf Getting Started klicken, wollen wir auch importieren, ja, siehe hier unten, wo Stylesheets und Wir wollen das in eine unserer Dateien importieren. Wenn wir untergehen, werde ich das kopieren. Und wenn wir dann zu dieser Datei kommen , werde ich sicherstellen, dass sie importiert wird. In Ordnung, zurück zu unserem Paket A Jason. Sie werden hier sehen, dass sich zwei Dinge geändert haben. Also haben wir in unseren Unterabhängigkeiten Bootstrap installiert , das installiert wurde Und reagiere Bootstrap. Das sind also die beiden, um deren Installation wir gerade gebeten haben Installation wir gerade gebeten Wir haben gerade, weißt du, die Anfrage bei NPM gestellt und sie haben uns dafür korrekt installiert Wie Sie hier unten sehen können, gibt es auch mehrere Sicherheitslücken Dies ist wiederum darauf zurückzuführen, das Projekt nicht gewartet wird. Aber wie ich bereits erwähnt habe, ist dies eine der einfachsten Möglichkeiten, wenn Sie nur versuchen, mit React zu beginnen und zu lernen, wie man es benutzt. Create React App ist wirklich eine einfache Methode, um zu lernen, wie man React benutzt. Ich würde sagen, es gibt eine sehr geringere Lernkurve für einige der anderen Optionen, die derzeit verfügbar sind. Ordnung, also lassen Sie uns weitermachen und uns die anderen Dateien hier ansehen. Also haben wir einen Git-Ignore-Modus. Wenn Sie also schon einmal mit Git gearbeitet haben, wissen Sie, dass Git ein Versionskontrollsystem ist , mit dem Sie Ihre Dateien und verschiedene Versionen Ihrer Dateien speichern können , falls Sie jemals zu einer früheren Version einer Datei, mit der Sie arbeiten, zurückkehren oder zu einer früheren Version zurückkehren müssen zurückkehren oder zu Datei, mit der Sie arbeiten, zurückkehren oder zu einer früheren Version Aber in unserem Git-Ignore-Modus werden wir alle Dateien in den Ordnern sehen, die wir grundsätzlich so vordefiniert haben , dass nicht festgeschrieben werden, wenn wir unseren Code pushen, potenziell auf Github, also unseren Node-Module-Ordner hier. Und das liegt daran, dass Node Modules ein sehr großer Ordner ist, eine Menge Daten aus verschiedenen Abhängigkeiten enthält . Wenn wir sie pushen, wenn wir sie zu unserem Github hinzufügen würden , würden wir sie quasi massenhaft anhäufen und aufblähen Also wollen wir das nicht wirklich vorantreiben. Das ist etwas, das auf der Grundlage des Pakets auf Jason-Versionen jedes Mal installiert werden kann Grundlage des Pakets auf Jason-Versionen , wenn wir unsere Datei erneut klonen oder jemand anderes unsere Arbeit klont. Wir haben auch einige andere Teile, darunter die Berichterstattung in den Build-Ordnern und einige andere Dateien In Ordnung, lassen Sie uns zu den guten Dingen übergehen. Also wir haben hier zwei Ordner, wir haben public und wir haben Source. Öffentlich ist also der Ort, an dem all unsere Bilder und Dinge, die gerade in unserer App gezeigt werden, unser Leben gerade ist. Sowie unsere HTML-Datei mit Indexpunkt. Und dann haben wir unsere Quelle , die auch eine ganze Reihe anderer Dateien enthält. Lassen Sie uns also in diese beiden eintauchen. Und was wir tun können, um wirklich eine gute Vorstellung davon zu bekommen , wie diese beiden funktionieren, ist, indem wir unsere App starten. Denken Sie also daran, dass ich im Paket dotson foul erwähnt habe, dass es ein Skript namens NPM Start gibt Lassen Sie uns das im Terminal ausführen und sehen, was es anzeigt Also geben wir NPM Start ein. Wir drücken die Eingabetaste und geben uns eine Sekunde. Starten Sie den Entwicklungsserver. Und richtig, gut, wir sind startklar. Wir haben dieses sich drehende React-Symbol. Und dann heißt es: Quell-Apps bearbeiten und sicher laden. Und dann lerne React, das auf die S-Dokumentation verweist. Fantastisch. Zumindest wissen wir , dass unsere App funktioniert. Gehen wir also zurück zu unseren Dateien und sehen wir uns an, wo all das Zeug lebt. Und was wir tun werden, wir werden dieses Terminalfenster geöffnet lassen , damit unsere App weiterhin im Hintergrund läuft. Wenn wir also zu unserem öffentlichen Ordner gehen, normalerweise in HTML, werden all unsere Informationen in der HTML-Datei gespeichert. Wenn wir das also öffnen, das war ein normales HTML-Projekt, würden wir erwarten, all diese Informationen zu finden, all das Zeug, das wir gerade dort gesehen haben, in dieser Datei. Aber wenn wir hier hinschauen, ist es nicht da. Wir haben hier unser Hauptelement und hier viele Metadaten. Dinge , die wir ändern können. Wir können den Namen und den Inhalt hier ändern. Wenn wir jedoch nach unten zum Hauptteil scrollen, werden Sie feststellen, dass all die Informationen, die wir gerade in unserem Browser hatten, nicht verfügbar sind. Sie werden sehen, dass es im Körper nur zwei Elemente gibt. Das No-Skript, das Leuten, die kein Java Script aktiviert haben, mitteilt Java Script aktiviert haben , dass sie es benötigen , um es auszuführen. Und dann gibt es ein einzelnes Div, das leer ist, was wirklich interessant ist Woher kommt unser Projekt eigentlich? Wenn wir dann ein komplett leeres Div haben, macht das nicht wirklich Sinn denn wenn wir zur Seite zurückkehren, sehen wir, dass wir all diese Informationen haben. Ich meine, wir haben Text und wir haben ein rotierendes Symbol und wir haben einen Link. Offensichtlich muss das irgendwo leben. Okay, nun, wenn wir zu unserem Div zurückkehren, schauen wir es uns genauer an. Wir sehen, dass es die ID Root hat. Das heißt also, dass vielleicht irgendwo auf dem Weg darauf gezielt wird und dass Root etwas bedeutet, oder? Wenn Sie also das vorherige Video gesehen haben, das ich über Java-Skript habe, werden Sie das verstehen. werden Sie sich wahrscheinlich erinnern. Sie werden sich wahrscheinlich daran erinnern, dass es eine Methode namens Get Element by ID gibt. Gehen wir also zu unserer JS-Datei mit dem Indexpunkt auf der linken Seite. Und sieh dir das an. Wenn wir uns also unsere Indexpunkt-JS-Datei ansehen, haben wir eine ganze Reihe von Importen. Wir sind jetzt also in der Javascript-Welt, oder? Wir sind sozusagen von HTML zu vollständigem Javascript übergegangen Und wenn wir sehen, dass es nicht ganz Javascript ist, wie wir es gewohnt sind, ich meine, Sie sehen, wir haben diese Strukturen, die einem Div-Element ähneln Gehen wir also Zeile für Zeile runter und schauen, was alles ist. Also haben wir React aus React importiert. Auch hier arbeite ich mit NPM. Wir haben das Paket namens React installiert , diese Bibliothek namens React, und wir haben jetzt die Instanz von React daraus importiert Wir haben Import React, Import Index CSS, was nur die CSS-Datei ist. App importieren, das ist eine weitere Datei hier unten. Und dann importieren Sie den Bericht Web Vitals. Worauf ich wirklich achten möchte, ist Zeile 7 hier, wo es heißt, dass konstante Wurzel gleich React Dom Punkt Create In dieser Erstellungsroute heißt es dann Dokument Punkt für Element für ID-Route abrufen Offensichtlich passiert hier etwas, wo wir das Stammelement bekommen, wir bekommen dieses Div und jetzt erstellen wir eine Art Route, die auf diesem Element basiert. Also haben wir das hier gemacht, wir haben eine Route auf dem React erstellt und wir haben diese variable Route erstellt, richtig? Dann sagen wir Root-Render. Und darin rendern wir React jetzt im strikten Modus. Und dann rendern wir darin diese App, diese App-Sache. Basierend auf dem, was wir zuvor gelesen haben, war die App nur eine Javascript-Datei. Aber beide befinden sich in dieser seltsamen Elementtypstruktur, oder? Das ist also diese JSX-Sache, über die wir gesprochen haben. Dieses Javascript ist sozusagen mit HTML kombiniert, was es uns ermöglicht, HTML innerhalb von Javascript zu schreiben Lassen Sie uns also weitermachen und uns mit Apps befassen. Apps sehen aus wie eine ziemlich normale Javascript-Datei, aber sie enthält diese Kombination aus JS-HTML und Javascript. Wie Sie sehen können, handelt es sich lediglich um eine reguläre Funktion namens App, dieses HTML-Element zurückgibt. Da ist es wirklich ein Meister der Intelligenz. Was das ist, ist eigentlich eine Komponente. Diese Dinge, über die wir zuvor gesprochen haben. Komponenten, die ihr eigenes Display und ihre eigene Logik haben und alles App enthalten ist, genau hier für uns ist diese Komponente. Wenn wir das nun Zeile für Zeile durchgehen, werden wir sehen, dass es ein Logo von Logo Dog importiert, aber das Logo von Punkt Logo, Punkt Sg, das sich im selben Quellordner befindet. Es importiert Apps, das ist diese Style-Datei. Und dann erstellt es diese Funktion namens App und exportiert sie dann unten. Und dann importiert es sie in diese Index-JS-Datei. Richtig? In Apps geben wir ein Div zurück , das eine ganze Reihe von Elementen enthält. Es hat also ein Div mit einer Klasse amepPhaderImageLogoitcedeImageLogoI'm Klasse amepPhaderImageLogoitcedeImageLogoI'm denke, das ist Ich denke, das ist das React-Logo, über das wir zuvor gesprochen haben Und dann haben wir die Codezeile, die wir gesehen haben. Wir haben diese Textzeile, die wir gesehen haben. Da steht es, Quelltext Slash App Dogs und speichern, um neu zu laden. Und dann steht hier unten Learn, React. Wenn wir jetzt wieder hierher gehen, ist das genau das, was wir haben. Wir haben unser Logo, wir haben Bearbeitungs- Quell-Apps zum Ablegen und Speichern zum erneuten Laden. Und wir haben gelernt, zu reagieren Also haben wir endlich den Ort gefunden, an dem all diese Informationen gelebt haben, oder? Also das Verständnis reagiert ein bisschen mehr. Und wenn wir die Struktur verstehen, haben wir diese größere JS-Datei mit Indexpunkt, die eigentlich all unsere Informationen enthält, oder? Im Grunde ist es der Ort, an dem sich alles anhäuft. Aber innerhalb des Index gibt es App-Apps, in denen die Informationen, die Logik, die wir tatsächlich anzeigen werden , wirklich lebendig Und jetzt, bevor ich vergesse, wer wir sind, da wir in Index Dogs sind, damit unser React-Bootstrap ausgeführt werden kann, wenn Sie sich erinnern, müssen wir sicherstellen, dass wir den Bootstrap oben in der Datei importieren Cool. Wir sollten jetzt startklar sein. Ordnung, jetzt , wo wir die Struktur unserer App ein bisschen besser verstehen, sollten wir weitermachen und mit Apps arbeiten und mit dem Aufbau unserer Komponenten beginnen. 9. Aufbau eines Counter: Dies ist ein älterer Komponentenstil, den wir umwandeln eine sogenannte Pfeilfunktionskomponente umwandeln werden. Arrow-Funktionskomponenten sind einfach eine syntaktisch sauberere Methode , Komponenten zu schreiben und zu erstellen Das ist nicht unbedingt notwendig, aber ich werde es tun, weil es eine gute Praxis ist, zu wissen, wie das geht, und Ihnen zu zeigen, wie das Wenn wir weitermachen, werden wir das tatsächlich ändern. Es heißt also, dass konstant App gleich Pfeil ist, und dann drücken wir einfach auf Safe Ordnung, und wir haben es gerade in eine Pfeilfunktionskomponente umgewandelt es gerade in eine Pfeilfunktionskomponente Fantastisch. Wir sind schon ein bisschen moderner, wenn wir uns unsere App hier ansehen. Wenn wir uns Quell-Apps ansehen, brauchen wir wirklich nicht viel davon oder etwas davon. Um ehrlich zu sein, was wir erstellen werden, ist der Zähler eigentlich nur eine einzelne Seite mit ein paar Elementen Das meiste davon können wir loswerden. Ich denke, eine Sache, die wir hier tun können, ist einfach alles zu löschen , was in der App ist. Wir behalten die Gesamt-ID für die App, aber wir löschen alles , was wir nicht verwenden, und speichern es. Ordnung, und jetzt haben wir unsere leere App, und wenn Sie sehen, haben wir nur eine einfache weiße Seite , und genau so wollen wir anfangen. Wenn Sie ein neues Create React-App-Projekt starten würden, würde ich Ihnen diese Schritte empfehlen, oder? Du bekommst dein Projekt, du bereinigst es, du installierst die Pakete, die du brauchst, und dann machst du weiter und fängst an, damit zu arbeiten. Ordnung, in Zukunft gibt es also noch ein paar andere bewährte Methoden, die wir bei der Arbeit mit React anwenden möchten . Also als Erstes in unserem Quellordner einen wir in unserem Quellordner einen weiteren Ordner namens Components erstellen. Der Grund, warum wir diese Komponente erstellt haben, ist dass sich die Anzahl kleinerer Dateien sehr schnell anhäufen wird, insbesondere wenn Sie an größeren Projekten arbeiten die Anzahl kleinerer Dateien . Und es könnte sehr unhandlich werden, wenn sie sich einfach alle in Ihrem Quellordner befinden Und es ist nicht die beste Idee , sie alle einfach überall zu haben Es wird sehr schwierig, zu debuggen und zu definieren, wonach Sie suchen sich bewährt, separate Ordner zu erstellen , die darauf basieren , an welchen Funktionen Sie gerade arbeiten, um die Dinge in unserem Komponentenordner sauber und einfach zu halten in unserem Komponentenordner sauber und einfach Lassen Sie uns nun einige der anderen Komponenten ausarbeiten einige der anderen Komponenten ausarbeiten , die wir benötigen werden Wenn ich eine neue Datei schreibe, anklicke und erstelle, wissen wir, dass wir einen Zähler erstellen Beginnen wir also damit, einen zu erstellen, auf dem Counter Counter Jsx Enter steht Counter Counter Jsx Enter Fantastisch, wir haben unsere erste JSX-Datei erstellt. Als Nächstes möchten wir nun unsere Counter-Komponente erstellen Jetzt gibt es zwei Möglichkeiten, wie Sie das tun können. Es gibt quasi Möglichkeiten zur automatischen Vervollständigung, oder es gibt manuelle Möglichkeiten, dies zu tun Wenn Sie also die Erweiterung installiert haben, können Sie R, A, FCE, also S seven snippets, die ES 7 eingeben , und react snippets ist die Erweiterung, die Sie installieren möchten, wenn Sie installieren möchten, wenn Sie Und das wird eigentlich nur dazu führen, diese Komponente für uns auszuarbeiten auszuarbeiten Also werden wir die Eingabetaste drücken, damit wir sehen können, wie es aussieht. Dann machen wir weiter und bauen es manuell aus. Wenn wir also die Eingabetaste drücken, werden Sie feststellen, dass es tatsächlich die ganze schwere Arbeit für uns erledigt. Es importiert, reagiert für uns. Es erzeugt ein Element namens Counter. Es gibt ein Element in Klammern zurück, das bereits einen Dave enthält. Und es heißt Counter und exportiert es schon für uns. Das ist eine wirklich tolle Möglichkeit , alles manuell zu erledigen. Wir werden diesen verwenden, um alles zu erledigen, ohne es manuell eingeben zu müssen. Das loswerden. Wenn wir es wieder selbst machen, beeinflussen wir einfach durch React. Und dann würden wir weitermachen und einen Gegenzähler einrichten. Eine weitere Sache mit React-Komponenten ist, dass der erste Buchstabe der Komponente immer groß geschrieben werden muss. Das ist nur ein Teil der Syntax, die erforderlich ist. Cons counter entspricht unserer Funktion, und dann geben wir ein Div zurück, das Counter sagt In Ordnung, und das ist alles, was wir im Moment haben. Und dann werden wir auch den Standardzähler exportieren. Ordnung, also los geht's. Wir sind startklar. Wir haben unseren Zähler, wir haben unsere Zählerkomponente erstellt und, weißt du, es ist startklar, aber wenn wir auf unserer Seite nachschauen, wird sie nicht angezeigt, oder? Weil niemand weiß, dass der Zähler existiert. Im Moment lebt der Zähler nur in seinem eigenen Komponentenordner, in seiner eigenen kleinen Datei, und er tut nichts. Damit andere Leute wissen, dass er existiert, müssen wir ihn in welche Datei importieren? Unsere App-Datei, weil die App-Datei eine Datei ist, die gerade angezeigt wird. Gehen wir also zurück zur App und dann importieren wir den Zähler. Und eine wirklich coole Sache ist, dass wir VS-Code auch automatisch importieren können VS-Code auch automatisch importieren eine gewisse Intelligenz enthält Wenn wir also mit dem eingeben. Die offene spitze Klammer und dann der Name der Komponente werden uns tatsächlich dazu veranlassen, sie einfach aus unserem Komponentenhalter zu importieren. Es ist also sehr praktisch, wenn wir ein paar verschiedene Komponenten importieren müssen oder, Sie wissen schon, ohne sie importieren und dann in die Datei übernehmen zu müssen . Es ist einfach eine sehr schnelle, intelligente Art, damit zu arbeiten. Und das Letzte, woran wir uns jetzt erinnern möchten, ist, dass, wenn unser Zähler oder unsere Komponente keine untergeordneten Elemente hat, wir sie sofort schließen wollen. Wir wollen, dass es ein selbstschließendes Element ist, also so, Tops wie das. Perfekt. Also, aber wie sieht es aus, Kinder zu haben? Richtig, wie Sie jetzt sehen können, ist Counter eine App, die keine Kinder hat, aber wenn wir wollten, dass es eine App ist, die Kinder aufnimmt, könnten wir sie immer wie ein normales HTML-Element und dann die Kinder hinzufügen. Richtig. Und es würde genauso funktionieren. Das ist also diese flippige Kombination aus Java-Skript und HTML-Inaktivität Fantastisch, also lass uns den zweiten Zähler loswerden. Wir brauchen ihn eigentlich nicht und fangen wir an, von unseren Zählerdateien aus an unserer App zu arbeiten. Wir sind vorerst mit Apps fertig. Wir benötigen unseren Index ML im Moment nicht , es sei denn, wir möchten einige der Metadaten ändern. Wir werden uns nur auf Zähler konzentrieren. In Ordnung, wir haben also unseren Zähler. Wir haben ein Div und alles, was da steht, ist Counter. Und wenn wir auf unserer Seite genau hier nachschauen, werden wir sehen, dass dort Counter steht, sodass wir wissen, dass wir es richtig angeschlossen haben Wenn wir jetzt zu unserer Seite zurückkehren, müssen wir darüber nachdenken, was die Elemente waren, die in dem ursprünglichen Design enthalten waren, oder? Wir hatten diese Zahl, wir hatten einen roten Knopf in einem grünen Knopf oder ein Plus und ein Minus, aber sie müssen nicht rot und grün sein. Wir wollen also sicherstellen, dass wir all diese Elemente berücksichtigen, oder? In Ordnung, also lasst uns weitermachen und anfangen, das auszuarbeiten. Also, in diesem Div, das ich erstellen möchte, machen wir, machen wir es zu einem H-Eins für die Zahl. Also fangen wir bei Null an und speichern das einfach. Und dann werden wir darunter die beiden Schaltflächen erstellen. Und anstatt es manuell zu tun oder manuell zu stylen, können wir React Bootstrap verwenden , um sie etwas dynamischer zu gestalten Wir werden den Button von React Bootstrap verwenden. Wie Sie sehen können, gibt es uns auch die Informationen und fordert uns auf, sie automatisch zu importieren. Wir werden diese Schaltfläche hinzufügen. Wir können eine sogenannte Variante verwenden . React Bootstrap gibt uns eine Option, eine Eigenschaft namens Varianz Bei diesen Varianten können wir eigentlich einfach einen Namen verwenden, wie eine Eigenschaft, die vordefiniert wurde, ähnlich wie bei Attributen in HTML, und ihr bestimmte Stile geben Daher gibt es zwei Varianten, mit denen wir heute arbeiten wollen Eine heißt Success. Das werden wir schließen. Und dann wird das unser Plusknopf sein. Und dann wird der andere sein, ich glaube, es ist gefährlich, aber ja, wir nehmen unseren Button, kopieren ihn, fügen ihn ein. Wir gehen, ich glaube, das nennt man Gefahr. Wir tippen die zweite ein und ändern sie auf minus eins. Schauen wir uns also unsere Seite an und sehen, ob es gut funktioniert hat. Wir sind mit dem Design schon zu 90% fertig. Wir haben also unseren grünen Knopf, der plus eins ist, und unseren roten Knopf , der minus eins ist. Also startklar. Aber eine weitere Sache, die ich ein wenig korrigieren möchte , ist, wo das angezeigt wird. Weil es gerade sehr weit oben auf der Seite steht. Nicht wirklich ideal, um es sich richtig anzusehen. Also wollen wir es einfach auf der Seite nach unten drücken, nur um es zu tun. Also die Art und Weise, wie wir das wieder machen werden, ist nur, unser Styling zu reparieren, oder? Also, wenn wir hier zu unserem Gegenelement gehen, können wir tatsächlich einen gewissen Rand draufsetzen , nur um uns ein bisschen mehr Platz zu verschaffen Wir können also entweder eine CSS-Datei erstellen , zu der wir all unsere Styles hinzufügen können, oder wir könnten Inline-CSS verwenden Nun, Inline-CSS ist etwas, das im Grunde das ist, was es sagt Es ermöglicht uns, die Stile buchstäblich in dieselbe Zeile zu schreiben. Es ermöglicht uns, die Stile buchstäblich in derselben Zeile wie unser HTML zu schreiben , was ich ziemlich cool finde. Sie haben es vielleicht schon einmal ein- oder zweimal in Ihrem HTML verwendet , aber es ist viel üblicher, wenn Sie mit einem React arbeiten , weil alles viel stärker unterteilt ist. Wenn wir also unseren Stil hier zu unserem Div hinzufügen wollen, wir einfach STYLE Und dann würden wir zwei geschweifte Klammern verwenden, um die Dynamik des Inline-Stylings Also würden wir etwas Spielraum hinzufügen wollen. Geben wir ihm einfach einen Gesamtspielraum von vier Ram. Und spar dir das, wenn wir wieder hierher gehen, toll, wir haben ein bisschen mehr Wurzeln. Ich werde ein bisschen mehr Abstand hinzufügen , vielleicht rechts neben unserer grünen Schaltfläche hier. Also lasst uns das machen, lasst uns dieselbe Stileigenschaft hinzufügen und wir machen den Rand, richtig. Nochmals, eine weitere wirklich interessante Sache über React, oder? In HTML würdest du Margin eingeben , oder? Aber weil wir mit Javascript arbeiten, wollen wir eigentlich Camel Case verwenden Außerdem wird es keine Bindestriche geben, wenn wir unser CSS und JX eingeben Wir machen Margin, oder? Und dann geben wir erneut eine Zeichenfolge ein, wie hoch unser Rand sein soll. Das werde ich mir sparen. Perfekt. In Ordnung, und wir haben da ein bisschen Platz. Und dann fügen wir einfach ein kleines Leerzeichen unter der Kopfzeile hinzu. Und wir sollten gut sein. Also machen wir dasselbe noch einmal. Stil, gleicher Rand, Boden. Und dann bauen wir zwei Rampen. Wir schauen dort nach, ich denke wir passen ziemlich gut zum Styling. Wir könnten immer noch viel mehr damit machen, aber normalerweise werden sie dich in einem Interview nach diesem Punkt nicht mehr fragen , was das Styling angeht. Lassen Sie uns also mit der Logik beginnen und anfangen, daran zu arbeiten , dies tatsächlich zu einem funktionierenden Zähler zu machen. Okay, das nächste, was wir jetzt tun wollen , da wir mit unseren grundlegenden Stilen fertig sind, ist, an unserer eigentlichen Logik zu arbeiten, unserer Darstellung von Logik und ähnlichen Dingen Also, wenn du dich erinnerst, wir haben diese Null, oder? Und wenn wir die Plus-Taste und die Minus-Taste drücken, wollen wir, dass etwas passiert. Nun, wenn wir uns aus unserem Java-Skript erinnern, benötigen wir zum Beispiel eine Onclick-Funktion oder, Sie wissen schon, etwas, das in dieser Onclick-Funktion übergeben wird damit etwas tatsächlich ausgeführt wird, Lassen Sie uns also weitermachen und damit beginnen, das auf reagierende Weise zu implementieren Also, wie ich bereits erwähnt habe, hat React dieses Ding namens State, oder? Staat ist also buchstäblich der gegebene Status von allem, was vor sich geht. Der gegebene Zustand dessen, was innerhalb einer Komponente passiert. Es gibt also eine Möglichkeit, tatsächlich mit dem Zustand zu interagieren , die wir speziell mit React verwenden werden. Das Konzept des Zustands ist zunächst etwas abstrakt, aber es wird viel konkreter, wenn wir damit arbeiten. Also das Erste, was ich tun möchte, richtig, anstatt dass diese Zahl Null ist, wollen wir ein bisschen dynamischer sein, oder? Also werde ich eine Variable namens count equals zero erstellen namens count equals zero Also lass uns damit beginnen, das durch count zu ersetzen, richtig? Nett und einfach. Bisher nichts allzu Verrücktes. Also, wenn wir hier nachschauen, ist die Anzahl gleich Null geblieben. Gut, kreuzen Sie an. Aber jetzt, wo wir count in eine Variable geändert haben, können wir jetzt etwas dynamischer damit arbeiten , oder? Wie ich bereits erwähnt habe, wollen wir dieses Ding namens State verwenden. React hat auch dieses Ding namens Hooks, oder? Hooks wurden vor einigen Jahren in React eingeführt , um die Verwendung von State innerhalb eines Elements erheblich zu vereinfachen. Davor konnte State in einem Element nicht wirklich so verwendet werden , wie wir es heute verwenden. Was wir also tun wollen , um state zu verwenden, ist, tatsächlich einen Hook zu importieren. Und was ein Hook ist, ist wirklich nur eine einfache Komponente. Das ist es, was Hook ist, ist wirklich nur eine weitere Funktion , die sozusagen wegextrahiert wurde und wir importieren nur ihre Funktionalität, um damit zu arbeiten. In Ordnung, also lasst uns den gebrauchten Zustand aus React importieren. Großartig, jetzt, wo wir State verwendet haben, wir die Art und Weise ändern, wie wir mit der Variablenzahl arbeiten, oder? Und ich weiß, dass du gut darüber nachdenkst, könnten wir nicht einfach eine Funktion aufrufen und es mit einem Klick machen und so weiter, und so weiter Es gibt einen besseren Weg, das mit dem React zu machen, wenn wir den Status verwenden, da ist die eigentliche Variable selbst Dann gibt es ein Set, etwas, das als Setter bezeichnet wird es uns ermöglicht, den Wert dieser Variablen festzulegen Wir können das nun über eine bestimmte Syntax initialisieren über eine bestimmte Syntax Wir setzen unsere eigentliche Variable in eckige Klammern, das ist unsere initialisierte Variable und dann setzen wir eine gemeinsame Variable daneben Und dann besteht die typische Konvention, wie wir das schreiben, darin, set vor den Namen der Variablen zu setzen vor den Namen der Variablen Wenn unser Variablenname count ist, verwenden wir set count, damit das unser Setter Und dann setzen wir den Use-Status ein, wenn es um die Handlung geht , die initialisierte Zahl selbst. Wir geben State ein und verwenden es und binden das in den Funktionsaufruf Jetzt sehen Sie also, dass sich unsere Anzahl von Sätzen in eine tatsächliche Funktion geändert hat . Es wird uns helfen, den Status festzulegen. Es hängt mit diesem U-State-Hook zusammen und ermöglicht es uns , diese Funktionalität zu aktivieren. Und dann lässt unser US-Staat dort arbeiten und seine Magie entfalten. Sie werden also sehen, dass die Anzahl der Sets immer noch unterstrichen ist , weil wir sie noch nicht verwendet haben Aber wir werden es in nur einer Sekunde verwenden. Und wenn wir auf unserer Seite hier noch einmal nachschauen, werden wir feststellen, dass sich bisher nichts geändert hat, weil der initialisierte Wert nicht geändert hat, oder? Wir haben unsere Null dort beibehalten und sie funktioniert einwandfrei Jetzt wollen wir diesen Setter verwenden damit wir den Wert der Zählung dynamisch aktualisieren können, oder? Jedes Mal, wenn wir die Plus-Eins-Taste oder die Minus-Eins-Taste drücken , möchten wir, dass die Null erhöht oder verringert wird. Stimmt das? Also die Art und Weise, wie wir das machen werden, ist die Verwendung einer On-Click-Funktion Es wird eine wirklich einfache, unkomplizierte On-Click-Funktion sein, unkomplizierte On-Click-Funktion wir 2 Sekunden in Anspruch nehmen werden Wenn wir also zu unserer Schaltfläche gehen, haben Schaltflächen, wie wir wissen, eine Klickfunktion Also geben wir unser On-Click ein und weil es wieder Javascript ist, entspricht Camel Case den geschweiften Klammern Und dann rufen wir unseren Set-Zähler auf. Also verwenden wir unsere Klammern und rufen Set Count Und wir werden in die Klammern von set count den Wert übergeben , den wir jetzt haben wollen, weil wir die ursprüngliche Variable von count haben Was auch immer zählt, der Wert ist der Staat, oder? Zählt also dieser Staat, unabhängig von seinem Wert, ob es nun eine Eins oder 100 oder 10.000 ist, das ist der aktuelle Zustand. Also können wir das tatsächlich in unserer Additionsfunktion hier verwenden . Also nehmen wir den Wert von count, was auch immer er zu dem Zeitpunkt ist, und fügen einfach eins hinzu. Also wirklich einfach. Wir geben einfach innerhalb der eingestellten Anzahl ein, wir zählen und dann plus eins und speichern. Und das ist unsere gesamte Funktion, die es uns ermöglicht, unserer Zählung eins hinzuzufügen. Wenn wir es also ausprobieren und plus eins drücken , können wir sehen, dass es funktioniert. Also können wir einfach etwas hinzufügen, hinzufügen, und schon ist alles eingerichtet. Wirklich einen Zähler zu bauen ist gar nicht so schwierig. Es geht einfach mehr darum, die Logik und die Tools und die Schritte dahinter zu verstehen . Wenn wir hierher zurückkehren, können wir das einfach kopieren, es auf unsere zweite Schaltfläche verschieben und die Zählung ändern, um eins zu subtrahieren Wir beziehen uns immer noch auf dieselbe Zählvariable, aber wenn jemand auf die minus Eins klickt, wollen wir, dass sie eins subtrahiert Stimmt das? Also wirklich einfach. Wenn wir hier drüben, subtrahieren, subtrahieren, funktioniert die Taste jetzt und wir haben unseren gesamten Zähler eingerichtet, nett und einfach. Cool. Das ist wirklich eine Art First-Level-Methode den Zähler einzurichten. Stimmt das? Ihr Interviewer könnte Sie bitten, den Zähler auf diese Weise einzurichten Anfänglich könnte dies eine Version eins sein. Aber wenn Sie schon einmal ein technisches Interview geführt haben oder noch nicht, bitten Sie Interviewer manchmal darum, dass Sie, nachdem Sie die erste Version von etwas gemacht haben, wiederholen und eine zweite Version erstellen Lassen Sie uns also zu einer möglichen Iteration dieses Elements übergehen. Wir werden also über Kinder von Elementen sprechen, wie er Requisiten weitergibt, wie Status übergeben wird und solche Dinge Gehen wir also zur nächsten Version über, zwei. 10. Den Counter verfeinern: Ordnung, jetzt, wo wir unsere Version eins komplett eingerichtet haben, lassen Sie uns diese Version zwei bauen In Version zwei könnte Ihr Interviewer Sie fragen, worum Sie jemand bitten könnte, in einer zweiten Version davon das Ganze in verschiedene Komponenten aufzuteilen in verschiedene Komponenten aufzuteilen Denn eines der schönen Dinge an React ist, dass es Ihnen ermöglicht, die Dinge, mit denen Sie arbeiten , wirklich modular zu die Dinge, mit denen Sie arbeiten , wirklich modular Und du musst nicht alles irgendwie in einer superlangen HTML-Datei verschachteln, oder? Sie können die Dinge tatsächlich in kleinere Komponenten zerlegen in kleinere Komponenten zerlegen Wie wir bei der Übergabe des Zählers an die App gesehen haben, können wir eigentlich einfach auf Dinge zugreifen , als ob sie alle in einer großen Datei wären, aber sie getrennt und übersichtlich halten. Lassen Sie uns also etwas näher darauf eingehen , wie wir das machen könnten. Eine Sache, die wir tatsächlich herausbrechen könnten , ist der Button-Bereich, oder? Der eigentliche Auslöser der Komponente. Wenn wir hier eine neue Datei erstellen wollten, könnten wir sie Buttons nennen und die Eingabetaste drücken. Und wenn ich müsste. Also, was ich jetzt mit Button machen möchte ist einfach diese Logik in ihre eigene Komponente zu abstrahieren und sie einfach dort live zu haben. Also, was wir hier tun werden, ist, wir werden zuerst unsere Button-Komponente erstellen, dann werden wir die Button-Informationen von den Zählern nehmen und sie einfach in die kopieren Und wir werden nur eine kopieren und ich werde dir gleich zeigen, warum. Wir werden es hier einfügen. Wir müssen das hier nochmal importieren. Und das ist nur ein erneuter Import der Schaltfläche von Maria Bootstrap, um sicherzustellen, dass sie immer noch funktioniert Dann wurde das Nächste, Schaltfläche gleich Schaltfläche, bereits deklariert ist gleich Schaltfläche, bereits deklariert. Wir müssen den Namen ändern Wir werden das nennen, wir werden diesen benutzerdefinierten Button nennen. Es wird zur benutzerdefinierten Schaltfläche geändert. Ja, das ist also eine weitere wichtige Sache , auf die Sie wahrscheinlich beim Job-Skript gestoßen sind, bevor Sie sichergestellt haben beim Job-Skript gestoßen sind, bevor Sie sichergestellt , dass Ihre Variablen eindeutig sind. In Ordnung, großartig. Sie werden feststellen, dass wir hier einen Fehler mit der Anzahl der eingestellten Werte erhalten . Wir werden in nur 1 Sekunde daran arbeiten. Passen Sie das vorerst an, damit wir keinen Build-Fehler bekommen. Ordnung, cool. Alles startklar. Was wir jetzt mit unserer benutzerdefinierten Schaltfläche machen wollen , ist, dass wir sie im Grunde etwas modularer gestalten wollen, oder? Es kann also entweder ein Erfolgsknopf oder ein Gefahrenknopf sein. Es könnte links oder rechts sein. Es könnte ein Plus oder ein Minus sein. Wir wollen es also so implementieren, dass wir es nicht nur für den Anwendungsfall mit einer Taste verwenden müssen. Wir wollen es so implementieren, dass wir das mit unserer Schaltfläche tun könnten, wenn wir ein Plus - und ein Minuszeichen und eine Multiplikationsschaltfläche hätten und Sie all diese anderen Optionen hätten das also tun, indem wir ihm Requisiten oder Eigenschaften übergeben, oder sind also Dinge, die wir von der übergeordneten Komponente von Counter an die Button-Komponente übergeben der übergeordneten Komponente von Counter an die werden , um herauszufinden, wofür diese spezielle Schaltfläche gedacht ist Lassen Sie mich Ihnen zeigen, wie wir das machen werden. Also das Erste, was wir tun werden, ist, diese Immobilien weiterzugeben. Es gibt also zwei Möglichkeiten, sich die Requisiten zu schnappen, oder? Also könnten wir, könnten im Grunde Requisiten wie, ich weiß nicht, die Variante und die Nummer oder was auch immer weitergeben Requisiten wie, ich weiß nicht, , oder Ja, also können wir die Requisiten entweder so weitergeben und sie dann, du weißt schon, durch unsere Requisiten holen du weißt schon, durch unsere Ja. Das ist eine gültige Art, sie zu übergeben, aber es beinhaltet eine Menge zusätzlicher Syntax, die einen Code irgendwie wie Geld aussehen lässt. Was wir stattdessen tun wollen, ist diese in eine geschweifte Klammer zu setzen, und dann können wir einfach direkt auf diese Variablen zugreifen Ich kann also einfach konstant bleiben, ich muss jetzt keine Variante, keine Variantenvariable initialisieren Variante, Ich kann eigentlich einfach direkt im Code auf die Variante zugreifen. Anstatt hier Erfolg zu haben, übergebe ich jetzt das Wort Variante, die Variable, oder? Also lass uns gehen und das alles miteinander verbinden. Sie können also sehen, wovon ich spreche wenn wir hier die Variablenvariante übergeben und zum Zähler zurückkehren und diese beiden auskommentieren , damit wir sehen können, dass sie nicht mehr funktioniert. Richtig, wir werden tatsächlich importieren, wir werden diesen Import hier rausnehmen und wir werden unsere Schaltfläche importieren, unsere benutzerdefinierte Schaltfläche aus der lokalen Komponente. Schaltfläche nicht von Maria Bootstrap importieren, sondern von Slash Importieren Sie also die benutzerdefinierte Schaltfläche von. In Ordnung, und wir werden es dann benutzen. Hier gehen wir weiter, um eine benutzerdefinierte Schaltfläche zu erstellen. Im Moment ist es nur ein zufälliger blauer Button. Ich kann das sogar kommentieren. Also werden wir alles außer der Variante auskommentieren , damit wir sichergehen können, dass wir einen guten Test machen. Es ist eine zufällige Tastennummer, da ist nichts drin. Was wir dann jetzt tun können, ist tatsächlich unsere Immobilien weiterzugeben. Wir nehmen Variante gleich und geben Erfolg ein, weil unser erster Erfolg war, unser zweiter Gefahr Jetzt ist der Varianten-Button grün. Wir wissen, dass, wenn wir unsere Eigenschaft vom Zähler an die benutzerdefinierte Schaltfläche in einer Eigenschaft der Variante übergeben unsere Eigenschaft vom Zähler an die benutzerdefinierte Schaltfläche in einer Eigenschaft der Variante sie dann aufrufen und dann in der benutzerdefinierten Schaltfläche darauf zugreifen und sie als Variante verwenden, sie einfach weiterleitet. Stimmt das? Wir bohren die Requisite gerade von der Theke bis zur Taste runter Wir können das also machen, also können wir mit jeder Immobilie machen , mit der wir arbeiten wollen, oder? Also, wenn wir dann dasselbe mit Stil machen wollten, richtig, wenn wir spezielle Stilwünsche hätten, würden wir es wollen. Wir machen Marge, oder? Ein Ram, richtig? Und wenn wir jetzt zurück zur Schaltfläche statt zur Zahl gehen, importieren wir den Stil. Wir können Stil gleich Stil machen. Eigentlich brauchen wir nicht das Doppelte, wir brauchen nur einen Stil, oder? Und auch hier können wir es nicht wirklich sagen, aber man kann es etwas außerhalb der Mitte sehen. Wir werden diesen Spielraum haben, oder? Ordnung, das ist also ein sehr schneller Weg, um Immobilien auf wirklich dynamische Weise zu nutzen, oder? Wenn wir also eine zweite Schaltfläche erstellen, haben wir jetzt bereits zwei Schaltflächen, mit denen wir arbeiten können. Und wir mussten nicht viel arbeiten, oder? Wir mussten nicht weitermachen und die Variante schreiben und den Stil schreiben. Und dies und das mussten wir nur in ein schreiben, wir mussten nur ein paar einfache Felder aktualisieren, oder? Also in diesem Fall werden wir die Variante auf Gefahr ändern und wir werden das Stilelement hier entfernen. Jetzt sollten wir einen grünen und einen roten Knopf haben. Perfekt. Läuft wirklich gut. Die anderen Dinge, die wir hinzufügen möchten sind die Plus-Eins- und die Minus-Eins sowie die Onclick-Funktion Richtig, wir wollen zwei Dinge tun , damit das alles richtig funktioniert Wir wollen eine beliebige Zahl in der benutzerdefinierten Schaltfläche übergeben , und dann wollen wir auch die Funktion selbst übergeben. Wenn wir das also so ändern es kein selbstschließendes Element ist, und wir, wie wir bereits erwähnt haben, es einfach zu einem normalen Element machen, das Kinder aufnehmen kann . Wir setzen plus eins in das erste ein. Und wenn wir jetzt zu Button gehen, wollen wir auf etwas zugreifen, das Children heißt. Es gibt eine besondere Eigenschaft namens Kinder. Ja, es gibt eine spezielle Eigenschaft namens Children, wir auf alles zugreifen können, was in einem React-Element verschachtelt ist in einem React-Element verschachtelt Was wir hier einfach machen, ist, dass innerhalb unserer Schaltfläche zugegriffen wird, anstatt auf die Stelle, an der wir gerade die Plus-Eins hatten, wir werden das tatsächlich ändern, um Kinder zu sagen . Und speichern Sie es. Wenn wir dann hier nachschauen, hat React herausgefunden, dass, weil die Plus-Eins hier ein Kind unserer benutzerdefinierten Schaltfläche war, wir dort auch ein Kind der benutzerdefinierten Schaltfläche sein wollten . wir nun angegeben haben, dass wir dort ein Kind verwenden wollen , werden die Kinder, alle Kinder nun innerhalb des benutzerdefinierten Button-Elements leben . Das ergibt Sinn. Also haben wir hier einfach die Plus-Eins genommen, sie hier auf den Button gebracht, Kinder weitergegeben, was ein besonderes Requisit ist. Und dann haben wir es an unsere Seite selbst weitergegeben. Lass es uns noch einmal machen, aber mit unserem Minus eins. Also werden wir das hier ändern, es zu einem Element machen, das sich nicht selbst schließt, sondern nur zu einem regulären Element. Und wir werden minus eins machen. Wir werden das speichern dann dort nichts ändern, gehen einfach zurück zu unserer Seite und da ist es. Es funktioniert. Also geben wir einfach Kinder weiter, wie wir es mit HTML tun würden , aber mit unseren Buttons. Ordnung, das Letzte, was wir hinzufügen müssen, ist unsere On-Click-Funktionalität, richtig? Dieser ist ein bisschen mehr, dieser ist ein bisschen anders. Was wir hier tun werden, sind zwei Dinge. Wir können das beim Klicken genau so schreiben, wie wir es zuvor hatten , und unsere festgelegte Anzahl weitergeben , Zählung entspricht Zählung plus Eins Und dann würde das funktionieren, sobald wir unseren Klick hinzugefügt haben. Sobald wir unseren hinzugefügt haben, klicken Sie hier und klicken Sie auf Klick. Also, was auch immer Sie mit dem Klick weitergeben und es herausnehmen, das funktioniert, los geht's. Wir fügen jedes Mal einen hinzu. Das ist also eine Möglichkeit, es zu tun. Eine andere Möglichkeit, dies zu tun, besteht darin die Logik vollständig in die Komponente zu abstrahieren. Was hier von Vorteil sein könnte ist, eine Funktion namens add one zu erstellen. Wir fügen hinzu, dass eins gleich der eingestellten Anzahl entspricht, dass Zählung plus eins ist. Ordnung, also haben wir diese Logik einfach in den oberen Teil der Theke abstrahiert diese Logik einfach in den oberen Teil der Theke Ordnung, jetzt, wo wir diese Funktion zum Hinzufügen erstellt haben , können wir sie einfach hier reinschreiben Wir können einfach „Add One“ schreiben. Dann wird unser Klick tatsächlich einfach hinzugefügt. Ups. Dann fügt unser Klick tatsächlich nur einen hinzu, wenn wir ihn brauchen Fantastisch. Das nächste, was wir hier tun können, ist das Abziehen von Eins weg, sodass es in unserem eigentlichen Code unten etwas sauberer Also subtrahieren wir eins und setzen die Anzahl minus Das werden wir uns sparen. Und dann nehmen wir das, subtrahieren eins und geben es als On-Click in unserer Funktion hier weiter Wenn wir es getan haben und wenn wir alles richtig gemacht haben, sollte es einfach funktionieren Also lass uns einen Blick darauf werfen. Subtrahiere eins. Fantastisch Es funktioniert genauso, wie wir es erwartet hatten. Also können wir diesen zusätzlichen Text hier loswerden. Spar dir das. Und wir haben unseren Komponenten jetzt eine weitere Ebene hinzugefügt , oder? Wir haben also diese Varianten übergeben, wir haben die Styles übergeben und wir haben diese On-Klicks an die Schaltfläche weitergegeben. Die Schaltfläche ruft das Kind jetzt dynamisch auf. Die Schaltfläche ruft die Variante nun dynamisch den Stil und den Klick nach Bedarf auf. Und gibt das richtige Kind ein, basierend auf dem , was wir durchgemacht haben. Es ist ziemlich cool. Das ist also eine Möglichkeit, mit Eigenschaften von einer übergeordneten Komponente zu arbeiten , also der Gegenkomponente zu einer untergeordneten Komponente , der Button-Komponente. Das ist also nur eine Art, damit zu arbeiten. Also werden wir ein letztes Mal üben, aber wir werden es mit der Zählkomponente machen. Also das ist eigentlich ziemlich einfach. Ein bisschen einfacher als der Button selbst. Wir erstellen eine neue Datei und nennen sie Counts. Und wir werden dasselbe tun und eine Zählkomponente erstellen. Was wir verwenden werden, diese Zählkomponente ist genau das, wofür wir die Eins h verwenden. Wir werden count importieren und weitergeben, anstatt es als Kind zu verwenden, werden wir es tatsächlich einfach als Eigenschaft weitergeben . Wir werden die Zählung weitergeben. Und dann werden wir hier das ganze Styling von unserer Komponente abstrahieren . Also lass uns das loswerden. Und wir werden sparen. Und wenn wir zu den Zählungen zurückkehren, wollen wir jetzt auf all diese Immobilien zugreifen, richtig? wir also dasselbe tun wie in Button, verwenden wir hier unsere geschweiften Klammern und greifen auf den Wert von count zu Das werden wir speichern. Und wenn Sie sich erinnern, hatten wir hier tatsächlich eine H-Eins statt eines Divs für unsere tatsächliche Anzeige der Zählung selbst. Und das Coole an JSX ist, dass es eigentlich egal ist, was die äußere Komponente ist Es könnte ein Knopf sein, es könnte sein, es spielt wirklich keine Rolle Es könnte sogar ein sogenanntes Fragment sein, bei dem Sie eigentlich nur diese leeren Klammern haben, die keinen Wert haben. Was wir tun werden, ist stattdessen den H-Wert zu verwenden. Also geben wir eine H-Eins ein, wir speichern sie und dann greifen wir einfach auf den Wert von count zu. Und wenn Sie sich erinnern, wir hatten auch ein bisschen Siling dabei, also werden wir es einfach kopieren, wir werden es einfach wieder hier einfügen Und jetzt, wenn wir alles richtig gemacht haben, sollte es genauso aussehen, oder? Wir haben unser Konto und es funktioniert wie erwartet. Auch das war wirklich unkompliziert, was das bloße Durchgehen der Zählung anging. Wir haben den Wert von count an die Komponente namens count übergeben , auf den Wert von count zugegriffen und ihn angezeigt. Hoffentlich hilft Ihnen das, ein wenig zu verstehen, wie JS funktioniert, wie React funktioniert, wie Requisiten weitergegeben werden wie die Beziehung zwischen Eltern und Kind funktioniert Und noch einmal, der Grund dafür ist nur, die Dinge ein bisschen sauberer zu machen Etwas, das wir in der Button-Komponente sogar tun könnten , um sie ein wenig zu bereinigen , ist die Variante dynamisch anzuzeigen, oder? Anstatt die Variante hier in der Counter-Datei explizit auszuschreiben , was einfach viel Platz beansprucht und es für uns etwas Zusätzliches ist , daran zu denken, jedes Mal, wenn wir etwas ändern müssen, daran zu denken , sie zu ändern. Es wäre toll, wenn all unsere Stile einfach in den Button-Komponenten leben würden. Mal sehen, ob wir das hier machen können. Was wir tun werden, ist in unsere Button-Komponente zu gehen und anstatt auf diese variable Variante zuzugreifen, werden wir sie auf dem aufbauen , was das Kind ist. Also werden wir diese Frage hier stellen. Also, wenn Kinder E gleich plus eins sind, dann ist das unsere Werbekomponente, oder? Und wenn Sie sich erinnern, wird sich unsere Werbekomponente auf der linken Seite befinden und grün sein Wir wollen, dass unsere Variante es ist, wir werden danach fragen und wir werden wollen, dass unsere Variante erfolgreich ist. Und falls Sie sich erinnern, hier werden sogenannte ternäre Operatoren verwendet , die wir in Javascript besprochen haben, oder? Also stellen wir hier eine Frage zur Bedingung. Also bewerte diesen Ausdruck. Wenn es wahr ist, führe hier zu diesem ersten Argument. Wenn es jedoch falsch ist, resultiere das zweite, was in unserem Fall Gefahr ist. Wenn wir das also richtig gemacht haben, sodass diese Variante nicht mehr verwendet wird, sollte sie einfach immer noch die richtigen Farben der Schaltflächen anzeigen . Also wenn wir hier nachschauen, ja, es färbt immer noch, dieselben Farben, und es funktioniert genauso wie erwartet Fantastisch. Also nochmal, was wir hier gemacht haben, richtig, wir verwenden einfach einen ternären Operator Wir haben den Wert von Kindern genommen , der entweder plus eins oder minus eins sein wird Und wir haben die Frage gestellt, also wenn das Kind plus eins ist, wenn das stimmt, wollen wir, dass es die Farbe des Erfolgs trägt, die Erfolgsvariante. Wenn es falsch ist, wollen wir, dass es die Gefahrenposition anzeigt , die, wie Sie wissen, rot ist. Und weil wir das gemacht haben, müssen wir diese Variante der Stütze nicht mehr bohren ermöglicht uns tatsächlich, unseren Code nur ein bisschen zu bereinigen Genau hier, macht Sinn. Wir werden das noch einmal nutzen nur um uns ein Bild davon zu machen. Also nochmal, hier in der benutzerdefinierten Schaltfläche sehen Sie, dass wir auf der einen Seite Stil haben und auf der anderen keinen Stil. Was wir in der Schaltfläche wieder tun können , ist, dies je nach Variante anzuzeigen. Und wir machen es nur so, weil wir wissen , dass sich unser Zähler nicht so stark ändern wird , oder? Wir haben eine Plus-Eins und wir haben eine Minus-Eins und es wird sich nicht so viel ändern. Wenn es sich in Zukunft stark ändern wird, wollen wir es vielleicht nicht auf diese Weise tun. Da es sich jedoch um einen begrenzten Umfang handelt, ist dies für unseren Anwendungsfall sinnvoll. Ordnung, also nehmen wir unseren Stil und wollen einen Rand, rechts, von einem Rand hinzufügen. Ich werde das kopieren. Und ich werde es von dieser äußeren Zählerkomponente entfernen. Richtig? Also haben wir das schon viel aufgeräumt. Wissen Sie, wir haben, wir haben hier wirklich nur etwa drei Zeilen und Sie können sehen Wert es hat, ein bisschen vom Stil wegzunehmen , der in einer anderen Komponente angezeigt wird, wenn Sie sehen, wie viel sauberer die übergeordnete Komponente wird Stimmt. Und wie Sie sehen können, weil wir es herausgenommen haben, funktioniert der rechte Rand nicht. Es ist nicht da. Was völlig in Ordnung ist, weil du es wieder hinzufügen wirst. Gehen wir also zurück zum Button. Also gut, und dann werden wir den Stil von hier oben entfernen, weil wir ihn nicht noch einmal brauchen werden . Heb dir das auf. Entferne das dort und speichere das. Okay, was wir hier mit dem Stil machen werden, ist etwas anders, weil wir nur ein Element ändern Wir werden es auf eine etwas andere Art und Weise überprüfen. Also werden wir Margin eingeben, richtig? Und dann innerhalb der Marge, richtig? Jetzt werden wir diese Frage stellen. Wenn Kinder gleich plus eins sind, wollen wir, dass der Rand, richtig, zwei ist Nein, sonst wollen wir, dass der Rand, richtig, Null ist. Das werden wir speichern. Da haben wir es. Wir haben jetzt unsere Marge hinzugefügt, richtig, je nachdem, ob das Kind das Add One ist oder nicht oder nicht. Das ist also eine wirklich einfache Methode um unsere Gegenkomponente, unsere übergeordnete Komponente, zu bereinigen und einfach alle Stile in einem Bereich zu halten . Richtig. Wir können immer noch sehen, dass wir die Logik haben, die innerhalb von Counter behandelt wird. Aber Counterwell ist jetzt wie eine logische Komponente , die den gesamten Status enthält, den die Funktion aufruft, der dann an die Anzeigekomponenten der Zähl- und benutzerdefinierten Schaltflächen übergeben wird. Deshalb sind React-Komponenten auch konzipiert, dass sie idealerweise nur einmal verwendet werden können. Sie zeigen also Logik an oder sie arbeiten daran, aber sie tun nicht unbedingt beides. Das ist also einer der Gründe, warum Sie möglicherweise in einem Vorstellungsgespräch oder in einem potenziellen Jobszenario darum gebeten werden in einem Vorstellungsgespräch oder in einem . 11. Tests: Ordnung, das Letzte, woran wir heute arbeiten wollen, ist das Testen. Testen ist ein weiteres interessantes Element bei React. Wie Sie bereits gesehen haben, als wir uns unser Paket dot json angesehen haben, gab es diese Dinge, die wir installieren als Testbibliotheken bezeichnet werden, oder? Das sind Testbibliotheken, auf die wir Zugriff haben und von denen wir dann bestimmte Aufrufe verwenden können , um sicherzustellen, dass unsere App korrekt funktioniert. Also, wenn wir uns App-Tests ansehen. Im Moment schlägt es fehl , weil wir tatsächlich einen Teil dessen entfernt haben , was früher in der App enthalten war. Richtig. Es wurde geprüft, ob, nun, lassen Sie uns das Zeile für Zeile durchgehen. In diesem Test importieren wir zwei Dinge. Rendern und Bildschirm aus der Testbibliothek reagieren. Wir importieren auch App aus App. Nun, was wir dann dieses Ding nennen, Test. Wir führen einen Test durch. Der Test rendert einen Learn-React-Link Es rendert eine App und findet dann ein Link-Element. Es greift auf den Bildschirm zu und ruft dann Get per Text auf. Es ruft diese Methode namens get by text auf, mit der wir die Wörter React finden können Und du wirst sehen, dass es wirklich interessant geschrieben Hier werden Sie feststellen, dass es nicht als typische Zeichenfolge geschrieben Wenn Sie sich erinnern , haben wir irgendwann das rote X angesprochen , reguläre Ausdrücke. Weißt du, das ist normal , weil es so geschrieben ist dass wir nach diesen Wörtern suchen können, unabhängig davon, ob es sich um Großbuchstaben oder gewöhnliche Buchstaben handelt oder nicht Großbuchstaben oder gewöhnliche Buchstaben handelt oder Also schreibst du einen Schrägstrich, du schreibst deine Phrase, du schreibst einen weiteren Schrägstrich und dann schreibst du gleich danach ein Ich Das ist also nur eine kleine lustige Tatsache , dass Sie vielleicht das Internet nutzen können Und dann funktioniert der Test so , dass der letzte Schritt immer die Bestätigung ist, also was wir versuchen sicherzustellen , dass es funktioniert, passiert usw. Wir erwarten also, dass das Link-Element, die Variable, die wir hier erstellt haben , im Dokument enthalten ist Wir erwarten also, dass das Link-Element im Dokument enthalten ist. Wie ich bereits sagte, dies derzeit fehl, weil wir dieses Link-Element aus dem Dokument entfernt haben . Aber wir können diesen Test tatsächlich korrigieren und ihn nach etwas anderem suchen lassen, das im Dokument enthalten ist, oder? Da wir also wissen, dass unser Header immer im Dokument sein wird , können wir dieses Link-Element verwenden, bei dem wir dasselbe Format verwenden können , um zu überprüfen, ob unser Header vorhanden ist. Lassen Sie uns also weitermachen und das Link-Element so ändern , dass es gezählt wird. Und wir machen den Bildschirm, aber wir löschen diesen Teil. Wir kommen mit dem Bildschirm zurecht. Wir wollen es je nach Rolle bekommen. Und Get By Role ermöglicht es uns, Dinge grundsätzlich anhand der Rolle zu finden, die sie haben. Also, wenn es eine Schaltfläche ist, wenn es ein Text ist, wenn es ein Etikett ist. Wir können diese verschiedenen Rollen verwenden, um die eigentlichen Elemente selbst zu identifizieren. Zum Glück haben wir nur eine Überschrift auf dieser Seite, sodass wir die Überschrift „Abrufen nach Rolle“ verwenden können. Wir können das dort verwenden, wo wir erwarten, dass die Anzahl im Dokument steht. Wie Sie sehen können, lief es bereits korrekt, als wir es gespeichert lief es bereits korrekt, als wir es weil wir für die richtigen Dinge sorgen Wir könnten noch einen Test machen. Wir könnten genau den gleichen Test machen, lass uns ihn neu schreiben. Aber wir können zum Beispiel nach der Plus-Schaltfläche suchen, oder? Wir können Renderings machen. Ähm, und wir werden auch diese Renderüberschrift ändern wollen , nur damit sie korrekt ist Der zweite Test, den wir durchführen möchten, ist Renders Plus Button. Und dann können wir einfach, uups, den Test erstellen und wir rendern die App. Und wissen Sie, das Interessante, worüber wir vielleicht noch nicht einmal nachgedacht haben, ist der Grund, warum das richtig läuft, weil all diese Komponenten in der App leben Weil die App einen Zähler und eine Zählung enthält und eine Schaltfläche enthält Es spielt keine Rolle , wo wir den Test aufrufen , weil er sie alle sehen kann. Also nur eine weitere interessante Sache, über die man nachdenken sollte. Und dann wollen wir konstant schreiben, was war das? Plus-Taste ist gleich Bildschirm, Get by Roll. Aber das Interessante ist, dass wir eigentlich nicht zwei Knöpfe haben Wir haben die Plus-Taste und die Minus-Taste. Aber kommen wir mit der Rolltaste und bestehen dann? Was gehen wir in den zweiten Teil über? Können wir plus eins weitergeben? Das ist möglicherweise eine Möglichkeit, es zu tun. Wie Sie sehen, funktioniert es wiederum nicht wirklich. Wir finden jetzt mehrere Elemente mit dem Roll-Button. Wir können nicht einfach sagen, oh ja, wir werden herausfinden, was es ist. Wir müssen hier wahrscheinlich eine Option anbieten. Also müssen wir fragen, okay, wir wollen die Schaltfläche finden, wir wollen die Schaltfläche finden, aber dann gibt es noch eine weitere Eigenschaft namens name, die es uns ermöglicht, gezielt die Schaltfläche zu finden , die einen beliebigen Namen hat. Richtig? Also so behebe ich das Problem. Wir haben den Bildschirm erstellt, wir haben Get by Roll gemacht, wir haben nach der Roll-Schaltfläche gesucht, und dann wollen wir, dass die Schaltfläche mit dem Namen plus eins die Schaltfläche ist, nach der wir suchen. Stimmt das? So greifen wir also auf die Plus-Schaltfläche zu. Ich zeige dir eine andere Methode dafür und wir können nach der Minus-Taste suchen. Kanäle plus Knopf entsprechen also dem. Dann wollen wir sichergehen , dass es in dem Dokument steht. Wir sagen das, los geht's, damit wir wissen, dass es tatsächlich richtig funktioniert. Ordnung, jetzt schreiben wir einen weiteren Test und suchen einfach nach einen weiteren Test und suchen einfach der Schaltfläche zum Subtrahieren Der Test rendert die Schaltfläche „Subtrahieren“. Wir werden unseren Test schreiben. Wir rendern die App, indem wir die Schaltfläche vom Bildschirm abziehen, anstatt sie nach Rolle abzurufen Jetzt verwenden wir Get by Text. Also werden wir per Text abrufen und dann wird es minus eins sein. Wir werden das speichern. Dann werden wir die Behauptung speichern Erwarten Sie, dass sich die Schaltfläche zum Subtrahieren im Dokument befindet. Das nennen wir. Wenn wir es richtig gemacht haben, bestehen unsere Tests. Es gibt zwei Möglichkeiten, tatsächlich nach einem Element zu suchen. Ich meine, es gibt mehr als zwei Möglichkeiten, aber die beiden Möglichkeiten, die wir uns gerade ansehen sind die Verwendung von Get by Role und die Verwendung von Get by Text. Überraschenderweise ist Abrufen nach Text zwar die knappere der beiden Optionen, Abrufen nach Rolle ist eigentlich vorzuziehen, weil „Abrufen nach Rolle“, Sie können sozusagen, Sie können ein bisschen sicherer sein , dass Sie genau das bekommen, was Sie wollen Nehmen wir an, wir hätten eine Überschrift mit der Schrift minus eins. Dieser Bildschirmpunkt nach Text würde tatsächlich beide Elemente abrufen und einen Fehler auslösen, da Get by Text buchstäblich nur nach dem Text sucht. Get by Roll ist dagegen etwas nuancierter, ein bisschen spezifizierter, wenn wir die Rolle der Schaltfläche sowie den Namen oder eine andere Option berücksichtigen, können wir sicher oder zumindest mit größerer Sicherheit sicher sein , dass wir das richtige Element erhalten, nach dem wir suchen 12. Schlussbemerkung: Fazit: Wir haben in diesem Video viel besprochen, von den Anfängen von React bis hin zum Aufbau Ihres eigenen Zählers. Ich würde gerne sehen, wie Sie sich entschieden haben, Ihren Counter zu implementieren. Hinterlassen Sie also bitte einen Link zu Ihrem Code oder der gehosteten Site der Registerkarte Projekte und Ressourcen, damit ich all die harte Arbeit sehen kann, die Sie geleistet haben. Ich lese jeden Kommentar und jede Bewertung und sehe mir alle eingereichten Projekte an. Wenn Sie also Fragen haben, Sie gerne einen Kommentar im Bewertungsbereich unten hinterlassen oder mich direkt kontaktieren. Sie auf meiner Profilseite Weitere Informationen dazu finden Sie auf meiner Profilseite. Wenn du mehr über Programmieren erfahren möchtest, schau dir die anderen Videos an, die ich auch auf meiner Profilseite habe. Ich habe auch Videos zu HTML und CSS auf meinem Youtube-Kanal und meiner Website verfügbar. Wenn du daran interessiert bist, diese zu lernen, schau sie dir an und ich werde sie im nächsten Video sehen.