Einführung

Abgeschlossen

Sie müssen dazu in der Lage sein, Daten zu ändern und auf Benutzeranforderungen zu reagieren, um eine interaktive Anwendung zu erstellen. Diese Funktionalität wird in React über Zustände und Ereignisse verwaltet.

Der Zustand (State) bezeichnet Daten, die geändert und von mehreren Komponenten in Ihrer Anwendung verwendet werden können. Ereignisse (Events) ermöglichen es Ihnen, alle Methoden zu verarbeiten, über die ein Benutzer mit Ihrer Anwendung interagieren kann: Klicken, Schreiben und Tippen.

Ziele

Inhalte dieses Moduls:

• Hinzufügen von Zuständen zu einer Anwendung
• Hinzufügen von Ereignishandlern
• Verwenden des Effect-Hooks für die Reaktion auf Zustandsänderungen

Voraussetzungen

• Kenntnisse über JavaScript, HTML und CSS
• Grundlegendes Verständnis über React-Komponenten
• Ein Code-Editor wie Visual Studio Code
• Lokale Installation von Node.js
• Lokale Installation von Git
• Das im folgenden Abschnitt beschriebene Starterprojekt

Klonen des Projekts

In diesem Modul verwenden Sie ein Starterprojekt. Klonen Sie das Projekt, und öffnen Sie es in Visual Studio Code.

1. Führen Sie die folgenden Schritte in einem Befehlsfenster oder Terminalfenster aus, um das Starterprojekt abzurufen. In diesem Schritt wird das Repository geklont, und der Startordner wird in Visual Studio Code geöffnet.

   # Windows
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react\code\3-state-events\start
   code .
   

   # macOS or Linux
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/3-state-events/start
   code .
   

2. Öffnen Sie das in Visual Studio Code integrierte Terminal, indem Sie Ansicht>Terminal auswählen. Alternativ können Sie STRG+` auswählen. (Auf einem Mac wählen Sie BEFEHL+` aus.)

3. Führen Sie den folgenden Code im Terminal aus, um die erforderlichen Pakete zu installieren und den Entwicklungsserver zu starten.

   npm install
   npm start
   

4. Daraufhin sollte Ihr Standardbrowser automatisch geöffnet werden. Wenn das nicht der Fall ist, öffnen Sie Ihren Browser, und rufen Sie http://locahost:8080. auf. Daraufhin wird die Startseite geöffnet.