JavaScript, Node.js, TypeScript, React, HTML5 e CSS3

Do zero

Uma página web é como uma casa:

• O HTML é a estrutura: paredes, cômodos, portas. Diz o que é cada parte (um título, um parágrafo, um formulário).
• O CSS é a decoração: cores, tamanhos, posições. Diz como cada parte aparece.
• O JavaScript é a parte elétrica: o que acontece quando alguém aperta um botão.

O JavaScript nasceu para rodar no navegador. O Node.js levou a mesma linguagem para o servidor: com ele, dá para escrever uma API inteira em JavaScript.

O TypeScript é JavaScript com etiquetas de tipo: você diz que valor é um número, e o compilador reclama, antes de rodar, se alguém tentar somar um texto a ele. No fim, ele vira JavaScript comum.

E o React é um jeito de montar interfaces com componentes, como peças de Lego: um componente “Lista de processos”, outro “Botão de filtro”. Você descreve como a tela deve ficar para cada estado (“mostrando só os urgentes”), e o React redesenha sozinho quando o estado muda.

Frase para guardar: HTML estrutura, CSS apresenta, JavaScript comporta; Node leva o JavaScript ao servidor, TypeScript põe tipos, React desenha a tela a partir do estado.

Em 1 minuto

• JavaScript: let e const têm escopo de bloco; var tem escopo de função. As três são içadas (hoisting), mas só a var começa valendo undefined; let e const ficam na zona morta temporal e dão erro se usadas antes da declaração. === compara valor e tipo; == converte os tipos antes ('5' == 5 é verdadeiro). É monothread, com um event loop que trata operações assíncronas (Promises, async e await) sem travar.
• Node.js: ambiente de execução de JavaScript fora do navegador, sobre o motor V8, com entrada e saída não bloqueantes; pacotes pelo npm, descritos no package.json.
• TypeScript: superconjunto do JavaScript com tipagem estática. Os tipos são conferidos na compilação e apagados no JavaScript gerado; não existem em execução.
• React: componentes são funções que devolvem JSX (HTML dentro do JavaScript). Props vêm do componente pai e são só de leitura; estado (useState) é interno e, ao mudar, provoca nova renderização; useEffect roda efeitos (como buscar dados) depois da renderização. Itens de lista precisam de uma key estável.
• HTML5: elementos semânticos (header, nav, main, article, section, aside, footer), novos tipos de campo (email, date, number), validação com required, mídia nativa (video, audio) e canvas.
• CSS3: modelo de caixa (conteúdo, padding, borda, margem), especificidade (estilo inline, depois id, depois classe, depois elemento), flexbox (uma dimensão), grid (duas dimensões) e media queries (layout responsivo).

Exemplo concreto: a lista de processos

HTML e CSS, com marcação semântica e um layout que muda no celular:

<main>
  <section class="processos">
    <h1>Processos do dia</h1>
    <ul id="lista">…</ul>
  </section>
</main>

.processos ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

@media (max-width: 600px) {
  .processos ul { grid-template-columns: 1fr; }   /* no celular, uma coluna */
}

React com TypeScript, com o filtro “só urgentes” guardado no estado:

import { useState } from 'react';

type Processo = { numero: string; urgente: boolean };

export function ListaDeProcessos({ processos }: { processos: Processo[] }) {
  const [soUrgentes, setSoUrgentes] = useState(false);
  const visiveis = soUrgentes ? processos.filter((p) => p.urgente) : processos;

  return (
    <section>
      <label>
        <input type="checkbox" checked={soUrgentes}
               onChange={(e) => setSoUrgentes(e.target.checked)} />
        Só urgentes
      </label>
      <ul>
        {visiveis.map((p) => <li key={p.numero}>{p.numero}</li>)}
      </ul>
    </section>
  );
}

processos é uma prop: vem de fora, e o componente não a altera. soUrgentes é estado: quando o usuário marca a caixa, setSoUrgentes muda o estado e o React desenha a lista de novo. O tipo Processo só existe para o TypeScript conferir o código; some no JavaScript final.

JavaScript assíncrono, buscando os processos de uma API sem travar a página:

async function carregarProcessos() {
  const resposta = await fetch('/api/processos');   // a página continua respondendo
  if (!resposta.ok) throw new Error('Falha ao carregar');
  return resposta.json();
}

Comparação: o que mais confunde

O modelo de caixa em números: um elemento com width: 200px, padding: 10px e border: 2px ocupa 200 + 2 × 10 + 2 × 2 = 224 px no padrão (box-sizing: content-box). Com box-sizing: border-box, ocupa só os 200 px: o padding e a borda ficam por dentro. A margem fica sempre do lado de fora.

Especificidade: se li diz azul, .ativo diz verde e #principal diz vermelho, o item <li id="principal" class="ativo"> fica vermelho: id vence classe, que vence elemento. Estilo inline vence os três, e !important passa por cima de todos.

Como a FCC cobra

• Promises, async e await e o event loop.
• Características do Node.js (não bloqueante, npm).
• O que o TypeScript acrescenta e o que acontece com os tipos na compilação.
• Seletores, especificidade, flexbox, grid e media queries.

Pegadinhas

Explique com suas palavras

Explique a um colega a diferença entre props e estado no React, usando o filtro “só urgentes” de uma lista de processos.

1. Escreva sem olhar a lição, com frases curtas e um exemplo seu.
2. Onde travar ou precisar de jargão, há uma lacuna: releia só essa parte.
3. Compare com a explicação-modelo e reescreva o que faltou.

Sua explicação

Fica salva neste navegador.

Comparar com uma explicação-modelo

A lista de processos chega ao componente de fora, de quem o usa: isso é uma prop. O componente só lê a lista, não a altera, porque ela pertence a quem a mandou. Já a caixa “só urgentes” é uma informação do próprio componente: marcada ou não. Isso é estado.

Quando o usuário marca a caixa, o componente muda o próprio estado, e o React desenha a tela de novo, agora só com os processos urgentes. Eu não preciso apagar e criar itens na tela à mão: digo como a tela fica para cada estado, e o React faz o resto.

Teste-se

Mais duas questões deste tópico estão em Questões.

Flashcards gerados

Ligação com o estudo de caso

Num caso sobre um portal para jurisdicionados, proponha a pilha em camadas: front-end em React com TypeScript (tipos reduzem erros, componentes reaproveitáveis), HTML semântico e CSS responsivo (acessibilidade e celular), e uma API em Node.js. Lembre a acessibilidade: elementos semânticos, rótulos nos campos e contraste adequado.

Fontes da lição

• Edital nº 01/2026, Anexo II, Desenvolvimento de Sistemas (fontes/edital-01-2026.txt).
• MDN Web Docs: JavaScript, HTML e CSS.
• Documentação oficial do React (componentes, props, estado e hooks).
• Documentação oficial do TypeScript e do Node.js.