React 入门实践：轻松构建 TodoList 功能

2023-12-05 09:41:30

在现代前端开发中，React 已然成为最受欢迎的 JavaScript 框架之一，其声明式编程范式和组件化的架构使开发人员能够轻松构建复杂的应用程序。如果您正在探索前端开发领域，或者想深入了解 React，那么构建一个 TodoList 功能是一个非常好的起点。

React 初探：基础概念

React 是一个用于构建用户界面的 JavaScript 库，它采用声明式编程范式，这意味着您可以告诉 React 您想要什么，而不必具体说明如何实现它。React 的组件化架构允许您将应用程序分解成更小的可重用组件，这使得代码更易于管理和维护。

实现 TodoList 功能：逐步指南

1. 项目初始化

首先，创建一个新的 React 项目，可以使用 create-react-app 工具。该工具将为您生成一个包含所有必要文件和依赖项的项目结构。

npx create-react-app my-todo-list

2. 创建 TodoList 组件

在 src 目录下创建一个名为 TodoList.js 的文件，并添加以下代码：

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);

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

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

  return (
    <div>
      <input type="text" placeholder="Add a new todo" onChange={(e) => addTodo(e.target.value)} />
      <ul>
        {todos.map((todo) => (
          <li key={todo}>
            {todo}
            <button onClick={() => removeTodo(todo)}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

3. 渲染 TodoList 组件

在 src/App.js 文件中，导入 TodoList 组件并将其渲染到页面中：

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

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

export default App;