介绍
本项目将指导你使用 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;
运行项目
最后，是时候看看你的圣诞愿望清单生成器实际运行的样子了。
npm start
此命令将在你的默认网页浏览器中启动应用程序。你应该会看到你的圣诞主题愿望清单应用程序，带有飘落的雪花、半透明的愿望墙以及明信片样式的愿望。
总结
在这个项目中，你已经成功地使用 React 构建了一个圣诞愿望清单生成器。它具有全屏节日背景、迷人的降雪效果以及一个半透明的愿望墙，用户可以在其中以明信片的形式添加和查看愿望。这个项目不仅提升了你在 React 和 CSS 方面的技能，还通过一个有趣的交互式 Web 应用程序让你感受到节日氛围。
