React 案例研究

在这个案例研究中，我们将探讨如何使用 React 构建一个简单的待办事项应用。React 是一个用于构建用户界面的 JavaScript 库，它使得开发动态和交互式的网页应用变得简单。

案例概述

以下是我们将要实现的待办事项应用的基本功能：

• 添加待办事项
• 删除待办事项
• 完成待办事项

技术栈

• React
• JSX
• CSS
• JavaScript

快速开始

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

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

接下来，你可以开始编写你的组件了。

组件结构

以下是我们的应用的基本组件结构：

• App.js: 应用程序的根组件。
• TodoList.js: 待办事项列表组件。
• TodoItem.js: 单个待办事项组件。

App.js

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

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

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

  const removeTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>待办事项应用</h1>
      <TodoList todos={todos} removeTodo={removeTodo} />
      <AddTodo addTodo={addTodo} />
    </div>
  );
}

export default App;

TodoList.js

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

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

export default TodoList;

TodoItem.js

import React from 'react';

function TodoItem({ todo, removeTodo }) {
  return (
    <li>
      {todo}
      <button onClick={() => removeTodo(todo)}>删除</button>
    </li>
  );
}

export default TodoItem;

扩展阅读

想要了解更多关于 React 的知识？请访问我们的 React 教程。

<center><img src="https://cloud-image.ullrai.com/q/react_logo/" alt="React Logo"/></center>