React Descomplicado: O Que é e Como Começar Já!

O ReactJS é uma das bibliotecas de JavaScript mais populares para desenvolvimento de aplicativos web ou para dispositivos móveis. Criado pelo Facebook, o React contém uma coleção de trechos de código de JavaScript reutilizáveis chamados componentes, usados para a construção da interface do usuário (UI).

É importante observar que o ReactJS não é um framework JavaScript. Isso porque ela é responsável apenas por renderizar os componentes da camada de visualização de uma aplicação. O React é uma alternativa a frameworks como Angular e Vue, que permitem criar funções complexas.

Este artigo explorará os recursos do React, explicará como ele funciona e abordará seus benefícios para desenvolvedores front-end. Também abordaremos as diferenças entre o ReactJS e o React Native em relação às suas funções na indústria de desenvolvimento de aplicativos móveis e para a web.

Também explicaremos como implementar um aplicativo React na Hostinger.

Baixar Glossário Completo de Desenvolvimento Web

Recursos do React

O React possui alguns recursos principais que fazem com que ele se destaque de outras bibliotecas JavaScript. As seções a seguir apresentarão esses recursos e explicarão como eles contribuem para o desenvolvimento de aplicativos web e para dispositivos móveis.

JSX

O JSX é uma extensão de sintaxe JavaScript usada na criação do elemento React. Os desenvolvedores a empregam para incorporar código HTML em objetos JavaScript. Como o JSX aceita a incorporação de funções e expressões JavaScript válidas, ele pode simplificar estruturas de código complexas.

Vamos dar uma olhada em um bloco de código que mostra como incorporar uma expressão no JSX:

const name = 'João da Silva;
const element = h1>Olá, {name}/h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Na segunda linha, nós chamamos a variável name dentro de um elemento React ao colocá-la dentro das chaves.

Enquanto isso, a função ReactDOM.render() renderiza o elemento React na árvore do Document Object Model (DOM), descrevendo a interface do usuário.

O JSX também ajuda a combater ataques Cross-Site Scripting (XSS). Por padrão, o React DOM converte os valores embutidos no JSX em strings antes de renderizá-los. Consequentemente, terceiros não podem injetar código extra por meio da entrada do usuário, a menos que seja explicitamente escrito no aplicativo.

Mais adiante neste artigo, discutiremos com mais detalhes o papel do JSX na criação de componentes React.

Virtual DOM

O Document Object Model (DOM) apresenta uma página da web através de uma estrutura de árvore de dados. O ReactJS armazena árvores DOM virtuais na memória. Ao fazer isso, o React pode aplicar atualizações a partes específicas da árvore de dados, o que é mais rápido do que renderizar novamente toda a árvore DOM.

Sempre que houver uma alteração nos dados, o ReactJS irá gerar uma nova árvore Virtual DOM e compará-la com a anterior para encontrar a maneira mais rápida possível de implementar alterações no DOM real. Este processo é conhecido como diffing.

Ao garantir que a manipulação da interface do usuário afete apenas seções específicas da árvore DOM real, a renderização da versão atualizada leva menos tempo e usa menos recursos. A prática beneficia muito grandes projetos com intensa interação do usuário.

Componentes e Props

O ReactJS divide a interface de usuário em pedaços de código isolados e reutilizáveis, conhecidos como componentes. Os componentes do React funcionam de maneira semelhante às funções JavaScript, pois aceitam entradas arbitrárias chamadas propriedades ou props.

Os elementos React retornados determinam como a interface do usuário ficará no lado do cliente. Aqui está um exemplo de um componente de função que retorna um elemento React:

function Welcome(props) {
  return h1>Olá, {props.name}/h1>;
}

É possível ter quantos componentes forem necessários sem sobrecarregar seu código.

Gerenciamento de Estado

Um estado é um objeto JavaScript que representa uma parte de um componente. Ele muda sempre que um usuário interage com o aplicativo, renderizando uma nova interface do usuário para refletir as modificações.

O gerenciamento de estado refere-se à prática de gerenciar os estados do aplicativo React. Ele inclui o armazenamento de dados em bibliotecas de gerenciamento de estado de terceiros e o acionamento do processo de renderização sempre que os dados são alterados.

