Liste de tâches dans React js

Suivez-moi sur LinkedIn
Suivez-moi sur Github.com

Cliquez et lisez

Cette application simple Todo List est un excellent point de départ pour les débutants qui souhaitent se familiariser avec les principes fondamentaux de React, notamment la gestion des états, la gestion des événements et le rendu des listes.

Guide étape par étape pour créer une application de liste de tâches dans React

Étape 1 : Configurez votre environnement React

Avant de commencer, assurez-vous que Node.js et npm (ou Yarn) sont installés sur votre machine. Vous pouvez créer un nouveau projet React à l'aide de Create React App.

Ouvrez votre terminal ou votre invite de commande et exécutez la commande suivante pour créer un nouveau projet React :

npx create-react-app todo-list

Accédez au répertoire du projet :

cd todo-list

Étape 2 : Modifier src/App.js

Remplacez le contenu de src/App.js par le code suivant :

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleAddTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { text: input, completed: false }]);
      setInput('');
    }
  };

  const handleToggleComplete = (index) => {
    const newTodos = todos.map((todo, i) => {
      if (i === index) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });
    setTodos(newTodos);
  };

  const handleDeleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Todo List</h1>
        <div>
          <input
            type="text"
            value={input}
            onChange={handleInputChange}
            placeholder="Add a new todo"
          />
          <button onClick={handleAddTodo}>Add</button>
        </div>
        <ul>
          {todos.map((todo, index) => (
            <li key={index}>
              <span
                style={{
                  textDecoration: todo.completed ? 'line-through' : 'none',
                }}
                onClick={() => handleToggleComplete(index)}
              >
                {todo.text}
              </span>
              <button onClick={() => handleDeleteTodo(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </header>
    </div>
  );
}

export default App;

Étape 3 : ajouter un style de base

Modifiez le fichier src/App.css pour ajouter un style de base :

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

input {
  padding: 10px;
  margin-right: 10px;
  font-size: 16px;
}

button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 10px 0;
  background-color: #444;
  border-radius: 5px;
}

li span {
  cursor: pointer;
}

Étape 4 : Exécutez l'application

Maintenant, vous pouvez exécuter votre application Todo List avec la commande suivante :

npm start

Cette commande démarre le serveur de développement et ouvre votre nouvelle application React dans votre navigateur Web par défaut.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!