Interaktive React-Komponenten erstellen

Einführung

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

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du ein React-Projekt mit HTML-, CSS- und JavaScript-Dateien einrichtest
• Wie du den useState-Hook verwendest, um den Zustand der Anwendung zu verwalten
• Wie du Komponenten bedingend rendern, basierend auf dem Zustand
• Wie du die Komponenten mit CSS gestalten

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein grundlegendes React-Anwendung zu erstellen
• Zustandsverwaltung um die Sichtbarkeit von Elementen zu steuern
• HTML, CSS und JavaScript in einem React-Projekt zu integrieren
• Die Grundlagen des Aufbaus interaktiver Benutzeroberflächen mit React zu verstehen

Projekt einrichten

In diesem Schritt wirst du das Projekt einrichten und dich mit den bereitgestellten Dateien vertraut machen.

1. Öffne den Editor rechts. Du kannst in deinem Projektverzeichnis die folgenden Dateien sehen:

├── style.css
├── index.html
├── script.js
└── dog.png

2. Klicke in der unteren rechten Ecke auf "Go Live", um das Projekt auf Port 8080 zu öffnen.

Implementiere die Anzeige/Versteck-Funktionalität

In diesem Schritt wirst du die Funktionalität implementieren, um das Bild anzuzeigen und zu verstecken, indem du einen Button verwendest.

1. Öffne die Datei script.js.
2. Erstelle die Komponente App:

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "Element verstecken" : "Element anzeigen"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

In dieser Komponente:

• Wir verwenden den useState-Hook, um eine Zustandsvariable show und eine Funktion setShow zu erstellen, um sie zu aktualisieren.
• Der Anfangswert von show wird auf true gesetzt.
• Wir rendern einen Button, der den Wert von show umschaltet, wenn er angeklickt wird.
• Der Buttontext ändert sich basierend auf dem Wert von show.
• Wir rendern das Bild bedingt, indem wir die Zustandsvariable show verwenden.

3. Speichere die Datei App.js.
4. Aktualisiere die Seite in deinem Browser.
5. Klicke auf den Button "Element verstecken", um das Bild zu verstecken.
6. Klicke auf den Button "Element anzeigen", um das Bild erneut anzuzeigen.

Glückwunsch! Du hast das Projekt "Anzeigen und Verstecken" abgeschlossen. Du hast gelernt, wie du mit React eine einfache Anzeige/Versteck-Funktionalität mit einem Button erstellst.

Zusammenfassung

Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.