Uma biblioteca de gerenciamento de estado facilita a comunicação e o compartilhamento de dados entre os componentes do React. Várias bibliotecas de gerenciamento de estado de terceiros estão disponíveis hoje, mas duas das mais populares são Redux e Recoil.

Redux

A biblioteca de gerenciamento de estado do Redux possui um armazenamento centralizado, que permite manter previsível a árvore de estado de um aplicativo. A biblioteca também reduz a inconsistência de dados, impedindo que dois componentes atualizem o estado do aplicativo simultaneamente.

A arquitetura do Redux suporta registro de erros para facilitar a depuração e possui um método de organização de código estrito, simplificando a manutenção. Além disso, ela possui um grande número de complementos e é compatível com todas as camadas da interface do usuário.

Dito isso, o Redux é bastante complexo e, portanto, abaixo do ideal para pequenos aplicativos com uma única fonte de dados.

Recoil

O Recoil é uma biblioteca de gerenciamento de estado JavaScript lançada pelo Facebook. Ele emprega funções puras chamadas seletores para calcular dados de unidades atualizáveis conhecidas como atoms. Vários componentes podem se inscrever no mesmo atom e, assim, compartilhar um estado.

O uso de atoms e seletores evita estados redundantes, simplifica o código e elimina reprocessamentos excessivos de React e quaisquer componentes filhos. O Recoil é mais adequado para iniciantes do que o Redux, já que seus conceitos básicos são consideravelmente mais fáceis de entender.

Navegação Programática

A navegação programática refere-se a instâncias em que as linhas de código criam uma ação que redireciona um usuário. As ações de login e inscrição, por exemplo, navegam programaticamente os usuários para novas páginas.

O React Router, biblioteca padrão do React para roteamento, fornece várias formas de navegação programática segura entre os componentes sem exigir que o usuário clique em um link.

Usar um componente Redirect é o principal método de navegação programática, com o history.push() sendo uma abordagem alternativa.

Resumindo, o pacote React Router sincroniza a interface do usuário com a URL, dando a você o controle sobre a aparência dos aplicativos React sem depender de links.

Por Que Usar React?

O React tem sido usado por grandes companhias ao redor do mundo. Algumas delas: Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay e Instagram. Essa é a prova de que a ferramenta tem um número de vantagens que não têm nem comparação nos seus competidores.

Abaixo estão algumas das razões para usar o React.

1. Fácil de Usar

O React é uma biblioteca de código aberto para interfaces gráficas (GUI) que tem como foco uma só coisa: tornar a experiência do usuário com a interface mais eficiente. Ela pode ser categorizada como o “V” no padrão MVC (Model-View-Controller).

Como um desenvolvedor de JavaScript, vai ser fácil para você entender o básico do React.

Para fortalecer seu entendimento, dê uma explorada em alguns dos tutoriais já existentes sobre o React. Eles contêm muita informação de como usar a ferramenta, como vídeos, tutoriais e dados que podem enriquecer seus conhecimentos.  

2. Suporte a Componente Reusável em Java

O React permite que você reuse componentes que tenham sido desenvolvido em outras aplicações e que usem a mesma função. A função de reusabilidade é uma vantagem importante para desenvolvedores em geral. 

3. Componente Fácil de Escrever

Também conhecido como React JS, o componente do React é fácil de escrever porque ele usa JSX, uma extensão de sintaxe opcional para JavaScript. Ela permite que você combine HTML com JavaScript.  

O JSX é uma excelente combinação de JavaScript e HTML. Ela simplesmente simplifica toda a estrutura de codificação escrita de um site. Além disso, a extensão também faz com que a renderização de múltiplas funções seja mais fácil.

Ainda que o JSX não seja a extensão de sintaxe mais popular, ela tem provado ser bastante eficiente. Especialmente quando falamos em desenvolver componentes especiais ou aplicações de alto rendimento.  

4. Melhor Desempenho com Virtual DOM

O React melhora, de maneira eficiente, o processo de atualização do DOM (Document Object Model). Como você deve saber, esse processo pode causar muita frustração em projetos baseados em aplicações-web. Por sorte, o React usa Virtual DOMs, então você consegue driblar esses problemas.

