Estrada para reagir

Dec 01 2022

O React é uma das melhores bibliotecas Javascript usadas para criar aplicativos da web. Para entender o React, precisamos entender como ele funciona nos bastidores.

Foto de Ksenia Yakovleva no Unsplash

O React é uma das melhores bibliotecas Javascript usadas para criar aplicativos da web. Para entender o React, precisamos entender como ele funciona nos bastidores. Neste artigo, vamos examinar os fundamentos do React, a API bruta do React, como ela está funcionando internamente e, finalmente, criar um componente React reutilizável.

Presumo que você tenha uma compreensão básica dos conceitos de Javascript e HTML DOM. Caso contrário, você pode passar por esses conceitos aqui: Guia de Javascript , Introdução ao DOM .

Agora vamos pular para o nosso tópico!!

Como uma página da Web é criada?

Você já teve curiosidade de saber como a web funciona? O que acontece depois que você digita a URL de um site e clica em Enter? Como você pode ver essa página da web em nossa tela? Vamos ver isso passo a passo.

1. Depois de pesquisar qualquer site, uma solicitação HTTP é enviada ao servidor.

2. O servidor enviará os arquivos do site.

3. O navegador analisará esses arquivos. Primeiro, um arquivo HTML é analisado, depois os arquivos CSS e JavaScript são analisados.

4. O navegador cria o DOM a partir do HTML analisado e o exibe na tela.

É assim que uma página da web é exibida em sua tela (existem outros conceitos como servidor DNS e protocolo HTTP, mas essa não é nossa área de interesse). É simples assim, mas espere, o que é esse DOM? De onde veio? Vamos explorar um pouco o DOM?

DOM refere-se ao Document Object Model, que representa um documento HTML com uma árvore lógica. Cada ramificação contém nós e cada nó contém objetos. Os métodos DOM permitem acesso ao DOM. Com esses métodos, você pode alterar a estrutura e o conteúdo do documento.

Como todos sabemos, o HTML é o bloco de construção básico da Web e podemos criar páginas da Web usando HTML. Vamos criar uma página da Web simples exibindo “Hello world!!” como mostrado abaixo:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Para permitir que o javascript interaja com o DOM, precisamos adicionar uma tag de script no arquivo HTML e você pode escrever o código para criar, excluir ou atualizar os elementos no DOM (isso é o que chamamos de manipulação do DOM).

Vamos examinar um código JavaScript que interage com o “Hello World!!” criado acima. página e muda seu conteúdo para “Wassup World!!”.

Criando elementos HTML com Javascript:

Como vimos que podemos modificar elementos HTML através de javascript, vamos tentar criar uma página web que contenha um div com “root” como id e h1 como filho do div. h1 contém “Hello World!!”. O código pode ser encontrado na caixa de areia abaixo.

Mas criar elementos através do Javascript é imperativo. Para realizar esta tarefa, devemos fornecer Javascript com instruções passo a passo. Por exemplo, se você deseja criar um div com um id, deve primeiro criar esse elemento div , definir o atributo id e, finalmente, anexar esse div ao seu pai. Já é muito trabalho. E se houver uma maneira de dizer ao JavaScript apenas qual elemento criar, em vez de como criá-lo (abordagem declarativa)? Reduz muito código JavaScript. Parece ótimo, certo? Mas como o alcançamos? O que é essa abordagem imperativa e declarativa?

A programação imperativa é como você faz algo, e a programação declarativa é mais como o que você faz. Aqui está um belo artigo sobre programação imperativa versus declarativa .

React é uma linguagem declarativa, ou seja, nos permite escrever código sem nos preocuparmos com como as coisas estão acontecendo nos bastidores.

Então, vamos ver como a programação declarativa pode facilitar nossas vidas.

Uma visão geral da API do React:

A API React inclui métodos para manipular o DOM. por exemplo, React.createElement() e ReactDOM.render(). Considere o método React.createElement() equivalente a document.createElement() e ReactDOM.render() como document.append(). Vamos examinar profundamente esses métodos.

React.createElement() recebe dois argumentos: o elemento a ser criado e props. Se você deseja criar uma tag div simples com o id “root” e o texto “Hello World!” dentro dele vai ficar assim:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React é o ponto de partida para usar React em seu código. Você pode instalá-lo como um pacote por meio do npm ou usar os arquivos de script disponíveis em unpkg.com . Vamos usar arquivos de script em nosso código de amostra, pois não precisamos nos preocupar em instalá-los.

