×

Créé une application de gestion de tache avec React.Js, Html, css et Bootstrap

Programmation

Créé une application de gestion de tache avec React.Js, Html, css et Bootstrap

Créer une application de gestion de tâches (todo list) avec React.js, HTML, CSS et Bootstrap est un excellent moyen de mettre en pratique vos compétences en développement web. Voici un tutoriel détaillé étape par étape pour réaliser cette application :

Etape 1 : Configuration initiale

1.1. Prérequis

Avant de commencer, assurez-vous d’avoir Node.js et npm (Node Package Manager) installés sur votre ordinateur. Si ce n’est pas le cas, téléchargez-les depuis le site officiel de Node.js.

1.2. Création du projet React

Ouvrez votre terminal et exécutez la commande suivante pour installer Create React App (CRA) :

npm install -g create-react-app

Tapez la commande suivante pour crée votre application Gestion-taches avec la commande Create React App (CRA)

create-react-app gestion-taches

Cela va créer un nouveau dossier appelé « gestion-taches » avec la structure de base d’une application React.

1.3. Installation de Bootstrap

React-Bootstrap est une bibliothèque populaire qui permet d’intégrer Bootstrap dans des applications React. Pour l’installer, exécutez la commande suivante dans le répertoire de votre projet :

npm install react-bootstrap bootstrap

Étape 2 : Conception de l’interface utilisateur

2.1. Création de composants React

Dans le dossier src, créez un nouveau dossier appelé components. À l’intérieur de ce dossier, créez les composants suivants :

  • TaskList.js : Ce composant affichera la liste des tâches.
  • TaskItem.js : Ce composant représentera une tâche individuelle.
  • TaskForm.js : Ce composant permettra d’ajouter de nouvelles tâches.

Je peux vous fournir un exemple simplifié d’une application de gestion de tâches en utilisant React.js, HTML, CSS et Bootstrap. Veuillez noter que cet exemple est simplifié à des fins pédagogiques et ne comprend pas de stockage persistant. Vous devrez ajouter une couche de stockage, par exemple en utilisant un backend ou en intégrant une base de données pour une application réelle. Voici le code complet

Dans le répertoire src, créez les composants suivants :

  • Task.js : Composant pour afficher une tâche.
// src/components/Task.js
import React from 'react';

const Task = ({ task, onDelete, onToggle }) => {
  return (
    <div className={`task ${task.completed ? 'completed' : ''}`}>
      <h3>{task.title}</h3>
      <p>{task.description}</p>
      <button onClick={() => onDelete(task.id)} className="delete-btn">
        Supprimer
      </button>
      <button onClick={() => onToggle(task.id)} className="toggle-btn">
        Terminé
      </button>
    </div>
  );
};

export default Task;
  • TaskForm.js : Composant pour ajouter une nouvelle tâche.
// src/components/TaskForm.js
import React, { useState } from 'react';

const TaskForm = ({ onAdd }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (title.trim() === '') return;
    onAdd({ title, description });
    setTitle('');
    setDescription('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Titre de la tâche"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        type="text"
        placeholder="Description (optionnelle)"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button type="submit">Ajouter</button>
    </form>
  );
};

export default TaskForm;
  • TaskList.js : Composant pour afficher la liste des tâches.
// src/components/TaskList.js
import React from 'react';
import Task from './Task';

const TaskList = ({ tasks, onDelete, onToggle }) => {
  return (
    <div>
      {tasks.map((task) => (
        <Task key={task.id} task={task} onDelete={onDelete} onToggle={onToggle} />
      ))}
    </div>
  );
};

export default TaskList;
  • App.js : Composant principale de l’application.

Dans src/App.js, importez les composants et utilisez-les pour créer l’application.

// src/App.js
import React, { useState } from 'react';
import './App.css';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';

function App() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, { ...task, id: tasks.length + 1, completed: false }]);
  };

  const deleteTask = (taskId) => {
    setTasks(tasks.filter((task) => task.id !== taskId));
  };

  const toggleTask = (taskId) => {
    setTasks(
      tasks.map((task) =>
        task.id === taskId ? { ...task, completed: !task.completed } : task
      )
    );
  };

  return (
    <div className="App">
      <h1>Application de gestion de tâches</h1>
      <TaskForm onAdd={addTask} />
      <TaskList tasks={tasks} onDelete={deleteTask} onToggle={toggleTask} />
    </div>
  );
}

export default App;

2.2. Création du style css

Bien sûr, voici un exemple simple de code CSS que vous pouvez utiliser pour styliser votre application de gestion de tâches. Vous pouvez ajouter ce code dans un fichier CSS (par exemple, App.css) et l’importer dans votre composant principal (App.js). Voici le code CSS :

/* App.css */

.App {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  width: 300px;
  margin: 0 auto;
}

h1 {
  font-size: 24px;
  color: #333;
}

form {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

input[type="text"] {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

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

.task {
  background-color: #fff;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task.completed {
  background-color: #e8f4e3;
  text-decoration: line-through;
}

.delete-btn {
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 5px;
}

.delete-btn:hover {
  background-color: #c82333;
}

.toggle-btn {
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.toggle-btn:hover {
  background-color: #218838;
}

Ce code CSS ajoute des styles de base à votre application, notamment des styles pour le formulaire d’ajout de tâches, la liste de tâches, les boutons de suppression et de bascule, etc. Vous pouvez personnaliser davantage ces styles en fonction de vos préférences de conception.

Assurez-vous d’importer ce fichier CSS dans votre composant principal (App.js) en ajoutant la ligne suivante au début de App.js :

import './App.css';

Ainsi, les styles seront appliqués à votre application lorsque vous exécuterez le projet.

Etape 3 : Exécutez l’application :

Vous pouvez maintenant exécuter votre application avec la commande suivante :

npm start

Votre application de gestion de tâches basique avec React.js, HTML, CSS et Bootstrap devrait maintenant fonctionner. Vous pouvez ajouter plus de fonctionnalités, de styles et de gestion de données pour personnaliser davantage votre application en fonction de vos besoins.

Related Posts

104 commentaires