Erstelle eine feierliche Weihnachts-Wunschliste-App mit React

Einführung

Dieses Projekt führt Sie durch den Aufbau einer weihnachtlichen Wish List Builder-Webanwendung mit React. Die App verfügt über einen schönen vollbildigen weihnachtlichen Hintergrund und eine charmante Schneefallanimation, die die Weihnachtsstimmung verstärkt. 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.

Hinweis: Dieses Projekt wird hauptsächlich mit Material UI und React gebaut.

👀 Vorschau

Wish List Builder Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

Wie Sie ein React-Projekt einrichten und Abhängigkeiten installieren
Wie Sie funktionale Komponenten in React erstellen
Wie Sie React-Hooks wie useState verwenden, um den Zustand in Komponenten zu verwalten
Wie Sie Daten zwischen Eltern- und Kindkomponenten über Props übergeben
Wie Sie Formular-Einstellungen in React behandeln
Wie Sie eine React-Anwendung mit CSS gestalten
Wie Sie eine visuell ansprechende und interaktive Webanwendung mit React und CSS erstellen

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

Ein React-Projekt einrichten und die erforderlichen Abhängigkeiten installieren
Funktional Komponenten in React erstellen und ihren Zustand mit Hooks verwalten
Daten zwischen Eltern- und Kindkomponenten über Props übergeben
Formular-Einstellungen in einer React-Anwendung behandeln
Eine React-Anwendung mit CSS gestalten, um eine visuell ansprechende und interaktive Benutzeroberfläche zu erstellen
Eine vollständige Webanwendung mit React und CSS erstellen, die Funktionen wie einen weihnachtlichen Hintergrund, Schneefallanimation und eine Wunschliste-Mauer umfasst

Installiere die Abhängigkeiten

Die React-Projekt-Dateien befinden sich bereits in Ihrer Umgebung.

Installieren Sie die Abhängigkeiten:

npm install

Erstellen Sie die erforderlichen Verzeichnisse und Dateien:

mkdir src/components
touch src/components/{AddWishForm.js,WishList.js,Postcard.js,Snowflakes.js}
touch src/components/{Snowflakes.css,Postcard.css,WishList.css}

Stelle die Schneeflocken-Komponente ein

Erstellen Sie eine Snowflakes-Komponente, um die Fallanimation der Schneeflocken anzuzeigen.

In der Datei src/components/Snowflakes.js schreiben Sie Folgendes:

// Snowflakes.js - Erstellt fallende Schneeflocken mit CSS
import React from "react";
import "./Snowflakes.css";

const Snowflakes = () => {
  // Erstellt ein Array von divs, um Schneeflocken darzustellen
  const snowflakes = Array.from({ length: 200 }).map((_, index) => (
    <div
      key={index}
      className="snowflake"
      style={{
        left: `${Math.random() * 100}vw`,
        animationDuration: `${Math.random() * 3 + 2}s`,
        animationDelay: `${Math.random() * 5}s`
      }}
    >
      ❅
    </div>
  ));

  return <div className="snow-container">{snowflakes}</div>;
};

export default Snowflakes;

In der Datei src/components/Snowflakes.css schreiben Sie Folgendes:

/* Snowflakes.css - Stile für die fallenden Schneeflocken*/
.snow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.snowflake {
  position: absolute;
  top: -2vh;
  color: #fff;
  font-size: 1em;
  opacity: 0.8;
  user-select: none;
  pointer-events: none;
  /* Ermöglicht, dass Klickereignisse hindurchgehen */
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100vh);
  }
}

.snowflake {
  animation: snowfall linear infinite;
}

Erstelle die Add Wish Form - Komponente

Diese Komponente ermöglicht es Benutzern, ihre Wünsche einzugeben.

In der Datei src/components/AddWishForm.js schreiben Sie Folgendes:

// AddWishForm.js - Formular-Komponente zum Hinzufügen neuer Wünsche
import React, { useState } from "react";
import { TextField, Button, Box } from "@mui/material";

