构建清单应用的简单步骤：探索React开发的新境界

2023-12-14 23:35:28

React，一个备受追捧的前端JavaScript框架，以其强大的功能和易用性闻名。在这个教程中，我们将携手构建一个简单的清单应用，让你亲身体验React的魅力。

初识React

React是一个构建用户界面的库，它采用声明式编程的方式，让你用一种更自然的方式你想要呈现的内容。React的组件化思想使代码组织更清晰、更易于维护。

搭建脚手架

首先，我们需要一个脚手架来初始化我们的React项目。你可以使用create-react-app工具，它将为你生成一个开箱即用的项目结构。

npx create-react-app todo-list

创建组件

React应用由组件组成，每个组件负责渲染一个特定的UI元素。对于我们的清单应用，我们将创建两个组件：<App>组件和<Todo>组件。

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

const App = () => {
  const [todos, setTodos] = useState([]); // 维护待办事项列表

  const addTodo = (todo) => { // 添加待办事项
    setTodos([...todos, todo]);
  };

  const removeTodo = (index) => { // 删除待办事项
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      <ul>
        {todos.map((todo, index) => (
          <Todo key={index} todo={todo} removeTodo={() => removeTodo(index)} />
        ))}
      </ul>
      <button onClick={() => addTodo('新任务')}>添加任务</button>
    </div>
  );
};

export default App;

// Todo.js
import React from 'react';

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

export default Todo;