In diesem Auffrischungskurs schreibt Module Yeater keine komplexe Reaktions-App, da dies einfach nicht die Idee
dieses Moduls ist.
Wir werden später in diesem Kurs eine realistische App im Hauptmodul schreiben, nach diesem Modul hier, wo wir am
Kursprojekt arbeiten werden.
Das ist hier nur eine Auffrischung.
Und ich konzentriere mich auf die zentralen Reaktionselemente, Stael, und nicht darauf, eine erstaunliche Anwendung zu erstellen.
Bei REACT dreht sich also alles um Komponenten. Daher teilen wir unsere App normalerweise in Komponenten auf.
Beginnen wir jetzt, ohne es zu teilen.
Und anstatt hier eine Technologie, eine App, auszugeben, werde ich ein Div verwenden, sagen wir in diesem Div.
Fügen wir mehr HTML-Code hinzu.
Ich sage hier h html, natürlich ist es J ist X, aber es ist noch in zwei HCM Altidore-Noten übersetzt.
Recht.
Aber es ist J ist X.
Hier könnten wir also H haben, um zu markieren, wo wir Ursachenziele sagen, und darunter möchten wir eine Liste haben oder
eine Liste unserer Kursziele hinzufügen.
Und sie sind ein Ziel.
Könnte sein.
Papa, wir wollen den Kurs beenden.
Dass wir alles über den Kurs erfahren wollen.
Hauptthema und dass wir zum Beispiel helfen wollen.
Unsere Studenten im Kurs, CU und.
Ein Abschnitt, und das könnte etwas Gold sein.
Nun eine sehr triviale Anwendung.
Jetzt habe ich hier kein besonders spektakuläres Styling, weshalb wir das speichern und herausbringen.
Aber jetzt werde ich etwas Styling hinzufügen und dafür werde ich eine App hinzufügen, Sears 'Datei hier und Deadfall in
die JavaScript-Datei importieren.
Dies ist in Manila, JavaScript, natürlich nicht möglich, aber aus diesem Grund analysiert Nien
unsere Dateien und transformiert dann den Code.
Dies ist möglich und wird einfach transformiert, um diesen CSX-Code in das H einzufügen.
Timal-Datei auch.
Jetzt hier gebe ich diesem ein C als Klasse.
Und es gibt eine besondere Sache.
Das Klassenattribut wie dieses existiert nicht und J ist X, da Klasse ein Schlüsselwort in JavaScript ist.
Es ist also Klassenname.
Und so fügen Sie Elementen Siestas-Klassen hinzu und J ist X.
Dies alles ist natürlich eine Art Beweis oder erinnert Sie daran, dass dies nicht H Tim ist.
Aber H Tim.
Eulenhaft aussehende Syntax, die hier und jetzt als Klassenzielliste bezeichnet wird.
Definiert hier einige Stile für den Gollust, und ich setze die Liste hier einfach auf "Nicht", entferne einen Rand
oder gebe ihm einen Rand von zwei Widder oben und unten und einen Abstand von Null.
Und zu jedem Ziellistenelement füge ich einen Rand von einem Raum oben und unten Null zwei links und rechts und dann
einfach einen Rand von einem Pixel Volumenkörper hinzu.
Und dann diese graue Farbe hier und eine Polsterung von einem Widder.
Dies ist ein sehr, sehr einfaches Styling, da ich hier nicht viel Zeit mit Schreiben verbringen
möchte.
Nun vielleicht eine Anpassung.
Lassen Sie uns der Liste tatsächlich einen Rand von zwei Bändern in alle Richtungen geben.
Jetzt haben wir diese Liste unserer Ziele, um die Kursziele hier oben anzupassen.
Ich werde auch.
Geben Sie diesem d'Hiv einen Klassennamen, natürlich Schädel.
Und dann in D. C. als US-Datei.
Vielleicht können wir ganz oben die Kursziele und deren d blockieren. h zu markieren, um in der Mitte ausgerichtet zu werden.
Genau so.
Nun wieder sehr große Ziele.
Aber das ist hier für den Diskurs in Ordnung.
Wir üben nur zu reagieren.
Wir haben hier also diese Kursziele.
Genial.
Dies ist natürlich ein sehr einfaches Markup.
Nun, was Sie oft tun, um zu reagieren, wenn Sie dies in mehrere Komponenten aufteilen,
würden Sie beispielsweise diese Liste in eine separate Komponente auslagern, um jede Komponente für sich zu behalten, relativ schlank
und auf eine Aufgabe konzentriert.
Dazu können wir hier im Quellordner einen Komponenten-Sup-Ordner hinzufügen.
Und dort werde ich eine Zielliste J hinzufügen. S. Datei.
Dies wird meine Ziellistenkomponente enthalten.
Um eine solche neue Komponente zu erstellen, müssen wir zunächst importieren, reagieren von reagieren.
Andernfalls können wir dieses J nicht als X Syntex verwenden.
Und dann erwähnte ich tot.
Eine Komponente ist eine Funktion.
Übrigens können Sie auch mit dem Funktionsschlüsselwort oder erstellen.
Mit einem Funktionsausdruck oder.
Mit der Pfeilfunktion bald Text, den ich zuvor verwendet habe, war es nur eine Somatik, die ich hier verwenden werde,
aber das ist kein Muss.
Und dann exportiere ich hier meine Zielliste so.
Und jetzt hier drinnen kehre ich zurück.
Diese ungeordnete Liste, Salt, schneide sie hier ab und füge sie dann hinzu. Hier ist ein Rückgabewert.
Wenn dies reformiert wird, werden diese Klammern automatisch um sie herum hinzugefügt, sodass sie über mehrere Zeilen hinweg gut
formatiert werden können.
Andernfalls wäre dies kein gültiges JavaScript.
So ist es auch mit den Klammern.
Es ist, weil dann JavaScript weiß, dass dieser Block zusammen gehört.
Jetzt haben wir hier die Zielliste und eine App.
Ja, wir können jetzt unsere Ziellistenkomponente importieren.
Sie können es hier benennen, wie Sie möchten.
Muss nicht derselbe Name sein, unter dem Sie es hier exportieren.
Wichtig ist nur, dass es hier in Abcess mit einem Großbuchstaben und einem Import aus dem Komponentenordner beginnen
muss und diese aus der Zielliste stammen.
Und wie ich bereits erwähnt habe, können Sie D weglassen. Dateierweiterung hier.
Es ist nicht erforderlich.
Und dann verwenden Sie hier die Go-Liste wie ein reguläres J. S. X-Element, wie ein reguläres H tim L-Element, könnte man
sagen.
Da wir jedoch keinen Inhalt zwischen dem öffnenden und dem schließenden Tag haben, können und müssen wir hier ein selbstschließendes
Tag schreiben.
Dies wäre nicht erlaubt.
Sie müssen immer Steuern und Jazz x schließen.
Das wäre jetzt meine Ziellistenkomponente.
Und deshalb sehen wir, wenn wir sicher sind, die gleiche Ausgabe wie zuvor.
Wir erhalten auch das gleiche Styling, da Stile hier immer global angewendet werden, auch wenn Sie sie in
eine bestimmte Komponentendatei importieren.
Es empfiehlt sich jedoch, die Stile in der CSX-Datei neben der Komponente einzurichten, zu der sie gehören.
Daher werde ich eine Zielliste C als s-Datei hinzufügen.
Fügen Sie meine Zielliste Stollsteimer hinzu und importieren Sie diese Zielliste.
CSX fällt in die Ziellisten-JavaScript-Datei.
Dies ist kein Muss, erleichtert jedoch das Auffinden der Stile, die zu dieser Komponente gehören.
Beachten Sie, dass Stile nicht automatisch auf eine Komponente angewendet werden, obwohl die normalen as-Regeln angewendet
werden, da all dieses C wie folgt, unabhängig davon, wo Sie sie importieren, global auf Ihre gesamte
Seite angewendet wird.
Damit sind wir jedoch wieder beim gleichen Ergebnis wie zuvor.
Warum haben wir das getan?
Und warum teilen wir das auf, wenn wir das gleiche Ergebnis wie zuvor haben?