×

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

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.

100 commentaires

Avatar
Rrzuoy

exact allergy pills can flonase make you sleepy exact allergy pills

Avatar
penthaus_oiSa

большой пентхаус купить https://nedviprof.ru/.

Avatar
Oqosjb

heartburn medicine without calcium order allopurinol without prescription

Avatar
Rhdxgb

accutane 40mg generic buy isotretinoin sale buy accutane without a prescription

Avatar
Rubfxv

diphenhydramine hcl nighttime sleep aid purchase meloset without prescription

Avatar
Mhrvze

order generic amoxicillin 1000mg amoxicillin 1000mg cost amoxicillin 250mg canada

Avatar
Jgnbks

sleep prescription online buy modafinil online

Avatar
머니 트레인

lfchungary.com
하나씩, 온실은 눈이 볼 수있는만큼 확장됩니다.

Avatar
Rquaal

zithromax 250mg over the counter purchase zithromax azithromycin 500mg drug

Avatar
Drlqfm

order neurontin 100mg without prescription buy gabapentin no prescription

Avatar
Tlucjv

buy azithromycin pills cheap azipro 500mg order azithromycin 250mg sale

Avatar
Dytrpy

buy lasix pills for sale furosemide order online

Avatar
Bcrnrs

omnacortil 20mg price buy omnacortil generic order prednisolone 20mg generic

Avatar
Zahzyb

buy amoxicillin generic amoxil 1000mg cost buy generic amoxicillin

Avatar
Uxhyxe

order doxycycline 100mg pills doxycycline online

Avatar
Gylikh

order albuterol generic buy ventolin for sale best allergy medicine for adults

Avatar
Khqwco

augmentin 375mg sale order augmentin 625mg sale

Avatar
Eeuesv

cost levothroid synthroid 150mcg oral order synthroid 100mcg without prescription

Avatar
Sknszh

buy vardenafil 20mg without prescription order levitra 20mg generic

Avatar
Uydpqp

clomiphene online clomiphene 100mg drug clomid over the counter

Avatar
Ldzgra

order tizanidine 2mg generic order tizanidine online tizanidine drug

Avatar
Qblrvc

rybelsus price semaglutide 14mg cheap buy rybelsus online cheap

Avatar
Xntthw

deltasone 20mg over the counter purchase prednisone generic buy prednisone generic

Avatar
Crgfwg

order rybelsus generic purchase rybelsus online cheap semaglutide 14mg pill

Avatar
Rusdcv

accutane 10mg canada purchase absorica pills buy accutane 20mg

Avatar
Wmzmpr

albuterol price ventolin inhalator for sale online buy albuterol 2mg generic

Avatar
Tzcjzi

buy amoxil paypal buy amoxil 250mg without prescription amoxil us

Avatar
Atonhu

order augmentin 1000mg amoxiclav brand order augmentin 375mg online

Avatar
Mgqgts

buy zithromax generic order zithromax 250mg without prescription brand zithromax

Avatar
Wjaerd

buy levothyroxine online cheap synthroid tablets order synthroid 100mcg sale

Avatar
Kbaaga

buy omnacortil 5mg generic prednisolone 10mg cheap prednisolone pills

Avatar
Kxjusw

order clomid clomid 50mg pills order generic clomiphene 50mg

Avatar
Bhbdrk

neurontin without prescription order gabapentin without prescription gabapentin 800mg pills

Avatar
GichardOmita

Cialis Dosis
(Admin)
Cialis 5 mg prezzo prezzo cialis 5 mg originale in farmacia tadalafil 5 mg prezzo

Avatar
SLhaneDes

Cialis Dosage
(Admin)
Cialis 5 mg prezzo tadalafil 5 mg prezzo tadalafil 5 mg prezzo

Avatar
Tdwyaa

furosemide online order order lasix 40mg online cheap furosemide generic

Avatar
Bxftkl

viagra online order sildenafil cost cheap sildenafil pill

Avatar
Pnrdef

buy monodox sale order doxycycline 100mg sale oral doxycycline

Avatar
Jmqrnu

generic semaglutide 14 mg buy rybelsus sale order generic rybelsus 14mg

Avatar
Pbkkml

real casino games chumba casino real online gambling

Avatar
Nezxol

vardenafil 20mg for sale levitra order online vardenafil where to buy

Avatar
Obdamh

buy lyrica pill pregabalin 150mg over the counter generic pregabalin 75mg

Avatar
Ctxoys

buy plaquenil generic plaquenil 400mg uk buy hydroxychloroquine tablets

Avatar
EarnestGew

I’m gone to say to my little brother, that he should also go to see this webpage on regular basis to obtain updated from newest news.
mbit casino best slots

Avatar
DichaelKag

Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is fantastic, let alone the content!
https://secure.squirtingvirgin.com/track/MzAxODgyLjUuMjguMjguMC4wLjAuMC4w

Avatar
Heuiko

buy triamcinolone generic how to buy triamcinolone order aristocort generic

Avatar
Iaszbd

cialis 10mg sale cialis mail order tadalafil 5mg over the counter

Avatar
FobertSex

It’s awesome designed for me to have a web page, which is valuable in favor of my experience. thanks admin
cloudbet restricted countries

Avatar
Gpxfdf

clarinex for sale order clarinex 5mg without prescription order desloratadine generic

Avatar
Jnlgea

order cenforce 50mg without prescription order cenforce 100mg for sale purchase cenforce pills

Avatar
Uatoco

buy generic methylprednisolone for sale depo-medrol pills canada medrol price

Avatar
Fgvuya

cheap research paper writers cheap paper writing services order an essay online

Avatar
Ioikrr

