Components: React Tutorial

Okay, also lasst uns mehr über Komponenten sprechen und dann werden wir auch mit ein paar bestehenden Komponenten arbeiten und damit herumspielen, einige Werte anpassen und einfach sehen, was passiert. Wie wir bereits besprochen haben, sind Komponenten der Hauptbaustein von React, wirklich React existiert, um Ihnen bei der Erstellung von Komponenten zu helfen und diese Komponenten dann auch dazu zu bringen, vergangene Daten zu kommunizieren, Informationen und Methoden untereinander auszutauschen. Wenn wir zur React-Dokumentation gehen, gibt es diesen netten kleinen Absatz, wirklich nur einen Satz, dass ich Komponenten mag, mit denen Sie die Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufteilen und über jedes Teil isoliert nachdenken können. Um ehrlich zu sein, ist einer der schwierigsten Teile der Reaktion, herauszufinden, was man aus einer Komponente machen soll. Wenn Sie eine große Anwendung nehmen, in wie viele Teile zerlegen Sie sie? Wir werden mehr darüber sprechen. Wir werden mehr über Muster sprechen. Aber die Idee ist, eine Anwendung oder sogar nur ein Teil der Funktionalität zu nehmen und es in einzelne wiederverwendbare Teile zu zerlegen, sie einzupacken, eine schöne Schleife darauf zu setzen, ihnen einen Namen zu geben, sie zu einer Komponente zu machen, damit sie normalerweise etwas kombinieren, Sie sehen HTML, NCIS mit etwas JavaScript-Logik. Die erste Komponente, die wir uns beispielsweise ansehen werden, ist eine Bewertungskomponente, eine Bewertungskomponente mit Sternen. Ich habe es in einem separaten Fenster geöffnet. Das hier ist also eine Bewertungskomponente mit einem Stern. Dies ist die zweite und Sie können sehen, dass dort Sachen angezeigt werden. HTML, NCIS und einige Informationen hier. Die Sterne, du schwebst, sie ändern sich, diese Farbe ändert sich. Aber auch wenn ich klicke, lösen wir einen Code aus. Es ist logisch, ein solides und lächelndes Emoji oder fantastisch in einem Feuer-Emoji anzuzeigen, schrecklich. Und ein Erbrechen-Emoji. Es gibt also Dinge, bei denen wir E-Mail-Zugriff und JavaScript in einer einzigen verpackten Komponente kombiniert sehen. Wir werden also gleich darauf zurückkommen. Aber zuerst möchte ich Ihnen zeigen, was ich eine Pseudokomponente nenne. Das ist also keine echte Reaktion. Dies ist nur einfaches JavaScript für eine Hundekomponente. Also ein blödes Beispiel. Aber die Idee ist, dass wir eine Klasse namens Hund haben und jede Hundekomponente in jeder Instanz einen Namen und eine Farbe haben wird. Und es weiß auch, wie es sich in HTML rendern kann. Es weiß, was angezeigt oder zurückgegeben werden soll, wenn in diesem Beispiel render aufgerufen wird. Es ist sehr einfach ein Absatz-Tag mit diesem Punktnamen, also mit dem darin hinzugefügten Namen des Hundes, sodass wir fünf Hunde haben könnten, die jeweils einen anderen Namen haben könnten , eine andere Farbe. Wir verwenden im Moment keine Farbe, aber wenn wir dann jeden von ihnen auf der Seite rendern, sehen wir ein anderes Absatz-Tag. Das ist also ein sehr einfaches Beispiel. Und noch einmal, das ist keine echte Reaktion, aber es veranschaulicht irgendwie die Idee. Wir nehmen einige Daten, einige JavaScript-Informationen, Logik, und dann sagen wir der Komponente auch, was sie darstellen soll, wie sie auf dem Bildschirm aussehen soll. Kurzer Hinweis, nicht alle Komponenten sind klassenbasiert. Also habe ich hier geschrieben, dass Komponenten Klassen sind, die sich selbst in HTML rendern können. Wir lernen auch Funktionskomponenten kennen. Wir verbringen viel Zeit mit ihnen, wenn wir über Hookes sprechen. Aber ich werde in diesem Abschnitt ein separates Video machen, in dem ich über die Unterschiede zwischen den beiden Arten von Komponenten spreche. Ich möchte nicht, dass Sie sich an dieser Stelle zu sehr mit der Syntax verzetteln. Ich möchte nur über die Hauptidee rund um Komponenten sprechen. Wenn Sie also zu dieser Demo gehen, ist dies eine Website namens Code Sandbox, eine wirklich großartige Ressource. Es ist ähnlich wie ein Codestift, aber in gewisser Weise ist es besser. Code Pen eignet sich hervorragend zum Entdecken von Front-End-Sachen, HTML-Zugriff, JavaScript-Animationen oder, ich weiß nicht, Layouts und dergleichen. Code Sandbox wurde entwickelt, um Ihre lokale Umgebung nachzuahmen, also verwendet es NPM. Sie können tatsächliche Pakete hinzufügen. Es spielt an dieser Stelle keine Rolle, ob Sie es noch nie zuvor gesehen haben. Aber dieser Link ist in der Beschreibung enthalten und Sie können Dinge bearbeiten. Sie können herumspielen und es einfach optimieren und sehen, was passiert. Auf der rechten Seite des Bildschirms läuft also unsere Website. Dies ist eine Reaktionsanwendung, und um es einfacher zu machen, habe ich hier auf das geklickt, wodurch es in einem eigenen Fenster angezeigt wird. Auf diese Weise kann ich dieses Fenster hier schließen und jetzt kann ich hineinzoomen. Wenn Sie also mitmachen, wenn Sie es vorziehen, es in einem Fenster zu behalten, ist das in Ordnung. Wir haben also drei Dateien, drei JavaScript-Dateien, eine namens Index, eine namens Star. Dies ist eine eigene Komponente und dann eine weitere Komponente namens Rating. Machen Sie sich also keine Gedanken über die Syntax. Machen Sie sich keine Sorgen um den eigentlichen Code. Sorgen Sie sich nur darum, wie diese Teile zusammenpassen. Wir haben also unsere erste grundlegendste Komponente, die Stern genannt wird und einen einzelnen einzelnen Stern darstellt. Dies ist eine Star-Komponente. Was ich also jetzt tun werde, ist, zu meinem Index JS zu gehen, der genau hier ist, und dort gibt es etwas namens App. Dies ist eigentlich auch eine Komponente. Es gibt also eine App-Komponente. Das ist die ganze Seite hier. Dann gibt es eine Komponente namens Bewertung, die mehrere Sternkomponenten enthält. Wenn Sie also mitmachen und herumspielen möchten, können wir dies auskommentieren. Oder löschen Sie es, und wir werden unsere erste Sternkomponente definieren, und es sieht aus wie dieser Stern, als wäre es ein HTML-Tag wie dieses, noch größer. Und dann müssen wir diesen Abschluss am Ende hinzufügen. Das sieht nach HTML aus. Es ist keine Demo. Wir werden viel darüber lernen, was es ist. Es heißt Turniere. Der gesamte nächste Abschnitt handelt von Joysticks. Eines der wirklich coolen Dinge an React ist, dass wir jeden HTML-ähnlichen Code anstelle von JavaScript schreiben können. Dies ist eine gerechte Datei, also ergibt dies einen Stern. Aber jeder Star hat ein paar Dinge, die er wissen muss. Es muss eine Farbe haben. Welche Farbe soll unser Stern also haben? Wenn Sie das weitergeben möchten, sieht es so aus. Also lass uns mit Rosa gehen. Na, bitte. Und wenn wir jetzt einen Blick darauf werfen, können Sie sehen, dass da ein rosa Stern ist. Es gibt noch eine weitere Information, die wir an unseren Stern weitergeben können, die heißt gefüllt. Nun, dies ist ein wahrer oder falscher boolescher Wert. Also können wir esveld einfach so hinzufügen. Wir müssen nichts einstellen. Und Sie können sehen, dass unser Stern jetzt ausgefüllt ist. Wir haben es also bereits winzig gemacht oder wir haben es nicht geschafft, aber wir verwenden eine einzige winzige wiederverwendbare Information. Wir können ein paar verschiedene Sterne machen. Machen wir eine, die pink ist, eine, die magenta ist, und eine, die lila oder indigo ist, machen Sie das, und wir werden sie alle füllen. Na, bitte. Drei Sterne. Lassen Sie uns die mittlere nicht gefüllt machen, damit wir sie einfach löschen können, stellen Sie sicher, dass wir sie noch dort haben. Und jetzt haben wir drei verschiedene Komponenten, jede eine Instanz unserer Star-Komponente. Wir müssen uns also keine Gedanken darüber machen, wie die Star-Komponente aussieht, wie der Code aussieht. Sie können es sich gerne ansehen, aber darum geht es jetzt nicht. Darüber hinaus gibt es eine gewisse Logik hinter den Kulissen. Wenn ich klicke, erhalte ich eine Warnung. Es ist eine sehr einfache Logik, aber es ist JavaScript, das ausgeführt wird, wenn ich auf einen Stern klicke. Also lass uns jetzt einen Schritt nach oben machen. Die nächste Komponente ist die Bewertungskomponente. Eine Bewertungskomponente wird also unter Verwendung von Sternkomponenten erstellt. Das ist also wirklich die Hauptidee von reagierenden kleinen Stücken, aber sie existieren nicht isoliert. Jedes Stück wird oft andere kleinere Stücke rendern oder verwenden. Lassen Sie sich also von der Bewertungskomponente, die so aussieht, wenn Sie einen Blick darauf werfen möchten, nicht überfordern. Wir haben über nichts davon gesprochen. Es ist nicht sehr lang, aber hier steckt eine gute Portion Logik drin. Sie können sehen, dass wir die verschiedenen Bedeutungen definieren. Also null Sterne sind keine Wertung. Ein Fünf-Sterne-Hotel ist fantastisch. Wir haben verschiedene Farben. Also haben wir, ich glaube, dieser Stern sagt rot. Und wenn Sie dann anfangen, besser und besser zu bewerten, geht es zu einer goldenen Farbe hoch. Wir haben einige Informationen über den Wert der Bewertung. Wir haben einen Code, der ausgeführt wird, wenn Sie den Mauszeiger bewegen, und einen anderen Code, der ausgeführt wird, wenn Sie klicken. Aber der wichtigste Teil ist genau hier. Hier verwenden wir eine Sternkomponente innerhalb der Bewertungsdatei, die Bewertungskomponente. Wir verlassen uns auf die Star-Komponente, die ich Ihnen gerade gezeigt habe. Nun, es gibt eine Menge Informationen, die wir weitergeben. Machen Sie sich darüber keine Sorgen, aber ich hoffe, Sie können sehen, dass wir diese beiden Komponenten haben, die interagieren. Wir haben die Bewertungskomponente, die die Sternkomponente verwendet. Gehen wir also zurück zu unserem Index. Und unter diesen drei einzelnen Sternen können wir einfach nur alten HTML-Code hinzufügen, z. B. ein H2-Tag mit der Aufschrift Bewertungskomponente. Und darunter können wir einfach so eine Bewertungskomponente hinzufügen, und dann möchte jede Bewertung eine Anfangszahl haben. Also, wie viele Sterne fängt es an? Gehen wir zu zweit. Sie fragen sich vielleicht, was diese geschweiften Klammern sind? Wir werden dazu kommen. Aber jetzt folge einfach dem. Es ist Teil von Jessicas Syntax. Mal sehen, was wir bekommen. Schau mal. Hier ist unsere Bewertungskomponente und sie wurde jetzt geändert. Aber wenn ich zurückgehe, ändern wir es in vier Sterne und sehen dann, was wir bekommen. Sie können sehen, dass es mit vier von fünf Sternen initialisiert ist, aber dann kann ich es ändern. Gehen wir zu zwei Sternen oder fünf Sternen. Jeder Stern hier ist also eine individuelle Sternkomponente. Es gibt fünf von ihnen. Und die Bewertungskomponente kann mehr als nur fünf Sterne anzeigen. Es verbindet sie in gewisser Weise. Es findet heraus, welche Farbe sie haben sollten, findet heraus, was passiert, wenn Sie klicken. Wenn ich auf diesen Stern klicke, weiß es, dass ich zwei Sterne bewerte, aber wenn ich auf diesen klicke, weiß es, dass ich sowieso fünf Sterne bewerte, also möchte ich mich hier nicht zu sehr verzetteln. Aber an diesem Punkt haben wir zwei einzelne Komponenten gesehen. Wenn Sie möchten, können Sie mit der Bewertung herumspielen und ein paar mehr hinzufügen. Lassen Sie uns zu Beginn eine Null-Sterne-Bewertung abgeben. Und los geht's. Wir haben diesen hier und dann unsere Null-Sterne-Bewertung hier. OK, also höre ich hier erstmal auf. Wir haben hier viel gesehen, aber hoffentlich bekommen Sie zumindest einen Vorgeschmack darauf, wie die Reaktion ist. Natürlich haben wir eine Menge zu behandeln, aber ich werde Ihnen im nächsten Video ein komplexeres, größeres Beispiel zeigen. Wir werden uns den Code nicht ansehen. Wir werden uns nur die Komponenten ansehen, aus denen es besteht, oder zumindest einige davon, nur damit Sie ein Gefühl dafür bekommen, wie granular Komponenten in einer größeren Anwendung wirklich sein können. Wenn Sie also damit herumspielen möchten, machen Sie weiter. Weißt du, baue deinen eigenen kleinen Forkin und verändere Dinge. Aber denken Sie daran, dieser Code ist an diesem Punkt, wenn Sie noch nie eine Reaktion gesehen haben, das soll erschreckend sein. Es geht wirklich mehr nur um die Beziehung. In Ordnung, Rubinoff.