Construire une application Notes avec React

Introduction

Dans ce projet, nous allons créer une application de notes simple en utilisant React. L'application permettra aux utilisateurs d'ajouter, d'éditer et de supprimer des notes. Nous allons diviser le développement en plusieurs étapes, en veillant à ce que chaque étape répond à des exigences spécifiques et ajoute des fonctionnalités essentielles.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment créer un nouveau projet React avec la commande Create React App
Comment construire des composants React fonctionnels pour créer une interface utilisateur
Comment gérer l'état à l'aide du hook useState de React
Comment ajouter et gérer des notes dans l'application
Comment implémenter des fonctionnalités telles que l'ajout, l'édition et la suppression de notes
Comment gérer les interactions et les événements utilisateurs dans les composants React
Comment styliser une application React à l'aide de CSS
Comment développer une application CRUD (Create, Read, Update, Delete) de base
Comment structurer et organiser un projet React
Comment construire une interface utilisateur simple et responsive pour une application de notes

🏆 Réalisations

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

Configurer un nouveau projet React
Créer et gérer des composants React
Utiliser des hooks React tels que useState pour gérer l'état des composants
Gérer l'entrée utilisateur et les soumissions de formulaires dans une application React
Passer des données et des fonctions entre les composants parents et enfants à l'aide de props
Créer des interfaces utilisateur responsives et interactives en React
Implémenter un stockage et une manipulation de données de base dans une application React
Structurer et organiser les fichiers de code dans un projet React
Utiliser CSS pour styliser les composants React
Déboguer et résoudre les problèmes d'une application React
Suivre les meilleures pratiques pour construire une application React

Configuration du projet

Exigences :

Installation des dépendances dans le nouveau projet React.

Fonctionnalité :

Initialiser le projet avec les dépendances nécessaires et une structure de projet de base.

Étapes :

Ouvrez un terminal et accédez au dossier du projet :
```
cd notes-app
```
Vous devez exécuter cette commande dans le répertoire projet.
Installation des dépendances dans le projet :
```
npm install
```
Une fois l'installation terminée, un dossier node_modules est créé ; s'il n'existe pas, cela signifie que l'installation n'a pas été réussie.

Créer le composant Note

Exigences :

Créer un composant Note qui représente une note individuelle.
Le composant Note devrait afficher le contenu de la note, fournir un bouton d'édition et un bouton de suppression.

Fonctionnalité :

Afficher le titre et le texte d'une note.
Fournir des boutons pour éditer et supprimer une note.

Étapes :

Dans le dossier src, créez un nouveau fichier nommé Note.js.
Implémentez le composant Note comme suit :

import React from "react";

const Note = ({ note }) => {
  return (
    <div className="note">
      <h3>{note.title}</h3>
      <p>{note.text}</p>
      <button>Edit</button>
      <button>Delete</button>
    </div>
  );
};

export default Note;

✨ Vérifier la solution et pratiquer

Créer le composant App et l'état

Exigences :

Créer un composant App qui gérera les notes et leur état.
Initialiser l'état pour stocker un tableau de notes.
Implémenter des fonctions pour ajouter, supprimer et éditer des notes.

Fonctionnalité :

Conserver un tableau de notes.
Ajouter de nouvelles notes.
Supprimer des notes.
Éditer des notes.

Étapes :

Dans le dossier src, ouvrez le fichier App.js.

Importez le hook useState en haut du fichier :

// App.js
import React, { useState } from "react";
import "./App.css";
import Note from "./Note";

Configurez l'état initial et les fonctions pour ajouter, supprimer et éditer des notes dans le composant App :

// App.js
function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({ title: "", text: "" });

  const addNote = () => {
    // TODO: Implémenter la fonction addNote
  };

  const deleteNote = (id) => {
    // TODO: Implémenter la fonction deleteNote
  };

  const editNote = (id, newText) => {
    // TODO: Implémenter la fonction editNote
  };

  return <div className="App">{/* Le contenu de l'App ira ici */}</div>;
}

✨ Vérifier la solution et pratiquer

Implémenter la fonctionnalité d'ajout de note

Exigences :

Implémenter la fonction addNote pour ajouter de nouvelles notes à l'état.
Vérifier que les notes ont un titre et un texte.

Fonctionnalité :

Ajouter de nouvelles notes à l'état.
Effacer les champs d'entrée après avoir ajouté une note.

Étapes :

Implémenter la fonction addNote :

// App.js
const addNote = () => {
  if (newNote.title && newNote.text) {
    const newId = Date.now().toString();
    setNotes([...notes, { ...newNote, id: newId }]);
    setNewNote({ title: "", text: "" });
  }
};

