Introdução ao React: componentes, props, state e JSX na prática

Por que React se tornou o padrão do mercado front-end em menos de uma década?

Em 2013, o Facebook lançou o React como resposta a um problema concreto: interfaces complexas com dezenas de componentes interdependentes que tornavam a manutenção de código um pesadelo. A solução foi radical — em vez de manipular o DOM diretamente, React introduziu o conceito de Virtual DOM e uma arquitetura baseada em componentes reutilizáveis. Dez anos depois, React é usado por Netflix, Airbnb, Instagram, WhatsApp Web e mais de 40% das aplicações front-end em produção no mundo.

A pergunta para o estudante de desenvolvimento de sistemas não é mais “devo aprender React?” — é “quão profundamente preciso entender seus fundamentos para ser competitivo no mercado?” Esta aula responde: é preciso dominar componentes, props, state e JSX. Tudo o mais em React deriva dessas quatro abstrações.

Como ensinar React no ensino médio técnico com infraestrutura limitada?

A aula [SIS]ANO2C3B2S8A1 resolve um desafio pedagógico real: React exige Node.js, npm e um bundler (Vite ou Create React App) para funcionar. Em laboratórios de escola pública, a instalação dessas ferramentas pode consumir toda a aula disponível. A estratégia da SEDUC-SP é precisa — apresentar os conceitos com código limpo e contextualizado, usando o laboratório de informática com ambiente já configurado ou alternativas online como StackBlitz e CodeSandbox, que rodam React diretamente no navegador sem instalação.

Quais são as diferenças fundamentais entre props e state?

Componentes funcionais vs. componentes de classe

Como implementar props e state em React na prática?

Template 1 — Props: componente Button reutilizável

import React from 'react';

// Componente Button — recebe 'label' como prop (imutável)
function Button({ label }) {
  return (
    <button>
      {label}
    </button>
  );
}

// Componente App — passa diferentes props para o mesmo componente
function App() {
  return (
    <div>
      <Button label="Clique Aqui" />
      <Button label="Enviar" />
      <Button label="Cancelar" />
    </div>
  );
}

export default App;

Template 2 — State: contador com useState hook

import React, { useState } from 'react';

function Counter() {
  // useState(0): valor inicial. Retorna [valorAtual, funcaoSetter]
  const [count, setCount] = useState(0);

  // Toda chamada ao setter dispara re-render do componente
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={increment}>
        Clique para incrementar
      </button>
    </div>
  );
}

export default Counter;

Como esse conhecimento aparece em um cenário profissional real?

Perguntas frequentes sobre React para iniciantes

React como mentalidade de composição, não como sintaxe

Aprender React não é memorizar a API do framework — é internalizar uma forma diferente de pensar interfaces: como composição de peças independentes, cada uma com responsabilidade única e fluxo de dados previsível. O desenvolvedor que compreende props como contratos imutáveis e state como fonte única de verdade está pronto para qualquer framework — Vue, Angular, Svelte — porque entendeu o princípio, não a ferramenta.