inderal 20mg tablet plavix tablet order clopidogrel sale

Avatar
Nunwki

buy methotrexate 2.5mg online order generic methotrexate 5mg buy warfarin 5mg without prescription

Avatar
Iadqmv

buy mobic 7.5mg sale buy celebrex generic celecoxib price

Avatar
Nyzuot

metoclopramide 10mg pill buy generic metoclopramide for sale buy cozaar 50mg online cheap

Avatar
Hwyspl

flomax 0.2mg generic tamsulosin 0.4mg price buy celecoxib generic

Avatar
Fvemdm

nexium 20mg usa buy esomeprazole topamax medication

Avatar
Iqlirv

order zofran 4mg for sale order ondansetron pill buy aldactone 100mg pill

Avatar
Petubo

oral sumatriptan 50mg order sumatriptan pill levofloxacin over the counter

Avatar
Vnfrtt

zocor for sale online buy valtrex 500mg generic buy valacyclovir generic

Avatar
Soeqea

dutasteride generic buy cheap generic dutasteride order zantac sale

Avatar
Qfxjvx

buy acillin generic order vibra-tabs without prescription amoxicillin uk

Avatar
Pwxmvr

purchase finpecia buy diflucan 200mg pills buy fluconazole

Avatar
Hqdods

cipro order – order augmentin 1000mg without prescription buy generic amoxiclav

Avatar
Lknnxv

buy cipro 500mg pill – cipro online order buy clavulanate pills for sale

Avatar
LhaneDes

Hmm is anyone else having problems with the pictures on this blog loading? I’m trying to determine if its a problem on my end or if it’s the blog. Any suggestions would be greatly appreciated.

http://toolbarqueries.google.je/url?q=https://didvirtualnumbers.com/de/

Avatar
Jhqwtp

buy generic ciprofloxacin over the counter – amoxicillin price
erythromycin 250mg generic

Avatar
Dklznc

flagyl 200mg cost – terramycin uk buy zithromax 250mg generic

Avatar
Ffdwka

buy ivermectin stromectol – tetracycline online order order tetracycline 250mg online

Avatar
Vzlxgm

ivermectin price – order sumycin generic purchase tetracycline pill

Avatar
Dsggql

valacyclovir price – diltiazem 180mg uk zovirax 400mg ca

Avatar
Pkrous

generic acillin buy penicillin online cheap order amoxicillin

Avatar
Wcwxaw

flagyl 200mg without prescription – buy azithromycin cheap buy azithromycin 250mg without prescription

Avatar
Crfjdj

order lasix generic – buy minipress 2mg pills captopril 25 mg pills

Avatar
Aapxnl

glycomet 1000mg canada – order duricef 250mg sale order lincocin generic

Avatar
vpn special code

Asking questions are genuinely pleasant thing if you are not understanding anything fully,
except this article offers good understanding yet.

Feel free to visit my web page – vpn special code

Avatar
Wvcqcq

buy clozaril generic – order clozapine 50mg pill order famotidine 40mg online cheap

Avatar
Ixbhiv

retrovir 300mg pills – allopurinol 100mg cost

Avatar
Qwloer

order clomipramine 50mg – cost amoxapine 50mg doxepin sale

Avatar
Qzzmoz

buy seroquel 100mg online – cheap eskalith generic purchase eskalith generic

Avatar
Zrfuzg

buy atarax 25mg for sale – hydroxyzine 10mg canada endep uk

Avatar
Ulhayb

clavulanate cheap – generic augmentin how to get cipro without a prescription

Avatar
Uslxqq

cheap amoxicillin generic – ceftin 250mg drug buy cipro 1000mg generic

Avatar
Micah

I read this paragraph completely regarding the difference of
latest and previous technologies, it’s remarkable article.

My website vpn special coupon code 2024

Avatar
Rihoqy

azithromycin 500mg pills – order tindamax generic order generic ciplox 500mg

Avatar
Ojwaks

cleocin 300mg for sale – buy cefixime 100mg without prescription purchase chloromycetin generic

Avatar
Urcviv

stromectola online – buy aczone without a prescription order cefaclor online cheap

Avatar
Daisy

Hello! Someone in my Facebook group shared this site with us so I came to give it a look.

I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers!
Excellent blog and excellent style and design.

Take a look at my web page: vpn code 2024

Avatar
Eigqpu

albuterol oral – order theo-24 Cr 400 mg pills theo-24 Cr medication

Avatar
Yahwps

buy medrol 4mg – buy generic montelukast over the counter order azelastine 10ml sale

Avatar
Klowzb

clarinex cost – purchase beclamethasone generic albuterol brand

Avatar
Gckekd

order metformin – order januvia 100mg for sale generic acarbose

Avatar
Hyuulc

order generic glyburide 5mg – glucotrol tablet buy forxiga 10 mg without prescription

Avatar
Emldkg

order generic prandin – prandin 1mg pills jardiance online buy

Avatar
Fkaizn

rybelsus 14mg pills – order semaglutide 14mg pills DDAVP spray

Avatar
Slfnwy

ketoconazole 200 mg cheap – nizoral online order sporanox 100 mg online cheap

Avatar
Vigrlx

how to get digoxin without a prescription – oral lasix 100mg purchase furosemide generic

Avatar
Tvnfol

metoprolol 100mg oral – losartan online buy order nifedipine pill

Avatar
Phil

Admiring the hard work you put into your blog and detailed information you present.
It’s nice to come across a blog every once in a while that isn’t
the same unwanted rehashed information. Excellent read! I’ve saved your
site and I’m including your RSS feeds facebook vs eharmony to find love online
my Google account.

Laisser un commentaire