React Tutorials

In diesem Lab lernen Sie, wie Sie Datenlisten in React rendern und wie wichtig die Verwendung von Schlüsseln für Listenelemente ist.

In diesem Lab lernen Sie die Grundlagen der JSX-Syntax in React, einschließlich des Schreibens von Elementen, des Einbettens von Ausdrücken und der Verwendung von Attributen.

In diesem Lab lernen Sie die Grundlagen der Formularbehandlung in React, einschließlich Controlled Components, State Management und Event Handling.

In diesem Lab lernen Sie die Grundlagen der Ereignisbehandlung in React, wie z. B. Klicks, indem Sie Event-Handler an JSX-Elemente anhängen und die entsprechenden Funktionen definieren.

In diesem Lab lernen Sie die grundlegenden Techniken für bedingtes Rendern in React, einschließlich der Verwendung des ternären Operators, logischer &&, Variablen und Zustands (state), um Komponenten dynamisch anzuzeigen.

In diesem Lab lernen Sie die Grundlagen der Verwaltung von Komponenten-State in React mit dem `useState` Hook, indem Sie eine einfache Zähleranwendung erstellen.

In diesem Lab lernen Sie die Grundlagen von React-Komponenten, indem Sie eine einfache funktionale Komponente erstellen, exportieren und importieren.

In diesem Lab lernen Sie die grundlegenden Schritte zur Einrichtung eines neuen React-Projekts und zur Ausführung Ihrer ersten React-Anwendung mit Vite.

In diesem Lab lernen Sie die Grundlagen von React-Props kennen, einschließlich der Datenübergabe von Eltern- an Kindkomponenten, dem Zugriff auf Props, der Verwendung von Destructuring und dem Festlegen von Standardwerten.

In diesem Projekt führen wir Sie durch den Aufbau eines einfachen Pixel Art Animators mit React. Am Ende dieser Anleitung haben Sie einen grundlegenden Pixel Art Editor, in dem Sie Ihre Pixel Kunst zeichnen und die resultierende Animation sehen können. Dieses Projekt ist für Einsteiger geeignet und bietet eine spannende Möglichkeit, in die Welt von React und Pixel Kunst einzusteigen!

In diesem Projekt werden wir eine einfache Notizen-App mit React erstellen. Die App wird Benutzern ermöglichen, Notizen hinzuzufügen, zu bearbeiten und zu löschen. Wir werden die Entwicklung in mehrere Schritte untergliedern, um sicherzustellen, dass jeder Schritt bestimmte Anforderungen erfüllt und essentielle Funktionalität hinzufügt.

Dieses Projekt führt Sie durch den Aufbau einer feierlichen Weihnachts-Wunschliste-Builder-Webanwendung mit React. Die App verfügt über einen schönen vollbildigen weihnachtlich thematisierten Hintergrund und eine charmante Schneefallanimation, die die Weihnachtsstimmung erhöht. Benutzer können Wünsche auf eine halbtransparente Wunschmauer hinzufügen, und jeder Wunsch wird als Postkarte dargestellt. Wir werden React für die Frontend-Implementierung und CSS für die Gestaltung und Animationen verwenden.

In diesem Projekt wirst du lernen, wie du eine einfache Anzeige/Versteck-Funktionalität mit React erstellst. Du wirst einen Button implementieren, der die Sichtbarkeit eines Bildes auf der Seite umschaltet.

In diesem Projekt lernen Sie, wie Sie mit React eine persönliche Visitenkarte erstellen können. Das Projekt beinhaltet das Erstellen einer responsiven und interaktiven Webanwendung, die es Benutzern ermöglicht, ihre persönlichen Informationen einzugeben und eine maßgeschneiderte Visitenkarte zu generieren.

In diesem Projekt wirst du lernen, wie du Navigationsfunktionen in einer React-Anwendung implementierst. Du wirst eine einfache Anwendung mit einer Navigationsleiste und Seiten erstellen, zu denen über Links navigiert werden kann.

In diesem Projekt wirst du lernen, wie du eine Farbfilteranwendung mit React aufbaust. Die Anwendung wird Benutzern ermöglichen, eine Liste von Farben nach dem Namen der Farbe zu filtern, nach der sie suchen. Dieses Projekt hilft dir zu verstehen, wie du mit Zustandsverwaltung, Ereignisbehandlung und bedingtem Rendern in React umgehst.

In diesem Projekt wirst du lernen, wie du einen benutzerdefinierten React-Hook namens useWindowSize erstellen kannst, um die aktuelle Fenstergröße zu erhalten und sie zur bedingten Darstellung der Navigationsleiste in einer Webanwendung zu verwenden.

Hallo und herzlich willkommen bei LabEx! In diesem ersten Lab lernst du das klassische 'Hello, World!' - Programm in React kennen.