React.js: Komponenten

Name: React.js: Komponenten
Author: Tony Davydets

Dieses Modul behandelt ES6+-Funktionen mit JSX zum Rendern von Komponenten, Komponenten-Props und Komponenten-Status, die Kernkonzepte von React sind, einer…

Preview the first lesson free — get full access to all 1 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

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.

Anbieter : Tony Davydets 1 Lektion · 18m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

Dieses Modul behandelt ES6+-Funktionen mit JSX zum Rendern von Komponenten, Komponenten-Props und Komponenten-Status, die Kernkonzepte von React sind, einer beliebten JavaScript-Bibliothek zum Erstellen moderner Webanwendungen.

React-Komponenten sind die Bausteine einer React-Anwendung. Diese Komponenten können als ES6+-Funktionen mit JSX geschrieben werden, was Entwicklern ermöglicht, prägnanteren und besser lesbaren Code zu schreiben. JSX ist eine Syntaxerweiterung für JavaScript, mit der HTML-ähnliche Elemente in Code geschrieben werden können. Mit JSX können Entwickler benutzerdefinierte Komponenten erstellen, die im DOM gerendert werden können. State ist eine Funktion, die es React-Komponenten ermöglicht, Daten zu speichern, die sich im Laufe der Zeit ändern können. Dies ermöglicht dynamische und interaktive Aktualisierungen der Daten einer Komponente. Der Status kann in einem Konstruktor oder mit einem State Hook initialisiert werden, eine Funktion, die in React 16.8 eingeführt wurde.

Das Verständnis von ES6+-Funktionen mit JSX, Komponenten-Props und Komponentenstatus ist für die Erstellung moderner Webanwendungen mit React unerlässlich. Diese Konzepte ermöglichen wiederverwendbare und interaktive Komponenten, die mit verschiedenen Daten angepasst werden können.

Was Sie lernen werden

Verwenden Sie ES6+-Funktionen mit JSX zum Rendern von React-Komponenten
Schreiben Sie JSX-Syntax, um benutzerdefinierte Komponenten zu erstellen, die im DOM gerendert werden
Übergeben Sie Daten in Komponenten mithilfe von Komponenten-Props
Verwalten Sie den Komponentenzustand zum Speichern von Daten, die sich im Laufe der Zeit ändern
Initialisieren Sie den Zustand in einem Konstruktor oder mit dem State Hook, der in React 16.8 eingeführt wurde

Wichtige Erkenntnisse

React-Komponenten sind die Bausteine einer React-Anwendung und können als ES6+-Funktionen mit JSX geschrieben werden.
JSX ist eine Syntaxerweiterung für JavaScript, die es ermöglicht, HTML-ähnliche Elemente im Code zu schreiben.
Der Zustand ermöglicht es React-Komponenten, Daten zu speichern, die sich im Laufe der Zeit ändern können, was dynamische und interaktive Aktualisierungen ermöglicht.
Der Zustand kann in einem Konstruktor oder mithilfe eines State Hooks, einer in React 16.8 eingeführten Funktion, initialisiert werden.
Das Verständnis von ES6+-Funktionen mit JSX, Komponenten-Props und Komponentenzustand ermöglicht wiederverwendbare und interaktive Komponenten, die mit verschiedenen Daten angepasst werden können.

Häufig gestellte Fragen

Was behandelt dieses React.js-Modul?

Dieses Modul behandelt ES6+-Funktionen mit JSX zum Rendern von Komponenten, Komponenten-Props und Komponentenzustand, die Kernkonzepte in React, einer JavaScript-Bibliothek zum Erstellen moderner Webanwendungen.

Was ist JSX in React?

JSX ist eine Syntaxerweiterung für JavaScript, die es ermöglicht, HTML-ähnliche Elemente im Code zu schreiben. Mit JSX können Entwickler benutzerdefinierte Komponenten erstellen, die im DOM gerendert werden können.

Wie kann der Zustand in einer React-Komponente festgelegt werden?

Der Zustand kann in einem Konstruktor oder mithilfe eines State Hooks, einer in React 16.8 eingeführten Funktion, initialisiert werden. Der Zustand ermöglicht es Komponenten, Daten zu speichern, die sich im Laufe der Zeit ändern können.

Warum sind Komponenten-Props und Zustand wichtig?

Das Verständnis von ES6+-Funktionen mit JSX, Komponenten-Props und Komponentenzustand ist wichtig für die Erstellung moderner Webanwendungen mit React und ermöglicht wiederverwendbare und interaktive Komponenten, die mit verschiedenen Daten angepasst werden können.

Welche Lektionen sind in diesem Modul enthalten?

Das Modul umfasst drei Lektionen: ES6+-Funktionen mit JSX zum Rendern von Komponenten, Komponenten-Props und Komponentenzustand.