如果你正在学习React，那么Todo列表是一个很好的入门项目。在这个指南中，我们将介绍如何创建一个React Todo应用。

1. 项目设置

首先，确保你已经安装了Node.js和npm。然后，你可以使用以下命令创建一个新的React应用：

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

2. 项目结构

一个基本的React Todo应用通常包含以下文件和文件夹：

  • src/: 项目的源代码
    • src/App.js: 应用的入口文件
    • src/components/: 存放React组件
      • src/components/TodoList.js: Todo列表组件
      • src/components/TodoItem.js: 单个Todo项组件
  • public/: 静态文件
    • public/index.html: HTML入口文件

3. 创建组件

在src/components/文件夹中，你可以创建两个组件：TodoList和TodoItem。

TodoList.js

import React from 'react';
import TodoItem from './TodoItem';

const TodoList = ({ todos, onToggleComplete, onRemoveTodo }) => (
  <ul>
    {todos.map(todo => (
      <TodoItem key={todo.id} todo={todo} onToggleComplete={onToggleComplete} onRemoveTodo={onRemoveTodo} />
    ))}
  </ul>
);

export default TodoList;

TodoItem.js

import React from 'react';

const TodoItem = ({ todo, onToggleComplete, onRemoveTodo }) => (
  <li>
    <input
      type="checkbox"
      checked={todo.completed}
      onChange={() => onToggleComplete(todo.id)}
    />
    {todo.text}
    <button onClick={() => onRemoveTodo(todo.id)}>X</button>
  </li>
);

export default TodoItem;

4. 使用组件

在src/App.js中，你可以使用TodoList和TodoItem组件来构建你的应用。

import React, { useState } from 'react';
import TodoList from './components/TodoList';

const App = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习React', completed: false },
    { id: 2, text: '完成Todo项目', completed: false }
  ]);

  const toggleComplete = id => {
    const newTodos = todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
    setTodos(newTodos);
  };

  const removeTodo = id => {
    const newTodos = todos.filter(todo => todo.id !== id);
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>我的Todo列表</h1>
      <TodoList todos={todos} onToggleComplete={toggleComplete} onRemoveTodo={removeTodo} />
    </div>
  );
};

export default App;

5. 扩展阅读

如果你想要了解更多关于React的信息，可以阅读以下文章：

希望这个指南能帮助你开始你的React Todo项目！🚀

Todo_List