Construir una aplicación de lista de deseos de Navidad con React

Introducción

Este proyecto te guía a través de la construcción de una aplicación web React para crear una lista de deseos navideños festiva. La aplicación cuenta con un hermoso fondo de pantalla con tema navideño y una animación encantadora de nieve, lo que aumenta el espíritu navideño. Los usuarios pueden agregar deseos a una pared de deseos semi-transparente, y cada deseo se presenta como una postal. Usaremos React para el frontend y CSS para el estilo y las animaciones.

Nota: Este proyecto se construye principalmente utilizando Material UI y React.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar un proyecto React e instalar dependencias
• Cómo crear componentes funcionales en React
• Cómo usar hooks de React, como useState, para administrar el estado en los componentes
• Cómo pasar datos entre componentes padre e hijo utilizando props
• Cómo manejar el envío de formularios en React
• Cómo dar estilo a una aplicación React utilizando CSS
• Cómo construir una aplicación web visualmente atractiva e interactiva utilizando React y CSS

🏆 Logros

Después de completar este proyecto, podrás:

• Configurar un proyecto React e instalar las dependencias necesarias
• Crear componentes funcionales en React y administrar su estado utilizando hooks
• Pasar datos entre componentes padre e hijo utilizando props
• Manejar el envío de formularios en una aplicación React
• Dar estilo a una aplicación React utilizando CSS para crear una interfaz de usuario visualmente atractiva e interactiva
• Construir una aplicación web completa utilizando React y CSS, incorporando características como un fondo con tema navideño, una animación de nieve y una pared de lista de deseos

Configura tu proyecto

Los archivos del proyecto React ya están en tu entorno.

1. Instala las dependencias:

npm install

2. Crea los directorios y archivos necesarios:

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

Configura el componente de copos de nieve

Crea un componente de copos de nieve para mostrar la animación de nieve cayendo.

1. En el archivo src/components/Snowflakes.js, escribe lo siguiente:

// Snowflakes.js - Crea copos de nieve cayendo usando CSS
import React from "react";
import "./Snowflakes.css";

const Snowflakes = () => {
  // Crea un array de divs para representar los copos de nieve
  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. En el archivo src/components/Snowflakes.css, escribe lo siguiente:

/* Snowflakes.css - Estilos para los copos de nieve cayendo*/
.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;
  /* Permite que los eventos de clic pasen a través */
}

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

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

.snowflake {
  animation: snowfall linear infinite;
}

Crea el componente del formulario para agregar deseos

Este componente permite a los usuarios ingresar sus deseos.

1. En el archivo src/components/AddWishForm.js, escribe lo siguiente:

// AddWishForm.js - Componente de formulario para agregar nuevos deseos
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="Tu deseo"
        variant="outlined"
        value={wish}
        onChange={(e) => setWish(e.target.value)}
        sx={{ mr: 2 }}
      />
      <Button variant="contained" color="secondary" type="submit">
        Enviar deseo
      </Button>
    </Box>
  );
}

export default AddWishForm;

Implementa los componentes de la lista de deseos y la postal

Muestra los deseos agregados en una pared de deseos semi-transparente con estilo de postal.

1. En el archivo src/components/WishList.js, escribe lo siguiente:

// WishList.js - Componente para mostrar los deseos en la pared de deseos
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. En el archivo src/components/Postcard.js, escribe lo siguiente:

// Postcard.js - Muestra cada deseo como una postal
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;

Estiliza la aplicación

Asegúrate de que tu aplicación tenga el aspecto y la sensación deseados.

1. En el archivo src/App.css, escribe lo siguiente:

/* App.css - Estilos globales, incluyendo la imagen de fondo */
.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. En el archivo src/components/Postcard.css, escribe lo siguiente:

.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. En el archivo src/components/WishList.css, escribe lo siguiente:

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

Construye el componente de la aplicación

Construye el componente principal de la aplicación.

1. En el archivo src/App.js, escribe lo siguiente:

// App.js - Componente principal de la aplicación
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 ? "Cerrar" : "Agregar deseo"}
        </Button>
        {showForm && <AddWishForm onAddWish={handleAddWish} />}
        <WishList wishes={wishes} onRemoveWish={handleRemoveWish} />
      </Box>
    </Container>
  );
}

export default App;

Ejecuta el proyecto

Finalmente, es hora de ver en acción tu Constructor de Listas de Deseos de Navidad.

npm start

Este comando lanzará la aplicación en tu navegador web predeterminado. Deberías ver tu aplicación de lista de deseos con tema navideño, con copos de nieve cayendo, una pared de deseos semi-transparente y deseos con estilo de postal.

Resumen

En este proyecto, has construido con éxito un Constructor de Listas de Deseos de Navidad utilizando React. Cuenta con un fondo festivo de pantalla completa, un encantador efecto de nevada y una pared de deseos semi-transparente donde los usuarios pueden agregar y ver deseos en forma de postales. Este proyecto no solo mejora tus habilidades en React y CSS, sino que también te sumerge en el espíritu navideño con una aplicación web divertida e interactiva.