Introdução a React

Juno

Bem-vindo ao manual de React! Sou Juno, e fico feliz que você esteja aqui. React é uma ferramenta para construir interfaces de usuário, e o importante saber de início é que React é JavaScript do começo ao fim. Se o JavaScript ainda parecer um pouco frágil, é completamente normal, e vale a pena se sentir confortável ali primeiro.

Vamos seguir uma ideia pequena por vez: 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 que você não possa perguntar sobre.

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

Juno

Bem-vindo ao manual de React. Sou Ace, e gosto de ser prático. React é como você organiza uma interface de usuário ao redor de componentes: pedaços pequenos e independentes que você constrói uma vez e reutiliza, cada um mantendo sua própria fatia de dados.

A gente fica prático o tempo todo: lê a ideia, constrói um componente com ela, conecta 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 Sol, e vou te guiar através do modelo mental e das arestas vivas. Aqui está o essencial: você descreve como a UI deve parecer para um conjunto de dados, e React renderiza novamente quando esses dados mudam. Se você acertar esse modelo, a maior parte do React flui naturalmente disso.

Parte da habilidade é saber quando React vale a pena. Ele te dá muito quando uma UI tem estado real para gerenciar, e custa complexidade que você nem sempre precisa. Espere pelo modelo de renderização, pelas regras de hooks, e pelos lugares onde a abstração vaza. Leia com atenção e questione tudo isso, inclusive eu.

No momento em que uma página fica interativa, um problema aparece. Em JavaScript puro, você alcança a página, encontra o elemento que quer, e o atualiza na mão toda vez que seus dados mudam, mantendo a tela e os dados em sincronismo você mesmo. Isso funciona para um ou dois botões. 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 deve parecer para seus dados atuais, e React cuida das atualizações quando esses dados mudam.

React é uma biblioteca JavaScript para construir interfaces de usuário feitas de componentes, e você compõe esses pedaços 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 cobre como escrever e combiná-los.

Se você já passou pelo manual de JavaScript, você já fez a versão difícil disso na mão. O capítulo sobre DOM é onde você aprendeu a ler e mudar elementos na página, e o capítulo sobre eventos é onde você fez a página reagir a um clique ou uma tecla pressionada. React é construído em cima exatamente dessas ideias. Ele te dá uma forma mais limpa de as expressar conforme sua aplicação cresce.

Uma coisa para ser firme: React é JavaScript, integralmente. 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 há atalho para isso. Se você não passou pelo manual de JavaScript, comece ali, porque o tempo gasto solidificando os fundamentos vale a pena diretamente aqui. Também vale a pena ler o que é um framework para ter a visão maior de onde uma biblioteca como React se encaixa 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 em sua máquina. Dali em diante: construindo e compondo componentes, escrevendo marcação com JSX, estilizando-os, passando dados com props, renderizando listas com keys, mantendo dados em mudança em estado, respondendo a eventos, renderizando condicionalmente, lidando com formulários, compartilhando estado entre componentes, rodando efeitos colaterais com useEffect, buscando dados de um servidor, alcançando o DOM com refs, e o conjunto mais amplo de hooks. Fecha com pensando em React, tornando uma interface acessível, e um mapa do que vem depois. Esse é o essencial que você alcança em quase toda aplicação React. Solidifique esses fundamentos e o resto é uma escalada muito mais curta.

Um segundo conjunto de capítulos continua de onde aqueles terminam, para quando você quer eles: padrões de componentes reutilizáveis construídos em children, context, e custom hooks; roteamento com React Router, de layouts aninhados através de URL params até rotas protegidas; como React renderiza e o que isso significa para performance; e autenticação e TypeScript. Eles seguem os mesmos três guias e o mesmo seletor de nível, e acompanham o curso Advanced React da Scrimba da forma que estes capítulos acompanham o gratuito. Além do básico é o mapa que te entrega para lá.

JunoReact é ainda JavaScript Aqui vai uma coisa 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 por baixo está fazendo, porque é tudo que ele ever é.

JunoReact é ainda JavaScript Tenha isso em mente enquanto você vai: React adiciona um pequeno número de ideias novas, componentes, JSX, props, estado, hooks, em cima do JavaScript que você já escreve. O resto é funções, arrays, objetos, e eventos fazendo seus trabalhos habituais.

Quando um componente se comporta mal, lê-lo como JavaScript ordinário primeiro vai te tirar do aperto mais vezes que alcançar uma resposta específica de React.

JunoReact é ainda JavaScript A abstração é fina de propósito. Um componente é uma função de suas props e estado que retorna uma descrição da UI; o trabalho do React é reconciliar essa descrição com o DOM eficientemente.

Quase todo gotcha, closures velhos, re-renderizações desnecessárias, efeitos disparando quando você não esperava, vem de esquecer que a função roda novamente a cada renderização. Mantenha o modelo de execução JavaScript em sua cabeça e o comportamento do React deixa de ser surpresa.

Conheça seus guias

Este manual é apresentado por três guias, e você escolhe qual te guia por aí. O material é o mesmo para todos; seu guia define a voz em que é contado, e nas páginas que se adaptam, o quanto cada seção se aprofunda.

Mude de guia a qualquer momento a partir do seletor no topo de qualquer página, ou abra Preferências no canto inferior direito para mudar seu guia, idioma, ou tamanho da fonte.

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

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