React é uma biblioteca JavaScript para construir interfaces de usuário.
Esta é a definição oficial de React. Mas e se você não estiver familiarizado com JavaScript? E se você não for um desenvolvedor? Você ainda seria capaz de entender (e aprender) React?
Minha resposta é um SIM firme. É por isso que escrevi este artigo: o que é exatamente React? Por que é tão popular? Que problemas o React resolve?
Este artigo é uma introdução ao React para iniciantes. É a primeira postagem que você gostaria de ler antes de aprender os detalhes do React. Explicarei as ideias centrais do React em inglês simples (e rabiscos 🌴 ). Não tem experiência com JavaScript? Sem problemas! Contanto que você tenha algum conhecimento básico de HTML (por exemplo, o formato de uma tag HTML), você poderá desfrutar deste artigo.
Esta é uma visão panorâmica, mas também vou equipá-lo com um par de binóculos . Você não apenas verá o panorama geral do que torna o React especial, mas também ampliará para obter alguma experiência prática de escrever um componente React real. E sim, nenhum conhecimento de JS é necessário!
Lembre-se: você não precisa ser um desenvolvedor experiente para entender as idéias centrais do React!
Pronto para iniciar a jornada?
Vamos começar com algo que você já deve ter ouvido muitas vezes, o DOM.
Qual é o DOM?
Quando você insere o endereço do seu site favorito em um navegador, seu computador inicia uma conversa com outro computador distante, comumente referido como servidor . Normalmente, o seu computador solicita algumas informações e o servidor responde:
Seu computador: O que há de bom neste site aleatório learnreact.design?
O servidor: Espere um pouco, deixe-me pegar algo para você. Bip. Boop.
A parte principal da resposta do servidor geralmente inclui três itens: HTML, CSS e JavaScript.
HTML lista o conteúdo de uma página da web e descreve sua estrutura. Quantos títulos e parágrafos existem? Quais imagens o usuário deve ver? Este botão e aquela caixa de texto estão contidos na mesma caixa?
Usando essas informações, o navegador cria algo chamado … o DOM!
Espere um segundo, o DOM é uma … árvore? Sim, uma árvore! Curiosamente, muitas coisas em nosso computador parecem uma árvore. Vamos dar ao nosso amigo árvore um apelido … hmm, e Domo?
Domo trabalha como modelo no prestigioso estúdio de arte “Web Browser”. Seu trabalho é posar na frente do artista que pinta um retrato (ou talvez milhões de retratos).
Na vida real, DOM significa Document Object Model. Na verdade, é um modelo – um modelo do documento (também conhecido como página da web). É uma pose. O navegador pinta um retrato. Os retratos são o que vemos em uma página da web: as caixas de texto, os parágrafos, as imagens e assim por diante. O trabalho de um desenvolvedor é como o de um diretor que diz a Domo o que vestir e que pose fazer. Isso determina a aparência desses retratos no final.
Para verificar a aparência do DOM, se você estiver usando um navegador de desktop, clique com o botão direito do mouse nesta página e escolha “Inspecionar”. Você consegue entender o que está na guia Elementos?
A API DOM
Freqüentemente, queremos que uma página da web seja dinâmica e interativa – isso significa que seu conteúdo muda de tempos em tempos: adicionando ou removendo texto aqui e ali, mostrando um modal ou atualizando um gráfico com base em alguns novos dados vindos do servidor.
Lembre-se, para alterar o que está em uma página da web, precisamos atualizar o DOM. O artista não é capaz de pintar novos retratos até que Domo mude para uma nova pose.
Como faríamos Domo mudar para uma nova pose?
Acabamos de falar com ele. Ele ouve. Curiosamente, as orelhas de Domo têm um nome: API DOM .
Para manipular o DOM, um desenvolvedor deve escrever código em JavaScript que se comunica com a API do DOM e, por sua vez, atualiza o conteúdo da página da web.
A crescente complexidade
Falar diretamente com o Domo tem sido a abordagem padrão de desenvolvimento da web por anos, especialmente quando o conteúdo da web era principalmente estático. Um desenvolvedor borrifaria alguma interatividade no topo das páginas estáticas escrevendo uma pequena quantidade de código JavaScript.
Porém, com o surgimento de SPAs (Single Page Application) como Gmail e Google Maps, as pessoas começaram a esperar muito mais. Em vez de principalmente páginas da web estáticas , eles querem aplicativos da web que sejam interativos, rápidos e responsivos.
O código necessário para construir aplicativos da web torna-se cada vez mais grande e complexo. Freqüentemente, requer a colaboração de muitos membros da equipe.
A abordagem tradicional parou de funcionar. Torna-se caótico e ineficiente falar sempre diretamente com o Domo.
As ideias centrais da reação
Deixe-me apresentá-lo ao super-herói, React:
Com o React, os desenvolvedores não falam mais diretamente com o Domo. React atua como um agente entre o desenvolvedor e o Domo. Ele suaviza a comunicação e agiliza o processo de criação de retratos.
O React é composto de código JavaScript. É construído de uma forma que não precisamos mais trabalhar diretamente com a API DOM na maioria dos casos. Em vez disso, escrevemos um código mais simples enquanto o React lida com a conversa com o DOM nos bastidores.
React tem alguns superpoderes para lidar com a complexidade cada vez maior do desenvolvimento da web:
- Componentes
- IU declarativa
- Atualizações de DOM reativas
Se esses termos parecem assustadores para você, não se deixe intimidar! Como prometido, usarei inglês simples e rabiscos para ajudá-lo a entendê-los. Acredite em mim, não é tão difícil!
Apenas continue lendo!
Componentes
Os componentes são o principal recurso do React. A ideia central é baseada em uma estratégia simples: dividir e conquistar. Se for difícil grocar um problema de uma vez, nós o dividimos em problemas menores, resolvemos um de cada vez e combinamos os resultados.
Construir um aplicativo no React é quase tudo sobre como trabalhar com componentes: dividir o aplicativo em componentes, encontrar os melhores componentes para o trabalho, encaixar um com o outro, criar novos componentes a partir dos existentes etc.
Hoje em dia, ferramentas de design como Framer e Figma também possuem componentes (e símbolos no Sketch). Eles são muito parecidos com os componentes React, exceto que os últimos são mais flexíveis e poderosos. Na verdade, a inspiração dos componentes nas ferramentas de design veio diretamente dos componentes da engenharia de software. Depois que um componente é criado, podemos criar várias instâncias dele. Podemos usá-lo para construir outros componentes. Se mudarmos um componente, tudo o que inclui este componente será atualizado automaticamente.
Os componentes do React têm duas propriedades importantes:
- Os componentes são combináveis . Eles são feitos para serem reutilizados. Podemos fazer um novo componente com outros componentes.
- Os componentes são independentes uns dos outros. Se mudarmos o código em um lugar, outras partes não quebram.
Se isso parece abstrato para você, não se preocupe! Vou mostrar alguns exemplos e explicar essas propriedades em detalhes em breve.
IU declarativa
Imperativo vs. declarativo
Ao trabalhar diretamente com a API DOM, teríamos que especificar qual elemento alterar no momento certo, na ordem certa. Equivale a descrever a Domo como posicionar passo a passo a cabeça, os braços e as pernas, para cada um dos retratos.
Caramba, isso parece tedioso e sujeito a erros! Por que não podemos simplesmente dizer a Domo o que queremos em vez de como posar? Na verdade, é exatamente assim que construir uma IU no React. Um desenvolvedor desenha um esboço rápido do que deseja. React explica a Domo como fazer pose.
Como os aplicativos que construímos são dinâmicos, muitas vezes queremos que o Domo mude de postura com bastante rapidez. Nós desenhamos muitos esboços e os entregamos ao React em uma grande pilha. O React reúne esses esboços e os vira como um flipbook. Uma IU dinâmica chega ao vivo!
Em termos de tecnologia, se o código define como queremos que seja feito, é imperativo ; se define o que queremos, é declarativo . A forma tradicional de trabalhar diretamente com a API DOM é imperativa, e a forma React é declarativa.
A programação imperativa surgiu na época em que os computadores eram primitivos. As pessoas tiveram que instruí-los em detalhes: onde armazenar os números, como multiplicar etc. Mas isso eventualmente se tornou incontrolável, as pessoas escreveram um software inteligente que converte a definição de problemas em instruções detalhadas. A programação declarativa nasceu.
DOM Virtual
Além de facilitar a vida do desenvolvedor, a programação declarativa no React também oferece oportunidades de otimização de desempenho.
Quando React tem todos os esboços de antemão, ele pode classificá-los, remover qualquer duplicação e certificar-se de que Domo e o artista façam o mínimo de trabalho possível.
Esses esboços são chamados de Virtual DOM . O DOM virtual é muito mais rápido de manipular do que o DOM. Os desenvolvedores trabalham com o Virtual DOM na maioria das vezes, em vez de gerenciar diretamente o DOM. O React lida com o trabalho sujo de gerenciamento do DOM lento.
Atualizações de DOM reativas
Ainda mais legal, imagine se pudéssemos deixar espaços reservados em nossos esboços para representar diferentes variações de uma mesma pose. Assim, quando alguém pedir retratos de Domo com um chapéu diferente, não precisamos mais falar com React. Podemos apenas sentar e deixar o React mudar isso para nós.
Este truque é como React recebeu seu nome. A IU construída com o React é reativa – parece que o DOM “reage” a quaisquer alterações nos dados subjacentes. Não há necessidade de rastrear os dados. Não precisa se preocupar quando atualizar o DOM. Apenas é atualizado automaticamente (pelo React). A ideia de IU reativa simplifica muito o desenvolvimento da IU.