function AddWishForm({ onAddWish }) {
  const [wish, setWish] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    onAddWish(wish);
    setWish("");
  };

  return (
    <Box
      component="form"
      onSubmit={handleSubmit}
      sx={{
        mt: 2,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      <TextField
        label="Your Wish"
        variant="outlined"
        value={wish}
        onChange={(e) => setWish(e.target.value)}
        sx={{ mr: 2 }}
      />
      <Button variant="contained" color="secondary" type="submit">
        Submit Wish
      </Button>
    </Box>
  );
}

export default AddWishForm;

Implementiere die Wish List - und Postkarte - Komponenten

Zeigen Sie die hinzugefügten Wünsche auf einer halbtransparenten Wunschmauer im Postkartenstil an.

In der Datei src/components/WishList.js schreiben Sie Folgendes:

// WishList.js - Komponente, um Wünsche auf der Wunschmauer anzuzeigen
import React from "react";
import Postcard from "./Postcard";
import "./WishList.css";

function WishList({ wishes, onRemoveWish }) {
  return (
    <div className="wish-wall">
      {wishes.map((wish, index) => (
        <Postcard key={index} wish={wish} onRemoveWish={onRemoveWish} />
      ))}
    </div>
  );
}

export default WishList;

In der Datei src/components/Postcard.js schreiben Sie Folgendes:

// Postcard.js - Zeigt jeden Wunsch als Postkarte an
import React from "react";
import { Card, CardContent, Typography, IconButton } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import "./Postcard.css";

function Postcard({ wish, onRemoveWish }) {
  return (
    <Card className="postcard">
      <CardContent>
        <IconButton
          className="delete-button"
          onClick={() => onRemoveWish(wish)}
          size="small"
        >
          <CloseIcon fontSize="inherit" />
        </IconButton>
        <Typography variant="h6" component="div">
          {wish}
        </Typography>
      </CardContent>
    </Card>
  );
}

export default Postcard;

Stile die Anwendung

Sicherstellen, dass Ihre Anwendung das gewünschte Aussehen hat.

In der Datei src/App.css schreiben Sie Folgendes:

/* App.css - Globale Stile, einschließlich des Hintergrundbilds */
.App {
  color: #fff;
  font-family: "Your-Christmas-Theme-Font", sans-serif;
}
.app-container {
  margin-top: -4vh;
  position: relative;
  z-index: 2;
  background: url("./tijana-drndarski-1L4q_S1atmc-unsplash.jpg") no-repeat
    center center;
  background-size: cover;
  min-height: 100vh;
  min-width: 200vh;
  color: #fff;
}

In der Datei src/components/Postcard.css schreiben Sie Folgendes:

.postcard {
  width: 200px;
  height: 140px;
  margin: 10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  transform: rotate(-5deg);
}

.postcard:nth-child(odd) {
  transform: rotate(5deg);
}

.delete-button {
  position: absolute;
  top: 0;
  right: 0;
}

In der Datei src/components/WishList.css schreiben Sie Folgendes:

.wish-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
}

Montiere die App - Komponente

Bauen Sie die Hauptanwendungs-Komponente zusammen.

In der Datei src/App.js schreiben Sie Folgendes:

// App.js - Hauptanwendungs-Komponente
import React, { useState } from "react";
import AddWishForm from "./components/AddWishForm";
import WishList from "./components/WishList";
import Snowflakes from "./components/Snowflakes";
import { Container, Button, Box } from "@mui/material";
import "./App.css";

function App() {
  const [wishes, setWishes] = useState([]);
  const [showForm, setShowForm] = useState(false);

  const handleAddWish = (newWish) => {
    setWishes([...wishes, newWish]);
    setShowForm(false);
  };

  const handleRemoveWish = (wish) => {
    setWishes(wishes.filter((item) => item !== wish));
  };

  return (
    <Container maxWidth="md" className="app-container">
      <Snowflakes />
      <Box sx={{ my: 4, textAlign: "center" }}>
        <Button
          variant="contained"
          color="primary"
          onClick={() => setShowForm(!showForm)}
        >
          {showForm ? "Close" : "Add Wish"}
        </Button>
        {showForm && <AddWishForm onAddWish={handleAddWish} />}
        <WishList wishes={wishes} onRemoveWish={handleRemoveWish} />
      </Box>
    </Container>
  );
}

export default App;

Führe das Projekt aus

Schließlich ist es an der Zeit, Ihre Christmas Wish List Builder in Aktion zu sehen.

npm start

Dieser Befehl wird die Anwendung in Ihrem Standard-Webbrowser starten. Sie sollten Ihre weihnachtlich thematische Wunschliste-App mit fallenden Schneeflocken, einer halbtransparenten Wunschmauer und postkartenstiligen Wünschen sehen.

Zusammenfassung

In diesem Projekt haben Sie erfolgreich einen Christmas Wish List Builder mit React gebaut. Es verfügt über einen vollbildigen feierlichen Hintergrund, einen charmanten Schneefall-Effekt und eine halbtransparente Wunschmauer, auf der Benutzer Wünsche als Postkarten hinzufügen und anzeigen können. Dieses Projekt verbessert nicht nur Ihre React- und CSS-Fähigkeiten, sondern bringt Sie auch in die Weihnachtsstimmung mit einer lustigen, interaktiven Webanwendung.

Erstellen einer Weihnachts-Wunschliste-App mit React