{"id":15803,"date":"2019-05-21T12:20:00","date_gmt":"2019-05-21T15:20:00","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=15803"},"modified":"2025-12-16T20:45:27","modified_gmt":"2025-12-16T23:45:27","slug":"o-que-e-react-javascript","status":"publish","type":"post","link":"\/br\/tutoriais\/o-que-e-react-javascript","title":{"rendered":"React descomplicado: o que \u00e9 e como come\u00e7ar j\u00e1!"},"content":{"rendered":"

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).<\/p>

É 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.<\/p>

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.<\/p>

Também explicaremos como implementar um aplicativo React na Hostinger.<\/p>

Baixar Glossário Completo de Desenvolvimento Web<\/a><\/p>

\n\n\n\n\n\n\n<\/p>

Recursos do React<\/h2>

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.<\/p>

JSX<\/h3>

O JSX é uma extensão de sintaxe JavaScript usada na criação do elemento React. Os desenvolvedores a empregam para incorporar código HTML<\/a> 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.<\/p>

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

const name = 'João da Silva;\nconst element = h1>Olá, {name}\/h1>;\nReactDOM.render(\n  element,\n  document.getElementById('root')\n);<\/pre>
Na segunda linha, nós chamamos a variável name<\/strong> dentro de um elemento React ao colocá-la dentro das chaves.<\/p>
Enquanto isso, a função ReactDOM.render()<\/strong> renderiza o elemento React na árvore do Document Object Model (DOM), descrevendo a interface do usuário.<\/p>
O JSX também ajuda a combater ataques Cross-Site Scripting<\/a> (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.<\/p>
Mais adiante neste artigo, discutiremos com mais detalhes o papel do JSX na criação de componentes React.<\/p>
Virtual DOM<\/h3>
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.<\/p>
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.<\/p>
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.<\/p>
Componentes e Props<\/h3>
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.<\/p>
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:<\/p>
function Welcome(props) {\n  return h1>Olá, {props.name}\/h1>;\n}<\/pre>
É possível ter quantos componentes forem necessários sem sobrecarregar seu código.<\/p>
Gerenciamento de Estado<\/h3>
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.<\/p>
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.<\/p>
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<\/strong> e Recoil<\/strong>.<\/p>
Redux<\/strong><\/p>
A biblioteca de gerenciamento de estado do Redux<\/a> 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.<\/p>
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.<\/p>
Dito isso, o Redux é bastante complexo e, portanto, abaixo do ideal para pequenos aplicativos com uma única fonte de dados.<\/p>
Recoil<\/strong><\/p>
O Recoil<\/a> é 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<\/a>. Vários componentes podem se inscrever no mesmo atom e, assim, compartilhar um estado.<\/p>
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.<\/p>
Navegação Programática<\/h3>
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.<\/p>
O React Router<\/a>, 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.<\/p>
Usar um componente Redirect<\/strong> é o principal método de navegação programática, com o history.push()<\/strong> sendo uma abordagem alternativa.<\/p>
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.<\/p>
Por Que Usar React?<\/b><\/h2>
\n
\"página<\/figure><\/div>
O React tem sido usado por grandes companhias ao redor do mundo. Algumas delas: <\/span>Netflix<\/span><\/a>, <\/span>Airbnb<\/span><\/a>, <\/span>American Express<\/span><\/a>, Facebook, <\/span>WhatsApp<\/span><\/a>, <\/span>eBay<\/span><\/a> e <\/span>Instagram<\/span><\/a>. Essa é a prova de que a ferramenta tem um número de vantagens que não têm nem comparação nos seus competidores.<\/span><\/p>
Abaixo estão algumas das razões para usar o React.<\/span><\/p>
1. Fácil de Usar<\/b><\/h3>
O React é uma biblioteca de código aberto para interfaces gráficas (<\/span>GUI<\/span><\/a>) 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 <\/span>MVC<\/span><\/a> (Model-View-Controller).<\/span><\/p>
Como um desenvolvedor de JavaScript, vai ser fácil para você entender o básico do React.<\/span><\/p>
Para fortalecer seu entendimento, dê uma explorada em alguns dos <\/span>tutoriais<\/span><\/a> 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.  <\/span><\/p>
2. Suporte a Componente Reusável em Java<\/b><\/h3>
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. <\/span><\/p>
3. Componente Fácil de Escrever<\/b><\/h3>
Também conhecido como React JS, o componente do React é fácil de escrever porque ele usa <\/span>JSX<\/span><\/a>, uma extensão de sintaxe opcional para JavaScript. Ela permite que você combine HTML com JavaScript.  <\/span><\/p>
O JSX é uma excelente combinação de JavaScript e <\/span>HTML<\/span><\/a>. 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.<\/span><\/p>
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.  <\/span><\/p>
4. Melhor Desempenho com Virtual DOM<\/b><\/h3>
O React melhora, de maneira eficiente, o processo de atualização do <\/span>DOM<\/span><\/a> (Document Object Model<\/em>). 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.<\/span><\/p>
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.<\/span>     <\/span><\/p>
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. <\/span><\/p>
5.  Amigável a SEO<\/b><\/h3>
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 <\/span>SEO<\/span><\/a>.<\/span><\/p>
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.  <\/span><\/p>
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.<\/span><\/p>
Como o React Funciona?<\/b><\/h2>
Você pode ficar surpreso ao saber que pode escrever <\/span>códigos HTML no JavaScript<\/span><\/a>. Mas é exatamente assim que o React funciona.<\/span><\/p>
Criar o representante de um node DOM pode ser feito através da função Element<\/strong> no React. Um exemplo está logo abaixo.<\/span><\/p>
React.createElement(\"div\", { className: \"red\" }, \"Children Text\");\nReact.createElement(MyCounter, { count: 3 + 5 });<\/pre>
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 <\/span>className<\/b>. <\/span><\/p>
Tags JSX tem um nome de tag, filhos e atributos. As aspas nos atributos JSX representam as strings (linhas). Esse elemento é similar ao JavaScript.<\/span><\/p>
Além disso, os valores numéricos e expressões devem ser escritos dentro do símbolo chaves {}<\/strong>.<\/span><\/p>
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.<\/span><\/p>
Abaixo está um exemplo de React escrito usando JSX.<\/span><\/p>
<div className=\"red\">Children Text<\/div>;\n<MyCounter count={3 + 5} \/>;\nvar GameScores = {player1: 2,player2: 5};\n<DashboardUnit data-index=\"2\">\n<h1>Scores<\/h1><Scoreboard className=\"results\" scores={GameScores} \/>\n<\/DashboardUnit>;<\/pre>
Vamos dar uma olhada no que cada parte da tag HTML acima quer dizer:<\/span><\/p>