Heim > Web-Frontend > js-Tutorial > Hauptteil

Todo-Liste in React JS

王林
Freigeben: 2024-08-01 07:34:22
Original
355 Leute haben es durchsucht

Todo list in react js

Folgen Sie mir auf LinkedIn
Folgen Sie mir auf Github.com

Klicken und lesen

Diese einfache Todo-Listen-App ist ein großartiger Ausgangspunkt für Anfänger, um sich mit den Grundlagen von React vertraut zu machen, einschließlich Zustandsverwaltung, Ereignisbehandlung und Rendering-Listen.

Schritt-für-Schritt-Anleitung zum Erstellen einer Todo-Listen-App in React

Schritt 1: Richten Sie Ihre Reaktionsumgebung ein

Bevor Sie beginnen, stellen Sie sicher, dass Node.js und npm (oder Yarn) auf Ihrem Computer installiert sind. Sie können ein neues React-Projekt mit Create React App erstellen.

Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie den folgenden Befehl aus, um ein neues React-Projekt zu erstellen:

npx create-react-app todo-list
Nach dem Login kopieren

Navigieren Sie zum Projektverzeichnis:

cd todo-list
Nach dem Login kopieren

Schritt 2: Ändern Sie src/App.js

Ersetzen Sie den Inhalt von src/App.js durch den folgenden Code:

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;
Nach dem Login kopieren

Schritt 3: Fügen Sie etwas grundlegendes Styling hinzu

Ändern Sie die Datei src/App.css, um einige grundlegende Stile hinzuzufügen:

.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;
}
Nach dem Login kopieren

Schritt 4: Führen Sie die App aus

Jetzt können Sie Ihre Todo-Listen-App mit dem folgenden Befehl ausführen:

npm start
Nach dem Login kopieren

Dieser Befehl startet den Entwicklungsserver und öffnet Ihre neue React-Anwendung in Ihrem Standard-Webbrowser.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonTodo-Liste in React JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage