React 入门：实用项目梳理，提升依赖管理技能

2023-12-20 13:51:44

React 是一个流行的 JavaScript 库，用于构建用户界面。它以其高性能、灵活性以及组件化开发模式而备受推崇。如果你想学习 React，那么你应该从一个简单的项目开始。这将帮助你掌握 React 的基本概念，并为更复杂的项目做好准备。

在本文中，我将引导你完成一个简单的 React 项目，并向你展示如何管理项目的依赖关系。

项目梳理

在开始编写代码之前，你首先需要对项目进行梳理。这包括确定项目的范围、目标和功能。你还可以创建一个项目结构图，以帮助你组织代码。

依赖管理

React 项目通常需要依赖一些外部库和组件。这些库和组件可以帮助你完成各种任务，比如数据管理、路由和状态管理。

为了管理项目依赖，你可以使用 npm 或 yarn。这两种工具都可以让你轻松地安装、更新和卸载项目依赖。

实战项目参考

现在，让我们来看看一个真实项目的例子。这个项目是一个简单的 React 应用，它允许用户创建和管理任务。

项目结构

├── package.json
├── node_modules/
├── src/
│   ├── App.js
│   ├── index.js
│   └── TaskList.js
└── public/
    ├── index.html
    ├── main.js
    └── main.css

代码示例

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

function App() {
  const [tasks, setTasks] = useState([]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const removeTask = (index) => {
    const newTasks = tasks.filter((task, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div>
      <h1>Task Manager</h1>
      <TaskList tasks={tasks} addTask={addTask} removeTask={removeTask} />
    </div>
  );
}

export default App;

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

function TaskList({ tasks, addTask, removeTask }) {
  return (
    <div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => removeTask(index)}>X</button>
          </li>
        ))}
      </ul>
      <input type="text" onKeyPress={(e) => { if (e.key === 'Enter') addTask(e.target.value) }} />
    </div>
  );
}

export default TaskList;