React do zero: criando seu primeiro app passo a passo em 2026

React é a biblioteca JavaScript mais usada para criar interfaces de usuário — mantida pelo Meta (Facebook) e adotada por empresas de todos os tamanhos, de startups a gigantes como Airbnb, Netflix e Instagram. Aprender React em 2026 é uma das habilidades frontend com maior demanda no mercado. Este guia vai do zero a um app React funcional, cobrindo os conceitos fundamentais com exemplos práticos.

Setup com Vite (o jeito moderno de criar projetos React)

Create React App (CRA) foi por muito tempo o padrão, mas foi oficialmente descontinuado. Em 2026, Vite é a ferramenta de build recomendada — mais rápido, mais leve, melhor DX:

npm create vite@latest meu-app -- --template react
cd meu-app
npm install
npm run dev

Abra http://localhost:5173 no browser — seu app React está rodando. A estrutura criada: src/ com main.jsx (ponto de entrada) e App.jsx (componente raiz).

Componentes: os blocos de construção do React

React constrói UIs como uma árvore de componentes. Um componente é uma função JavaScript que retorna JSX (sintaxe parecida com HTML, mas executada em JavaScript):

// Componente funcional simples
function Saudacao({ nome, cargo }) {
  return (
    <div className="cartao">
      <h2>Olá, {nome}!</h2>
      <p>Cargo: {cargo}</p>
    </div>
  )
}

// Usando o componente
function App() {
  return (
    <div>
      <Saudacao nome="Ana" cargo="Desenvolvedora" />
      <Saudacao nome="Carlos" cargo="Designer" />
    </div>
  )
}

Props (propriedades) são como os atributos HTML mas para componentes React — passam dados do componente pai para o filho.

useState: adicionando interatividade

useState é o hook mais fundamental do React — permite que o componente “lembre” de um valor e atualize a UI quando ele muda:

import { useState } from 'react'

function Contador() {
  const [count, setCount] = useState(0)  // valor inicial = 0

  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>Zerar</button>
    </div>
  )
}

O React re-renderiza o componente automaticamente sempre que o estado muda — você nunca manipula o DOM diretamente.

useEffect: executando código em resposta a mudanças

import { useState, useEffect } from 'react'

function Posts() {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)

  // Executa quando o componente "monta" (aparece na tela)
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then(res => res.json())
      .then(data => {
        setPosts(data)
        setLoading(false)
      })
  }, [])  // [] = executa só uma vez, na montagem

  if (loading) return <p>Carregando...</p>

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Próximos passos no ecossistema React

Com componentes, useState e useEffect você consegue construir apps React funcionais. O caminho natural a seguir: React Router para navegação entre páginas sem recarregar. Formulários com React Hook Form para input e validação. Gerenciamento de estado global com Zustand ou React Context para compartilhar dados entre componentes. Next.js para apps React com SSR (Server-Side Rendering), roteamento baseado em arquivo e deploy simplificado — é o framework React recomendado pela equipe do React para a maioria das aplicações de produção em 2026.