Dans votre JSX, utilisez des gestionnaires onChange pour capturer les valeurs d'entrée et mettre à jour l'état :

// App.js
return (
  <div className="App">
    <h1>Notes App</h1>
    <div className="note-form">
      <input
        type="text"
        placeholder="Titre"
        value={newNote.title}
        onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
      />
      <textarea
        rows="4"
        cols="50"
        placeholder="Texte"
        value={newNote.text}
        onChange={(e) => setNewNote({ ...newNote, text: e.target.value })}
      />
      <button onClick={addNote}>Ajouter une note</button>
    </div>
  </div>
);

✨ Vérifier la solution et pratiquer

Implémenter la fonctionnalité de suppression de note

Exigences :

Implémenter la fonction deleteNote pour supprimer une note de l'état lorsque le bouton "Supprimer" est cliqué.

Fonctionnalité :

Supprimer une note de l'état lorsque le bouton "Supprimer" est cliqué.

Étapes :

Implémenter la fonction deleteNote :

// App.js
const deleteNote = (id) => {
  const updatedNotes = notes.filter((note) => note.id !== id);
  setNotes(updatedNotes);
};

Passer la fonction deleteNote en tant que propriété au composant Note pour activer la suppression de la note.

// App.js
<div className="App">
  <div className="note-list">
    {notes.map((note) => (
      <Note key={note.id} note={note} onDelete={deleteNote} onEdit={editNote} />
    ))}
  </div>
</div>

✨ Vérifier la solution et pratiquer

Implémenter la fonctionnalité d'édition de note

Exigences :

Implémenter la fonction editNote pour mettre à jour le texte d'une note lorsque le bouton "Éditer" est cliqué.

Fonctionnalité :

Afficher le texte de la note dans une zone de texte modifiable.
Mettre à jour le texte de la note lorsque le bouton "Enregistrer" est cliqué.

Étapes :

Implémenter la fonction editNote :

// App.js
const editNote = (id, newText) => {
  const updatedNotes = notes.map((note) =>
    note.id === id ? { ...note, text: newText } : note
  );
  setNotes(updatedNotes);
};

Mettre à jour le composant Note pour gérer l'édition :

// Note.js
import React, { useState } from "react";
const Note = ({ note, onDelete, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(note.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEdit(note.id, editedText);
    setIsEditing(false);
  };

  return (
    <div className="note">
      <div className="note-header">
        <h3>{note.title}</h3>
        <button onClick={() => onDelete(note.id)}>Supprimer</button>
      </div>
      {isEditing ? (
        <>
          <textarea
            rows="4"
            cols="50"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSave}>Enregistrer</button>
        </>
      ) : (
        <p>{note.text}</p>
      )}
      {!isEditing && <button onClick={handleEdit}>Éditer</button>}
    </div>
  );
};

✨ Vérifier la solution et pratiquer

Stylisation (App.css)

Exigences :

Appliquer une stylisation de base à l'application pour une interface visuellement agréable.

Fonctionnalité :

Styliser les composants de l'application pour améliorer l'expérience utilisateur.

Étapes :

Créez un fichier App.css et appliquez une stylisation de base à vos composants d'application. Utilisez le code CSS fourni pour styliser l'application.

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  background-color: #343a40;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.note-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #007bff;
  background-color: transparent;
  font-size: 16px;
  transition: border-bottom 0.3s;
}

.note-form input[type="text"]:focus,
.note-form textarea:focus {
  border-bottom: 2px solid #0056b3;
  outline: none;
}

.note-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-form button:hover {
  background-color: #0056b3;
}

.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.note:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 24px;
  color: #007bff;
}

.note-actions {
  display: flex;
  gap: 10px;
}

.note-actions button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-actions button:hover {
  background-color: #0056b3;
}

✨ Vérifier la solution et pratiquer

Exécution de l'application

Pour exécuter votre application Notes React :

Ouvrez votre terminal ou invite de commandes.
Vérifiez que vous êtes dans le répertoire racine du projet (où se trouve le fichier package.json).
Démarrez le serveur de développement :
```
npm start
```
Vous devriez maintenant voir une application React de base s'exécuter dans votre navigateur sur le port 8080. Nous allons construire sur cette base pour créer notre application Notes.
L'effet de la page est le suivant :

✨ Vérifier la solution et pratiquer

Récapitulatif

Dans ce projet, nous avons créé une application Notes simple en utilisant React en divisant le développement en plusieurs étapes. Nous avons configuré le projet, créé des composants pour les notes, implémenté des fonctionnalités pour ajouter, supprimer et éditer des notes, et appliqué une stylisation de base. En suivant ces étapes, vous pouvez construire une application Notes fonctionnelle et étendre ses fonctionnalités pour répondre à vos besoins.