Construire une application de liste de souhaits de Noël avec React

Introduction

Ce projet vous guide dans la construction d'une application web de création de liste de souhaits de Noël festive utilisant React. L'application propose un magnifique fond d'écran à thème de Noël en pleine écran et une charmante animation de neige, renforçant l'ambiance de fête. Les utilisateurs peuvent ajouter des souhaits à un mur de souhaits semi-transparent, et chaque souhait est présenté sous forme de carte postale. Nous utiliserons React pour le frontend et CSS pour la mise en forme et les animations.

Note : Ce projet est principalement construit à l'aide de Material UI et React.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer un projet React et installer les dépendances
• Comment créer des composants fonctionnels dans React
• Comment utiliser des hooks React, tels que useState, pour gérer l'état dans les composants
• Comment passer des données entre les composants parents et enfants à l'aide de props
• Comment gérer les soumissions de formulaire dans React
• Comment styliser une application React à l'aide de CSS
• Comment construire une application web visuellement attrayante et interactive à l'aide de React et CSS

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Configurer un projet React et installer les dépendances nécessaires
• Créer des composants fonctionnels dans React et gérer leur état à l'aide de hooks
• Passer des données entre les composants parents et enfants à l'aide de props
• Gérer les soumissions de formulaire dans une application React
• Styliser une application React à l'aide de CSS pour créer une interface utilisateur visuellement attrayante et interactive
• Construire une application web complète à l'aide de React et CSS, en incorporant des fonctionnalités telles qu'un fond d'écran à thème de Noël, une animation de neige et un mur de liste de souhaits

Configurez votre projet

Les fichiers du projet React sont déjà dans votre environnement.

1. Installez les dépendances :

npm install

2. Créez les répertoires et fichiers nécessaires :

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

Configurez le composant Snowflakes

Créez un composant Snowflakes pour afficher l'animation de neige tombante.

1. Dans le fichier src/components/Snowflakes.js, écrivez ce qui suit :

// Snowflakes.js - Crée des flocons de neige tombants à l'aide de CSS
import React from "react";
import "./Snowflakes.css";

const Snowflakes = () => {
  // Crée un tableau de divs pour représenter les flocons de neige
  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. Dans le fichier src/components/Snowflakes.css, écrivez ce qui suit :

/* Snowflakes.css - Styles pour les flocons de neige tombants*/
.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;
  /* Permet aux événements de clic de passer à travers */
}

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

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

.snowflake {
  animation: snowfall linear infinite;
}

Créez le composant Formulaire d'ajout de souhaits

Ce composant permet aux utilisateurs d'entrer leurs souhaits.

1. Dans le fichier src/components/AddWishForm.js, écrivez ce qui suit :

// AddWishForm.js - Composant de formulaire pour ajouter de nouveaux souhaits
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="Votre souhait"
        variant="outlined"
        value={wish}
        onChange={(e) => setWish(e.target.value)}
        sx={{ mr: 2 }}
      />
      <Button variant="contained" color="secondary" type="submit">
        Soumettre le souhait
      </Button>
    </Box>
  );
}

export default AddWishForm;

Implémentez les composants Liste de souhaits et Carte postale

Affichez les souhaits ajoutés sur un mur de souhaits semi-transparent dans un style de carte postale.

1. Dans le fichier src/components/WishList.js, écrivez ce qui suit :

// WishList.js - Composant pour afficher les souhaits sur le mur de souhaits
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. Dans le fichier src/components/Postcard.js, écrivez ce qui suit :

// Postcard.js - Affiche chaque souhait sous forme de carte postale
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;

Stylez l'application

Vérifiez que votre application a l'allure et le charme souhaités.

1. Dans le fichier src/App.css, écrivez ce qui suit :

/* App.css - Styles globaux, y compris l'image d'arrière-plan */
.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. Dans le fichier src/components/Postcard.css, écrivez ce qui suit :

.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. Dans le fichier src/components/WishList.css, écrivez ce qui suit :

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

Assemblez le composant App

Rassemblez le composant principal de l'application.

1. Dans le fichier src/App.js, écrivez ce qui suit :

// App.js - Composant principal de l'application
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 ? "Fermer" : "Ajouter un souhait"}
        </Button>
        {showForm && <AddWishForm onAddWish={handleAddWish} />}
        <WishList wishes={wishes} onRemoveWish={handleRemoveWish} />
      </Box>
    </Container>
  );
}

export default App;

Exécutez le projet

Enfin, il est temps de voir votre générateur de liste de souhaits de Noël en action.

npm start

Cette commande lancera l'application dans votre navigateur web par défaut. Vous devriez voir votre application de liste de souhaits au thème de Noël avec des flocons de neige tombant, un mur de souhaits semi-transparent et des souhaits dans le style de cartes postales.

Sommaire

Dans ce projet, vous avez réussi à construire un générateur de liste de souhaits de Noël en utilisant React. Il présente un fond festif plein écran, un effet de neige charmant et un mur de souhaits semi-transparent où les utilisateurs peuvent ajouter et visualiser leurs souhaits sous forme de cartes postales. Ce projet ne vous améliore pas seulement vos compétences en React et en CSS, mais vous met également dans l'esprit des fêtes avec une application web amusante et interactive.