用 React 构建一个节日氛围的圣诞愿望清单应用

简介

本项目将指导你使用 React 构建一个节日圣诞愿望清单生成器 Web 应用程序。该应用具有美丽的全屏圣诞主题背景和迷人的降雪动画，增强了节日氛围。用户可以将愿望添加到半透明的愿望墙上，每个愿望都以明信片的形式呈现。我们将使用 React 构建前端，并使用 CSS 进行样式设计和动画制作。

注意：本项目主要使用 Material UI 和 React 构建。

👀 预览

🎯 任务

在本项目中，你将学习：

如何设置 React 项目并安装依赖项
如何在 React 中创建功能组件
如何使用 React 钩子（如 useState）来管理组件中的状态
如何使用 props 在父子组件之间传递数据
如何在 React 中处理表单提交
如何使用 CSS 为 React 应用程序设置样式
如何使用 React 和 CSS 构建一个视觉上吸引人且交互式的 Web 应用程序

🏆 成果

完成本项目后，你将能够：

设置 React 项目并安装必要的依赖项
在 React 中创建功能组件并使用钩子管理其状态
使用 props 在父子组件之间传递数据
在 React 应用程序中处理表单提交
使用 CSS 为 React 应用程序设置样式，以创建视觉上吸引人且交互式的用户界面
使用 React 和 CSS 构建一个完整的 Web 应用程序，融入圣诞主题背景、降雪动画和愿望清单墙等功能

设置你的项目

React 项目文件已在你的环境中。

安装依赖项：

npm install

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

设置雪花组件

创建一个雪花组件来显示降雪动画。

在 src/components/Snowflakes.js 文件中，编写以下代码：

// Snowflakes.js - 使用 CSS 创建飘落的雪花
import React from "react";
import "./Snowflakes.css";

const Snowflakes = () => {
  // 创建一个包含 div 的数组来表示雪花
  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;

在 src/components/Snowflakes.css 文件中，编写以下代码：

/* Snowflakes.css - 飘落雪花的样式 */
.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;
  /* 允许点击事件穿透 */
}

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

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

.snowflake {
  animation: snowfall linear infinite;
}

✨ 查看解决方案并练习

创建添加愿望表单组件

此组件允许用户输入他们的愿望。

在 src/components/AddWishForm.js 文件中，编写以下代码：

// AddWishForm.js - 用于添加新愿望的表单组件
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="你的愿望"
        variant="outlined"
        value={wish}
        onChange={(e) => setWish(e.target.value)}
        sx={{ mr: 2 }}
      />
      <Button variant="contained" color="secondary" type="submit">
        提交愿望
      </Button>
    </Box>
  );
}

export default AddWishForm;

✨ 查看解决方案并练习

实现愿望清单和明信片组件

以明信片的形式在半透明的愿望墙上显示添加的愿望。

在 src/components/WishList.js 文件中，编写以下代码：

// WishList.js - 在愿望墙上显示愿望的组件
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;

在 src/components/Postcard.js 文件中，编写以下代码：

// Postcard.js - 将每个愿望显示为一张明信片
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;

✨ 查看解决方案并练习

为应用程序添加样式

确保你的应用程序具有理想的外观和感觉。

在 src/App.css 文件中，编写以下代码：

/* App.css - 全局样式，包括背景图像 */
.App {
  color: #fff;
  font-family: "你的圣诞主题字体", 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;
}

在 src/components/Postcard.css 文件中，编写以下代码：

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

在 src/components/WishList.css 文件中，编写以下代码：

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

✨ 查看解决方案并练习

组装应用组件

将主要的应用组件组合起来。

在 src/App.js 文件中，编写以下代码：

// App.js - 主要应用组件
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 ? "关闭" : "添加愿望"}
        </Button>
        {showForm && <AddWishForm onAddWish={handleAddWish} />}
        <WishList wishes={wishes} onRemoveWish={handleRemoveWish} />
      </Box>
    </Container>
  );
}

export default App;

✨ 查看解决方案并练习