Construindo um Aplicativo de Lista de Desejos de Natal com React

Introdução

Este projeto guia você na construção de uma aplicação web festiva de Lista de Desejos de Natal usando React. O aplicativo apresenta um belo fundo temático de Natal em tela cheia e uma encantadora animação de queda de neve, aprimorando o espírito natalino. Os usuários podem adicionar desejos a uma parede de desejos semi-transparente, e cada desejo é apresentado como um cartão postal. Usaremos React para o frontend e CSS para estilização e animações.

Nota: Este projeto é construído principalmente usando Material UI e React.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar um projeto React e instalar dependências
• Como criar componentes funcionais em React
• Como usar React hooks, como useState, para gerenciar o estado em componentes
• Como passar dados entre componentes pai e filho usando props
• Como lidar com envios de formulários em React
• Como estilizar uma aplicação React usando CSS
• Como construir uma aplicação web visualmente atraente e interativa usando React e CSS

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Configurar um projeto React e instalar as dependências necessárias
• Criar componentes funcionais em React e gerenciar seu estado usando hooks
• Passar dados entre componentes pai e filho usando props
• Lidar com envios de formulários em uma aplicação React
• Estilizar uma aplicação React usando CSS para criar uma interface de usuário visualmente atraente e interativa
• Construir uma aplicação web completa usando React e CSS, incorporando recursos como um fundo temático de Natal, animação de queda de neve e uma parede de lista de desejos

Instale as dependências

Os arquivos do projeto React já estão no seu ambiente.

1. Instale as dependências:

npm install

2. Crie os diretórios e arquivos necessários:

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

Configure o Componente Snowflakes

Crie um componente snowflakes para exibir a animação de queda de neve.

1. No arquivo src/components/Snowflakes.js, escreva o seguinte:

// Snowflakes.js - Cria flocos de neve caindo usando CSS
import React from "react";
import "./Snowflakes.css";

const Snowflakes = () => {
  // Cria um array de divs para representar os flocos de neve
  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. No arquivo src/components/Snowflakes.css, escreva o seguinte:

/* Snowflakes.css - Estilos para os flocos de neve caindo*/
.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 eventos de clique passem */
}

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

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

.snowflake {
  animation: snowfall linear infinite;
}

Crie o Componente Add Wish Form

Este componente permite que os usuários insiram seus desejos.

1. No arquivo src/components/AddWishForm.js, escreva o seguinte:

// AddWishForm.js - Componente de formulário para adicionar novos desejos
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;

Implemente os Componentes Wish List e Postcard

Exiba os desejos adicionados em uma parede de desejos semi-transparente, em estilo de cartão postal.

1. No arquivo src/components/WishList.js, escreva o seguinte:

// WishList.js - Componente para exibir os desejos na parede de desejos
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. No arquivo src/components/Postcard.js, escreva o seguinte:

// Postcard.js - Exibe cada desejo como um cartão 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;

Estilize a Aplicação

Assegure-se de que sua aplicação tenha a aparência e o comportamento desejados.

1. No arquivo src/App.css, escreva o seguinte:

/* App.css - Estilos globais, incluindo a imagem de fundo */
.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. No arquivo src/components/Postcard.css, escreva o seguinte:

.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. No arquivo src/components/WishList.css, escreva o seguinte:

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

Monte o Componente App

Junte o componente principal da aplicação.

1. No arquivo src/App.js, escreva o seguinte:

// App.js - Componente principal da aplicação
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;

Execute o Projeto

Finalmente, é hora de ver seu Construtor de Lista de Desejos de Natal em ação.

npm start

Este comando irá iniciar a aplicação no seu navegador web padrão. Você deverá ver seu aplicativo de lista de desejos com tema natalino, com flocos de neve caindo, uma parede de desejos semitransparente e desejos em estilo postal.

Resumo

Neste projeto, você construiu com sucesso um Construtor de Lista de Desejos de Natal usando React. Ele apresenta um fundo festivo em tela cheia, um efeito de queda de neve encantador e uma parede de desejos semitransparente onde os usuários podem adicionar e visualizar desejos como cartões postais. Este projeto não apenas aprimora suas habilidades em React e CSS, mas também o coloca no espírito natalino com uma aplicação web divertida e interativa.