A ferramenta permite que você construa um Virtual DOM e o hospede na memória. Como resultado, toda vez que acontece uma mudança no DOM real, o virtual se modifica imediatamente.     

O sistema vai impedir que o DOM real faça atualizações constantemente. Por conta disso, a velocidade da sua aplicação não vai ser interrompida. 

5.  Amigável a SEO

O React permite que você crie uma interface de usuário que pode ser encontrada e acessa em diversos motores de busca. Esse recurso é uma vantagem sensacional porque nem todos os frameworks de JavaScript são amigáveis a SEO.

Junto a isso, como o React melhora o processamento da sua aplicação, ele também pode melhorar os resultados do seu SEO. Afinal, o tempo de carregamento de um site é um fator crucial na otimização de SEO.  

Porém, você deve se atentar ao fato de que o React é apenas uma biblioteca JavaScript. Isso significa que você não pode fazer tudo com ele. O uso de bibliotecas adicionais podem ser necessárias para propósitos de gerenciamento, apontamento ou interações complexas.

Como o React Funciona?

Você pode ficar surpreso ao saber que pode escrever códigos HTML no JavaScript. Mas é exatamente assim que o React funciona.

Criar o representante de um node DOM pode ser feito através da função Element no React. Um exemplo está logo abaixo.

React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 + 5 });

Como você pode ter percebido, a sintaxe do código HTML acima é muito parecida com componentes XML. Porém, ao invés de usar uma classe DOM tradicional, o React usa className.

Tags JSX tem um nome de tag, filhos e atributos. As aspas nos atributos JSX representam as strings (linhas). Esse elemento é similar ao JavaScript.

Além disso, os valores numéricos e expressões devem ser escritos dentro do símbolo chaves {}.

O exemplo acima ilustra muito bem como é a sintaxe do React. E, como você pode ver, a ferramenta usa uma extensão JSX. basicamente, é uma combinação de HTML e JavaScript.

Abaixo está um exemplo de React escrito usando JSX.

<div className="red">Children Text</div>;
<MyCounter count={3 + 5} />;
var GameScores = {player1: 2,player2: 5};
<DashboardUnit data-index="2">
<h1>Scores</h1><Scoreboard className="results" scores={GameScores} />
</DashboardUnit>;

Vamos dar uma olhada no que cada parte da tag HTML acima quer dizer:

• <MyCounter> representa uma espécie de conta que, no caso, mostra um valor numérico.
• GameScores é um objeto literal que tem dois pares de valores independentes.
• <DashboardUnit> é o bloco XML que é renderizado na página.
• scores={GameScores}: esses atributos recebem um valor do objeto GameScores que foi definido antes.

A maior parte do React é escrito em JSX (JavaScript XML) em vez de apenas usar o padrão JS de escrita no JavaScript. Contudo, saiba que isso acontece apenas porque é mais fácil de criar componentes React.

Você pode criar um componente React com o JavaScript padrão. Mas garantimos a você que será um pouco mais trabalhoso e bagunçado.

Fora isso, a ideia por trás do uso do JSX no React é que o Facebook (o desenvolvedor inicial) queria fornecer um tipo de extensão de sintaxe com uma configuração limpa e sem ambiguidades aos desenvolvedores.

E o React Native?

O React Native é uma estrutura JavaScript de código aberto construída na biblioteca React. Os desenvolvedores o utilizam para criar aplicativos React de plataforma cruzada para iOS e Android.

O React Native usa interfaces de programação de aplicativos (APIs) nativas para renderizar componentes de interface do usuário móvel em Objective-C (iOS) ou Java (Android). Por causa disso, os desenvolvedores podem criar componentes específicos da plataforma e compartilhar o código-fonte em várias plataformas.

Apesar de ter semelhanças, o React Native é diferente do ReactJS. Aqui está uma comparação rápida de React Native e ReactJS:

ReactJS	React Native
Uma biblioteca JavaScript.	Um framework JavaScript.
Ideal para construir aplicações web dinâmicas.	Dá uma sensação nativa à interface de usuário de aplicativos móveis.
Usa o Virtual DOM para renderizar o código do navegador.	Usa APIs nativas para renderizar código em dispositivos móveis.
Suporta CSS para criar animações.	Requer a API Animated para animar componentes.
Usa tags HTML.	Não usa tags HTML devido à falta de suporte a DOM.
Usa CSS para estilizar.	Usa a folha de estilo JS para estilizar.

