Создание веб-приложения для списка желаний на Рождество с использованием React

Введение

В этом проекте вы научитесь создавать веб-приложение для сборки списка желаний на Рождество с использованием React. В приложении есть красивое полноэкранное изображение с Рождественской тематикой в качестве фона и очаровательная анимация падения снега, которая повышает рождественский дух. Пользователи могут добавлять желания на полупрозрачную стену желаний, и каждое желание представлено в виде открытки. Для фронтенда мы будем использовать React, а для стилизации и анимаций - CSS.

Примечание: Этот проект основан на использовании Material UI и React.

👀 Превью

🎯 Задачи

В этом проекте вы научитесь:

• настраивать проект React и устанавливать зависимости;
• создавать функциональные компоненты в React;
• использовать React-хуки, такие как useState, для управления состоянием в компонентах;
• передавать данные между родительскими и дочерними компонентами с использованием props;
• обрабатывать отправку форм в React;
• стилизовать приложение React с использованием CSS;
• создавать визуально привлекательное и интерактивное веб-приложение с использованием React и CSS.

🏆 Достижения

После завершения этого проекта вы сможете:

• настроить проект React и установить необходимые зависимости;
• создавать функциональные компоненты в React и управлять их состоянием с использованием хуков;
• передавать данные между родительскими и дочерними компонентами с использованием props;
• обрабатывать отправку форм в приложении React;
• стилизовать приложение React с использованием CSS для создания визуально привлекательного и интерактивного интерфейса пользователя;
• создать полноценное веб-приложение с использованием React и CSS, включающее в себя такие функции, как Рождественский фон, анимация падения снега и стену списка желаний.

Настройка проекта

Файлы проекта React уже находятся в вашей среде.

1. Установите зависимости:

npm install

2. Создайте необходимые директории и файлы:

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

Настройка компонента Snowflakes

Создайте компонент Snowflakes для отображения анимации падения снега.

1. В файле 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;

2. В файле 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;
}

Создайте компонент формы для добавления желаний

Этот компонент позволяет пользователям вводить свои желания.

1. В файле 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;

Реализуйте компоненты Wish List и Postcard

Отображайте добавленные желания на полупрозрачной стене желаний в стиле открытки.

1. В файле 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;

2. В файле 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;

Стилизуйте приложение

Убедитесь, что ваше приложение имеет желаемый внешний вид и ощущение.

1. В файле src/App.css напишите следующее:

/* App.css - Глобальные стили, включая изображение фона */
.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. В файле 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;
}

3. В файле 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;
}

Соберите компонент App

Соберите главный компонент приложения.

1. В файле 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 ? "Close" : "Add Wish"}
        </Button>
        {showForm && <AddWishForm onAddWish={handleAddWish} />}
        <WishList wishes={wishes} onRemoveWish={handleRemoveWish} />
      </Box>
    </Container>
  );
}

export default App;

Запустите проект

Наконец, настало время увидеть, как работает ваш строитель списка желаний на Рождество.

npm start

Эта команда запустит приложение в вашем стандартном веб-браузере. Вы должны увидеть ваше приложение для списка желаний в стиле Рождества с падающими снежинками, полупрозрачной стеной желаний и желаниями в стиле открыток.

Резюме

В этом проекте вы успешно построили строитель списка желаний на Рождество с использованием React. Он имеет полноэкранный праздничный фон, очаровательный эффект падения снега и полупрозрачную стену желаний, где пользователи могут добавлять и просматривать желания в виде открыток. Этот проект не только улучшает ваши навыки React и CSS, но и позволяет вам окунуться в праздничное настроение с помощью веселой, интерактивной веб-приложения.