【边做边学】利用React创建交互式ToDo列表

在前端开发中，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开发有所帮助！