Moderne React-Grundlagen: Erstelle einen Zitatgenerator

1. Einführung: In diesem Kurs lehre ich Ihnen die Grundlagen des Reakts bei, was es ist, warum ich denke, dass es eine großartige Bibliothek ist, mit der Sie sich auseinandersetzen können und wie Sie die neuesten und besten Praktiken in Ihre Webprojekte implementieren können. React ist eines der führenden Frameworks oder Bibliotheken bei der Erstellung nahtloser interaktiver UIs. Daher ist es wirklich wichtig jeder Front-End-Webentwickler etwas Erfahrung damit hat. Während dieser Klasse lehre ich Ihnen bei, wie Sie mit React funktionalen Komponenten, JSX, Requisiten, Hooks, Statusverwaltung arbeiten JSX, Requisiten, Hooks, Statusverwaltung wie Sie Ihre Anwendung debuggen und testen. Schwer hinzuzufügende Stile und vieles mehr. All dies sind entscheidende Bestandteile, die Sie wissen sollten , wenn Sie großartige UIs mit React aufbauen. Indem Sie mit mir alle diese Lektionen verfolgen, verwenden Sie diese neu erworbenen Fähigkeiten, um Ihren eigenen Angebotsgenerator zu erstellen. Jeder Schritt zum Erstellen dieses Angebotsgenerators deckt so viele wichtige Fähigkeiten ab, dass Sie ein vollständiger und selbstbewusster React-Entwickler sein müssen . Hey, ich bin David und ich bin ein Front-End-Webentwickler aus Northridge in England. Ich habe langjährige Erfahrung in der Erstellung digitaler Anwendungen für eine Vielzahl internationaler Kunden. Helfen Sie anderen Webentwicklern wie Ihnen dabei , ihre Fähigkeiten zu verbessern, was ihnen hilft, ihre Karriere voranzutreiben und ihnen letztendlich dabei zu helfen, der beste oder zufällige Entwickler zu werden, der sie sein können. Aber ich hasse es, über dich selbst zu reden. Lasst uns also schnell weitermachen. In diesem Kurs bin ich unter Studenten, die über grundlegende Kenntnisse über Front-End-Technologien einschließlich JavaScript verfügen, aber gerne reagieren möchten. Selbst wenn Sie aus einer anderen Codierungssprache stammen , können Sie immer noch folgen, solange Sie die grundlegenden Konzepte von Funktionen, Arrays und Objekten kennen . Wenn Sie ein Anfänger sind, um zu reagieren, ist das absolut in Ordnung. Alles, was Sie zum Erstellen Ihres Klassenprojekts benötigen ist Ihre Lieblings-IDE. Vs Code wird mein Code-Editor seiner Wahl sein, der in dieser Klasse verwendet wird. Aber alle anderen, die Sie sich selbst wohl fühlen , sind absolut in Ordnung. Wenn Sie mit dem Aufbau Ihres Kerngenerators fertig sind, stellen Sie ein Produkt mit Netlify im Web bereit. Sie machen sich Sorgen, ich zeige Ihnen, wie einfach es ist, das zu tun und es ist alles völlig kostenlos. Mit den Fähigkeiten, die Sie aus dieser Klasse gewinnen, können Sie als Entwickler so viel mehr anbieten, egal ob Sie Freiberufler sind oder für ein Unternehmen arbeiten, React ist immer noch die beliebteste JavaScript-Bibliothek verwendet auf der Welt. Und so viele Webanwendungen werden mit React erstellt. Sobald Sie diese neuen Fähigkeiten benötigen, können Sie Ihr Wissen jedem Unternehmen unter Beweis stellen , das nach hochqualifizierten und soliden Front-End-Entwicklern sucht . Am Ende dieser Klasse können Sie glatte und leistungsstarke Leistung erstellen und Schnittstellen verwenden, die die neuesten React-Funktionen verwenden. Lasst uns kurzerhand anfangen. 2. Einführung von Projekten: In dieser Klasse werden wir zusammen einen Generator für zufällige Anführungszeichen erstellen , reagieren. Wenn Sie diese Taste drücken erscheint sofort ein neues zufälliges Zitat. Dies wird eine einzelne Seiten-App sein, die einen Bereich zum Ausfüllen des Angebots enthält, eine einfache Fußzeile. Und ich zeige Ihnen, wie Sie den Status Ihrer Bewerbung verwalten können. Wenn Sie mir folgen, was ich Ihnen dringend ermutige, können Sie auch etwas wie einen Zufallsfaktengenerator oder eine ähnliche Anwendung erstellen einen Zufallsfaktengenerator oder eine , die sich einen Text ansieht Daten und füllen nach dem Zufallsprinzip eine zufällige Textzeichenfolge aus. Der Text selbst war nicht allzu wichtig. Es werden alle React-Techniken sein, die wir Ihnen in jeder Lektion zeigen werden , die wichtig sind. Jetzt habe ich einen Angebotsgenerator als Projekt zum Erstellen ausgewählt , da dies eine ideale Web-App ist , die wir viele wichtige Konzepte von React abdecken werden . Dies beinhaltet die Arbeit mit staatlichen Management-Paradigmen-Kind-Komponenten, Arbeiten mit Requisiten, das Arbeiten mit Hooks und Höhendaten, die Kennedy im Inneren reagiert. Erstes erfolgreiches Projekt. Versuchen Sie, alle Konzepte zu verwenden, die ich Ihnen in diesem Kurs zeigen werde. Wenn Sie sich besonders sicher für Bonuspunkte fühlen , haben Sie die offiziellen React-Entwicklungsdokumente nicht durchgelesen und fügen Sie weitere Kontexte auf, die in diesem Kurs nicht behandelt werden . Sie können auch versuchen, zusätzliche Komponenten wie eine Kopfzeile oder sogar zusätzliche Seiten einzubeziehen zusätzliche Komponenten wie eine Kopfzeile . Versuchen Sie auch, Ihr Gericht anders zu starten , um Ihr eigenes Layout, Schriftarten und Farben zu verwenden. Die Schüler sollten ihre bevorzugte IDE - oder Code-Editor verwenden , um ihr Klassenprojekt zu erstellen. Ich verwende VS-Code, aber jede IDE wird genauso gut funktionieren. Jetzt müssen Sie ein Terminal verwenden, das auf den meisten Betriebssystemen verfügbar ist . Aber ich werde das Terminal verwenden , das mit VS-Code gebündelt ist. Jeder wird natürlich tun, Sie verwenden das Terminal, um das Projekt zu erstellen und Ihnen auch bei der Bereitstellung Ihres endgültigen Projekts mit Netlify zu helfen. Keine Sorge, ich zeige Ihnen, wie einfach es ist, dies einzurichten und Ihre Arbeit auf eine Live-Webseite zu übertragen, damit alle sie sehen können. Und wir können das alles in weniger als einer Minute machen. Alle meine Arbeit wird auf GitHub unter dieser URL sein. So kannst du mein abschließendes Projekt sehen. Ich würde das als Referenz benutzen, wenn du stecken bleibst. Und ich werde diese URL in die Kursnotizen aufnehmen , wenn Sie Ihr Projekt bereitgestellt haben. Es ist großartig für Sie, Screenshots zu teilen und mit Ihrem abgeschlossenen Generator zu verknüpfen. Sie können dies tun, indem Sie Ihre Arbeit in den Projektbereich auf Skillshare hochladen . Dies ist eine großartige Möglichkeit, Feedback von mir, den anderen Schülern zu erhalten und Ihre Arbeit und Ihr neuer Freund zu reagieren. Wenn Sie Fragen haben, lassen Sie es mich natürlich wissen. wir einen Blick darauf, was React in der nächsten Lektion tatsächlich ist. 3. Was ist React und warum verwenden wir sie?: Was ist React und warum lernen Sie es überhaupt? Wie auf der offiziellen React-Website angegeben, ist React eine JavaScript-Bibliothek, die nützlich ist , um Benutzeroberflächen zu erstellen. Mit React können Sie einfache Ansichten für jeden Status Ihrer Anwendung entwerfen . Reagieren Sie auf so effizient, dass Sie wissen, dass Sie die richtigen Komponenten nur aktualisieren , wenn sich Ihre Daten ändern, stattdessen laden Sie die gesamte Seite neu. Dies macht es ideal für die einseitige Anwendung, die wir in dieser Klasse erstellen werden. Dies bedeutet, dass Ihre React-Anwendung eine großartige Leistung hat und sehr schnell ist. Jede Komponente ist gekapselt, was bedeutet, dass jede Komponente ihren eigenen Zustand verwaltet. Komponentisiert, arbeiten gemischt, einfach zu verwalten Ihren gesamten Code, sodass Sie Komponenten in Ihrer gesamten Anwendung wiederverwenden können. Reagieren wird heute auf über 10 Millionen Websites weltweit verwendet. Dies bedeutet auch, dass es eine starke Community mit großartigen Ressourcen gibt, die Ihnen auf Ihrer Reise helfen können. Es gab auch eine viel glattere Lernkurve im Vergleich zu seinem Gegenstück Angular. Und ich hoffe, Ihnen genau das in diesem Kurs zeigen zu können. Sollen wir unser Projekt einrichten? Lass uns das in der nächsten Lektion machen. 4. Einrichtung deines React: Lassen Sie mich Ihnen nun zeigen, wie Sie Ihr React-Projekt erstellen und wie Sie es in Betrieb nehmen können. Also habe ich hier bereits den VS-Code geöffnet. Das ist also der Code-Editor, den ich verwenden werde. Also bitte mach das Gleiche, öffne deine und folge mir einfach mit. Das erste, was ich getan habe, ist einen leeren Ordner namens Quote Generator zu erstellen . Natürlich was du willst und speichere es wo du willst. Es sind noch keine Dateien drin, aber genau das werden wir einrichten. Um nun ein React-Projekt zu erstellen, müssen Sie sicherstellen, dass Node JS installiert ist. Wenn Sie noch kein JS heruntergeladen haben, gehen Sie zu Node js.org. Diese Seite wird Ihnen vorgestellt. Wie Sie sehen können, wurde bereits festgestellt, dass ich auf einem Mac iOS bin und Sie die neuesten oder aktuellen Download-Dateien hier herunterladen möchten die neuesten oder . Jetzt habe ich Node bereits installiert, also muss ich das nicht tun. Wenn Sie jedoch darauf klicken, wird Ihnen ein Installationsassistenten angezeigt. Und Sie müssen nur die Schritte ausführen bis Sie einen Knoten auf Ihrem System haben. Und wie überprüfst du dann, ob du einen Knoten hast? Ich eröffne nur ein Terminal. Und wenn VS Code in einem neuen Terminal ist, wenn Sie keinen VS-Code verwenden und kein Terminal in Ihrem Code-Editor haben. Sie können nicht einfach ein Terminal verwenden, das mit macOS oder Windows gebündelt ist . Also habe ich gerade ein Terminal geöffnet, aber ich werde das einfach schließen, weil ich die Summe innerhalb der S-Kurven verwende . Also hoffe ich, dass das Sinn ergibt. Wie auch immer, um zu überprüfen, ob ich Node installiert habe, schreibe ich einfach Node Dash V , der mit Version steht. Und er kann das 17.9 sehen, also ist das installiert. Wenn Sie diese Zahlen hier sehen, nach dem Schreiben von Knoten b haben Sie nach dem Schreiben von Knoten b den Knoten korrekt installiert. Was genau ist Node und warum brauchen wir ihn? Im Grunde ist es eine Serverumgebung und es ist vollständig plattformübergreifend Open Source. Was das bedeutet, ermöglicht es Ihnen, JavaScript zu verwenden, um Befehlszeilen- oder Terminaltools für serverseitiges Scripting zu schreiben . Und genau das brauchen wir , um diese React-App zu erstellen. Wie erstellen wir die React-App? Wir schreiben n px, erstellen Strich, reagieren, Strich, Leerzeichen. Und dann können Sie entweder den Namen Ihres Ordners oder Ihrer Anwendung schreiben . Aber ich wollte nur den Zitatgenerator verwenden , der hier oben der Name meines Ordners ist. das zu tun, verwende ich einfach einen Punkt anstelle eines Namens und drücke Enter. Ich muss App installieren, erstellen, reagieren. Okay, um fortzufahren, ja, ich drücke Y. Und hier ist die React-App und alle notwendigen Dateien und Ordner vollgestopft . Gib das einfach eine Sekunde. kann einige Zeit dauern, abhängig von hohen Phos zu einer Maschine, tut mir leid, ich muss nicht unseren gesamten Installationsprozess aufwenden da es ein wenig Zeit in Anspruch nahm. Hier wollen wir voll lagern, richtig. Alles sieht gut aus. Wie Sie hier links sehen können, haben wir diese Ordnerstruktur, die sie erstellt hat. Also haben wir Sauce mit verschiedenen Akten. App.js als Basis-Root-Anwendung. Viele andere Dateien hier. Wir kommen in einer Minute zu denen. Um diese Anwendung jetzt in Ihrem Browser zu starten, wieder im Terminal, lassen Sie mich einfach alles löschen. Wenn ich npm stopp schreibe, nicht MPS, NPM, was für Node Package Manager steht, Ihnen verschiedene Skripte gibt, mit denen Sie es ausführen können. Also wollte ich diesen MPM-Speicherplatz einfach stoppen. Enter gestoppt. Ich nehme an, es geht ein bisschen gut durch. Es sollte einen Tab oder ein Fenster öffnen. Und wenn dies nicht der Fall ist oder Sie es tun müssen, gehen Sie dreimal zum lokalen Gastgeber und los geht's. Wenn Sie diese Seite sehen können , reagierte Ihre Replikation beim Setup. Beginnend. Alles in Ordnung. Wenn Sie das nicht sehen, sehen Sie dies nicht bei lokalen Gastgebern 3 Tausend. Dann muss ich irgendwo ein Fehler gewesen sein. Und dann lohnt es sich zu überprüfen, was Ihr Terminal sagt, da es Ihnen wahrscheinlich einige Fehlermeldungen gibt, denen wir genau erklären, wo das Problem liegt. Okay, jetzt wissen wir, dass das läuft. Lassen Sie uns einfach einige Dateien in app.js aufräumen, was die übergeordnete Datei für die Anwendung ist. Wir werden die Hälfte davon nicht brauchen, also lassen Sie uns alles im div, dem Header, loswerden . Ich werde nur ein H1 hinzufügen, um es zu sagen. Jen. Nur um sicherzustellen, dass wir wissen, was das ist. Dies wird in Echtzeit aktualisiert, wie Sie sehen können, haben wir die Animation verloren und es hat den neuen Text. Es ist also nicht nötig , dies weiter zu aktualisieren oder den Server weiter zu starten. Es sieht alles gut aus Updates in Echtzeit. Wir müssen das Logo auch nicht mehr importieren. Spar dir das auf. in der Quelle, wie wir hier sind Lassen Sie uns in der Quelle, wie wir hier sind, eine Ordnerstruktur einrichten. Auf diese Weise mache ich es gerne, um die Dinge ordentlich und ordentlich zu halten. Du kannst mich kopieren oder denkst du anders? Aber wir brauchen einen Ordner für unsere Komponenten. Das ist übrigens innerhalb der Quelle. Lassen Sie uns auch innerhalb der Quelle einen Ordner für unsere Daten haben , unsere Textdaten. Und dann machen wir dasselbe für den Formatordner. Für Stile. Das sieht alles gut aus. Was können wir hier sonst noch loswerden? Werden Sie coole Web-Phi-Tools los wenn wir dies testen , und entfernen Sie Setup-Tests. Das ist alles gut. Was bedeutet, dass es Index JS ist. Wir können loswerden, was wir dort gelöscht haben. Und auch dieser Teil des Bodens. Da sind wir los. Erfolgreich zusammengestellt. Index js enthält unsere app.js, die einfach das Gericht Januar haben sollte , um diesen Test ebenfalls loszuwerden. Ja. Und eine Hälfte dafür, aber hat diese Dateien nicht benutzt. Lass es uns ordentlich und ordentlich halten, schön und einfach. Da die Schule zu diesem Zeitpunkt in Ordnung ist, lassen Sie mich Ihnen einige nützliche Erweiterungen zeigen, die ich im VS-Code verwende, nur um etwas Zeit zu sparen. Während dieses Kurses wirst du sehen, dass ich einige Tastenkombinationen und Dinge verwende einige Tastenkombinationen und Dinge , um Zeit und Mühe zu sparen. Sie könnten dies nützlich finden , um Ihnen dies zu zeigen. Also Komponenten, ich werde nur eine Komponente für die Fußzeile erstellen eine Komponente für die Fußzeile nur um diese Dinge zu testen, die ich Ihnen gezeigt habe. Also nennen wir diesen Fußzeilenpunkt js. Normalerweise ist die normale Konvention, um js-Komponente mit einem Großbuchstaben zu starten. Die erste nützliche Verknüpfung besteht darin , eine React-Funktionskomponente zu erstellen. Ich gebe einfach II und Tab ein und es wird hier eine Komponentenstruktur erstellt. Was das macht, ist eine Erweiterung, die ich Code-Snippets, DX7-Snippets verwende und aktualisiert werde. Das gibt mir also eine Menge Tastenkombinationen, nur um etwas Zeit zu sparen. Halten Sie also genau nach dieser Erweiterung Ausschau. Eine weitere nützliche Erweiterung, die ich verwende, heißt hübscher. Wenn ich das einfach bewegen würde , sieht das nicht sehr gut aus. Wenn ich dann die Schule hervorhebe und die Tastenkombination verwende, formatiert Bennett sie an Ort und Stelle. Jetzt benutzt das ziemlich Act. Wenn wir also wieder zu Extensions gehen, habe ich das schon installiert. Da du hübscher bist. Es sollte hier dieses Top-Ergebnis sein. Codiere ganze Angelegenheit. Sie können sehen, dass diese Datei unten rechts Protein stirbt. Ich habe nicht ganz gesehen , dass das hier hübscher ist. Lass mich das einfach nach oben bringen. Nur damit du es weißt, das läuft in dieser Datei. Das ist eine großartige Zeitersparnis. Noch eins, wir sollten dieses Eröffnungstag ändern. Wenn ich dies zu einem ändere, können Sie sagen, dass das schließende Tag auch aktualisiert wird und Ihre Erweiterungen erhält. Dieser wird als Auto-Complete-Tag bezeichnet. Und doch los geht's. Also das Top hier. Auch hier sehr nützlich, insbesondere wenn Ihre Dateien größer werden, müssen Sie dieses niedrigere schließende Tag nicht direkt am Ende der Dokumentation finden dieses niedrigere schließende Tag . Wissen Sie, wenn Sie dies aktualisieren, dann wird das zweite Tag gut, das schließende Tag wird ebenfalls aktualisiert. Damit ist Ihre Anwendung eingerichtet und einsatzbereit. Schauen wir uns noch etwas mehr Code an. Und das ist tatsächlich die App selbst zu erstellen. 5. Komponenten und JSX: Sprechen wir über Komponenten und JSX. Zuallererst haben wir auf dem Bildschirm die Kostenkomponente und eine funktionale Komponente. Während dieses Kurses arbeiten wir mit funktionalen Komponenten, indem Ihnen nur den Unterschied zwischen den beiden zeigen wollten. Als die Reaktion zum ersten Mal durchgeführt wurde, war es üblich, Kostenkomponenten zu verwenden. Dies würde das Rocken, das Wort Klasse, den Namen beinhalten, den Sie komponieren können. Sie müssten die React-Punkt-Komponente erweitern. Sie müssten einen Render einschließen, um den tatsächlichen HTML-Code zurückzugeben . Und wenn Sie den Status ändern, müssen Sie einen Konstruktor einschließen. Sie müssten super einschließen, müssen dieses Schlüsselwort verwenden, um einen Status zu ändern. Funktionelle Komponenten. Wir sind es nur gewohnt, wenn Sie eine Komponente oder einen Code rendern. Wenn Sie mit dem Ändern des Status arbeiten würden, müssten Sie eine Klassenkomponente verwenden. Aber das hat sich jetzt alles geändert. Sie können Hooks verwenden, um den Status in funktionalen Komponenten zu verwalten . Ich finde Funktion Comparing. Es ist etwas einfacher zu verstehen. Dies kann jedoch für jemanden von objektorientierten Programmierhintergründen wie Java anders sein . Aber ich finde, dass Funktionskomponenten weniger Code verbrauchen. Und wie ich schon sagte, mit der Einführung von Hooks können Sie jetzt den Status verwalten. Es gibt weniger Code. Ich denke, es ist ordentlicher, also werden wir durchgehend mit funktionalen Komponenten arbeiten. Nein, funktionale Komponente ist im Grunde nur eine JavaScript-Funktion die die Namenskonstante Hayek oder Fitter deklariert. Und es ist nur eine einfache Pfeilfunktion. Und dann geben wir den HTML-Code zurück. Jetzt muss React von React nicht mehr importiert werden, da diese Anwendung bereits weiß, dass es sich um mehr importiert werden, da diese Anwendung eine React-Datei handelt. Das einzige Mal, dass wir es auf diese Weise importieren, ist wenn wir später anfangen, Hooks zu verwenden. Aber im Moment können wir das entfernen. Es macht den Code noch übersichtlicher. Das mag seltsam erscheinen. Einfügen von Mock-up in JavaScripts zeigt nicht, dass Sie sich daran gewöhnen werden, aber das ist im Wesentlichen das, was JSX ist. Jetzt bleiben die gesamte Logik und die Arbeit für die Fußzeile in der JS-Datei des Fußzeilenpunkts. Und es ist einfacher, Markup und Logik in derselben Datei zu verwalten . React konzentriert sich mehr als alles andere darauf , Bedenken zu trennen. Hier unten exportieren wir die Fußzeile. Und wir sagen , dass diese Fußzeile die Standardsache ist, die exportiert werden soll. Sie könnten hier andere Komponenten oder Funktionen zurückgeben. Wir sagen nur, dass es die Fußzeile gibt, die standardmäßig aus dieser Datei untersucht werden soll. Jetzt in der Rückkehr befindet sich hier das Markup, das im Wesentlichen HTML ist. Wenn Sie also bereits mit HTML vertraut sind, können Sie es auf die gleiche Weise schreiben. Es gibt jedoch einige Fälle, in denen einige Attribute etwas anders benannt werden. Wenn Sie beispielsweise eine Klasse hinzufügen möchten, sagen Sie distalless für die Klasse ist ein reserviertes Wort, wie ich Ihnen gerade gezeigt habe. Sie können klassenbasierte Komponenten in React verwenden. Klasse wird so zu ClassName. Und schon mein Kandidat, sagt es mir oder schlägt den Klassennamen vor, hier ist das Richtige zu verwenden. Denken Sie also daran, ClassName und nicht class zu verwenden. Wenn Sie auch mit Forms arbeiten, sagen wir, ein Label für ein Formular am glattesten Zeit für eine andere Zeile zu erstellen . Wenn Sie dies mit einer Eingabe verknüpfen, hätten Sie normalerweise vier und dann die ID der Eingabe. Vier ist auch ein reserviertes Wort. Sie müssen daran denken, HTML Full in CamelCase so einzuschließen . Einfach nützlich, um daran zu denken , dass dies entfernt wird. Wir werden noch keine Stile hinzufügen. Aber während sie in der Fußzeile sind. Ändern wir das einfach in ein Footer-Tag. Dann lege ich den Text in einen Absatz wie folgt. Und dann lassen Sie uns dies weiter aktualisieren, um David JC Lee etwas wie die Kraft-Generation zu sagen , das bin ich. Und dann fügen wir ein Copyright-Symbol wie dieses hinzu, kaufmännische Und-Kopie. Entferne diese Charaktere. Ich sage „Semikolon 2022 kopieren“. Eine andere Sache, die Sie beachten sollten, ist in dieser Gegenleistung, wenn Ihr HTML ziemlich groß wird, was hier ist, können Sie natürlich MU in zwei separaten Zeilen M sein. Es gefällt so, aber denken Sie daran Klammern um alles in Klammern wie diesen aufzunehmen . Mit hübscher formatiere ich das einfach , indem ich Befehl a drücke , um alles auszuwählen. Dann halte ich die Umschalt-Option F auf Format gedrückt. Und dann sparen wir so viel sauberer. Das ist im Wesentlichen unsere Fußzeile abgeschlossen. Gehen wir zu einer anderen Komponente über. Sie können das Komponentenverzeichnis auswählen. Lassen Sie uns eine Komponente für das Angebot erstellen. Also das Zitat ab.js, denn das ist wirklich eine JavaScript-Datei. Und dann mit meinen S7-Erweiterungsverknüpfungen oder der ICF-Registerkarte wurde die Eingabe tatsächlich entfernt, wurde die Eingabe tatsächlich entfernt weil sie bereits weiß, dass sie reagiert. Zitat. Okay, großartig. Wir haben bereits Klammern für mehrere Zeilen bei der Rückkehr wenn das Modell zurückgegeben wird. Das ist also praktisch. Lassen Sie uns das einfach ein bisschen einräumen . Im Div. Verwenden wir tatsächlich ein Blockquote-Tag, und dann werden wir nur eine Abfrage hart codieren. Dies ist ein großartiges Zitat, das ich vorerst machen werde. Und dann für den Namen der Person, die das Zitat gesagt hat, schreiben wir es in Absatz-Tags. Nennen wir einfach deinen Namen. Wenn ich mit echten Daten arbeite, werden wir dies natürlich sowohl das Zitat als auch den Namen dynamisch machen. Aber im Moment stellen wir nur die Basiskomponente zusammen. Wieder drücke ich Command a Shift Option F, schön formatiert. Und das ist unsere zweite untergeordnete Komponente. Wenn ich nun die Charles-Komponente sage, bedeutet das, dass sowohl das Foto als auch das Zitat in einer übergeordneten Komponente leben müssen. Jetzt ist die offensichtliche Komponente die app.js, die erstellt werden sollte, als Sie Ihre React-App erstellt haben . Früher. Wir haben es in diesem einen Anführungsgenerator nur hart codiert. Während wir hier sind, lassen Sie uns einfach das Modell ändern. Eigentlich werden wir diesen Davidson verlassen, aber wir werden ihn in einen Abschnitt legen alles so in diesen Abschnitt einpacken. Wir werden letztendlich den Angebotsbereich hier haben. Kommentiere, dass sie sich zwischen dem div befinden, Der Abschnitt, in dem wir irgendwann die Fußzeile hier haben werden. Lassen Sie uns diese Mathematik vorerst einfach kommentieren. Unter der Abfrage benötigen wir eine Schaltfläche, um jede Gruppe randomisieren zu können. Lassen Sie uns also einfach einen Button erstellen. Und ich schreibe den Text generieren für den Button. Jetzt können Sie sehen, dass sich auf der rechten Seite nichts ändert. Das liegt daran, dass wir den Server starten müssen . Fangen Sie einfach npm inter an. Warte, bis das geladen wird. den Entwicklungsserver starten, werden sie erfolgreich kompiliert. Und dann sehen wir unseren Generieren-Button. Bevor wir das Zitat und die Fußzeile einbringen, möchten Sie nur auf einen praktischen Tipp hinweisen , während es bereits Tipp ist, ist etwas , das Sie wissen müssen. In unserer Rückkehr haben wir im Wesentlichen einen Wrapper. Es ist also die Sektion. Wenn ich eine zweite hier platzieren würde. Zweiter Abschnitt. Zweiter Abschnitt sieht man, dass es überall rote Linien gibt. Es beschwert sich, es mag es nicht. Wenn wir den Mauszeiger über den Text bewegen, können Sie sehen, dass JSX-Ausdrücke ein übergeordnetes Element haben müssen. Was passiert, wenn Sie tatsächlich zwei Geschwister wie diese beiden Abschnitte benötigen ? Nun, du brauchst eine Art Wrapper. Es würde funktionieren, wenn du ein äußeres div hättest. Das ist beides. Aber wenn Sie nicht nur aus Gründen einen Tag einbeziehen wollten , können Sie ein React-Fragment verwenden und alles, was ist ein leeres Div wie dieses. Sie können hier eine leere Tabelle und ein leeres schließendes div hier sehen. Dies sind React Fragmente. Glücklicherweise brauchen wir keinen zweiten Abschnitt. Ich habe dir das nur als Beispiel gezeigt damit du das loswerden kannst. Werden Sie dieses Eröffnungsfragment los und speichern Sie das. Dann. Importieren wir unsere Angebotskomponente , die wir jemals zum Kopf gestellt haben. Unterhalb dieser Eingabe des CSS. Auch hier wurde dieser App-Punkt-CSS mit seiner Create React App gebündelt. Wir brauchen das vielleicht nicht wirklich, also löschen wir das vorerst. Um eine untergeordnete Komponente in das übergeordnete Element zu importieren, können wir ein Zitat von erstellen. Dann müssen wir als String in Punkt-Schrägstrich-Komponenten gehen, Schrägstrich. Okay, großartig. Es besagt, dass Zitat deklariert ist, aber sein Wert wird niemals gelesen. Alles, was wir hier tun, ist eine selbstschließende Zitatkomponente wie diese zu haben. Nur Klammername der Klammer für den Schrägstrich des Bauteils. Das Lasst uns sparen. Und dann können wir am rechten Ohr sehen, dass unsere Herzpflege ganz richtig gemacht hat. Machen wir das Gleiche für die Fußzeile. Footer von sorry, Punkt-Schrägstrich-Komponenten schrägstrich. Besser. Ich mache die gleiche Fußzeile. Schließe diese Rettung. Und das ist unsere Fußzeile. Wir haben untergeordnete Komponenten in unsere übergeordnete Komponente importiert . Nun, das Tolle an der Trennung dieser Komponenten ist, dass Sie sie überall verwenden können, weil sie komponentisiert sind. Dies ist also im Wesentlichen eine Quo-Komponente. Wir könnten zweifeln, Triplett, sparen. Da sind wir los. Davon haben wir drei. Dies ist also eine ziemlich Komponente, die überall in unserer App abgelegt werden kann und es funktioniert unabhängig. Jeder, der sie vergleicht, verwaltet seinen eigenen Zustand, seine eigenen Stile und alles dergleichen. Es kann also einfach überall hineingebracht werden , während wir hier sind. Bevor ich vergesse, wenn Sie Ihren Server stoppen wollten, können Sie sehen, dass dies immer noch in Ihrem Terminal läuft , oder Sie tun Control und C. Und dann können Sie sehen , dass das gestoppt wurde. Und wenn ich diese Seite aktualisieren wollte, ist nichts da, weil wir den Verkäufer gestoppt haben. Ich hoffe, das ergibt alles einen Sinn. Lassen Sie uns nun mit Eingabeaufforderungen arbeiten. 6. Requisiten: Werfen wir einen Blick auf die Arbeit mit Eigenschaften oder Requisiten. Lassen Sie mich zuerst den Server wieder starten. Wir werden npm angehalten, drücken Sie Enter. Requisiten sind nützlich für die Weitergabe dynamischer Daten vom übergeordneten Befürworter an seine verschiedenen untergeordneten Komponenten. Was kannst du weitergeben? Nun, fast alles wirklich. In diesem Beispiel musst du mir nicht mitfolgen. Dies sind nur einige Beispiele bevor wir mit unseren tatsächlichen Daten arbeiten. Was ich also zuerst mache, ist sagen wir wollten den Namen in der Fußzeile ändern. Also hier ist unsere Fußzeile im Elternteil. Wir können ein Attribut hinzufügen, sagen wir einen Namen. Du kannst das alles nennen, was du willst. Aber wir haben den Namen geändert. Und dann lasst uns diesen Namen ändern, um zu sagen: Jim, lasst uns das speichern. Sind in unserer Fußzeile. Wie erhalten wir eine Textzeichenfolge zurück? Nun, die Klammern hier, der Parameter muss Requisiten sein. Requisiten, Spiel hat das gleiche eingezogen. Es wird erklärt, dass sein Wert niemals gelesen wird. Wie aktualisieren wir diesen Text hier? Lasst uns das löschen. Und dann müssen wir einige geschweifte Klammern öffnen. Und so verwenden wir JavaScript in diesem JSX. Wir können hier jede Art von Drogen schreiben, aber wir werden mit den Requisiten-Variablen arbeiten. Wir verwenden Requisiten und dann gestoppt und was auch immer wir hier das Attribut genannt haben, das als ungefährer Punktname bezeichnet wird. Wir speichern das und es wird hier auf Jim aktualisiert. Wir können dies auch mehrmals auf dem zweiten Foto verwenden und lassen Sie uns den Dave ändern, ist, dass das ehrliche Ding namens Julie auf „Speichern“ klicken wird. Und los geht's. Wir haben das Gleiche für Zweikomponenten, dreimal verwendet werden, aber es akzeptiert drei verschiedene Arten von Requisiten. Jetzt können Sie auch Variablen übergeben und in unserer App klicken. Lass uns ein Const erstellen. Wir nennen diesen Namen eins. Wird als String namens Jamie gespeichert. Name 1 kann hier anstelle von Jim verwendet werden, aber es ist kein String. Stellen Sie also sicher, dass Sie geschweifte Klammern verwenden. Und wir geben den Namen eins da rein. Ich sage Save. Und da ist Jamie. Entfernen Sie die Fußzeilen. Was können wir sonst noch hier reingeben? Lassen Sie uns unseren Namen loswerden, lassen Sie uns eine Art Boolean weitergeben. Also haben wir ein wahres oder falsches. Und was wir tun können, ist, sagen wir, dass die Fußzeile dieses Datum auftaucht oder verbirgt. Nennen wir unseren konstanten Jahreswert. Und wir setzen dies auf false, weil wir es in der Fußzeile ausblenden und dieses Attribut entfernen. Sagen wir, wir nennen das. Das nennt man ein Jahr. Dann geben wir in einigen geschweiften Klammern unsere Variable oben weiter. Das nennt man Jahr , also müssen wir dies in der Fußzeile einfach wieder in meinen Namen ändern. So schwer zurücktragen. Wie zeigen und verstecken wir uns? Dieses Jahr? Auch hier müssen wir geschweifte Klammern öffnen. Und wir werden nur eine Kurzschrift verwenden. Also werden wir Requisiten weitergeben, Requisiten Punkt, gerade Jahr genannt. Ich glaube, wir werden nur weitergeben. Wenn Requisiten Punktjahr gleich wahr ist , zeigen wir die Zeichenfolge von 2022 an. Ansonsten haben wir nur einen leeren Baum, leere Strings, also verstecken wir uns einfach zurück. Das ist nur eine Kurzschrift. Das Fragezeichen ist im Grunde ein wenn, wenn wahr, und dieses Codon ist im Grunde ein anderes. Mal sehen, wir werden das speichern und haben es tatsächlich in unserem Jahr. Wenn wir also zu unseren Eltern zurückkehren, ändern wir das in „false“. Tut mir leid, ändere das in wahr weil wir es dir hier zeigen wollen. Wir speichern das und zeigen das Jahr. Dies ist sehr praktisch, um Dinge wie Textinhalt ein - und auszublenden oder sogar Klassennamen zu ändern , weil unterschiedliche Styles unterschiedlich sind. Lassen Sie uns das einfach zurückkehren , als wir hier einen Namen hatten. Ja, ungefähr Name hier drüben. Wir ändern dies zurück in den Namen, würden dies in Namen ändern und dann unseren Variablennamen ändern. Der Name wurde in Keith geändert. Keith hat diesen Abfragegenerator erstellt , naja, Eselzähne. Mein nächstes Beispiel ist, dass Sie Standardrequisiten festlegen können. Zum Beispiel haben wir hier Requisiten Punktnamen. Aber wenn Keith nicht mehr verfügbar ist, können wir Double Pipe machen, was bedeutet, dass alle Requisiten Punktnamen oder Pooling sind. Das hat sich nicht geändert, das heißt immer noch Zähne, weil Keith hier oben deklariert wird. Wenn es sich um eine leere Zeichenfolge handelte, sind die Requisiten nicht mehr verfügbar. Also entferne das. Dann haben wir uns hier zusammengetan, weil der Name leer ist. Wir geben eine Blend-Requisite weiter. Innerhalb von Requisiten ist der Punktname der Requisiten nicht verfügbar. Also haben wir uns dem Ziehen verschrieben. Dies ist auch nützlich für die Sicherung, wenn Sie keine Daten haben oder möglicherweise keine Daten weitergegeben werden. Okay, ich hoffe, das ergibt Sinn. Nein, wir können das noch sauberer machen. Stellen Sie sich vor, Sie haben mehrere Texte. Dann musst du immer wieder Requisiten schreiben. Wir haben das Wort Requisiten viermal benutzt. Aber was wir brauchen, ist Name. Jetzt können wir das sogenannte D diese Requisiten strukturieren. Also können wir uns einfach einen Namen holen und das tun. Löschen Sie die Eingabeaufforderungen erneut in geschweiften Klammern, wir können einfach den Wortnamen schreiben. Werden Sie einfach diese mehrfachen Namen los. Und das heißt, wir brauchen nur deinen Namen wie Fett. Das wird dringend benötigt. Du sparst nur und schreibst das. Denken Sie also daran, die geschweiften Klammern zu verwenden, um eine dieser Aufforderungen zu erhalten, die vom Elternteil weitergegeben werden . Obwohl wir hier die Fußzeile benutzt haben und wir eigentlich nichts an die Fußzeile weitergeben müssen . Also lasst uns das loswerden. Lassen Sie uns das wieder auf meinen Namen zurücksetzen. Es wird dein Name sein. Wenn du ein Foto von dir selbst erstellt hast, sag das natürlich noch einmal. Das ist wieder normal. Ich denke, wir haben vorerst ein Foto gemacht bis wir anfangen, es zu stylen. Wir machen uns also mehr Sorgen um das Angebot, das für die Angebotskomponente generiert wird. Dieser Code ist also fest codiert und dieser Name ist fest codiert. Der Kurs, den wir tatsächliche Daten innerhalb der App weitergeben möchten . Ich werde Ihr Objekt erstellen und wir werden diese Daten gleich nennen, und dies wird ein Objekt sein. Und der Grund, warum dies ein Objekt ist, liegt darin, dass wir weitergeben. Nun, ich brauche zwei Dinge hier, das Zitat und den Namen. Sagen wir, Name ist gleich Joe Bloggs. Und sagen wir, Zitat ist in der Zeichenfolge. Das ist ein tolles Gericht. Diese Daten möchten wir an unsere Angebotskomponente weitergeben . Nennen wir diese Daten. Wir verweisen auf das obige Datenobjekt. Insider-Zitat, Fangen wir hier mit einem Namen an. Lassen Sie uns das löschen, einige geschweifte Klammern. Und bevor ich es vergesse, müssen wir Requisiten mitbringen. Es akzeptiert Requisiten und M, wir müssen Requisiten Punktdaten referenzieren. Und dann haben wir in unserem Objekt Namen, Namen. Lasst uns sparen. Und da haben wir. Joe Bloggs würde dasselbe verwenden , damit das Zitat den fest codierten Text, offene geschweifte Klammern, Requisiten, Punktdaten und Punktzitat benötigt offene geschweifte Klammern, Requisiten, . Dies ist ein großartiges Zitat. Großartig. Okay, ich werde wirklich nervig sein und einfach ein paar Zitate hinzufügen , damit es so aussieht, als wäre ein echtes Zitat besser. Denken Sie daran, wir können das destrukturieren. Lassen Sie uns Requisiten loswerden, um diese sauberere geschweifte Klammern zu machen. Wir nennen diese Daten nicht. Was bedeutet, dass wir Requisitendaten loswerden können, Punktdaten-Punktname sollte genau gleich bleiben. Wir werden mit mehreren Anführungszeichen arbeiten , da die Idee ist wir auf Generieren drücken und dann ein zufälliges Zitat angezeigt wird. Lassen Sie uns vorerst nur harten Code sagen, sagen wir fünf verschiedene Anführungszeichen. Das bedeutet also, dass dies kein Objekt halten wird. Es enthält fünf Objekte, was bedeutet, dass wir dies in ein Array aufnehmen müssen. eckige Klammer, die eckige Klammer macht es einfacher und klarer Platz an der Seite und alles, was ich tun werde , ist dort ein Komma zu treffen und ich kopiere das fünfmal. Und dann ändere ich den Namen und die Abfrage für jeden einzelnen. Verwenden Sie also jeden Text Sie verwenden möchten, egal welchen Namen Sie wollen, wo immer Sie wollen, Sie müssen nicht nur fünf haben, Sie können drei haben, wo Sie 100 haben können. Stellen Sie einfach sicher, dass es diesem Format folgt. Stellen Sie also sicher, dass Sie Ihre eigenen Angebote überall dort verwenden , wo Sie Informationen sammeln. Du kannst diesen Akt nicht einfach schreiben, aber ich werde das einfach beschleunigen. Ich mache das sehr schnell und dann sind wir bald zurück. Großartig. Wenn dort fünf Anführungszeichen fest codiert werden, fünf Objekte innerhalb des Datenarray-Formats. Das ist alles ordentlich. Jetzt können Sie sehen, dass sich das hier nicht bevölkert. Und das liegt daran, dass wir jetzt mit Objekten innerhalb eines Arrays arbeiten . Es weiß also nicht, was ich gerade weitergegeben habe. Im Wesentlichen gebe ich kein Array weiter. Daher beenden Sie Zitat. Dies ist nicht mehr sinnvoll, da Daten ein Array sind, daher weiß es nicht, welche Abfrage von diesem Array abgerufen werden soll . Lassen Sie uns einfach das erste Zitat nach unten ziehen. Lassen Sie uns also einfach die eckige Klammer 0 der Daten machen. Im Moment werden wir sagen, dass dies unser allererstes Zitat durchführt. Schon wieder. Ich werde dir bald zeigen, wie du das ändern kannst. Das ist also dynamisch und teilt zufällige Anführungszeichen und Namen. Nein, um all das zu tun, werden wir anfangen, uns Hooks und Hooks anzusehen , bevor gute Möglichkeit ist, den Zustand zu verwalten und die Auswirkungen der Dinge zu ändern. Lasst uns das als Nächstes durchgehen. 7. Einführung in Hooks und useState: Reden wir jetzt über Hooks und dann werden wir uns mit unserem ersten US-Bundesstaat befassen . Erklären Sie jetzt einfach ein paar Dinge und dann schauen wir uns etwas Code an. Was sind Hooks? Wie Sie hier sehen können, können Sie mit Hooks Funktionen verwenden, die in klassenbasierten Komponenten gefunden wurden. Wir können sie jetzt in Funktionskomponenten verwenden, und es sind funktionale Komponenten, die wir in diesem Kurs verwenden werden. diesen Funktionen gehört Stateful-Logik. Es bedeutet also, dass Sie jeder Komponente völlig unabhängig Zustände hinzufügen und von Komponente zu Komponente wiederverwendet werden können. Für mich scheint der Code bei Verwendung von Hooks in funktionalen Komponenten so viel kürzer, einfacher und übersichtlicher zu sein , während er all die Funktionen hat , die in klassenbasierten Komponenten gefunden wurden. Weil der Code kürzer ist? Oder denken Sie, dass Hooks im Vergleich zum Äquivalent in den Klassen eine flachere Lernkurve haben eine flachere Lernkurve , was großartig ist, wenn Sie diese Art von Sachen zum ersten Mal in React lernen. Hooks wurden nur in React 16.8 hinzugefügt. Also ja, irgendwie neu in der Lebensspanne von React. Ein schneller Tipp. Verwenden Sie keine Haken mit Insider-Schleifen innerhalb von Bedingungen oder verschachtelten Funktionen. Sie würden einfach Hooks auf der obersten Ebene Ihrer Komponente aufrufen . Wie irgendwie berührt. Und Hooks vermeiden einen Großteil des Overheads, den Klassen erfordern, wie das Erstellen von Klasseninstanzen, wie das Binden von Ereignissen und das Erstellen eines Konstruktors. Wenn das keinen Sinn ergibt und das absolut in Ordnung ist, zeigen wir jetzt etwas Code. Also erstelle ich zuerst eine klassenbasierte Komponente und erstelle diesen Zähler. Wenn Sie also eine Taste drücken, erhöhen Sie die Nummer auf dem Bildschirm um eins. Was wir dann tun werden, ist, dass wir eine funktionale Komponente erstellen, die den US-Bundesstaat verwendet , um das Äquivalente zu erreichen. Und dann können Sie einen Vergleich mit der Menge an Code und dem Unterschied im Code sehen mit der Menge an Code und dem Unterschied im , um dasselbe mit dem US-Bundesstaat Hook zu erreichen . So sieht eine klassenbasierte Basiskomponente aus. Wir werden nur eine einfache State-Funktion erstellen. Wenn Sie also auf diesen Button klicken, fügt es 12 hinzu. Nun dann Amazon im Moment dort, aber ich zeige Ihnen in einer Sekunde , wie das aussieht. Mit Unterrichtsstunden. Zuerst muss die Komponente importiert werden, muss das Klassenschlüsselwort, den Namen unserer Komponente verwenden , und wir müssen die Komponente erweitern. Dies ist also schon länger als die erste Zeile einer funktionalen Komponente. Wenn wir den Status aktualisieren, müssen wir einen Konstruktor und Super einschließen. Um dann den Status zu setzen, sagen wir mal die Standardnummer, müssten wir das Schlüsselwort verwenden , dieser Zustand ist gleich. Und dann ein Objekt, das wir unsere Variable nennen können, sagen wir zählen, und wir setzen diesen Standardwert von 0. Wir bräuchten eine Funktion, um die Zahl zu erhöhen. Nennen wir es inkrement. Und um den Status erneut festzulegen, müssen wir das Schlüsselwort dieses verwenden und wir würden diesen Set-Status verwenden. Dies ändert also den Wert in einem Objekt. Unsere Variable der Zählung müsste auf diesen Punktstatus aktualisiert werden, Punktzahl plus eins. Wir nehmen also den ursprünglichen Wert und aktualisieren ihn jedes Mal um eins. Um die Inkrementfunktion auf der Schaltfläche zu verwenden , verwenden wir onclick. Dann müssen wir diese Punktinkremente nennen. Um diese Inkrementsfunktion tatsächlich zum Laufen zu bringen, müssen Sie sie auch innerhalb des Konstruktors binden, was leicht vergessen wird. Also ja, dies ist in klassenbasierten Komponenten enthalten oder benötigt, Sie würden dies tun, dies entspricht diesem Punktinkrementen, Punktbindpunkt dies. Wenn Sie solche Dinge zum ersten Mal lernen, insbesondere in klassenbasierten Komponenten, ist dies ziemlich verwirrend. Hier gibt es viel zu nehmen. Und es macht nicht sofort Sinn, warum dies benötigt wird. Aber das ist es. Ich zeige Ihnen noch einmal, wie sich dies innerhalb einer funktionalen Komponente mit Hooks unterscheidet. Und um dann eine Zahl anzuzeigen, ist die Zahl jetzt diese Punktzustandspunktzahl. Lasst uns einfach speichern, dass diese Zahl jetzt eins zu eins ist. Da sind wir los. Es ändert den Status jedes Mal. Okay, also ziemlich viel enthalten, ungefähr 20 Codezeilen. Werfen wir einen Blick auf unseren Haken. Was ich tun werde, ist, dass ich die Klasse einfach auskommentiere und im Haken kommentiere. Okay, Die Zahl ist neun Minuten leer. Okay, wie erreichen wir das äquivalente Ergebnis innerhalb der funktionalen Basiskomponente mit dem US-Bundesstaat Hook. Zuerst müssen wir den US-Bundesstaat importieren. Drittens von React. Sie müssen Ihren Status so importieren. Und wie sieht der Use-Status dann aus? Anfangs müssten wir eine Konstante deklarieren, die Ihrem oben genannten Staat entsprechen würde. Und dann befindet sich in den Klammern unser Standardwert, der 0 ist. Also wissen wir das. Und was passiert dann vor den Gleichen. Wie gesagt, es ist ein Const. Und dann müssen wir das, was Sie uns geben, destrukturieren. Es gibt zwei Parameter, die wir einschließen müssen. In der Tat heißt es, dass es getroffen hat. Es erwartet, dass ein Wert oder eine Rückkehr zum Stateful-Wert und eine Funktion ihn aktualisiert. Das sind also die beiden Dinge. Der Wert heißt count, wir können das nennen, was wir wollen. Und dann eine Funktion , um dies zu aktualisieren. Normalerweise wäre die herkömmliche Syntax dieser Funktion das Wort set und dann der Variablenname oder in CamelCase in diesem aktuellen Fall, in diesem Fall ist es so eingestellt. Sie können den aktuellen Wert nicht zählen, den Status verwenden. Innerhalb unserer Schaltfläche müssen wir die Funktion oder Onclick inkrementieren, zumindest onclick gleich. Was wir dann tun müssen, ist, dass wir eine Pfeilfunktion verwenden. Jedes Mal, wenn Sie darauf klicken, löst es die Funktion aus und wir können hier einfach set current verwenden. Also setze die Zählung. Wir können plus eins zählen. Dann ist die Zahl jetzt aktuell. Wir müssen das Schlüsselwort nirgends verwenden, wo wir den Referenzstrom springen können. Es gibt keine Bindung der Funktion. Wir können es einfach alles in der Reihe machen. Theorie, indem Sie auf eine Taste drücken, aktualisiert die Nummer, ohne die Seite zu aktualisieren. Und schauen Sie sich an, wie viel sauberer dies im Vergleich zu unserer klassenbasierten Komponentenklasse ist. Wir müssen Vergleichszwecke einbeziehen. Dafür ist es nicht nötig. Der Funktionsname ist so viel einfacher. Wir erweitern nicht die Reaktion, wir erweitern die Komponente nicht. Es gibt keine Verwendung von Konstruktor hier oder super. Wir mussten die Funktion nicht binden. Wir benutzen hier nur eine Zeile von dir. Diese zusätzliche Funktion ist nicht erforderlich. Wir müssen das Schlüsselwort, dieses Schlüsselwort hier nicht verwenden . Wir können einfach auf die Zählung verweisen, wie wir es hier getan haben. Sie können sehen, wie wir hier so viel Codierung gespeichert haben, indem Sie einfach den US-Bundesstaat verwenden. Okay, also werden wir die US-Staatlichkeit in unserer tatsächlichen Anwendung verwenden , aber wir werden in Kürze darauf eingehen. Schauen wir uns einfach einen weiteren nützlichen Hook an, aber wir werden in der nächsten Lektion den gekühlten Benutzereffekt verwenden. 8. useEffect: Der US-Effekt Hooke. Damen und Herren, wir werden den US-Effekt Hooke in unserer Anwendung verwenden. Wir verwenden, um unsere lokalen Daten abzurufen, also unsere Auswahl an Anführungszeichen und Leichtigkeit. In der Tat ist Herc dafür großartig, da Sie damit Nebenwirkungen innerhalb von Komponenten ausführen können und das ist ein Nebeneffekt. Das ist also Datenabruf, wie das Einrichten eines Abonnements und das manuelle Ändern des DOM in React-Komponenten. Schauen wir uns jetzt etwas Code an, damit ich Ihnen einige praktische Beispiele für die Verwendung von Effekthaken zeigen kann . Okay, das ist also eine sehr grobe App. Was das tun wird, ist, dass wir den Titel hier auf der Registerkarte aktualisieren werden. Wenn Sie auf die Schaltfläche klicken, wird die Nummer im Titel und im Dokumenttitel festgelegt. Und das kann erst passieren, nachdem alles geladen ist, nachdem das Komparativ etwas ausgedacht hat. Dies kann nicht sofort erledigt werden, da wir auf das Dokument zugreifen. Verwenden wir einen Effekt, der dem US-Bundesstaat so ähnlich ist, können wir ihn in diesen geschweiften Klammern eine wichtige Wirkung bringen . Wie sieht der Bieneneffekt aus? Sie können diesen Effekt schreiben. Dann öffnen wir einige Klammern und leeren dann vorerst Klammern. Und dann verwenden wir einfach eine Array-Funktion und öffnen diese mit einigen geschweiften Klammern. Okay, also habe ich gesagt, dass wir den Dokumenttitel aktualisieren möchten , nachdem alles mein Dokumentpunkttitel gleich ist , und dann ändern wir die Nachricht in etwas wie angeklickt. Dann interpellieren wir einfach die Strömung. Verwenden Sie den US-Bundesstaat , den ich Ihnen in einer früheren Lektion gezeigt habe, um den Zähler um eins zu aktualisieren. Sie haben jedoch oft auf „Zählung“ geklickt, aber der Standardwert ist 0. Sie können sehen, dass es zu dem Thema aktualisiert wurde, das 0 Mal angeklickt wurde. Wenn wir dann theoretisch auf Inkrement drücken, sehen Sie, dass sich diese Zahl dort oben ändert. Jetzt würde das außerhalb des US-Effekts Hooke nicht funktionieren. Und das liegt daran, dass dies, wie gesagt, ein Nebeneffekt ist. Was wir hier machen, aktualisieren wir das Dokument. Wir müssen warten, bis alles geladen wird, bevor dies passiert. Jetzt können wir hier einen zweiten Parameter übergeben, der einige eckige Klammern sein wird. Was das der Komponente aussagt, ist im Grunde so. Standardmäßig wird dieser Useeffekt-Nebeneffekt sowohl nach dem ersten Rendern als auch nach jedem anderen Update nach einem auf der Seite gerenderten Effekt ausgeführt dem ersten Rendern als auch nach . Also habe ich keine eckigen Klammern bedeutet dies nur einmal passieren wird. In diesem Beispiel ist das nicht wirklich nützlich, da wir sehen können, dass ich Inkremente hänge. Es wird nicht mehr aktualisiert, denn ich sage nur diese Informationen ein und nie wieder. Szenario, in dem dies nützlich ist, ist, wenn Sie externe Daten oder Daten abrufen , die Ihnen in Kürze ein Beispiel zeigen. In diesem Szenario wollten Sie nur Informationen sammeln wenn alles tief ist. Aber hier wollen wir das viele Male aktualisieren. Wir können tatsächlich angeben , wann dies gerendert oder geändert werden soll. Ich werde jedes Mal setzen, wenn sich die Zählung ändert. Dies wird jedes andere Mal ignoriert, wenn die Seite gerendert wird, aber nur wenn Sie Aktualisierungen zählen, dann führen Sie diese Theorie durch. Wenn ich jetzt auf Inkrement drücke, wird es erneut aktualisiert, weil es erkennt, dass sich die Anzahl ändert. Was ist mit externen Daten? Wenn wir also einige Daten von einer API abrufen wollten oder Effekte zum Einsatz kommen, dann ist eine externe Datenkomponente erhalten. Hier listen wir nur die Kunst des To-Dos auf. Dies ist also im Grunde nur ein Platzhalter-Textfeld. Diese Informationen stammen von dieser externen API. Sie können hier bei unserem US-Bundesstaat sehen, dass dies eine Menge Aufgaben ist. Der anfängliche Standardwert ist also nur ein leeres Array. Entschuldigung, Anfangs haben wir die Daten nicht, aber wir wissen, dass es sich um eine Reihe von Aufgaben oder ein Array von Text handeln wird. In unserem User-Effekt holen wir hier nur die Daten ab und dies ist eine Funktion, die ich hier aufrufe. Wie Sie sehen können, verwende ich das leere Array. Dies wird beim ersten Rendern nur einmal gekühlt, weil wir diese Informationen nur erhalten wollen, wenn alles tief ist, wenn alles gemountet ist, nur das eine Mal, wenn ich async verwende, wartet. Irgendwann kannst du diese Daten, nämlich Jason. Und wenn wir dann die Antwort haben, die hier eine Pivot-Variable ist, setzen Sie die Aufgaben. Unser US-Bundesstaat soll also die Antwort sein. Die Antwort ist eine Menge Informationen in einem Array. Und das heißt zu tun. Jetzt verursachen wir die Antwortzuordnung durch alle Aufgaben, da es sich um ein Array handelt. Und dann liste ich in einem Absatz-Tag nur den Artikeltitel auf. Diese Variable kann hier als alles bezeichnet werden, was wir wollen. Wir können es tun, wenn wir Artikel importieren möchten, dann greife ich nur auf den Artikeltitel zu und es zeigt diese Informationen hier an. Da diese Informationen, diese Daten könnten eine riesige, massive Datei sein, werden Hunderte und Tausende und Tausende von Einträgen finden , was bedeutet, dass sie nicht sofort darauf zugreifen können. Wir müssen auf alles warten, bis Mt. In der Nebenwirkung. Es könnte eine Sekunde dauern , um diese Daten zu laden. Und deshalb verwenden wir diesen Effekt. Und wenn es fertig ist und Zugriff auf alle Daten hat , die wir anzeigen können. Es verwendet Effect gilt für unsere Anwendung und unsere Daten. Wo zeige ich Ihnen das in der nächsten Lektion, wenn wir anfangen, alle unsere Hooks zu verbinden und unsere Daten zu verwenden. Wir verwenden also den US-Bundesstaat und Sie verwenden den Effekt in unserer Anwendung in der nächsten Lektion. 9. Die Daten und die Aufhängung unserer … hooks: Jetzt haben wir etwas über die Grundlagen von Hooks gelernt. Lassen Sie uns tatsächlich den US-Bundesstaat verwenden und den Effekt verwenden und hier mit unseren tatsächlichen Angebotsdaten arbeiten. Das erste, was ich tun werde , ist, diese Daten tatsächlich in eine Datendatei zu verschieben . Wir haben dieses Datenverzeichnis in Quelldaten erstellt , die nur eine Data-Punkt-JS-Datei erstellen. Bitte folge mir mit, wenn du kannst. Ich kopiere diese angekommenen Daten. Sehen Sie, ob das tatsächlich kaputt geht, weil Daten nicht definiert sind, fügen wir sie hier ein. Und vergessen wir nicht, das Datenformat selbst zu exportieren. Okay, das wird exportiert. Wir müssen nur Datum importieren und ich importiere, vergessen Sie nicht geschweifte Klammern. Daten aus Slash-Daten. Slash-Daten funktionieren gut in ihrer eigenen Datei daher einfacher zu warten. Auch wenn dies eine wäre, 100 Zeilen oder mehr, als es einfach sinnvoller wäre , es in eigenen Daten zu haben, eine Datei. Im Moment codieren wir im ersten Zitat aus unserem Array nur fest . Und das tun wir, indem wir Tag-datierte Anführungszeichen für die geöffnete Angebotskomponente übergeben , Sie können Daten sehen und dann ist das erste Anführungszeichen 0, und das ist das erste Zitat. Wir möchten dies jedoch ändern, wenn Sie auf den Button klicken. Wird den Staat aktualisieren, was bedeutet, dass wir den Staat, neuen Staat in Gebrauch bringen müssen. Und dann können Sie sehen, dass Sie Snippet angeben, ich werde nur Tab drücken und fast das füllen, was wir brauchen. Also nenne ich dieses Zitat und setze dann ein Zitat, das muss CamelCase sein. Was wir das Äquivalent zum Festcodieren des ersten im Array tun können , ist nur Daten zu machen. Dann ist der 0-Status nicht definiert , weil ich ihn hier oben in Fort direkt von React nicht wichtig habe. Großartig. Und dann müssen wir dann tun , anstatt nur Zeit zu vertreiben, alle Daten, wir müssen nur Zitat weitergeben, Zitat wird hier deklariert und es hier weitergeben. Lasst uns brechen, weil das Innere ziemlich wettbewerbsfähig ist. Die Preisgestaltung aller Daten dagegen muss sich ändern. Um zu zitieren, ist es kein Viertel wert. Beachten Sie, dass wir Daten meine Fehler nennen. Ich habe diese Datenbytes geändert, aber wir müssen dieses Array nicht mehr aus dem Zitat und dem Namen löschen. Da sind wir los. Okay? Wenn ich diesen Standardwert auf einen ändern sollte, ist er ideal. Andere Zitate, Judy Smith, wenn wir zu unseren Daten kommen, dann ist es das richtige. Das nächste im Array , das fest codiert ist, das ist unser Standardzitat. Aber dann auf den Button wollen wir natürlich auf klicken. Verwenden Sie einfach das gesetzte Zitat , um den Wert zu ändern. Im Moment werden wir nur einen Wert wie sagen wir zu den Daten fest codieren, dem nächsten im Array. Theoretisch sollte es es also für mich ändern. Klicken Sie auf Generieren. Da sind wir los. Dies wird immer unterstützt. Dritter im Array , weil wir es hier eingestellt haben. Was wir wirklich tun müssen, ist diese Zahl hier randomisieren, denn die Idee ist, dass Sie auf Generieren klicken und es bereits ein zufälliges Zitat aus unseren Daten auswählt . Lasst uns also eine Zufallszahl ausarbeiten. Lasst uns das in eine Const setzen und wir nennen es einfach Zufallszahl. nur Standard-JavaScripts verwenden, müssen wir den mathematischen Punkt zufällig verwenden , der eine Zufallszahl zwischen 01, also 0.10.2 usw. auswählt. Aber dann müssen wir das mal um die Länge der Daten tun. Wir haben also fünf Zitate hier. Wir können Datenpunktlänge machen. Dies bedeutet, dass selbst wenn wir 100 weitere haben und dies immer noch ergänzen , die Datenpunktlänge immer die Länge unserer Daten entspricht. Weil wir nicht nur eine Dezimalzahl wollen, wollen wir, dass es sich um eine ganze Zahl handelt. Wir müssen Math Dot Floor hinzufügen. Okay? Dies ist unsere Zufallszahlentheorie. Wir protokollieren einfach Zufallszahl. Und lasst uns einfach untersuchen, was in der Konsole passiert. Wir bekommen 23340144. Wir bekommen hier Zufallszahlen. Jetzt erklären wir uns und bald, warum dies zweimal passiert, weil wir nur wollen, dass es passiert. Und was wir dann tun müssen, ist, anstatt dies fest zu codieren, müssen wir die Nummer onClick randomisieren. Lassen Sie uns also eine randomisierte Funktion erstellen. Wir rufen Randomize an. Ich werde nur eine Pfeilfunktion sein. Die Funktion wollte einfach das gesetzte Zitat verwenden. Sie geben hier Werte an, in denen die Daten gespeichert werden. Aber anstelle einer fest codierten Zahl verwenden wir hier die Zufallszahl. Anstelle von Pattern Calling set quote können wir dann einfach randomize wie folgt verwenden. Mal sehen, was passiert. Warum ändert sich das nicht? Natürlich müssen wir den US-Effekt verwenden. Bringen Sie den Use-Effekt hier ein. Löschen Sie einfach einige dieser Werte. Löschen Sie den Wert in den eckigen Klammern. Wir lassen das also leer , weil wir nur die Daten abrufen wollen . Die erste Ladung. Was wir tun werden, ist randomize Inside Use Effect aufzurufen. Hast du jetzt ein Problem? Wenn ich auf Generieren klicke, werden die Anführungszeichen nicht kontinuierlich ausgefüllt. Der Grund ist, wenn wir unsere Zufallszahl hier festlegen , ist nur die passiert. Natürlich möchten wir ein zufälliges Angebot erhalten. Jedes Mal, wenn sich etwas auf der Seite ändert , werden sie zum ersten Mal geladen, wenn alles Größe und Onclick randomisiert wird, weil sie kalt wird und einen Vektor verwendet , der korrekt ist, aber wir muss nur diese runde Zahl bei jedem Klick ausgefüllt werden und nach jeder einzelnen Agenda-Theorie erhalten Sie jetzt die verschiedenen Zitate. Exzellent. Und eine Sache, die nützlich ist, ist, wenn es sich um eine riesige Datendatei mit Tausenden von Einträgen handelt, kann dies beim ersten Laden der Seite eine Weile dauern . Es ist also nützlich, eine Art von Text zu laden und eine Datei zu laden Sie verwenden, um dem Benutzer mitzuteilen , dass die Daten kommen. Beeinflussen Sie hauptsächlich, was wir hier tun weil es normalisierte Daten gibt, mit denen wir arbeiten können. Wenn Sie mit größeren Anwendungen arbeiten. Dies ist nützlich zu wissen. Wir können das auch mit Ihrem Staat machen. Also hier oben erstellen wir einfach das US-Daten-Snippet und wir werden uns daran erinnern, dass dies geladen wird, und dann wird das Kapital I geladen Und dann setzen wir dies auf wahr. Weil es zunächst wahr sein wird , wenn es versucht, die Daten abzurufen. Es werden die Daten geladen, wenn Sie diese zum ersten Mal laden, aber wenn sie die Daten erhalten haben, können wir sagen, dass sie wieder auf false geladen werden, weil die Daten empfangen wurden. Aber was machen wir damit, ist der Wert zu laden. Nun, wir können es als Bedingung verwenden, um bestimmten Text oder Inhalt ein - oder auszublenden. Dies ist ein boolescher Wert zu wahr. Dann setzen wir auf false, wenn die Daten abgerufen werden. Wir möchten dieses Angebot also erst anzeigen , wenn das Laden abgeschlossen ist. Unter dem H1. Um etwas JavaScript zu verwenden, haben wir gerade einige geschweifte Klammern geöffnet. Dann können wir das Laden machen. Wenn das stimmt, was müssen wir dann tun? Lassen Sie uns einen Absatz zeigen , in dem Zitat steht, wird geladen. Das ist vorerst in Ordnung. Sonst, wenn nicht wahr, wenn es falsch ist und das Lernen abgeschlossen wurde. Dort wollen wir dieses Zitat, das hier drin sitzen kann. Selbst wenn ich diese Seite aktualisiere, wirst du das einfach nicht sehen , weil es so schnell ist. Lassen Sie uns hier auf false setzen, Ausrufezeichen. Aktualisieren Sie die Seite und Sie können sehen, dass das Zitat jetzt lernt, also würde es aussehen , um dies rückgängig zu machen. Dort haben wir im Grunde unser Haken-Setup. Wir verwenden den neuen Status, um ein Angebot festzulegen, um festzulegen, ob es geladen wird. Wir verwenden im Wesentlichen den Benutzereffekt für den Nebeneffekt, wobei wir eine Zufallszahl erhalten und sie dann auf die Daten einstellen. Das passiert also alles, nachdem alles auf die Seite geladen wurde. Wir können dann die bedingte Ladung verwenden , um verschiedene Inhalte ein- und auszublenden. unser Angebot an unsere Angebotskomponente OnClick weitergeben, randomisieren wir die Zufallszahl und randomisieren das Angebot, das von diesen Daten erhalten wird, die sich in seiner separaten Datei befinden randomisieren das Angebot, das von diesen Daten erhalten . Das wird überhaupt Sinn machen, schön und ordentlich, nur mit den Symbolhaken. Und weil wir diesen Benutzerfakt verwenden, können wir diesen Standardwert löschen, da großer Effekt auf den Knoten diesen Quart bereits randomisiert. Jede Art von Notiz, die ein neues Zitat bringt, Great. 10. Tests: Testen, Testen von 123. Okay, hier ist was wir tun werden. Jetzt haben wir im Grunde den React-Teil der Arbeit abgeschlossen. Wir können die Daten testen, wir können unsere Komponenten testen. Und der beste Weg, dies zu tun, ist, wenn Sie Google Chrome verwenden, gehen Sie zum Chrome.Google.com Slash-Webstore und suchen Sie nach React-Entwicklertools. Dies sind die offiziellen Entwickler-Tools weil es von Meta angeboten wird, dem neuen Facebook , das reagiert, wenn Sie das nicht wussten. Sie können sehen, dass ich das bereits in mein Chrome heruntergeladen habe , weil es heißt, entfernt vom Wachsen, aber ja, stellen Sie sicher, dass Sie das bekommen. Was dir das gibt. Lass mich das einfach schließen. Ich zeig dir, wie du zwei kriegst. Und dazu kommst du. Wir sind vor Ihrer Zeit in einer App, um es zu inspizieren. Öffnen Sie Ihre normalen Entwickler-Tools , mit denen Sie wahrscheinlich vertraut sind. Und dann siehst du diese neue Registerkarte, Sake Gegner und Profile. Klicken Sie auf Komponenten. Und er ist unsere Bewerbung. Wir haben also unsere App, die unsere übergeordnete Komponente ist. Und Sie können die Hierarchie im Grunde sehen, Sir. Sie können sehen, dass die App Komponenten untergeordnet, Zitat und Fußzeile unterbringen muss . Klicken Sie auf diese, markieren Sie sie auch im Frontend. Und es ist auch großartig, wenn wir zum Zitat gehen, wir wissen über unsere aktuelle Komponente Bescheid, wir geben die Angebotsdaten weiter. Du siehst Helix, vielleicht ist es vorbei. Wir haben Requisiten. Wir können sehen, dass die ungefähren Angaben an diese Kernkomponente weitergegeben werden. Und es sind in der Tat Daten , dass wir einen Namen haben und wir haben ein Zitat. Wenn wir dies aktualisieren, generieren und dann Updates in Echtzeit, können Sie sehen, wie sich das geändert hat. Wir können sogar unseren Proxy testen damit ich alles schreiben kann, was ich will. Und da sind wir los. Es wird im Front-End aktualisiert. Ich muss es tun. Wir können auch sehen, dass es den Zustand gibt, den wir in unserer übergeordneten App-Komponente deklarieren, was in der Tat realisiert wurde, dass außergewöhnliche falsche Pflanzen geschrieben wurden, die nicht sehr außergewöhnlich von mir sind in unserer übergeordneten App-Komponente deklarieren, was in der Tat realisiert wurde, dass außergewöhnliche falsche Pflanzen geschrieben wurden, . Ignoriere das bitte. Wir haben unseren Staat hier. Wir haben auch einen zweiten Staat. Das ist also unser Ladezustand. Es ist derzeit auf „false“ eingestellt. Wenn ich das ankreuzen sollte, gibt es hier ein Kontrollkästchen ganz rechts. Sie können in unserem Angebot sehen, das jetzt geladen wird. Es ist also eine gute Möglichkeit, Dinge zu testen, die Sie mit Ihren tatsächlichen Daten und Eingabeaufforderungen interagieren Ihren tatsächlichen Daten und Eingabeaufforderungen interagieren diese ein- und ausschalten können. Und Sie können dann auch in der Hierarchie sehen , dass die Kernkomponente ausgeblendet wird, was dies tun sollte, wenn sie geladen wird, auf true festgelegt ist. Es stellt sich heraus, dass das Falsch ist und es ist wieder da. Eine andere Sache, die Sie schnell zeigen sollten, ist dies nicht Teil der reaktiven Tools. Wenn wir zu Elementen gehen, können wir sehen, dass die Fußzeile eine Klasse von Footer hat. Denken Sie daran, dass die Klasse ein reserviertes Schlüsselwort in Reacts ist. Wenn ich einfach zu meinem Code gehe, wirst du sehen, dass wir in der Fußzeile Klassennamen richtig verwenden. Und dann zeigt es nur, dass es hier das richtige Wort der Klasse zusammenstellt, was gut zu wissen ist. Wenn Sie also mit der URN-App herumspielen, ja, diese definitiv herunter und klicken Sie herum und sehen Sie, welche Daten Sie weitergeben. Es ist auch eine gute Möglichkeit, Ihre Hand zu debuggen , wenn Sie die Daten nicht erhalten, wenn Sie nicht die richtigen Requisiten weitergegeben haben, wenn der Staat nicht richtig aussieht, ist dies der beste Ort, um es zu sehen was läuft schief und wo müssen Sie vielleicht etwas reparieren. 11. Stile hinzufügen: Stimmt's? Nun, aber mehr oder weniger fertig mit dem React-Teil dieses Kurses, der das Wichtigste ist. In dieser Lektion werde ich nur einige Stile hinzufügen, die ganz bei Ihnen liegen, wenn Sie diese Lektion überhaupt verfolgen oder ansehen möchten Sie diese Lektion überhaupt verfolgen oder ansehen möchten. Ich werde buchstäblich nur einige CSS-Stile hinzufügen. Aber wenn du gerne deine eigenen hinzufügst und du nicht mitmachen musst. Zögern Sie nicht, diese Lektion zu überspringen, oder? Wie auch immer, für diejenigen, die in unserem Style-Verzeichnis in der Quelle bleiben in unserem Style-Verzeichnis , erstelle ich einfach eine Datei styles.css. Lass uns loslegen. Im Körper. Ich setze nur eine nette Schriftfamilie ein. Lass uns etwas machen, wie Gilroy diese Schriftfamilie mochte. Wir machen einfach eine Serifenlose mit Helvetica, um das zu beenden. Was wir tun können, ist in der App, lassen Sie uns Schrägstriche importieren slash styles.css, ihn nach Styles. Okay. Lassen Sie uns einige Stile für die Seite erstellen. Wir haben diese Klasse noch nicht erstellt. Das müssen wir unserem Markup hinzufügen. Aber jetzt fügen wir einfach etwas Styling hinzu, um einen schönen grünen Hintergrund zu wählen, 70 v. Chr. bis AD, ja, y nichts. Dann gehen wir zurück zu unserer App. Fügen wir unseren Klassennamen zu unserer Rubrik hinzu. Vergiss nicht den Klassennamen und nicht die Klasse. Seite K Es gibt unser Grün. Ich ändere diesen Klassennamen der App in Container. Und was sollten wir dann sonst noch ändern? Unser lädt Text, wir können das aufhalten, indem wir einen Klassennamen hinzufügen. Alles nur lernen ist in Ordnung. Unser Zitat, und lassen Sie uns das einfach in eine neue Zeile setzen , damit wir das ein bisschen besser sehen können. Ich werde dieses Zitat tatsächlich in einen div-Klassennamen des Quart-Containers umwickeln . Lass einfach Fakt laufen. Hat unsere Fußzeile auf den Namen fruchtbar geschaut , das ist in Ordnung. Wie wär's dann mit unserem queeren Komparator? Hat Wortabsatz für den Namen blockiert. Fügen wir tatsächlich einen Klassennamen hinzu. Nennen Sie hier. An diesem Punkt möchte ich Sie ermutigen, sich einfach mit dem Oregon College zu beschäftigen, und wir haben bereits Geld und stellen Sie diese Anwendung Ihren Stil, Davids eigene Art und Weise. Es ist also etwas anders. Meins. Innerhalb der Seite möchte ich, dass alles übereinander gestapelt wird , nur um sicherzustellen, dass es passiert. Ich setze die Anzeige auf Flex Seite an Seite, aber dann können wir die Richtung besser in Spalte ändern. Und dann stelle ich die Höhe auf 100% der Ansichtshöhe ein , okay, überall grün, genau das, was ich will. Was sollten wir uns als Nächstes ansehen? Wir haben einen Container. Ein Container. Wir werden auch diesen Display-Flex machen. Und nochmal, lassen Sie uns dies in eine Spalte mit Flexrichtungsspalte einfügen. Ich möchte alles zentriert gerechtfertigtes Inhaltscenter stellen. Dann die Höhe des Containers. Machen wir einfach 95 Ansichthöhe. Jetzt in der Mitte. Stellen Sie sicher, dass Sie richtig mit Rand 0 senden, oben und unten oder zwei in der Mitte. Das sieht gut aus. Wir machen eine maximale Breite von 1200 Pixeln nur für größere Bildschirme. Dann lassen Sie uns eine Breite von 80 Prozent festlegen , weil ich nicht den ganzen Weg hinübergehen wollte. Da sind wir los. Das ist Scheck. Da sind wir los. Sie können sehen, dass die maximale Breite dort gut funktioniert. Schauen wir uns unseren H1-Header an. H1. Ich werde das etwas dunkelgrün machen, also ein Hash 2676. Lassen Sie uns eine Schriftgröße von 5050 Pixeln und ziemlich groß machen. Margin Nullen 0100 wählt unten eine kleine Lücke aus. So enthält unser Angebot ein x. Ich möchte eine kleine Marge hinzufügen. Verwaltung unten 50 Pixel. Das Zitat selbst blockquote, zentriert. Wir sorgen dafür, dass es weiß ist. Also Hash FFF, font-style, um es kursiv zu machen. Ich hoffe, Sie können sehen, wie nützlich dies ist, um dies in Echtzeit zu aktualisieren. So können wir in Echtzeit die Stile beeinflussen und sehen, wie sie tatsächlich funktionieren und wie es aussieht, was wirklich praktisch ist. Margin und das werden wir verschieben. Stellen Sie sich Nullen auf der linken Seite vor. Wir werden eine Schriftgröße von 90 Pixeln machen. Nett und groß. Massiv, aber ganz so. Okay, also der Name unten, Joe Bloggs, Klassenname. Ich werde die Farbe auf Hash CA 755 C einstellen. Ja, gute orangey Farbe. Fast so, als hätte ich diese Farben vorbereitet. Erstaunlich. Schriftgröße auf 20 Pixel. So machen Sie es fett oder 800. Sei gut. Eigentlich werde ich die Text-Transformation in Großbuchstaben machen. Ja, Nice. Okay, wir sind nah dran. Werfen Sie als Nächstes einen Blick auf den Button. Hintergrundfarbe. Ich setze es auf ein dunkelgrünes 267, eine Grenze. Lass uns 0 loswerden. Textfarbe und mach es weiß. Stellen wir sicher, dass der Cursor ein Zeiger ist , wenn Sie den Mauszeiger darüber bewegen. Nett. Schriftfamilie für den Button. Lasst uns eigentlich stehlen oder du hast hier Font-Gewicht, fett, 800. Die Breite ist zu groß, also ist es eine maximale Breite. 150 Pixel Benötigt etwas Polsterung von 5015 Pixeln um Lücken und gut, und wir werden Text transformieren. Großbuchstaben. Nett. Um dieser Schaltfläche einen Hover-Status hinzuzufügen, zeigen Sie die Schaltfläche Doppelpunkt. Ich ändere die Hintergrundfarbe auf Weiß. Und wir ändern die Textfarbe so, dass sie dunkelgrün ist. Im Grunde genommen nur alles auf 66 F. Schau schön aus. Ich glaube, wir haben gerade die Fußzeile unten unten. Ich habe dazu nicht wirklich eine Klasse von Fußzeilen hinzugefügt. Verwenden wir diese Fußzeilenklasse. Textfarbe. Lass uns das grau machen. Ja, das ist in Ordnung. Und wir sorgen dafür, dass der Text ausrichten auf Mitte eingestellt ist. Ja, das ist in Ordnung. Das wird dies tun, um nach unserem Ladetext zu suchen. Lass mich einfach zur App gehen. Was wir tun werden, ist, dass wir „falsch“ lernen. Hier ist ein Ausrufezeichen, koordiniertes Laden und sehen, mein Absatz hat den Namen des Ladens Husten. Also lasst uns zu Styles gehen. Sicherlich muss es nicht bei Francine sein. Ständig lernende Farbe kann weiß sein. Und wir machen hier einfach eine größere Schriftgröße von sechs tiefen Pixeln. Absolut in Ordnung. Kehren Sie das einfach zurück. Sparen Sie. Das sieht ziemlich anständig aus. Ja, nettes. Das ist unser Codegenerator. Nett und einfach. Aber ich arbeite, sieht ziemlich gut aus. 12. Deine Arbeit einrichten: Jetzt ist es an der Zeit, Ihre fantastische App bereitzustellen, aber Sie haben gerade so gebaut, dass die ganze Welt sie sehen kann. Und ich zeige Ihnen jetzt, wie einfach es ist , Netlify zu verwenden. Netlify ist ein großartiges Team und bietet einen großartigen Service bei verschiedenen Tools zum Erstellen und Bereitstellen von Apps. Ja, ich habe ziemlich viele Funktionen wie Analysen und Split-Tests. Die Bereitstellung ist wirklich großartig. Aus diesem Grund verwenden wir Netlify-Bereitstellungsdienst , um Ihre App bereitzustellen. Wir werden das alles im Terminal hier machen. Öffne dein Terminal. In deiner App. Stellen Sie sicher, dass Sie eine produktionsfähige Anwendung erstellen. Um das zu tun, führen wir einfach npm run build aus. Wie es im Terminal sagt, schafft eine Optimierung Produktion Builds. Das wird also alle unsere Dateien in diese sehr kleinen Dateien kompilieren , was großartig ist. Und wenn wir uns unsere Ordnerstruktur ansehen, haben wir jetzt einen Build-Ordner. Und genau das wird hochgeladen. Im Wesentlichen wurde eine Index-HTML-Datei mit all unserer Arbeit erstellt . Es gibt auch einen statischen Ordner mit unseren Styles und JavaScript. Dies ist produktionsbereit, bauen Sie unsere App auf. Klicken Sie einfach einmal auf den Bildschirm. Dann müssen wir nur npm installieren, den Netlify-Client installieren , der Netlify Space CLI ist, und wir werden Space Dash g machen. Also ist es global installiert. Wenn du auf irgendwelche Berechtigungsbereiche stößt wie ich, schreibe einfach das Ganze noch einmal, aber lege Sudo in den Vordergrund. Dies gibt uns Administratorberechtigungen zur Installation des Netlify-Clients. Sudo npm installiert Netlify. Cl, space dash g. Wir haben den Netlify-Client installiert. Lassen Sie uns einfach klarstellen, dass es sich im Terminal befand , und dann geht es nur darum, Netlify Space zu schreiben, bereitzustellen. Drücken Sie Enter. Stellen Sie sicher, dass ich es richtig buchstabiere. Vermisst dort ein T. Als nächstes Lo-Fi habe ich es wieder falsch geschrieben. Nettolift Phi. Bereitstellen. Auch hier, weil du Berechtigungsbereiche mache das Gleiche mit Sudo in der Front. Netlify. Benachrichtigen Sie die Bereitstellung nicht. Und dann öffnet dies eine Seite, die so aussieht und Sie müssen sich bei Netlify anmelden. Sie können es verwenden, je nachdem, was Sie haben , GitHub oder Bitbucket oder Sie können einfach Ihre E-Mail verwenden. Ich melde mich mit meinem GitHub an. Schon für mich besiedelt. Wir melden uns einfach an. Wir haben eine Zwei-Faktor-Authentifizierung. Lassen Sie mich das einfach klären. Dann autorisieren wir Netlify. Andererseits durchlaufen wir gerade die Sicherheitsschritte, autorisieren. Wir sind gerade zurück zu unserem Terminal. Ich wähle diese beiden Sauerstoffstoffe aus. Ich wähle Creighton vergiss einen neuen Site-Namen als optional. Lasst uns einfach freiberuflich gehen, undefiniert. Und dann fragt ich, welches Verzeichnis ich veröffentlichen soll. Nun, es ist unser Build-Ordner. Ich schreibe einfach Build hier. Es gibt unsere Arbeit, nur das Warten auf Go Live ist ziemlich schnell und die Bereitstellung ist live. Theoretisch. Diese URL , die in unserem Terminal angegeben wurde. Wir gehen in diese Nacht. Das ist unsere App. Arbeitet wie erwartet. Das ist auch alles kostenlos und wir konnten das ziemlich schnell bereitstellen. Ich hoffe, dass all das terminale Zeug einen Sinn ergeben hat. So können Sie Arbeit für Netlify bereitstellen und es ist kostenlos, was großartig ist. Folgen Sie den Anweisungen des Terminals, um diese Schritte zu befolgen. Stellen Sie sicher , dass Sie einen Build-Ordner erstellen , der das Ziel ist, das Sie Netlify anweisen sollen. Dann als abschließender Anführungsgenerator an der im Terminal angegebenen URL. Jetzt würde ich das empfehlen, wenn Sie diese Phase erreicht haben und alles erfolgreich ist und Sie einen Link zum Teilen haben. Bitte stellen Sie sicher, dass Sie Ihre Arbeit an Skillshare teilen. Oder Sie könnten auch einen schönen Screenshot hinzufügen, wenn Sie möchten. Es wäre toll, Ihre URL zu teilen. Ich und andere Schüler können also deine tolle Arbeit sehen und ich habe kein Feedback erhalten. Und wenn wir das tun, warum schauen wir uns nicht die Arbeit des anderen Schülers an. Nett. Sie haben gerade Aufbau eines Angebotsgenerators oder keiner Reaktion abgeschlossen und wurden auch im Web bereitgestellt. Gut gemacht. 13. Wie geht es weiter?: Könnte sagen, Sie haben Ihre App erstellt, Sie haben die Grundlagen von React gelernt. Du bist großartig, aber wie wirst du toller darin zu reagieren? Nun, das sind nur ein paar Vorschläge von mir , wohin Sie möglicherweise als nächstes gehen können , wenn Sie etwas weiter lesen möchten, aber in Bezug auf die Reaktion und dann ist es mittlerer, Fortgeschrittene Dinge, die du tun solltest, ist einen Blick auf ein paar andere Haken zu werfen. Es gibt mehr Haken, als Sie angeben, dass der Effekt verwendet wird. Hier sind ein paar. Verwenden Sie href und verwenden Sie den Kontext. Wir werden diese in einer Sekunde und viele andere erreichen. Werfen Sie also einen Blick auf die React-Dokumentation. Dann habe ich als nächstes den React Router aufgelistet weil es für Sie großartig wäre zu wissen und zu verstehen, wie Sie mit anderen Seiten arbeiten können. Also erstellen wir einfach eine einseitige Anwendung. Was passiert, wenn Sie andere Seiten haben, die Sie mit dem Routinesystem in den Griff bekommen müssen, dann können Sie einige Frameworks verwenden. Und als nächstes ist JS ein sehr beliebtes React-Framework und verfügt über einige wirklich praktische Funktionen, um Ihren Prozess zu vereinfachen und zu optimieren , um eine vollständigere React-App zu machen und zu optimieren. Andere Hooks verwenden ref, die ich erwähnt habe, und dies ist eine großartige Möglichkeit, auf DOM-Elemente zuzugreifen. In diesem Beispiel haben wir hier href benutzt. Anfangs ist es null. Wir haben dies zu einer Konstante namens Input-Element hinzugefügt. Und bei der Eingabe selbst verwenden wir REF für Eingabeelement. Dieses Eingabeelement ist jetzt referenziert. Wenn wir also auf den Button klicken, klicken Sie hier hoch, dies ist die Funktion. Wir haben Inputs Punktelement, die Referenz Dark Current, Dark Focus. Also fügen wir diesem Element den Fokus hinzu. Wir haben auf dieses DOM-Element mit use ref, use context zugegriffen . Wie ich hier geschrieben habe, wird es verwendet, um allgemeine Daten zu erstellen, auf die in der gesamten Komponentenhierarchie zugegriffen werden kann in der gesamten Komponentenhierarchie zugegriffen sollten hervorgehoben werden , da dies das Wichtigste ist, ohne zu übergeben das Paroxetin manuell auf jede Ebene. Stellen Sie sich also vor, Sie haben Kinder fünf Stufen nach unten. Wenn unsere App, unsere App, tut uns leid, wir hatten einen Elternteil und zwei Kinder auf einer Ebene nach unten, aber stell dir vor, wenn es mehr Kinder, ihre Enkelkinder, Urenkel gibt, sinken die Level weiter. Du willst nicht weiter die Requisiten-Schule ganz unten passieren . Ich werde ziemlich nervig werden. Sie können den Kontext auf übergeordneter Ebene verwenden, Kontext verwenden oder Kontext erstellen . In diesem Beispiel verwenden sie Themen, System hey oder Farbsystem für Hell und Dunkel. Und dann würden Sie die App mit diesem Thema umschließen, konstanter Kontextanbieter, der Ihre Werte durchläuft und dann mit dem Kind. Dies kann also eine beliebige Ebene nach unten sein, anstatt die Pflanzen ganz nach unten in das Kind zu übergeben , jedes Kind, Sie können diesen Kontext verwenden. Wir haben eine Konstante namens Theme ausgewählt, und dann haben Sie nur Zugriff auf diesen Kontext oder Hintergrund. Denk an den Vordergrund. Auf dieses Thema wird vom übergeordneten Element aus zugegriffen. Ich habe das Routing erwähnt. Werfen Sie einen Blick auf die offizielle Dokumentation ist hier. Die URL ist nur eine Sammlung von Navigationskomponenten, die in Ihrer Anwendung verwendet werden können . Schauen Sie sich das an, wenn Sie mit mehreren Seiten in Ihren App-Frameworks arbeiten möchten , habe ich Next JS erwähnt. Werfen Sie noch einmal einen Blick auf die effiziente Dr. Orientierung. Es verfügt über viele, viele großartige Funktionen, statisches und serverseitiges Rendern für gute Leistung, intelligente Bündelung, vollständige TypeScript-Unterstützung, unhöfliches Prefetching und das Routing. Ein besonders wie im nächsten und macht es so einfach. Es ist fast wie ein Drag-and-Drop-System in dem Sinne , dass Sie ein Verzeichnis für Seiten haben und Sie hineinziehen würden, Sie vergleichen sie oder Seiten in dieses Verzeichnis und die Quelle entweder mehr oder weniger für dich wurzeln. Ja, nett und einfach. Es kommt auch mit der Bildoptimierung und vielen anderen Funktionen. Sobald Sie also den Kopf haben reagiert jährlich komfortabel, wäre x der nächsten Generation einen Blick wert. 14. Zusammenfassung und Gründe, warum du fantastisch bist: Gut gemacht. Sie haben großartige Arbeit geleistet diesen Kurs zu durchlaufen und Ihren eigenen Angebotsgenerator mit den neuesten Techniken zu erstellen Ihren eigenen Angebotsgenerator mit , die Sie gelernt haben. Sicherlich wichtige Funktionen von React, einschließlich JSX, Requisiten, Hooks, State Management und Testing, um nur einige zu nennen. Ein Front-End-Entwickler zu sein und Kenntnisse über moderne React-Grundlagen zu haben, ist eine so nützliche Reihe von Fähigkeiten, um unabhängig davon zu sein, auf welchem Niveau Sie sich befinden, sei es Junior, Mid-Level oder Senior. React ist immer noch die beliebteste JavaScript-Bibliothek der Welt. Die Tatsache, dass Sie eine einseitige React-Anwendung erstellt haben , bringt Sie ganz oben im Front-End-Webentwicklerbereich. Herzlichen Glückwunsch an dich. Kannst du diese Fähigkeiten jetzt nutzen und sie für deine zukünftige Arbeit einsetzen? Abschließend wollte ich mich nur sehr bedanken, dass Sie sich nicht nur für diesen Kurs angemeldet haben, sondern auch dafür, dass Sie ihn abgeschlossen haben. Ohne Ihre Unterstützung wären Lehrer wie ich nicht in der Lage, solche Inhalte zu erstellen. Also wirklich, vielen Dank. Wenn Ihnen dieser Kurs gefallen hätte und ich hoffe wirklich, dass Sie es getan haben, würde es mir so viel bedeuten, wenn Sie sich die Zeit nehmen könnten , eine Bewertung abzugeben. Ich lese jedes Feedback, das ich bekomme, und nehme alle Kommentare an Bord , die Sie möglicherweise hinterlassen. So können Sie meine Lektionen weiter verbessern und die Kurse, die Sie für nützlich halten, weitermachen . Wenn das gesagt wird, vielen Dank nochmal, du bist großartig. Nacht geht weiter und kodieren.