Introdução ao React

Juno

Bem-vindo ao manual de React! Eu sou o Juno, e fico feliz que você esteja aqui. React é uma ferramenta para construir interfaces de usuário, e a primeira coisa que você precisa saber é que React é JavaScript do início ao fim. Se o JavaScript ainda parece um pouco instável para você, isso é completamente normal, e vale a pena se sentir mais seguro nele antes de seguir.

Vamos avançar uma ideia pequena por vez: um pedaço da página aqui, um pouco de dado lá, e pouco a pouco você vai ver como tudo se encaixa. Nada aqui é básico demais para perguntar sobre.

Se você ainda não fez o manual de JavaScript, comece por ali e depois volte. O React vai fazer muito mais sentido depois disso.

Juno

Bem-vindo ao manual de React. Eu sou o Ace, e gosto de manter as coisas práticas. React é uma forma de organizar uma interface de usuário em torno de componentes: pedaços pequenos e independentes, que você constrói uma vez e reutiliza, cada um guardando sua própria parte dos dados.

Vamos manter a prática o tempo todo: ler a ideia, construir um componente com ela, ligar algum estado, ver como ele reage a um clique. React é uma biblioteca que se aprende usando, então é assim que vamos aprender.

Juno

Bem-vindo ao manual de React. Eu sou o Sol, e vou te guiar pelo modelo mental e pelos pontos mais delicados. Aqui está o núcleo disso: você descreve como a interface deveria ficar para um determinado conjunto de dados, e o React faz a renderização de novo quando esses dados mudam. Se você entender bem esse modelo, o resto do React decorre naturalmente dele.

Parte da habilidade está em saber quando o React realmente vale a pena. Ele traz muitos benefícios quando uma interface tem estado real para gerenciar, e traz complexidade que nem sempre é necessária. Espere encontrar o modelo de renderização, as regras dos hooks e os pontos onde a abstração deixa a costura à mostra. Leia com atenção e questione tudo, inclusive o que eu digo.

No momento em que uma página se torna interativa, um problema aparece. Em JavaScript puro, você acessa a página, encontra o elemento que quer e o atualiza manualmente cada vez que seus dados mudam, mantendo a tela e os dados sincronizados por conta própria. Isso funciona para um ou dois botões. Mas fica frágil rapidamente conforme a página cresce, porque cada pedaço de estado tem seu próprio conjunto de atualizações manuais para lembrar. O React inverte essa lógica: você descreve como a interface deveria ficar para os seus dados atuais, e o React cuida das atualizações quando esses dados mudam.

React é uma biblioteca JavaScript para construir interfaces de usuário a partir de componentes, e você combina essas peças para formar telas completas.

O que é um componente?

Um componente é uma função que retorna um pedaço da sua interface. Telas maiores são construídas combinando muitos componentes juntos. Componentes explica como escrevê-los 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 de DOM é onde você aprendeu a ler e alterar elementos na página, e o capítulo de eventos é onde você fez a página responder a um clique ou a uma tecla pressionada. O React é construído exatamente sobre essas ideias. Ele te dá uma forma mais limpa de expressá-las conforme seu app cresce.

Uma coisa para deixar bem clara: React é JavaScript, do começo ao fim. 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 outro lugar. Não existe atalho para fugir disso. Se você ainda não passou pelo manual de JavaScript, comece por ali, porque o tempo investido em firmar os fundamentos vale a pena diretamente aqui. Também vale a pena ler o que é um framework para entender o quadro geral de onde uma biblioteca como o React se encaixa e o que ela faz por você.

Aqui está o que este manual cobre, para você saber o que esperar. Ele começa explicando o que é o React, de onde ele veio, e como colocar um projeto para rodar com o Vite na sua própria máquina. A partir daí: construir e combinar componentes, escrever marcação com JSX, estilizar componentes, passar dados para baixo com props, renderizar listas com keys, guardar dados que mudam em estado, responder a eventos, renderizar de forma condicional, lidar com formulários, compartilhar estado entre componentes, executar efeitos colaterais com useEffect, buscar dados de um servidor, acessar o DOM com refs, e o conjunto mais amplo de hooks. Ele termina com o raciocínio por trás do React, como tornar uma interface acessível, e um mapa do que vem depois. Esse é o núcleo que você usa em praticamente todo app React. Deixe esses fundamentos bem sólidos e o resto se torna uma subida bem mais curta.

Um segundo conjunto de capítulos continua a partir daí, para quando você quiser ir além: padrões reutilizáveis de componentes construídos com children, context e hooks personalizados; roteamento com o React Router, desde layouts aninhados até parâmetros de URL e rotas protegidas; como o 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 mesma forma que estes capítulos acompanham o curso gratuito. Além do básico é o mapa que faz essa passagem.

JunoReact ainda é JavaScript Aqui vai algo reconfortante sobre o React: não existe uma linguagem separada de React para aprender. Um componente é uma função JavaScript, props são seus argumentos, e estado é um valor que você guarda.

Sempre que o React parecer confuso, geralmente ajuda perguntar o que o JavaScript puro por trás dele está fazendo, porque é só isso que ele é, no fundo.

JunoReact ainda é JavaScript Tenha isso em mente ao longo do caminho: o React adiciona um pequeno número de ideias novas, componentes, JSX, props, estado, hooks, por cima do JavaScript que você já escreve. O resto são funções, arrays, objetos e eventos fazendo o que sempre fizeram.

Quando um componente se comporta de forma estranha, ler o código como JavaScript comum primeiro vai te destravar mais vezes do que buscar uma resposta específica do React.

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

Quase todo problema chato, closures desatualizadas, re-renderizações desnecessárias, efeitos disparando quando você não esperava, vem de esquecer que a função é executada de novo em cada renderização. Mantenha o modelo de execução do JavaScript na cabeça e o comportamento do React deixa de ser surpreendente.

Conheça seus guias

Este manual é apresentado por três guias, e você escolhe qual deles vai te acompanhar. O conteúdo é o mesmo para todo mundo; o que muda com o seu guia é o tom em que ele é contado, e, nas páginas que se adaptam, a profundidade de cada seção.

Troque de guia quando quiser, pelo 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 de verdade. O próximo capítulo, O que é React, explica o que o React realmente é, o problema que ele foi criado para resolver, e como ele se encaixa junto ao JavaScript que você já conhece.

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