React.js: Komponenten

Hallo, mein Name ist Tony und in diesen Lektionen werden Sie es lernen über Komponenten. In dieser Lektion werfen wir einen Blick auf die Funktionen von ES6 plus JSX zum Rendern von Komponenten. Ich wollte darauf aufmerksam machen, weil das sehr ist wichtig. In einem realen Szenario würden Sie nicht jeden einzelnen angeben Komponente in einem Ordner, denn wie Sie sich vorstellen können, ist es kann schnell unruhig werden. Was wir für professionelle Anwendungen suchen Eine reale Situation sieht so aus. Wie Sie sehen, handelt es sich also nicht mehr um eine flache Struktur. Alle unsere Komponenten befinden sich in einem eigenen Ordner. sogenannte Komponenten, und jede einzelne Komponente hat ihre eigene Ordner. Die Struktur des Ordners ist so gestaltet, dass die Definition des Komponente befindet sich in der JS- oder JSX-Datei, und die Styling-Lösung, falls eine benötigt wird, befindet sich in einem CSS-Datei. Nun, in einem professionellen Umfeld würde es das auch tun Sei hier eine .test-Datei oder eine .spec-Datei, die eine Einheit enthalten würde Tests. Wir werden uns darüber vorerst keine Sorgen machen, Aber nur um Sie wissen zu lassen, falls Sie das jemals in der Realität sehen Welt, Es ist sehr wahrscheinlich, dass die Dinge so aussehen werden. Für unsere Zwecke werden wir jetzt gehen um eine Anwendung zu erstellen Dadurch wird eine Liste aller Dinge geführt, die wir für uns haben an diesem Tag zu tun, und wir werden die Möglichkeit haben, sie einzeln von unserer Liste zu streichen eine, da wir sie hoffentlich fertigstellen. Diese spezielle Komponente wird sein nur eine Liste aller Aufgaben, die wir haben. Nun importieren wir zunächst React aus React. Es ist sehr wichtig. React ist ein Super-Global. Wir benötigen es für die Entwicklung aller unserer Anwendungen. Und hier werden wir unsere Komponente haben. Die Komponente, die wir erstellen, wird Aufgabenliste genannt. und es wird dauern die folgenden drei Argumente. Die Aufgaben, Lassen Sie uns dies schließen, damit es sich nicht beschwert. Die Aufgaben sind also der Datensatz, den wir durchlaufen werden und Aufgaben einzeln ausgeben. HandleCheck ist eine Funktion, die ausgelöst wird, wenn wir Checkbox, die jeder einzelnen unserer Aufgaben entspricht. Und HandleDelete ist eine weitere Funktion, die ausgelöst wird wenn wir tatsächlich versuchen, eine Aufgabe aus unserer Liste zu löschen. Wie rendern wir nun bedingt innerhalb von React? Wir werden innerhalb von React bedingt rendern Verwenden Sie keine traditionelle if -else-Anweisung, da die JSX Die Nomenklatur lässt das nicht zu. Wir werden eine tertiäre Anweisung verwenden. Du Möglicherweise haben Sie schon einmal eine tertiäre Aussage gesehen, und das hier ist ihr Format. Machen wir das oben, damit wir unsere Funktion nicht durcheinander bringen ein Beispiel. Die Bedingung, auf die wir testen, ist also immer die erste Argument in der Struktur. Wenn diese Bedingung wahr ist, also wenn der if-Teil von Unsere Aussage ist wahr, dies ist der Teil des Codes, der abgerufen wird laufen. Und wenn es falsch ist, ist dies der Teil des Codes, der ausgeführt wird. Wir gehen zu Nehmen Sie das Gleiche und erweitern Sie es auf unser React-Ökosystem Lass es so aussehen. So unser Der Datensatz wird eine ungeordnete Liste sein. und wenn die Länge weniger als eins beträgt, machen wir daraus mehr für Menschen lesbar und sagen, dass die Länge Null ist. Dreifache Gleichheit ist super wichtig. Wenn Sie ein Doppel gleich Null machen, das bedeutet das ist auch gleich damit. Es vergleicht also im Grunde nur den Wert, tut es aber nicht Vergleichen Sie den Typ. Aber wir sind nicht hinterher Zeichen Null. Wir sind hinter der Nummer Null her. Deshalb führen wir zum Vergleich immer ein Triple-Equals-Verfahren durch. Es macht es typsicher. Was wir hier also tun werden: Wenn nichts angezeigt wird, Wir werden dem Benutzer einen Text präsentieren, der sagt ihnen im Grunde, hey, es wird nichts angezeigt. In Ihrer Agenda steht derzeit nichts. Möchten Sie eine Veranstaltung hinzufügen? Und wenn etwas angezeigt wird, Und hier wird es interessant, hier sind wir werden einen Datensatz durchlaufen, der das ist Wir übergeben als erstes Argument diese Funktion. Werfen wir einen Blick darauf, wie das aussieht. Symbol „Löschen“. Lassen Sie uns meine Symbole importieren, damit es sich nicht beschwert. Wir machen das oben und löschen unser Beispiel. Also jetzt der else-Teil unseres Tertiärsatzes verfügt über eine Kartenfunktion. Dies ist die Funktion, die wir an unsere Kartenfunktion übergeben. und was es tun wird, ist, dass es HTML für uns produziert, was auch der Fall sein wird im Grunde ein LI oder ein Listenelement für die ungeordnete Liste sein das haben wir gleich zu Beginn erklärt. Lassen Sie uns dies einen Schritt nach hinten verschieben. Auf geht's. Und wie Sie sehen, geben wir dies im Grunde als aus jeweils ein Element. Wir werden sehen können, wie es aussieht, sobald wir Bringen Sie es im nächsten Teil unserer Lektion tatsächlich zum Laufen. Wie Sie sehen, geben wir die Aufgabe aus. Es gibt ein entsprechendes Kontrollkästchen. Hier ist der Text das sagt eigentlich, was die Aufgabe ist. Und hier ist die Schaltfläche, mit der wir es löschen können. Wieder einmal versuchen wir nur, die Aufgabe zu konzeptualisieren und wie es aussehen wird. Wir werden im nächsten Teil unseres Kurses einen Blick darauf werfen. Nun zum Schluss, jede einzelne Komponente dürfen wir nicht vergessen mach das. Wir exportieren die Komponente, die wir gerade erstellt haben, und wir exportieren es als Standard. Was bedeutet es nun, dass wir dies als Standard exportieren? Das bedeutet, wann wir es innerlich konsumieren unserer App-Komponente, die das enthalten wird Definition für die gesamte App, Wir werden es so importieren, ohne das Curly Zahnspange. Jetzt, Da wir es standardmäßig importieren, können wir es wirklich aufrufen Was auch immer wir wollen, und es wird immer noch funktionieren. Wenn wir es als benannten Export wie diesen exportieren würden, Wir könnten es nur mit geschweiften Klammern importieren speziell mit Namen. Sie fragen sich vielleicht, warum dies nicht getan wird? Es scheint sicherer zu sein. Nun, denn in React verpacken wir oft das Objekt, das wir verwenden mit einigen anderen Funktionen erstellt. Wir werden später darauf zurückkommen, aber wir könnten tatsächlich mit sagen etwas und geben Sie ihm zusätzliche Funktionalität, logische Funktionalität. Aber das ist im Grunde der Grund, warum es benannt wurde Exporte und Importe erfolgen nicht innerhalb von React, Next .js, oder alles, was von React als Basis abhängt. In unserer nächsten Lektion werden wir einen Blick auf die Komponente werfen Requisiten sind, was ihr Zweck ist, und wie sie verwendet werden. Vielen Dank fürs Zuschauen.