使用React创建一个简单的ToDo应用

在这篇博客中，我们将使用React来创建一个简单的ToDo应用。ToDo应用是一个非常常见的应用程序示例，它可以帮助我们组织和管理日常任务。

准备工作

首先，确保你已经安装了Node.js和npm。在开始之前，你需要创建一个新的React应用。打开终端，并在你选择的目录下运行以下命令：

npx create-react-app todo-app

这将创建一个名为todo-app的新React应用。

现在，我们进入todo-app目录并运行以下命令以启动开发服务器：

cd todo-app
npm start

这将在浏览器中打开一个新的窗口，并显示React应用的默认页面。

创建ToDo组件

接下来，我们将在src目录下创建一个新的文件夹components，在其中创建一个名为ToDo.js的新组件。

import React, { useState } from 'react';

const ToDo = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddToDo = () => {
    if (inputValue) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  return (
    <div>
      <h1>ToDo App</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddToDo}>Add ToDo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

export default ToDo;

在这个组件中，我们使用了React的useState钩子来跟踪应用的状态。todos状态用于存储所有的ToDo任务，inputValue状态用于存储输入框的值。

handleAddToDo函数用于在点击"Add ToDo"按钮时将新的ToDo任务添加到todos状态中，并清空输入框的值。

在组件的返回值中，我们渲染了一个标题和一个输入框。当输入框的值发生变化时，我们通过调用onChange事件处理程序更新inputValue状态。当点击"Add ToDo"按钮时，我们调用handleAddToDo函数来添加新的ToDo任务。

最后，我们使用map函数将todos状态中的每个ToDo任务渲染为一个列表项。

在App组件中使用ToDo组件

现在我们需要在App组件中使用我们刚刚创建的ToDo组件。打开src目录下的App.js文件，并将其修改为以下内容：

import React from 'react';
import ToDo from './components/ToDo';

const App = () => {
  return (
    <div className="App">
      <ToDo />
    </div>
  );
};

export default App;

在这里，我们简单地将ToDo组件包装在了App组件中。

运行应用

现在，我们可以在终端中运行应用。返回终端，并确保你仍然在todo-app目录下。运行以下命令以启动开发服务器：

npm start

现在，在浏览器中打开以下URL：http://localhost:3000。你将看到一个包含一个输入框和一个"Add ToDo"按钮的页面。

当你在输入框中输入一些内容并点击"Add ToDo"按钮时，应用将会将该ToDo任务添加到列表中显示出来。

总结

在本博客中，我们学习了如何使用React创建一个简单的ToDo应用。我们创建了一个ToDo组件，它可以跟踪ToDo任务的状态并在页面上显示它们。通过创建新的ToDo任务和点击"Add ToDo"按钮，我们可以将新的任务添加到列表中。

React是一个非常强大且受欢迎的前端框架，它提供了许多有用的特性和工具，使得开发这样的应用变得更加容易。希望这篇博客能对你了解React和构建ToDo应用有所帮助。

本文来自极简博客，作者：冰山美人，转载请注明原文链接：使用React创建一个简单的ToDo应用