React.js: Grundlagen

Name: React.js: Grundlagen
Author: Tony Davydets

Dieser Kurs behandelt die Grundlagen von React, einer JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Es werden React-Komponenten vorgestellt…

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

Demo anfragen Anmelden

Kurs: On-Demand

Hallo, mein Name ist Tony und ich bin dabei. Diese Lektionen werden wir uns ansehen. Welche Klassenkomponenten gibt es, ihre Struktur und ihren Lebenszyklus? Funktionen, Requisiten, Verwaltung und Nutzung. Sowie staatliche Verwaltung und Nutzung. In dieser Lektion werfen wir einen Blick darauf, was eine React-Komponente ist. wie sie verwendet werden und wie sie uns beim Schreiben helfen können eine Anwendung schnell und effizient sanft. Nun ist eine Komponente ein Teil davon. Clientseitiger Code, der einem Standard sehr ähnlich ist JavaScript-Funktion mit einem deutlichen Unterschied Eine Komponente gibt immer HTML zurück. Das ist ein Muss, denn das ist ein visuelles Element, das unser Benutzer darstellt Ich werde es sehen und mit ihm interagieren. Beim Aufbau einer Komponente ist es am besten, sie so zu strukturieren so dass es in sich geschlossen ist und keine hat Abhängigkeiten von allem anderen in der Anwendung. Das bedeutet, dass wir es unabhängig überall einsetzen können, wo wir wollen in unserer Anwendung, ohne unbeabsichtigt zu erstellen Konsequenzen, die explizit oder implizit entstehen Abhängigkeiten. Werfen wir einen Blick darauf, wie React-Komponenten aussehen. Lassen Sie uns unsere Anwendung hier starten, indem wir einen NPM-Start ausführen Befehl und unsere Bewerbung. Is going to start on port 3000. For this portion. I went ahead and I actually created the components ahead of time to save. Us a little bit of time and just vary from watching me type. So let's drop a class component into. Our interface and see what it looks like. You can see what this is is. Basically a color picker and when we change our color we can see that in real time everything gets updated on. The screen and the user can see it in the browser. Our class example looks like this. So. All React class components extend React component which is an entity that is created and maintained by the React group. So as such it comes with certain lifecycle function available to it. We will go over all of those later. For now we're just taking a look at what a component is and familiarizing. Ourselves with its nature. Now this function you can see is the only function that is truly required because that is what's going to return the HTML or the visual representation for. Our component which is what the user. Is going to see and interact with. As we mentioned earlier. Now let's take a look at what. A functional component looks like. Let's drop it into our application as well. It we can see that visually and. Functionally it is not any different than our class based component. It looks, feels and functions in a completely similar way. But when it comes to its implementation. It does vary a great bit. You can see that it doesn't really extend anything and React is not really. Mentioned anywhere in here except for inside. Of this component that uses some special functions that are distributed by the React group. But we'll go over those later, let's. Not worry about those too. Much for now, but we will see. That, we see that this is just a regular JavaScript object and here of. Course is its HTML portion, which is identical to our class based portion. And this is what the user sees and interacts with. But as you can see, this makes a good candidate for a component because it passes. Another one of our criteria that we've. Set earlier is that it's completely self contained and not dependent on anything else in the application, meaning we can use it by itself in conjunction with other things anywhere else in the application without creating any kind of unintended consequences that come from implicit or explicit dependencies. In our next lesson, we will take. A look at how JSX is different. From regular HTML and how it is used in the context of a react application. Thanks for watching.

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

Kursbeschreibung

Dieser Kurs behandelt die Grundlagen von React, einer JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Es werden React-Komponenten vorgestellt, die die Bausteine von React-Anwendungen sind. Wir werden auch die Unterschiede zwischen JSX und normalem HTML erklären. Außerdem wird die Verwendung von ES6+ und JSX in der React-Entwicklung untersucht.

Eine der einzigartigen Eigenschaften von React ist die Verwendung von JSX, einer Syntaxerweiterung, die die Einbettung von HTML-ähnlichem Code in JavaScript ermöglicht. In diesem Modul werden die Unterschiede zwischen JSX und normalem HTML erforscht und gezeigt, wie JSX verwendet werden kann, um dynamische und ausdrucksstarke Benutzeroberflächen zu erstellen. Zusätzlich zu JSX wird in diesem Modul auch die Verwendung von ES6+-Funktionen in der React-Entwicklung behandelt. ES6+ ist eine Version von JavaScript, die viele neue Funktionen und Verbesserungen in die Sprache einführt. Sie werden lernen, wie Sie ES6+-Funktionen wie Pfeilfunktionen, Klassen und Template-Literale in Verbindung mit JSX nutzen können, um modernen und effizienten React-Code zu erstellen.

Am Ende dieses Moduls werden Sie ein solides Verständnis von React-Komponenten, JSX und der Verwendung von ES6+ in der React-Entwicklung haben. Sie werden mit den Werkzeugen und dem Wissen ausgestattet sein, um Ihre eigenen React-Anwendungen zu erstellen und reichhaltige, interaktive Benutzeroberflächen zu entwickeln.

Was Sie lernen werden

Verstehen Sie, was React-Komponenten als Bausteine von React-Anwendungen sind
Unterscheiden Sie zwischen JSX und regulärem HTML
Verwenden Sie JSX, um dynamische und ausdrucksstarke Benutzeroberflächen zu erstellen
Wenden Sie ES6+ Funktionen wie Pfeilfunktionen, Klassen und Template-Literale zusammen mit JSX an
Erstellen Sie umfangreiche, interaktive Benutzeroberflächen mit React

Wichtige Erkenntnisse

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, und Komponenten sind die Bausteine von React-Anwendungen.
JSX ist eine Syntax-Erweiterung, die das Einbetten von HTML-ähnlichem Code innerhalb von JavaScript ermöglicht, und unterscheidet sich von regulärem HTML.
ES6+ führte Funktionen wie Pfeilfunktionen, Klassen und Template-Literale ein, die zusammen mit JSX in der modernen React-Entwicklung verwendet werden.
Am Ende des Kurses haben Lernende ein solides Verständnis von React-Komponenten, JSX und der Verwendung von ES6+ in der React-Entwicklung.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Er behandelt die Grundlagen von React, einschließlich React-Komponenten, die Unterschiede zwischen JSX und regulärem HTML und die Verwendung von ES6+ zusammen mit JSX in der React-Entwicklung.

Was ist JSX in React?

JSX ist eine Syntax-Erweiterung, die das Einbetten von HTML-ähnlichem Code innerhalb von JavaScript ermöglicht, und der Kurs erklärt, wie es sich von regulärem HTML unterscheidet und wie es verwendet wird, um dynamische und ausdrucksstarke Benutzeroberflächen zu erstellen.

Welche ES6+ Funktionen werde ich mit React verwenden lernen?

Sie lernen, wie Sie ES6+ Funktionen wie Pfeilfunktionen, Klassen und Template-Literale zusammen mit JSX verwenden, um modernen und effizienten React-Code zu erstellen.

Was kann ich nach Abschluss dieses Kurses tun?

Sie haben ein solides Verständnis von React-Komponenten, JSX und der Verwendung von ES6+, und Sie sind ausgestattet, um Ihre eigenen React-Anwendungen zu erstellen und umfangreiche, interaktive Benutzeroberflächen zu erstellen.