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.
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
Navigieren Sie zum Projektverzeichnis:
cd todo-list
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;
Ä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; }
Jetzt können Sie Ihre Todo-Listen-App mit dem folgenden Befehl ausführen:
npm start
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!