Vite+React+TypeScript手撸TodoList的项目实践

下面是针对“Vite+React+TypeScript手撸TodoList的项目实践”的详细攻略。

1.前置技能要求

在进行Vite+React+TypeScript手撸TodoList的项目实践前，需要掌握以下几个技能：

• 熟悉TypeScript语言和基本语法；
• 熟悉React框架及其常用的Api；
• 了解Vite构建工具的使用和基本原理。

2.环境搭建与初始化

首先，需要安装Node.js环境和yarn包管理器。之后在终端中执行以下命令初始化项目：

yarn create vite-app vite-react-todolist --template react-ts

这个命令将创建一个带有React和TypeScript的Vite项目，并将其命名为“vite-react-todolist”。

3.项目结构与代码编写

在初始化完成后，我们可以在项目的根目录下看到如下的文件结构：

├── node_modules
├── public
│   ├── favicon.svg
│   └── index.html
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── setupTests.ts
│   └── components
│       ├── TodoForm.tsx
│       ├── TodoList.tsx
│       └── TodoItem.tsx
├── .editorconfig
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

其中，src目录是项目的主要代码目录，我们需要在其中编写组件、样式和逻辑。

3.1 创建TodoList组件

我们打算创建一个简单的TodoList组件，它由两个子组件TodoForm和TodoList组成。

首先，我们可以在src/components目录下创建一个名为TodoForm.tsx的文件，并在其中添加如下代码：

import React, { useState } from 'react';

interface Props {
  onSubmit: (text: string) => void;
}

const TodoForm: React.FC<Props> = ({ onSubmit }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!text) return;
    onSubmit(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={e => setText(e.target.value)} placeholder="Add a new todo" />
      <button type="submit">Add</button>
    </form>
  )
}

export default TodoForm;

在上面的代码中，我们首先定义了一个接口Props，它包含一个名为onSubmit的函数属性。该函数的作用是将TodoItem添加到TodoList中。

接着，我们定义了一个函数组件TodoForm，并将Props作为参数传入该组件。在函数体内，我们使用React的useState钩子来定义一个状态变量text，该变量的初始值为空字符串。

在表单的提交事件中，我们首先阻止默认行为，然后判断text是否为空。如果text为空，则函数直接返回。否则，我们通过onSubmit函数将text作为参数加入到TodoList中，并将text的值重置为空字符串。

最后，我们返回一个包含输入框和添加按钮的form表单，当表单提交时调用handleSubmit函数。

接下来，我们在src/components目录下创建另外两个文件TodoList.tsx和TodoItem.tsx，并在其中编写相应的代码：

// src/components/TodoList.tsx
import React, { useState } from 'react';
import TodoItem from './TodoItem';
import TodoForm from './TodoForm';

interface Todo {
  text: string;
  complete: boolean;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);

  const toggleTodo = (index: number) => {
    const newTodos = [...todos];
    newTodos[index].complete = !newTodos[index].complete;
    setTodos(newTodos);
  };

  const addTodo = (text: string) => {
    const newTodos = [...todos, { text, complete: false }];
    setTodos(newTodos);
  };

  const removeTodo = (index: number) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <TodoForm onSubmit={addTodo} />
      {todos.map((todo, index) => (
        <TodoItem key={index} todo={todo} index={index} toggleTodo={toggleTodo} removeTodo={removeTodo} />
      ))}
    </div>
  );
};

export default TodoList;

// src/components/TodoItem.tsx
import React from 'react';

interface Props {
  todo: {
    text: string;
    complete: boolean;
  };
  index: number;
  toggleTodo: (index: number) => void;
  removeTodo: (index: number) => void;
}

const TodoItem: React.FC<Props> = ({ todo, index, toggleTodo, removeTodo }) => {
  const handleToggle = () => {
    toggleTodo(index);
  };
  const handleRemove = () => {
    removeTodo(index);
  };

  return (
    <div>
      <span style={{ textDecoration: todo.complete ? 'line-through' : '' }} onClick={handleToggle}>
        {todo.text}
      </span>
      <button onClick={handleRemove}>x</button>
    </div>
  );
};

export default TodoItem;

在上面的代码中，我们定义了一个TodoList组件和一个TodoItem组件，它们分别用于展示整个TodoList和单独的TodoItem。

在TodoList组件中，我们使用useState钩子来定义了一个状态变量todos，初始值为空数组。该状态变量用于存储TodoItem的列表。我们同时定义了三个函数toggleTodo、addTodo和removeTodo，它们分别用于修改状态变量todos中的数据，分别代表切换TodoItem的完成状态、添加新的TodoItem和删除指定的TodoItem。

在TodoList组件的返回值中，我们首先渲染出一个TodoForm组件，并将addTodo函数作为参数传给它。接着，我们遍历todos，对于每一个元素，我们都渲染出一个TodoItem组件，并将相应的参数传给它。

在TodoItem组件中，我们定义了一个Props接口，用于接收TodoList组件中通过props传递的参数。该组件提供了两个事件处理函数handleToggle和handleRemove，分别用于切换TodoItem的完成状态和删除TodoItem。同时，我们还渲染出了一个由TodoItem的text属性组成的span元素，以及一个删除按钮。

4.运行和打包

在完成代码编写后，我们可以通过执行以下命令运行该项目：

yarn dev

该命令将启动Vite构建工具，并打开默认的浏览器窗口，将我们的应用程序呈现出来。

如果我们想要将整个项目打包为生产环境所需的文件，则可以执行以下命令：

yarn build

该命令将生成一个dist目录，其中包含了打包后的文件。

5.示例说明

在上述示例中，我们通过创建TodoList、TodoForm和TodoItem三个组件，实现了一个简单的待办事项应用程序。其中，TodoForm组件负责输入新的待办事项，TodoItem组件负责展示和操作单个的待办事项，而TodoList组件则包含了多个TodoItem，并提供了添加、删除、切换完成状态的功能。

在实现过程中，我们使用了React框架的基本Api，以及TypeScript语言和JSX语法。同时，我们使用Vite构建工具，进行了应用程序的初始化、运行和打包等操作，完整实践了Vite+React+TypeScript手撸TodoList的项目。