React: Introdução ao React

O React é uma biblioteca de JavaScript para a criação de interfaces de usuário. Se compararmos uma página da web a uma casa, o HTML são as paredes de tijolos, o CSS é o design de interiores e o JavaScript são os sistemas elétricos e hidráulicos; então, o React é um sistema de montagem pré-fabricado — ele permite que você projete cada cômodo (componente) de forma independente e, em seguida, os monte para formar um edifício completo.

1. O que você vai aprender

• O que é o React e por que precisamos dele?
• Programação declarativa x Programação imperativa
• Como funciona o DOM virtual
• React x Vue x Angular
• Uma visão geral do ecossistema do React

2. Uma história real de um desenvolvedor front-end

(1) Problema: Uma página, 30.000 linhas de jQuery

Alice trabalha como desenvolvedora front-end em uma empresa de comércio eletrônico de médio porte. A empresa possui um painel de administração que foi desenvolvido com jQuery ao longo de três anos e acumulou mais de 30.000 linhas de código.

▶ Exemplo: Introdução ao React

// A typical product list page — jQuery code
function updateProductList(category) {
  // Manual DOM operation
  $('#product-list').empty()
  $('#loading-spinner').show()
  
  $.get('/api/products?category=' + category, function(data) {
    $('#loading-spinner').hide()
    data.forEach(function(product) {
      // Concatenate HTML strings line by line
      var html = '<div class="product-card">' +
        '<h3>' + product.name + '</h3>' +
        '<p>' + product.price + '</p>' +
        '<button onclick="addToCart(' + product.id + ')">Add to Cart</button>' +
        '</div>'
      $('#product-list').append(html)
    })
  })
}

O problema desta página é:

• O estado e o DOM estão fora de sincronia: Quando o total do carrinho de compras muda, os números nos outros três locais da página precisam ser atualizados manualmente.
• Baixa facilidade de manutenção: a modificação de um único recurso pode exigir alterações em cinco arquivos
• Problemas de desempenho: Cada atualização manipula diretamente o DOM, causando reflows e repaints frequentes na página

(2) A abordagem do React: declarativa + baseada em componentes

Reescrevendo a mesma lógica usando o React:

function ProductList({ category }) {
  const [products, setProducts] = React.useState([])
  const [loading, setLoading] = React.useState(true)

  React.useEffect(() => {
    fetch('/api/products?category=' + category)
      .then(res => res.json())
      .then(data => {
        setProducts(data)
        setLoading(false)
      })
  }, [category])

  if (loading) return <Spinner />
  
  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}

Benefícios: redução de 70% no tamanho do código, sincronização automática de estados, alterações em um componente não afetam os demais e um aumento de 5x no desempenho (atualizações em lote do DOM virtual).

3. Conceitos fundamentais do React

(1) Programação declarativa x Programação imperativa

// Imperative: tell the browser what to do at each step
const div = document.createElement('div')
div.className = 'alert'
div.textContent = 'Hello'
document.body.appendChild(div)

// Declarative: tell React what result you want
function Alert({ message }) {
  return <div className="alert">{message}</div>
}
// React automatically creates and updates the DOM

(2) DOM virtual

O DOM virtual é uma tecnologia essencial para a otimização do desempenho do React. Não se trata de uma árvore DOM real, mas sim de uma árvore de objetos JavaScript leve.

graph TB
    A[State changes] --> B[Create a new virtual DOM tree]
    B --> C[Diff A Comparison of Old and New Virtual Environments DOM]
    C --> D[Compute minimum update operations]
    D --> E[Batch update real DOM]
    E --> F[Page update complete]
    
    style A fill:#ff6b6b,color:#fff
    style C fill:#4ecdc4,color:#fff
    style E fill:#45b7d1,color:#fff

graph TB
    A[State changes] --> B[Create a new virtual DOM tree]
    B --> C[Diff A Comparison of Old and New Virtual Environments DOM]
    C --> D[Compute minimum update operations]
    D --> E[Batch update real DOM]
    E --> F[Page update complete]
    
    style A fill:#ff6b6b,color:#fff
    style C fill:#4ecdc4,color:#fff
    style E fill:#45b7d1,color:#fff

(3) Desenvolvimento baseado em componentes

A ideia central por trás do React é dividir uma página em componentes independentes e reutilizáveis, sendo que cada componente é responsável apenas por sua própria área específica.

// Component-based: page broken into independent components
function Page() {
  return (
    <div>
      <Header />        {/* Header navigation */}
      <Sidebar />       {/* Sidebar */}
      <MainContent />   {/* Main content area */}
      <Footer />        {/* Footer copyright */}
    </div>
  )
}

4. React x Outras estruturas populares

Resumo: O React é adequado para projetos que exigem alto nível de controle, alta reutilização de componentes e suporte multiplataforma (Web + dispositivos móveis). O Vue é mais fácil de começar a usar e é adequado para iterações rápidas. O Angular é adequado para grandes equipes de nível empresarial.

