Erstellen einer 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

🎯 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

Set Up Your Project

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

1. Installieren Sie die Abhängigkeiten:

npm install

2. 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}

Set Up the Snowflakes Component

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

1. 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;

2. 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;
}

Create the Add Wish Form Component

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

1. 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;

Implement the Wish List and Postcard Components

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

1. 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;

2. 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;

Style the Application

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

1. 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;
}

2. 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;
}

3. 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;
}

Assemble the App Component

Bauen Sie die Hauptanwendungs-Komponente zusammen.

1. 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;

Run the Project

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.

Summary

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.