使用react typescript创建任务管理器

# Web 开发# React# Typescript

大家好！让我们使用一些现代工具创建一个简单但美观的 React 应用。我们将制作一个真正有用且外观不错的任务管理应用。没什么无聊的 - 让我们马上开始吧！

设置项目

首先，让我们创建项目。打开终端并运行：

npm create vite@latest my-task-app -- --template react-ts
cd my-task-app

现在，让我们添加 Tailwind CSS 进行样式设置：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

快速配置

更新你的`tailwind.config.js`：

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 添加到你的 `src/index.css`：

@tailwind base;
@tailwind components;
@tailwind utilities;

让我们创造一些很酷的东西

我们将创建一个任务管理器，可以添加、完成和删除任务。首先，让我们在“src/types.ts”中定义任务类型：

export interface Task {
  id: number;
  text: string;
  completed: boolean;
}

现在，让我们在 `src/App.tsx` 中创建我们的主要应用程序：

import { useState } from 'react'
import { Task } from './types'

function App() {
  const [tasks, setTasks] = useState([])
  const [newTask, setNewTask] = useState('')

  const addTask = () => {
    if (!newTask.trim()) return

    setTasks([
      ...tasks,
      {
        id: Date.now(),
        text: newTask,
        completed: false
      }
    ])
    setNewTask('')
  }

  const toggleTask = (id: number) => {
    setTasks(tasks.map(task => 
      task.id === id ? { ...task, completed: !task.completed } : task
    ))
  }

  const deleteTask = (id: number) => {
    setTasks(tasks.filter(task => task.id !== id))
  }

  return (
    

      

        
Task Manager


        

           setNewTask(e.target.value)}
            className="flex-1 p-2 border rounded-l-lg focus:outline-none focus:border-blue-500"
            placeholder="Add a new task..."
          />
          
        


        

          {tasks.map((task) => (
            

              
              
            

          ))}
        

      

    

  )
}

export default App

运行应用程序

启动开发服务器：

npm run dev

就这样！现在您拥有了一个功能齐全的任务管理器，外观简洁、现代。以下是我们构建的内容：

  • 具有居中卡片设计的响应式布局
  • 带有连接添加按钮的输入字段
  • 具有完成切换和删除功能的任务列表
  • 简洁的动画和悬停状态
  • TypeScript 用于类型安全
  • 使用 Tailwind CSS 实现现代风格

    • 让它变得更好

    想要更进一步吗？以下是您可以添加的一些快速改进：

  • 添加本地存储来持久化任务：
    • // Add and update to App.tsx
// Initialize state with a function that checks localStorage
  const [tasks, setTasks] = useState(() => {
    const savedTasks = localStorage.getItem('tasks')
    return savedTasks ? JSON.parse(savedTasks) : []
  })
  const [newTask, setNewTask] = useState('')

  // Only need one useEffect to handle updates
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks))
  }, [tasks])

  // Rest of your code remains the same
  • 添加键盘支持：
    • // Add to input element
onKeyPress={(e) => {
  if (e.key === 'Enter') addTask()
}}

    就这样！现在您有了一个实用且外观漂亮的现代 React 应用。最好的部分是什么？它使用现代工具和最佳实践构建，但保持了简单和可维护性。

    想要尝试吗？尝试添加类别、截止日期或优先级别，让它更加实用！

    记住：好的代码不必太复杂。保持简单、易读且实用！🚀