5. Visão geral do ecossistema do React

O React não é um framework “tudo em um”, mas sim uma biblioteca flexível de interface do usuário. Ele conta com o ecossistema da comunidade para fornecer recursos como roteamento, gerenciamento de estado e ferramentas de compilação.

graph LR
    A[React] --> B[Build: Vite]
    A --> C[Routing: React Router]
    A --> D[Status: Zustand/Redux]
    A --> E[Data: TanStack Query]
    A --> F[Style: Tailwind/CSS Modules]
    A --> G[Test: Vitest + RTL]
    A --> H[SSR: Next.js]
    A --> I[Mobile: React Native]
    
    style A fill:#61dafb,color:#000
    style H fill:#000,color:#fff
    style I fill:#61dafb,color:#000

graph LR
    A[React] --> B[Build: Vite]
    A --> C[Routing: React Router]
    A --> D[Status: Zustand/Redux]
    A --> E[Data: TanStack Query]
    A --> F[Style: Tailwind/CSS Modules]
    A --> G[Test: Vitest + RTL]
    A --> H[SSR: Next.js]
    A --> I[Mobile: React Native]
    
    style A fill:#61dafb,color:#000
    style H fill:#000,color:#fff
    style I fill:#61dafb,color:#000

6. Exemplo completo: Criando um botão “Curtir” simples com o React

// ============================================
// Example：use  React Build a "Like" Button
// Features：Demonstrating Declarative Programming + Component-based + Core Concepts of State Management
// ============================================

import React from 'react'
import { createRoot } from 'react-dom/client'

// 1. Define a "Like" button component
function LikeButton() {
  // Usage useState Manage Like Status
  const [liked, setLiked] = React.useState(false)
  const [count, setCount] = React.useState(0)

  // Handling Click Events
  function handleClick() {
    if (liked) {
      setLiked(false)
      setCount(count - 1)
    } else {
      setLiked(true)
      setCount(count + 1)
    }
  }

  // Declarative UI：Render different appearances based on state
  return (
    <button
      onClick={handleClick}
      style={{
        padding: '10px 20px',
        fontSize: '16px',
        backgroundColor: liked ? '#ff4757' : '#f1f2f6',
        color: liked ? '#fff' : '#333',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
      }}
    >
      {liked ? '❤️ Liked' : '🤍 Like'} ({count})
    </button>
  )
}

// 2. Add components to the page
function App() {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>React Examples of Likes</h1>
      <p>Click the button to experience declarative programming UI：Just keep an eye on the state，No action required DOM</p>
      <LikeButton />
      <LikeButton /> {/* Component Reusability！*/}
    </div>
  )
}

// 3. Render to page
const root = createRoot(document.getElementById('root'))
root.render(<App />)

O que esse exemplo demonstra?

• Declarativo: Basta descrever “como o botão deve ficar quando o status de ‘curtir’ mudar”, e o React atualiza automaticamente o DOM
• Baseado em componentes: LikeButton é um componente independente que pode ser reutilizado várias vezes
• Gerenciamento de estado: liked e count são rastreados automaticamente pelo React; não é necessária nenhuma manipulação manual do DOM

▶ Exemplo 2: Visualização da árvore de componentes do React

// ============================================
// Example：use  React The component tree displays the page structure
// Features：Simulate the component tree of a blog homepage，Demonstrating a Component-Based Approach
// ============================================

// Leaf Component：Article Card
function ArticleCard({ title, excerpt }) {
  return (
    <div style={{ border: '1px solid #eee', borderRadius: '8px', padding: '12px', marginBottom: '12px' }}>
      <h3 style={{ margin: '0 0 8px 0' }}>{title}</h3>
      <p style={{ color: '#666', margin: 0, fontSize: '14px' }}>{excerpt}</p>
    </div>
  )
}

// Composite Components：List of Articles
function ArticleList({ articles }) {
  return (
    <div>
      <h2>Latest Articles</h2>
      {articles.map(article => (
        <ArticleCard key={article.id} title={article.title} excerpt={article.excerpt} />
      ))}
    </div>
  )
}

// Composite Components：Sidebar
function Sidebar() {
  return (
    <div style={{ backgroundColor: '#fafafa', padding: '16px', borderRadius: '8px' }}>
      <h3>Categories</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        <li>React Tutorial (12)</li>
        <li>TypeScript (8)</li>
        <li>Node.js (5)</li>
      </ul>
    </div>
  )
}

