小白入门也能写一个React版本TodoList，这个步骤照着学准没错（上）

2023-11-18 09:33:09

React入门基础

React是一个用于构建用户界面的JavaScript库，它可以帮助我们轻松创建交互式的Web应用程序。React使用组件化的设计方式，将界面分成一个个小的组件，然后通过组合这些组件来构建整个应用程序。这使得React代码非常易于维护和扩展。

TodoList概述

TodoList是一个简单的应用程序，它允许用户创建、管理和完成任务。用户可以通过输入任务内容，然后点击“添加”按钮来创建任务。当任务完成后，用户可以点击任务前面的复选框来将其标记为已完成。TodoList还可以通过拖拽来对任务进行排序。

开发环境搭建

在开始开发TodoList之前，我们需要先搭建好开发环境。首先，我们需要安装Node.js和npm。Node.js是一个JavaScript运行时环境，它允许我们在计算机上运行JavaScript代码。npm是Node.js的包管理工具，它可以帮助我们安装和管理JavaScript库。

接下来，我们需要安装React和相关工具。我们可以通过npm命令来安装这些工具。

npm install -g create-react-app

安装完成后，我们可以使用create-react-app命令来创建一个新的React项目。

create-react-app my-todo-list

这个命令将在当前目录创建一个名为my-todo-list的新项目。

创建React组件

在项目中，我们需要创建一个名为TodoList的组件，该组件用于显示和管理任务列表。我们在src目录下创建一个名为TodoList.js的文件，并在其中写入以下代码：

import React, { useState } from "react";

const TodoList = () => {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const completeTask = (task) => {
    setTasks(tasks.filter((t) => t !== task));
  };

  return (
    <div>
      <h1>TodoList</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task}>
            <input type="checkbox" onChange={() => completeTask(task)} />
            <span>{task}</span>
          </li>
        ))}
      </ul>
      <input type="text" placeholder="Add a task" onKeyPress={(e) => { if (e.key === 'Enter') addTask(e.target.value); }} />
    </div>
  );
};

export default TodoList;

这个组件使用useState hook来管理任务列表的状态。addTask函数用于向任务列表添加新任务，completeTask函数用于从任务列表中移除已完成的任务。

渲染组件

接下来，我们需要将TodoList组件渲染到页面上。我们在src/index.js文件中找到App组件，并在其中添加以下代码：

import TodoList from "./TodoList";

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

export default App;