IA no Desenvolvimento Frontend: Ferramentas e Estratégias para 2025

// Exemplo: Gerar componente React completo
// Digite: "Create a user profile card component with avatar, name, email and edit button"
 
interface UserProfileProps {
  user: {
    id: string
    name: string
    email: string
    avatar?: string
  }
  onEdit?: (userId: string) => void
}
 
export function UserProfile({ user, onEdit }: UserProfileProps) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 max-w-sm">
      <div className="flex items-center space-x-4">
        <img
          src={user.avatar || '/default-avatar.png'}
          alt={user.name}
          className="w-16 h-16 rounded-full object-cover"
        />
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-gray-900">{user.name}</h3>
          <p className="text-gray-600">{user.email}</p>
        </div>
      </div>
      {onEdit && (
        <button
          onClick={() => onEdit(user.id)}
          className="mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors"
        >
          Editar Perfil
        </button>
      )}
    </div>
  )
}

// Exemplo: Refatorar código para melhor performance
// Prompt: "Optimize this React component for performance"
 
// ANTES (componente não otimizado)
function ProductList({ products }) {
  const [filter, setFilter] = useState('')
  
  const filteredProducts = products.filter(product => 
    product.name.toLowerCase().includes(filter.toLowerCase())
  )
  
  return (
    <div>
      <input 
        value={filter} 
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filtrar produtos..."
      />
      {filteredProducts.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}
 
// DEPOIS (otimizado com IA)
const ProductList = memo(function ProductList({ products }) {
  const [filter, setFilter] = useState('')
  
  const filteredProducts = useMemo(() => 
    products.filter(product => 
      product.name.toLowerCase().includes(filter.toLowerCase())
    ), [products, filter]
  )
  
  const handleFilterChange = useCallback((e) => {
    setFilter(e.target.value)
  }, [])
  
  return (
    <div>
      <input 
        value={filter} 
        onChange={handleFilterChange}
        placeholder="Filtrar produtos..."
      />
      {filteredProducts.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
})

// Exemplo: Gerar hooks customizados
// Prompt: "Create a custom hook for API data fetching with loading, error states and retry functionality"
 
function useApiData<T>(url: string, options?: RequestInit) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)
  const [retryCount, setRetryCount] = useState(0)
 
  const fetchData = useCallback(async () => {
    try {
      setLoading(true)
      setError(null)
      
      const response = await fetch(url, options)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      const result = await response.json()
      setData(result)
    } catch (err) {
      setError(err as Error)
    } finally {
      setLoading(false)
    }
  }, [url, options])
 
  const retry = useCallback(() => {
    setRetryCount(prev => prev + 1)
    fetchData()
  }, [fetchData])
 
  useEffect(() => {
    fetchData()
  }, [fetchData])
 
  return { data, loading, error, retry, retryCount }
}
 
// Uso do hook
function UserList() {
  const { data: users, loading, error, retry } = useApiData<User[]>('/api/users')
  
  if (loading) return <div>Carregando usuários...</div>
  if (error) return <div>Erro: {error.message} <button onClick={retry}>Tentar novamente</button></div>
  
  return (
    <div>
      {users?.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  )
}

// Prompt eficaz: "Create a responsive data table component with sorting, filtering, and pagination using React and Tailwind"
 
interface DataTableProps<T> {
  data: T[]
  columns: Column<T>[]
  onSort?: (column: keyof T, direction: 'asc' | 'desc') => void
  onFilter?: (filters: Record<string, string>) => void
  pageSize?: number
}
 
interface Column<T> {
  key: keyof T
  label: string
  sortable?: boolean
  render?: (value: any, row: T) => React.ReactNode
}
 
export function DataTable<T extends Record<string, any>>({
  data,
  columns,
  onSort,
  onFilter,
  pageSize = 10
}: DataTableProps<T>) {
  const [currentPage, setCurrentPage] = useState(1)
  const [sortConfig, setSortConfig] = useState<{
    key: keyof T
    direction: 'asc' | 'desc'
  } | null>(null)
  const [filters, setFilters] = useState<Record<string, string>>({})
 
  // Lógica de sorting, filtering e pagination...
  
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white border border-gray-200">
        <thead className="bg-gray-50">
          <tr>
            {columns.map((column) => (
              <th
                key={String(column.key)}
                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                onClick={() => column.sortable && handleSort(column.key)}
              >
                {column.label}
                {sortConfig?.key === column.key && (
                  <span className="ml-1">
                    {sortConfig.direction === 'asc' ? '↑' : '↓'}
                  </span>
                )}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {paginatedData.map((row, index) => (
            <tr key={index} className="hover:bg-gray-50">
              {columns.map((column) => (
                <td key={String(column.key)} className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  {column.render ? column.render(row[column.key], row) : row[column.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

// Prompt: "Refactor this component to use React 18 features and improve performance"
 
// ANTES
function TodoApp() {
  const [todos, setTodos] = useState([])
  const [filter, setFilter] = useState('all')
  
  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed
    if (filter === 'completed') return todo.completed
    return true
  })
  
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }])
  }
  
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ))
  }
  
  return (
    <div>
      <TodoForm onAdd={addTodo} />
      <TodoFilter filter={filter} onFilterChange={setFilter} />
      <TodoList todos={filteredTodos} onToggle={toggleTodo} />
    </div>
  )
}
 
// DEPOIS (otimizado com IA)
function TodoApp() {
  const [todos, setTodos] = useState([])
  const [filter, setFilter] = useState('all')
  
  // Usar useMemo para evitar recálculos desnecessários
  const filteredTodos = useMemo(() => 
    todos.filter(todo => {
      switch (filter) {
        case 'active': return !todo.completed
        case 'completed': return todo.completed
        default: return true
      }
    }), [todos, filter]
  )
  
  // Usar useCallback para estabilizar referências
  const addTodo = useCallback((text: string) => {
    setTodos(prev => [...prev, { 
      id: crypto.randomUUID(), 
      text, 
      completed: false 
    }])
  }, [])
  
  const toggleTodo = useCallback((id: string) => {
    setTodos(prev => prev.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ))
  }, [])
  
  // Usar Suspense para lazy loading
  return (
    <Suspense fallback={<div>Carregando...</div>}>
      <div className="max-w-md mx-auto p-6">
        <TodoForm onAdd={addTodo} />
        <TodoFilter filter={filter} onFilterChange={setFilter} />
        <TodoList todos={filteredTodos} onToggle={toggleTodo} />
      </div>
    </Suspense>
  )
}

// Prompt: "Generate comprehensive unit tests for this React component using Jest and React Testing Library"
 
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { UserProfile } from './UserProfile'
 
describe('UserProfile', () => {
  const mockUser = {
    id: '1',
    name: 'João Silva',
    email: 'joao@exemplo.com',
    avatar: 'https://example.com/avatar.jpg'
  }
 
  const mockOnEdit = jest.fn()
 
  beforeEach(() => {
    jest.clearAllMocks()
  })
 
  it('deve renderizar informações do usuário corretamente', () => {
    render(<UserProfile user={mockUser} />)
    
    expect(screen.getByText('João Silva')).toBeInTheDocument()
    expect(screen.getByText('joao@exemplo.com')).toBeInTheDocument()
    expect(screen.getByAltText('João Silva')).toHaveAttribute('src', mockUser.avatar)
  })
 
  it('deve renderizar avatar padrão quando não fornecido', () => {
    const userWithoutAvatar = { ...mockUser, avatar: undefined }
    render(<UserProfile user={userWithoutAvatar} />)
    
    expect(screen.getByAltText('João Silva')).toHaveAttribute('src', '/default-avatar.png')
  })
 
  it('deve chamar onEdit quando botão for clicado', async () => {
    const user = userEvent.setup()
    render(<UserProfile user={mockUser} onEdit={mockOnEdit} />)
    
    const editButton = screen.getByRole('button', { name: /editar perfil/i })
    await user.click(editButton)
    
    expect(mockOnEdit).toHaveBeenCalledWith('1')
  })
 
  it('não deve renderizar botão de editar quando onEdit não for fornecido', () => {
    render(<UserProfile user={mockUser} />)
    
    expect(screen.queryByRole('button')).not.toBeInTheDocument()
  })
 
  it('deve ter acessibilidade correta', () => {
    render(<UserProfile user={mockUser} onEdit={mockOnEdit} />)
    
    const editButton = screen.getByRole('button', { name: /editar perfil/i })
    expect(editButton).toBeInTheDocument()
    expect(editButton).toHaveClass('hover:bg-blue-600')
  })
})

// Prompt: "Create a modern dashboard sidebar component with navigation, user profile, and theme toggle"
 
interface SidebarProps {
  isOpen: boolean
  onClose: () => void
  currentPath: string
  onNavigate: (path: string) => void
}
 
export function Sidebar({ isOpen, onClose, currentPath, onNavigate }: SidebarProps) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
  
  const navigation = [
    { name: 'Dashboard', href: '/dashboard', icon: HomeIcon },
    { name: 'Projetos', href: '/projects', icon: FolderIcon },
    { name: 'Equipe', href: '/team', icon: UsersIcon },
    { name: 'Configurações', href: '/settings', icon: CogIcon },
  ]
 
  return (
    <div className={`fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-900 transform transition-transform duration-300 ease-in-out ${
      isOpen ? 'translate-x-0' : '-translate-x-full'
    }`}>
      <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
        <h1 className="text-xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
        <button
          onClick={onClose}
          className="p-2 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
        >
          <XMarkIcon className="h-6 w-6" />
        </button>
      </div>
      
      <nav className="mt-8 px-4">
        {navigation.map((item) => (
          <a
            key={item.name}
            href={item.href}
            onClick={(e) => {
              e.preventDefault()
              onNavigate(item.href)
            }}
            className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
              currentPath === item.href
                ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white'
            }`}
          >
            <item.icon className="mr-3 h-5 w-5" />
            {item.name}
          </a>
        ))}
      </nav>
      
      <div className="absolute bottom-0 w-full p-4 border-t border-gray-200 dark:border-gray-700">
        <div className="flex items-center">
          <img
            className="h-8 w-8 rounded-full"
            src="/avatar.jpg"
            alt="User avatar"
          />
          <div className="ml-3">
            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">João Silva</p>
            <p className="text-xs text-gray-500 dark:text-gray-400">joao@exemplo.com</p>
          </div>
        </div>
      </div>
    </div>
  )
}

// Prompt: "Create smooth animations for a card component with hover effects and loading states"
 
import { motion, AnimatePresence } from 'framer-motion'
 
interface AnimatedCardProps {
  title: string
  description: string
  isLoading?: boolean
  onClick?: () => void
}
 
export function AnimatedCard({ title, description, isLoading, onClick }: AnimatedCardProps) {
  return (
    <motion.div
      className="bg-white rounded-lg shadow-md p-6 cursor-pointer"
      whileHover={{ 
        scale: 1.02,
        boxShadow: "0 10px 25px rgba(0,0,0,0.1)"
      }}
      whileTap={{ scale: 0.98 }}
      onClick={onClick}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      <AnimatePresence mode="wait">
        {isLoading ? (
          <motion.div
            key="loading"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="space-y-3"
          >
            <div className="h-4 bg-gray-200 rounded animate-pulse" />
            <div className="h-3 bg-gray-200 rounded animate-pulse w-3/4" />
            <div className="h-3 bg-gray-200 rounded animate-pulse w-1/2" />
          </motion.div>
        ) : (
          <motion.div
            key="content"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
            <p className="text-gray-600">{description}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

// Prompt: "Analyze this component for performance issues and suggest optimizations"
 
// ANTES (componente com problemas de performance)
function ProductList({ products, filters }) {
  const [searchTerm, setSearchTerm] = useState('')
  
  // ❌ Problema: recálculo a cada render
  const filteredProducts = products.filter(product => {
    const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = filters.category === 'all' || product.category === filters.category
    const matchesPrice = product.price >= filters.minPrice && product.price <= filters.maxPrice
    
    return matchesSearch && matchesCategory && matchesPrice
  })
  
  // ❌ Problema: função recriada a cada render
  const handleProductClick = (product) => {
    console.log('Product clicked:', product)
    // Lógica de clique
  }
  
  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Buscar produtos..."
      />
      {filteredProducts.map(product => (
        <ProductCard 
          key={product.id} 
          product={product} 
          onClick={handleProductClick}
        />
      ))}
    </div>
  )
}
 
// DEPOIS (otimizado com IA)
const ProductList = memo(function ProductList({ products, filters }) {
  const [searchTerm, setSearchTerm] = useState('')
  
  // ✅ Otimização: useMemo para evitar recálculos
  const filteredProducts = useMemo(() => 
    products.filter(product => {
      const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase())
      const matchesCategory = filters.category === 'all' || product.category === filters.category
      const matchesPrice = product.price >= filters.minPrice && product.price <= filters.maxPrice
      
      return matchesSearch && matchesCategory && matchesPrice
    }), [products, searchTerm, filters]
  )
  
  // ✅ Otimização: useCallback para estabilizar referência
  const handleProductClick = useCallback((product) => {
    console.log('Product clicked:', product)
    // Lógica de clique
  }, [])
  
  // ✅ Otimização: debounce para search
  const debouncedSearchTerm = useDebounce(searchTerm, 300)
  
  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Buscar produtos..."
      />
      {filteredProducts.map(product => (
        <ProductCard 
          key={product.id} 
          product={product} 
          onClick={handleProductClick}
        />
      ))}
    </div>
  )
})

// Prompt: "Generate comprehensive JSDoc documentation for this React component"
 
/**
 * Componente de lista de produtos com funcionalidades de busca, filtro e paginação
 * 
 * @component
 * @param {Object} props - Propriedades do componente
 * @param {Product[]} props.products - Array de produtos para exibir
 * @param {FilterOptions} props.filters - Opções de filtro aplicadas
 * @param {Function} props.onProductClick - Callback executado quando um produto é clicado
 * @param {Function} props.onFilterChange - Callback executado quando filtros são alterados
 * @param {number} [props.pageSize=10] - Número de produtos por página
 * @param {boolean} [props.loading=false] - Estado de carregamento
 * @param {string} [props.className] - Classes CSS adicionais
 * 
 * @example
 * ```tsx
 * <ProductList
 *   products={products}
 *   filters={{ category: 'electronics', minPrice: 100 }}
 *   onProductClick={(product) => navigate(`/product/${product.id}`)}
 *   onFilterChange={(filters) => setFilters(filters)}
 *   pageSize={20}
 *   loading={isLoading}
 * />
 * ```
 * 
 * @returns {JSX.Element} Componente de lista de produtos
 */
export function ProductList({
  products,
  filters,
  onProductClick,
  onFilterChange,
  pageSize = 10,
  loading = false,
  className
}: ProductListProps) {
  // Implementação do componente...
}

# Prompt: "Create a complete Next.js project setup with TypeScript, Tailwind, testing, and CI/CD"
 
# 1. Criar projeto
npx create-next-app@latest meu-projeto --typescript --tailwind --eslint --app
 
# 2. Instalar dependências adicionais
npm install @testing-library/react @testing-library/jest-dom vitest
npm install -D @types/node
 
# 3. Configurar Vitest
# vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
  },
})
 
# 4. Configurar GitHub Actions
# .github/workflows/ci.yml
name: CI
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build

// Prompt: "Migrate this class component to functional component with hooks"
 
// ANTES (Class Component)
class UserProfile extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      user: null,
      loading: true,
      error: null
    }
  }
 
  async componentDidMount() {
    try {
      const response = await fetch(`/api/users/${this.props.userId}`)
      const user = await response.json()
      this.setState({ user, loading: false })
    } catch (error) {
      this.setState({ error, loading: false })
    }
  }
 
  render() {
    const { user, loading, error } = this.state
    
    if (loading) return <div>Carregando...</div>
    if (error) return <div>Erro: {error.message}</div>
    if (!user) return <div>Usuário não encontrado</div>
    
    return (
      <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
      </div>
    )
  }
}
 
// DEPOIS (Functional Component com IA)
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)
 
  useEffect(() => {
    async function fetchUser() {
      try {
        setLoading(true)
        setError(null)
        
        const response = await fetch(`/api/users/${userId}`)
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        
        const userData = await response.json()
        setUser(userData)
      } catch (err) {
        setError(err as Error)
      } finally {
        setLoading(false)
      }
    }
 
    fetchUser()
  }, [userId])
 
  if (loading) return <div>Carregando...</div>
  if (error) return <div>Erro: {error.message}</div>
  if (!user) return <div>Usuário não encontrado</div>
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
}

// Exemplo: Tracking de produtividade com IA
interface ProductivityMetrics {
  tasksCompleted: number
  timeSaved: number // em minutos
  codeQualityScore: number // 1-10
  bugsPrevented: number
}
 
// Exemplo de implementação
class AIMetrics {
  private metrics: ProductivityMetrics = {
    tasksCompleted: 0,
    timeSaved: 0,
    codeQualityScore: 0,
    bugsPrevented: 0
  }
 
  trackTaskCompletion(taskType: string, timeSpent: number, estimatedTime: number) {
    this.metrics.tasksCompleted++
    this.metrics.timeSaved += estimatedTime - timeSpent
  }
 
  trackCodeQuality(score: number) {
    this.metrics.codeQualityScore = score
  }
 
  getROI(): number {
    // Calcular ROI baseado em tempo economizado
    const hourlyRate = 100 // R$ por hora
    const timeSavedInHours = this.metrics.timeSaved / 60
    return timeSavedInHours * hourlyRate
  }
}

// ❌ Prompt vago
"Make this component better"
 
// ✅ Prompt específico
"Refactor this React component to use TypeScript, add proper error handling, implement loading states, and optimize for performance using React.memo and useMemo"
 
// ❌ Prompt genérico
"Add tests"
 
// ✅ Prompt detalhado
"Generate comprehensive unit tests for this React component using Jest and React Testing Library, including tests for user interactions, error states, loading states, and accessibility"

// Sempre revisar e testar código gerado por IA
function validateGeneratedCode(code: string): ValidationResult {
  const issues: string[] = []
  
  // Verificar TypeScript
  if (!code.includes('interface') && code.includes('props')) {
    issues.push('Missing TypeScript interfaces')
  }
  
  // Verificar acessibilidade
  if (code.includes('<button') && !code.includes('aria-label')) {
    issues.push('Missing accessibility attributes')
  }
  
  // Verificar performance
  if (code.includes('useEffect') && !code.includes('useCallback')) {
    issues.push('Potential performance issues')
  }
  
  return {
    isValid: issues.length === 0,
    issues
  }
}

# Script para automatizar geração de código
#!/bin/bash
# generate-component.sh
 
COMPONENT_NAME=$1
PROPS=$2
 
echo "🤖 Gerando componente $COMPONENT_NAME com IA..."
 
# Usar IA para gerar componente
copilot generate "Create a React component called $COMPONENT_NAME with props: $PROPS, TypeScript interfaces, and Tailwind CSS styling"
 
# Validar código gerado
npm run lint
npm run test
 
echo "✅ Componente $COMPONENT_NAME gerado e validado!"