Como Implementar um Aplicativo React na Hostinger

Você precisa de uma hospedagem VPS para tornar seu aplicativo React público. Os planos do Servidor VPS da Hostinger vêm com acesso root completo e são fáceis de fazer upgrade, fazendo com que tanto a implantação quanto o gerenciamento do servidor sejam tarefas simples e fáceis.

Para implementar um aplicativo React na Hostinger, basta seguir estas etapas:

1. Selecione um modelo VPS com sistema operacional Ubuntu 22.04 64 bits.
2. Usando SSH, conecte-se ao sistema operacional:

ssh root@ip_do_seu_servidor

3. Instale um servidor node.js e um servidor proxy reverso. Certifique-se de ter removido o Apache2:

sudo apt-get purge apache2*

curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh

sudo bash nodesource_setup.sh

sudo apt update && sudo apt upgrade -y

sudo apt install -y nodejs nginx

4. Para que seu aplicativo Next.js funcione corretamente, crie um novo arquivo de configuração do Nginx:

sudo nano /etc/nginx/sites-available/nextjs

5. Em seguida, cole esta configuração no arquivo. Lembre-se de substituir ip_do_seu_servidor pelo seu endereço de IP do seu VPS ou seu nome de domínio, e então salve suas alterações quando terminar.

server {
  listen 80;
  server_name ip_do_seu_servidor;
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

6. Para habilitar a configuração, você precisa criar um link simbólico:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/

7. Reinicie o Nginx com este comando?

sudo service nginx restart

8. Agora crie um novo aplicativo Next.js com os seguintes comandos:

cd /var/www

npx create-next-app@latest nextjs

9. Vá para o diretório do aplicativo Next.js:

cd nextjs

10. Em seguida, instale as dependências do aplicativo:

npm install

11. Crie seu aplicativo Next.js com este comando:

npm run build

12. Quando terminar, inicie seu aplicativo Next.js com o seguinte prompt:

npm start

Seu aplicativo Next.js agora está ativo e acessível por meio de seu nome de domínio ou endereço IP VPS.

Use um gerenciador de processos como o PM2 para reiniciar automaticamente seu aplicativo após uma reinicialização do servidor ou uma falha. O PM2 também mantém seu aplicativo Next.js em execução no plano de fundo do seu VPS. Instale o PM2 assim:

1. Execute o seguinte comando no seu VPS:

cd ~

sudo npm install -g pm2

2. Acesse o diretório do aplicativo Next.js:

cd /var/www/nextjs

3. Use PM2 para iniciar seu aplicativo Next.js:

pm2 start npm --name "nextjs" -- start

Certifique-se de que o PM2 será iniciado no boot. Para isso, use o seguinte comando no seu terminal:

pm2 startup

Salve todos os processos PM2 atuais com este comando:

pm2 save

Conclusão

O ReactJS é uma biblioteca JavaScript robusta usada no desenvolvimento dinâmico de aplicativos da web. Ele torna a programação em JavaScript mais simples e melhora o desempenho e o SEO do seu aplicativo, entre outros benefícios.

O ReactJS ajuda a simplificar o processo de depuração e reduz o risco de erros ao utilizar uma vinculação de dados unidirecional.

Aqui está uma recapitulação de por que você pode querer usar o React:

• É fácil de usar e aprender, com muitas lições de programação disponíveis online.
• Ele suporta componentes reutilizáveis, reduzindo o tempo de desenvolvimento.
• JSX torna mais fácil codificar e renderizar elementos.
• O Virtual DOM elimina a re-renderização excessiva, garantindo o alto desempenho do seu aplicativo.
• O React ajuda os mecanismos de pesquisa a rastrear seu aplicativo da web, melhorando seu SEO.

Esperamos que este artigo tenha ajudado você a entender o React JS e suas funções no desenvolvimento web. Se você tiver alguma observação ou pergunta, deixe-a na seção de comentários abaixo.