React 系列一：初识 TodoList

前端

2023-12-11 04:59:30

React，作为当下最火爆的前端框架之一，凭借着其强大的性能和丰富的生态，吸引了众多开发者的青睐。如果你想学习 React，那么本系列教程将为你提供一个很好的起点。

在第一篇教程中，我们将介绍 React 的基本概念，并通过一个简单的 TodoList 项目来学习如何使用 React。该项目将带领你一步一步掌握 React 的基本用法，包括如何创建组件、如何处理数据、以及如何使用路由等。

React 介绍

React 是一个用于构建用户界面的 JavaScript 库。它使用了一种称为声明式编程的范式，这使得代码更容易编写和维护。React 的主要优点包括：

声明式编程：React 使用声明式编程的范式，这使得代码更容易编写和维护。在 React 中，你只需你想让你的 UI 长什么样子，而无需关心它是如何工作的。
虚拟 DOM：React 使用虚拟 DOM 来提高性能。虚拟 DOM 是一个轻量级的 DOM 表示，它存储在内存中。当 React 检测到状态的变化时，它只需更新虚拟 DOM，然后将更新后的虚拟 DOM 与实际的 DOM 进行比较，最后只更新那些真正发生变化的元素。
组件化：React 采用组件化开发模式，将复杂的用户界面分解为更小的、可重用的组件。这使得代码更容易组织和维护。

TodoList 项目

TodoList 项目是一个简单的待办事项列表应用程序。它允许你添加、删除和标记已完成的任务。在本教程中，我们将使用 React 来构建这个项目。

首先，我们需要创建一个新的 React 项目。你可以使用 create-react-app 脚手架来创建一个新的 React 项目。

npx create-react-app todolist

创建一个新的 React 项目后，你将看到一个名为 src 的文件夹。src 文件夹包含了你的项目的所有源代码。

在 src 文件夹中，你将看到一个名为 App.js 的文件。App.js 是你的应用程序的主组件。

import React, { useState } from "react";

function App() {
  const [tasks, setTasks] = useState([]);

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

  const removeTask = (index) => {
    const newTasks = tasks.filter((task, i) => i !== index);
    setTasks(newTasks);
  };

  const toggleTask = (index) => {
    const newTasks = tasks.map((task, i) => {
      if (i === index) {
        return { ...task, completed: !task.completed };
      }
      return task;
    });
    setTasks(newTasks);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            <input type="checkbox" checked={task.completed} onChange={() => toggleTask(index)} />
            <span>{task.text}</span>
            <button onClick={() => removeTask(index)}>X</button>
          </li>
        ))}
      </ul>
      <input type="text" placeholder="Add a new task" onKeyPress={(e) => { if (e.key === 'Enter') { addTask(e.target.value); e.target.value = ''; } }} />
    </div>
  );
}

export default App;

App 组件是一个函数组件。它使用 useState 钩子来存储任务列表。

addTask 函数用于向任务列表中添加新的任务。

removeTask 函数用于从任务列表中删除任务。

toggleTask 函数用于标记任务为已完成或未完成。

我们还可以看到一个名为 App.css 的文件。App.css 是你的应用程序的样式表。

body {
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #ccc;
}

input[type="checkbox"] {
  margin-right: 8px;
}

input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-left: 8px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #ccc;
  cursor: pointer;
}

button:hover {
  background-color: #ddd;
}