React实现待办 | 青训营

小企鹅600
51 阅读2分钟

标题：使用React创建一个功能简单但强大的待办事项列表应用

待办事项列表是我们日常生活中不可或缺的一部分，它帮助我们跟踪任务、计划和目标。在现代的Web应用中，使用React框架可以轻松地创建一个交互性强大的待办事项列表应用。本文将向您展示如何使用React构建一个简单但功能齐全的待办事项列表应用，用户可以添加、编辑和删除待办事项。

准备工作

在开始之前，确保您已经安装了Node.js和npm（Node包管理器）。您可以在命令行中运行以下命令来检查它们是否已安装：

node -v
npm -v

如果它们没有安装，您可以从官方网站下载并安装它们。

创建React应用

首先，我们需要创建一个新的React应用程序。在命令行中执行以下命令：

npx create-react-app todo-list-app
cd todo-list-app

然后，您可以使用您喜欢的代码编辑器打开项目文件夹。

编写组件

在src文件夹中，创建一个名为"components"的文件夹。在其中创建以下三个组件文件：

  1. TodoList.js
import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const deleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;
  1. App.js
import React from 'react';
import './App.css';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;
  1. App.css
.App {
  text-align: center;
  margin-top: 50px;
  font-family: Arial, sans-serif;
}

运行应用

现在，您已经编写了组件，让我们运行应用并查看它的功能。

在项目文件夹中，运行以下命令：

npm start

您的待办事项列表应用将在浏览器中打开。您可以尝试添加、编辑和删除待办事项，应用会实时更新。

结论

通过使用React，您可以快速构建出一个简单但功能齐全的待办事项列表应用。本文向您展示了如何创建一个允许用户添加、编辑和删除待办事项的基本应用。当然，这只是一个开始，您可以根据需求进一步扩展和美化应用，例如添加编辑功能、状态管理、样式优化等。

avatar
文章
阅读
粉丝