项目实战演练

React.JS是一个流行的前端JavaScript库，用于构建交互式用户界面。在本教程中，我们将介绍React.JS的基础知识，并通过一个实战项目来演示如何使用React.JS构建一个简单的任务管理应用程序。

React.JS基础知识

1. 创建React应用程序

首先，您需要安装Node.js和npm，然后使用以下命令创建一个新的React应用程序：

npx create-react-app task-manager

2. 组件

React应用程序由多个组件组成，每个组件负责渲染特定部分的UI。您可以使用函数组件或类组件来定义组件。

// 函数组件
function App() {
  return (
    <div>
      <h1>Task Manager App</h1>
    </div>
  );
}

3. 状态和属性

状态（state）是组件内部的数据，属性（props）是从父组件传递给子组件的数据。您可以使用useState钩子来管理组件的状态。

// 使用useState
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

4. 生命周期

React类组件具有生命周期方法，如componentDidMount和componentDidUpdate。您可以使用useEffect钩子来模拟生命周期方法。

// 使用useEffect
import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [seconds]);

  return <p>Timer: {seconds} seconds</p>;
}

项目实战演练：任务管理应用程序

在这个实战项目中，我们将使用React.JS构建一个简单的任务管理应用程序。用户可以添加、删除和标记任务为完成状态。

步骤1：创建应用程序

首先，使用上面的命令创建一个新的React应用程序。

npx create-react-app task-manager

步骤2：创建任务组件

创建一个Task组件来显示单个任务的信息。

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

function Task({ task, onDelete, onToggle }) {
  return (
    <div>
      <h3>
        {task.text}{' '}
        <input type="checkbox" onChange={() => onToggle(task.id)} checked={task.completed} />
        <button onClick={() => onDelete(task.id)}>Delete</button>
      </h3>
    </div>
  );
}

export default Task;

步骤3：创建任务列表组件

创建一个TaskList组件来显示所有任务。

// TaskList.js
import React from 'react';
import Task from './Task';

function TaskList({ tasks, onDelete, onToggle }) {
  return (
    <div>
      {tasks.map((task) => (
        <Task key={task.id} task={task} onDelete={onDelete} onToggle={onToggle} />
      ))}
    </div>
  );
}

export default TaskList;

步骤4：创建应用程序组件

创建一个App组件来管理整个应用程序的状态。

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

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Task 1', completed: false },
    { id: 2, text: 'Task 2', completed: true },
    { id: 3, text: 'Task 3', completed: false },
  ]);

  const addTask = (text) => {
    const newTask = { id: tasks.length + 1, text, completed: false };
    setTasks([...tasks, newTask]);
  };

  const deleteTask = (id) =>