在前端开发中，React是一种强大的JavaScript库，用于构建用户界面。本文将介绍如何使用React创建一个简单但功能强大的交互式ToDo列表，让您快速入门React开发。
步骤1：创建React应用
首先，确保您的计算机上已经安装了Node.js和npm。然后，打开终端并执行以下命令：
npx create-react-app todo-list cd todo-list npm start
这将创建一个名为todo-list的新React应用，并启动开发服务器。
步骤2：编写ToDo组件
在src文件夹中，创建一个名为Todo.js的新文件，并添加以下代码：
import React, { useState } from 'react'; const Todo = () => { const [todos, setTodos] = useState([]); const [inputValue, setInputValue] = useState(''); const handleInputChange = (e) => { setInputValue(e.target.value); }; const handleAddTodo = () => { if (inputValue.trim() !== '') { setTodos([...todos, inputValue]); setInputValue(''); } }; const handleRemoveTodo = (index) => { const newTodos = todos.filter((_, i) => i !== index); setTodos(newTodos); }; return ( <div> <h1>ToDo List</h1> <input type="text" value={inputValue} onChange={handleInputChange} placeholder="Add a new todo" /> <button onClick={handleAddTodo}>Add</button> <ul> {todos.map((todo, index) => ( <li key={index}> {todo} <button onClick={() => handleRemoveTodo(index)}>Remove</button> </li> ))} </ul> </div> ); }; export default Todo;
步骤3：在应用中使用ToDo组件
现在，我们在src文件夹中的App.js文件中使用Todo组件：
import React from 'react'; import './App.css'; import Todo from './Todo'; function App() { return ( <div className="App"> <Todo /> </div> ); } export default App;
步骤4：启动应用
在终端中，运行npm start命令启动应用。您将在浏览器中看到一个交互式的ToDo列表，可以添加新的ToDo，并点击删除按钮删除已完成的ToDo。
结论
通过本文的示例，您学习了如何使用React创建一个简单但功能强大的交互式ToDo列表。这只是React的入门示例，您可以根据需要扩展和定制此应用。希望本文对您开始React开发有所帮助！
