React Todo App 教程

想要学习如何使用 React 创建一个 Todo 应用程序吗？以下是一个简单的教程，带你一步步完成。

简介

React Todo App 是一个简单的应用程序，用于展示如何使用 React 的基本概念和组件来构建用户界面。在这个教程中，我们将学习如何创建一个列表，允许用户添加、删除和查看待办事项。

学习目标

完成本教程后，你将能够：

创建一个新的 React 应用程序
使用 React 组件来构建 UI
管理状态
使用事件处理和条件渲染

环境准备

在开始之前，请确保你已经安装了 Node.js 和 npm。你可以通过以下命令来检查是否安装：

node -v
npm -v

创建项目

首先，我们需要创建一个新的 React 应用程序。打开命令行，并运行以下命令：

npx create-react-app react-todo-app

这将创建一个新的 React 项目，名为 react-todo-app。

项目结构

创建项目后，你将看到以下目录结构：

react-todo-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── index.js
│   ├── App.js
│   ├── components/
│   │   └── ...
│   └── ...
├── .gitignore
├── package.json
├── package-lock.json
└── ...

开始编码

现在，让我们开始编写代码。首先，打开 src/App.js 文件，并替换以下内容：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState('');

  const addTodo = () => {
    if (todo) {
      setTodos([...todos, todo]);
      setTodo('');
    }
  };

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

  return (
    <div className="App">
      <h1>React Todo App</h1>
      <input
        type="text"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
        placeholder="添加待办事项"
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

这段代码创建了一个简单的 Todo 应用程序，它允许用户添加和删除待办事项。

运行项目

现在，我们已经完成了基本的 Todo 应用程序。让我们运行它来查看效果。

在命令行中，进入 react-todo-app 目录，并运行以下命令：

npm start

这将在本地启动一个开发服务器，并在浏览器中打开 http://localhost:3000。

扩展阅读

想要进一步学习 React？以下是一些本站提供的扩展阅读链接：

希望这个教程能帮助你入门 React Todo App 的开发。祝你好运！🌟