使用React构建简单的待办事项列表应用

前言

随着现代Web应用的迅速发展，前端技术也在不断进步，而React作为一种流行的JavaScript库，已经成为许多开发者构建用户界面的首选工具。本篇笔记将带你从零开始，使用React来实现一个简单但功能完备的待办事项列表应用，通过这个例子，你将学习到React中的基本概念和技术。

创建项目

在开始之前，确保你已经安装了Node.js和npm（Node包管理器）。你可以到Node.js官网下载安装程序，并按照指示进行安装。

首先，我们将使用Create React App工具来快速创建一个React应用。打开终端并执行以下命令：

npx create-react-app todo-app

这将会在当前目录下创建一个名为todo-app的文件夹，其中包含了一个基本的React应用结构。

编写组件

接下来，我们将编写三个核心组件，分别是App、TodoList和TodoItem。

App组件

在src文件夹中的App.js文件中，编写以下代码：

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

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

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

  const toggleTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos[index].completed = !updatedTodos[index].completed;
    setTodos(updatedTodos);
  };

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="输入新的待办事项"
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            addTodo();
          }
        }}
      />
      <TodoList todos={todos} toggleTodo={toggleTodo} />
    </div>
  );
}

export default App;

TodoList组件

在src文件夹中，创建一个名为TodoList.js的文件，并编写以下代码：

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

function TodoList({ todos, toggleTodo }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem key={index} index={index} todo={todo} toggleTodo={toggleTodo} />
      ))}
    </ul>
  );
}

export default TodoList;

TodoItem组件

在src文件夹中，创建一个名为TodoItem.js的文件，并编写以下代码：

import React from 'react';

function TodoItem({ index, todo, toggleTodo }) {
  return (
    <li onClick={() => toggleTodo(index)} className={todo.completed ? 'completed' : ''}>
      {todo.text}
    </li>
  );
}

export default TodoItem;

样式美化

为了让应用看起来更加美观，我们会添加一些基本的CSS样式。

在src文件夹中，创建一个名为App.css的文件，并编写以下代码：

.App {
  text-align: center;
  margin-top: 50px;
}

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

li {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 5px 0;
}

.completed {
  text-decoration: line-through;
  color: #999;
}

运行应用

完成组件和样式的编写后，我们可以启动应用并在浏览器中查看它的效果。在终端中运行以下命令：

npm start

接着，系统会自动在浏览器中打开一个新的选项卡，展示出我们的待办事项列表应用。

结语

通过本篇笔记，学会了如何使用React构建一个简单而实用的待办事项列表应用。从创建React应用到编写组件、管理状态和实现基本交互，迈出了React开发的第一步。当然，这只是React世界的一小部分，还有许多高级概念和技术等待你去探索和应用。希望这篇笔记能够激发你继续学习和深入研究React的兴趣，为你的前端开发之路注入更多的动力！

学习总结

在本篇笔记中，我们深入学习了如何使用React构建一个简单的待办事项列表应用，从环境搭建到组件编写，再到样式美化，一步步地掌握了React开发的基本流程和技巧。让我们来总结一下所学内容以及未来的学习方向。

通过这个实际示例，已经掌握了以下关键概念：

React组件: 了解了如何将UI拆分成可复用的组件，提高了代码的可维护性和可读性。
状态管理: 通过使用React的useState钩子，学会了如何在组件中管理状态。在待办事项应用中，你掌握了如何动态地添加、更新和删除待办事项。
组件交互: 通过Props和事件处理，使得不同组件之间能够有效地通信。在我们的应用中，学会了如何在待办事项被点击时改变其状态。
样式美化: 了解到如何使用CSS来美化你的应用，让它看起来更加友好和专业。
React生态系统: 使用了Create React App来初始化项目，这是一个常见的工具，能够使项目搭建更加轻松。

虽然我们只是涉及了React的基础知识，但是已经具备了继续深入学习和开发更加复杂应用的基础。接下来，你可以探索以下方向来进一步提升你的React技能：

状态管理库: 了解更高级的状态管理技术，比如Redux，它能够帮助你管理大规模的状态和数据流。
路由和导航: 学习如何使用React Router来构建单页应用的路由和导航功能。
Hooks和自定义Hooks: 探索更多的React钩子，比如useEffect和useContext，以及如何创建自定义Hooks来复用逻辑。
前端框架整合: 学习如何将React与其他前端框架和库进行整合，比如使用React构建用户界面，再结合Express构建后端。
性能优化: 了解如何优化React应用的性能，减少渲染次数，提升用户体验。

使用React 实现一个简单的待办事项列表 笔记 ｜ 青训营