Agora vamos recriar o mesmo “Hello World!!” página com a API React.

A propriedade children para React.createElement() pode ser texto simples ou pode ser outro elemento, é assim que criamos elementos aninhados. Para ilustrar, considere o seguinte código HTML: um div como um contêiner que contém outro div como filhos. A tag div filha contém duas tags span com o texto “Hello” e “World”. Link para o códigoSandbox

criando elementos aninhados com React API

Para criar elementos aninhados temos que usar métodos aninhados, o que dificulta muito a leitura e compreensão do código.
Portanto, precisamos de um código mais legível. Então, existe alguma maneira alternativa de tornar o código legível? E se pudéssemos escrever uma sintaxe semelhante a HTML em vez de usar a API React? JSX entra em cena aqui. Vamos passar alguns minutos aprendendo sobre JSX.

JSX:

JSX é uma sintaxe semelhante a HTML (mas não HTML), que é um açúcar sintático sobre sua API React bruta. Você pode escrever todos esses métodos React em sintaxe simples semelhante a HTML com a ajuda de JSX.

Como JSX não é Javascript, você precisa transpilá-lo para JavaScript, que é entendido pelo navegador.

Babel é o transpiler que transpila JSX em Javascript. Todo o JSX é convertido para a API React pelo Babel, conforme mostrado abaixo.

Babel transpilando JSX para Javascript

Conforme visto na imagem anterior, <div id=”root”> é convertido em React.createElement(“div”,{id:”root”},children). É assim que Babel converte JSX na API React.

Para fazer uso do Babel em nosso projeto, temos que usar um arquivo de script do unpkg.com, e podemos começar a escrever JSX dentro da tag script mencionando type=”text/babel” . Para mais clareza, você pode consultar abaixo sandbox

Chegamos tão longe de modificar imperativamente o DOM por meio de Javascript para usar JSX. Ao contrário do Javascript, não nos preocupamos em como criar elementos usando JSX. É o trabalho de Babel convertê-los na API React, que modificará o DOM.

É assim que a abordagem declarativa do React facilita nossas vidas. Mas ainda não acabou, e estamos perdendo a ideia principal do React, ou seja, reusabilidade. Vamos criar um componente React reutilizável.

Criando componentes React:

Como sabemos que funções facilitam nossa vida compartilhando código, também podemos compartilhar o código JSX como funções, mas no React são chamados de componentes.

Vamos dar um exemplo.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Passamos a função de mensagem como um parâmetro para React.createElement() em vez de um elemento. quando passamos uma função como parâmetro para React.createElement(), o React Reconciler chamará essa função com o parâmetro que passamos. Quando o reconciliador encontra um elemento host, ele permite que o renderizador cuide de montá-lo.

Os componentes do host são componentes específicos da plataforma pertencentes ao ambiente do host (como navegadores ou dispositivos móveis). No caso de um host DOM, podem ser elementos HTML como div ou img .

No nosso caso, ocorrerão duas chamadas de função, message (“Hello World!!”) e message (“GoodBye World!!”) , e ambas as funções retornarão:

<div className=”msg”> Olá, mundo!! </div>

<div className=”msg”>Adeus mundo!! </div>

Assim como usar JSX para tornar o código mais legível do que usar a API React bruta, usar JSX para componentes personalizados (funções Javascript) torna nosso código mais limpo e legível. Lembre-se que é o Babel o responsável por pegar nosso JSX e transpilá-lo para a API do React, então precisamos configurar o Babel de forma que ele passe a função pelo seu nome ao invés de uma string.

Para usar um componente personalizado como uma tag JSX, devemos colocar em maiúscula o primeiro caractere do nome da função para que o Babel o reconheça como um componente personalizado. Se parece com isso:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

Viva!! criamos nosso primeiro componente React

Conclusão:

É assim que o React funciona nos bastidores. Lembre-se de que é apenas um artigo fundamental que explica como as coisas funcionam nos bastidores, e há muitos outros conceitos como Estado, DOM virtual, reconciliação etc. que tornam o React poderoso e eficiente.