// Root Component：Blog Home
function BlogHome() {
  const articles = [
    { id: 1, title: 'React Getting Started Guide', excerpt: 'Study React Core Concepts and Best Practices...' },
    { id: 2, title: 'Understanding the Virtual DOM', excerpt: 'Virtual DOM How to Improve React Application Performance...' },
    { id: 3, title: 'Component Design Patterns', excerpt: 'Master React Techniques for Combining and Reusing Components...' }
  ]

  return (
    <div style={{ maxWidth: '960px', margin: '0 auto', padding: '20px' }}>
      <header style={{ textAlign: 'center', marginBottom: '24px' }}>
        <h1>📝 My Tech Blog</h1>
        <nav>
          <a href="#" style={{ margin: '0 12px' }}>Home</a>
          <a href="#" style={{ margin: '0 12px' }}>About</a>
          <a href="#" style={{ margin: '0 12px' }}>Contact</a>
        </nav>
      </header>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '24px' }}>
        <ArticleList articles={articles} />
        <Sidebar />
      </div>
      <footer style={{ textAlign: 'center', marginTop: '24px', color: '#999', fontSize: '13px' }}>
        <p>© 2026 web-tutorial.com</p>
      </footer>
    </div>
  )
}

// Component tree Structure：
// BlogHome
// ├── header (Navigation Bar)
// └── div.grid
//     ├── ArticleList
//     │   ├── ArticleCard × 3
//     └── Sidebar
//         └── Category List

❓ Perguntas Frequentes

P: O React é um framework ou uma biblioteca? R: O React é oficialmente considerado uma “biblioteca de interface do usuário”, e não um framework completo. Ele lida apenas com a “camada de visualização”; recursos como roteamento, gerenciamento de estado e solicitações HTTP exigem o uso de bibliotecas desenvolvidas pela comunidade. É isso também que torna o React tão flexível — você tem liberdade para escolher com quais ferramentas combiná-lo.

P: O que preciso aprender antes de estudar React? R: Você precisa ter um conhecimento básico de JavaScript (ES6+: funções-seta, atribuição por desestruturação, importação e exportação de módulos, Promises e async/await). Se você ainda não conhece TypeScript, pode aprender JavaScript primeiro e depois fazer a transição para o TypeScript, ou pode aprender TypeScript diretamente (a Lição 23 deste tutorial abordará React + TypeScript em detalhes). Também é necessário ter um conhecimento básico de HTML e CSS.

P: Devo escolher o React 18 ou o React 19? R: Este tutorial é baseado no React 18.3 (a versão estável LTS atual). Na Fase 5, abordaremos os novos recursos do React 19 (como o hook use(), os Componentes de Servidor e as Ações). Para ambientes de produção, recomendamos começar com o React 18 e atualizar assim que o ecossistema do React 19 estiver mais maduro.

P: Devo usar o Vite ou o Create React App (CRA) para criar um projeto React? R: Recomendamos o Vite. O CRA, na prática, não recebe mais manutenção (não há atualizações significativas desde 2023), e o Vite é muito superior ao CRA tanto na velocidade de inicialização (<1 segundo contra os 10–30 segundos do CRA) quanto na velocidade de compilação. A partir da Lição 2, usaremos o Vite durante todo o curso.

P: O React já está ultrapassado? Seria melhor eu aprender Next.js em vez disso? R: De jeito nenhum. O React continua sendo a biblioteca front-end mais popular, com mais de 230 mil ⭐ no GitHub e mais de 40 milhões de downloads semanais no npm. O Next.js é construído com base no React; portanto, se você não entender os conceitos fundamentais do React (componentes, Hooks, gerenciamento de estado), aprender o Next.js diretamente será muito desafiador. Recomendo aprender primeiro os fundamentos do React e, depois, passar para o Next.js (a Fase 5 deste tutorial abordará isso).

📖 Resumo

• O React é uma biblioteca de interface do usuário que utiliza programação declarativa — você descreve o resultado desejado, e o React se encarrega de atualizar o DOM
• O DOM virtual é o cerne do desempenho do React: ele compara uma árvore de objetos JavaScript para atualizar o DOM real em lotes.
• A arquitetura baseada em componentes é o princípio de design mais fundamental do React — cada componente é independente, reutilizável e responsável apenas por sua própria lógica.
• O React é adequado para SPAs de grande porte e desenvolvimento multiplataforma; possui uma curva de aprendizado moderada (requer conhecimentos básicos de JavaScript).
• O ecossistema do React é rico, mas não restritivo; você tem liberdade para escolher suas próprias ferramentas de roteamento, gerenciamento de estado e compilação.

📝 Exercícios

1. Pergunta básica (Dificuldade: ⭐): Acesse o site react.dev, encontre a seção “Learn React” na página inicial, dê uma olhada nas três primeiras páginas do tutorial e anote os três conceitos que você considera mais importantes.
2. Questão de reflexão (Dificuldade: ⭐): Explique com suas próprias palavras a diferença entre “programação declarativa” e “programação imperativa” e dê um exemplo da vida cotidiana (não se limitando à programação).
3. Questão comparativa (Dificuldade: ⭐⭐): Se você quisesse criar um blog, qual você acha que seria mais adequado: React ou Vue? Cite pelo menos duas razões para justificar sua escolha.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós