Introdução ao React

Juno

Bem-vindo ao manual de React! Sou a Juno, e fico feliz que você esteja aqui. React é uma ferramenta para construir interfaces de usuário, e o importante a saber desde o início é que React é JavaScript do começo ao fim. Se o JavaScript ainda parece instável, isso é completamente normal, e vale a pena se sentir à vontade nele primeiro.

Vamos levar tudo passo a passo: um pedaço da página aqui, um pouco de dados ali, e aos poucos você vai ver como tudo se encaixa. Nada aqui é tão básico a ponto de você não poder perguntar.

Se você ainda não fez o manual de JavaScript, comece por lá e volte depois. React fará muito mais sentido quando isso estiver claro.

Juno

Bem-vindo ao manual de React. Sou o Ace, e gosto de manter as coisas práticas. React é como você organiza uma interface de usuário em torno de componentes: pequenas peças independentes que você constrói uma vez e reutiliza, cada uma contendo sua própria fatia de dados.

A gente fica na prática o tempo todo: lê a ideia, constrói um componente com ela, liga um pouco de estado, vê ele reagir a um clique. React é uma biblioteca que você aprende usando, então é assim que vamos aprender.

Juno

Bem-vindo ao manual de React. Sou o Sol, e vou te levar através do modelo mental e das armadilhas. O essencial é isto: você descreve como a UI deveria parecer para um conjunto de dados, e React re-renderiza quando esses dados mudam. Se você entender esse modelo direito, a maioria do React sai naturalmente.

Parte da habilidade é saber quando React vale a pena. Ele traz muito benefício quando uma UI tem estado real para gerenciar, mas também traz complexidade que você nem sempre precisa. Espere aprender sobre o modelo de renderização, as regras dos hooks, e os lugares onde a abstração vaza. Leia com atenção e questione tudo, inclusive eu.

No momento em que uma página fica interativa, um problema aparece. Em JavaScript puro você procura na página o elemento que quer, e o atualiza manualmente cada vez que seus dados mudam, mantendo a tela e os dados sincronizados você mesmo. Isso funciona para um botão ou dois. Mas fica frágil rápido conforme a página cresce, porque cada pedaço de estado tem seu próprio conjunto de atualizações manuais para lembrar. React inverte isso: você descreve como a UI deveria parecer para seus dados atuais, e React lida com as atualizações quando esses dados mudam.

React é uma biblioteca JavaScript para construir interfaces de usuário a partir de componentes, e você compõe essas peças em telas inteiras.

O que é um componente?

Um componente é uma função que retorna um pedaço da sua UI. Telas maiores são construídas compondo muitos deles juntos. Componentes aborda como escrevê-los e combiná-los.

Se você passou pelo manual de JavaScript, você já fez a versão difícil disso manualmente. O capítulo sobre DOM é onde você aprendeu a ler e alterar elementos na página, e o capítulo sobre eventos é onde você fez a página responder a um clique ou uma tecla pressionada. React é construído exatamente em cima dessas ideias. Ele te dá um jeito mais limpo de expressá-las conforme seu app cresce.

Uma coisa para deixar clara: React é JavaScript, de ponta a ponta. Componentes são funções, props são argumentos, estado são variáveis, e a lógica dentro de um componente é a mesma linguagem que você escreve em qualquer lugar. Não tem atalho. Se você ainda não passou pelo manual de JavaScript, comece por lá, porque o tempo gasto consolidando os fundamentos vale a pena aqui. Também é bom ler o que é um framework para entender o quadro maior de onde uma biblioteca como React fica e o que ela faz por você.

Aqui está o escopo, para você saber o que este manual cobre. Ele começa com o que React é, de onde veio, e como colocar um projeto rodando com Vite na sua máquina. De lá: construindo e compondo componentes, escrevendo markup com JSX, estilizando-os, passando dados para baixo com props, renderizando listas com keys, mantendo dados que mudam em estado, respondendo a eventos, renderizando condicionalmente, manipulando formulários, compartilhando estado entre componentes, executando side effects com useEffect, buscando dados de um servidor, acessando o DOM com refs, e o conjunto maior de hooks. Fecha com pensar em React, tornando uma interface acessível, e um mapa do que vem depois. Esse é o núcleo que você usa em quase todo app React. O ecossistema mais amplo, roteamento, Next.js, e deployment, é sinalizado no capítulo final em vez de ser ensinado aqui. Solidifique esses fundamentos e o resto é uma subida muito mais curta.

JunoReact ainda é JavaScript Aqui está algo reconfortante sobre React: não há uma linguagem React separada para aprender. Um componente é uma função JavaScript, props são seus argumentos, e estado é um valor que você armazena. Toda vez que React parece confuso, geralmente ajuda perguntar o que o JavaScript puro embaixo está fazendo, porque é só isso que sempre é.

JunoReact ainda é JavaScript Tenha isso em mente conforme você avança: React adiciona um pequeno número de novas ideias, componentes, JSX, props, estado, hooks, em cima do JavaScript que você já escreve. O resto é funções, arrays, objetos, e eventos fazendo seus trabalhos usuais. Quando um componente se comporta mal, ler ele como JavaScript ordinário primeiro vai te tirar do buraco mais vezes que buscar uma resposta específica de React.

JunoReact ainda é JavaScript A abstração é fina propositalmente. Um componente é uma função de seus props e estado que retorna uma descrição da UI; o trabalho do React é reconciliar essa descrição com o DOM eficientemente. Quase toda armadilha, closures obsoletos, re-renders desnecessários, effects disparando quando você não esperava, vem de esquecer que a função roda novamente em cada renderização. Mantenha o modelo de execução JavaScript em sua cabeça e o comportamento do React para de ser surpreendente.

Conheça seus guias

Este manual é apresentado por três guias, e você escolhe qual te mostra ao redor. O material é o mesmo para todos; seu guia define o tom em que é contado, e nas páginas que se adaptam, o quão profundo cada seção vai.

• Juno ensina a trilha iniciante: calorosa e paciente, analogias simples, nada assumido.
• Ace ensina a trilha intermediária: prática e mão na massa, direto ao que você realmente faz.
• Sol ensina o Deep Dive: o mecanismo, os trade-offs, e os detalhes de produção que todos os outros pulam.

Mude de guia a qualquer momento usando o seletor no topo de qualquer página, ou abra Preferences no canto inferior direito para mudar seu guia, idioma, ou tamanho da fonte.

Quando estiver pronto, o manual começa de verdade. O próximo capítulo, O que é React, cobre o que React realmente é, o problema para o qual foi construído, e como se encaixa ao lado do JavaScript que você já conhece.

Faça o curso de React no ScrimbaConstrua seis projetos React no seu navegador, grátis, com Bob Ziroll.→