开发示例

⚛️ React 应用开发

从零开始用 Trae 构建一个完整的 React 任务管理应用，体验 AI 辅助前端开发。

项目初始化

Terminal

# 用 Vite 创建 React + TypeScript 项目
npm create vite@latest task-app -- --template react-ts
cd task-app
npm install

# 在 Trae 中打开
trae .

🤖

也可以直接在 Builder 中说："用 Vite + React + TypeScript 创建一个任务管理应用"，Builder 会自动完成所有初始化步骤。

示例一：任务列表组件

TaskList.tsx — 完整任务管理

React + TypeScript

src/components/TaskList.tsx

import { useState } from 'react'

interface Task {
  id: number
  text: string
  done: boolean
  priority: 'low' | 'medium' | 'high'
}

const PRIORITY_COLOR = {
  low: '#10b981',
  medium: '#f59e0b',
  high: '#ef4444',
}

export default function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([])
  const [input, setInput] = useState('')
  const [priority, setPriority] = useState<Task['priority']>('medium')
  const [filter, setFilter] = useState<'all' | 'active' | 'done'>('all')

  const addTask = () => {
    if (!input.trim()) return
    setTasks(prev => [...prev, {
      id: Date.now(), text: input.trim(), done: false, priority
    }])
    setInput('')
  }

  const filtered = tasks.filter(t =>
    filter === 'all' ? true : filter === 'done' ? t.done : !t.done
  )

  return (
    <div className="task-app">
      <h1>任务管理</h1>

      <div className="add-row">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && addTask()}
          placeholder="添加新任务..."
        />
        <select value={priority} onChange={e => setPriority(e.target.value as Task['priority'])}>
          <option value="low">低优先级</option>
          <option value="medium">中优先级</option>
          <option value="high">高优先级</option>
        </select>
        <button onClick={addTask}>添加</button>
      </div>

      <div className="filters">
        {(['all', 'active', 'done'] as const).map(f => (
          <button key={f} className={filter === f ? 'active' : ''}
            onClick={() => setFilter(f)}>
            {{ all: '全部', active: '进行中', done: '已完成' }[f]}
          </button>
        ))}
      </div>

      <ul>
        {filtered.map(task => (
          <li key={task.id} className={task.done ? 'done' : ''}>
            <span className="dot"
              style={{ background: PRIORITY_COLOR[task.priority] }} />
            <span onClick={() => setTasks(prev =>
              prev.map(t => t.id === task.id ? {...t, done: !t.done} : t)
            )}>{task.text}</span>
            <button onClick={() => setTasks(prev => prev.filter(t => t.id !== task.id))}>
              ✕
            </button>
          </li>
        ))}
      </ul>

      <p className="stats">
        {tasks.filter(t => !t.done).length} 项待完成 / 共 {tasks.length} 项
      </p>
    </div>
  )
}

示例二：自定义 Hook

src/hooks/useFetch.ts

import { useState, useEffect } from 'react'

interface FetchState<T> {
  data: T | null
  loading: boolean
  error: string | null
}

export function useFetch<T>(url: string): FetchState<T> {
  const [state, setState] = useState<FetchState<T>>({
    data: null, loading: true, error: null
  })

  useEffect(() => {
    let cancelled = false
    setState(s => ({ ...s, loading: true, error: null }))

    fetch(url)
      .then(r => { if (!r.ok) throw new Error(r.statusText); return r.json() })
      .then(data => { if (!cancelled) setState({ data, loading: false, error: null }) })
      .catch(err => { if (!cancelled) setState({ data: null, loading: false, error: err.message }) })

    return () => { cancelled = true }
  }, [url])

  return state
}

// 使用示例
function UserProfile({ id }: { id: number }) {
  const { data, loading, error } = useFetch<User>(`/api/users/${id}`)
  if (loading) return <div>加载中...</div>
  if (error) return <div>错误: {error}</div>
  return <div>{data?.name}</div>
}

AI 辅助技巧

实用 Chat 提示词

# 生成组件
创建一个 React 分页组件，Props: total, page, pageSize, onChange
使用 TypeScript，Tailwind CSS 样式

# 优化性能
@src/components/TaskList.tsx 这个组件有哪些性能问题？
用 useMemo 和 useCallback 优化

# 添加动画
给任务列表添加进入/退出动画，使用 CSS transition

💡

遇到 React 报错时，直接把错误信息粘贴到 Chat，AI 通常能立即定位问题所在。