Início /Programação /React /Como adicionar elementos do React em um site

Como adicionar elementos do React em um site

Por: Angelo Luis Ferreira | 02/12/2020 Acessos: 8.869

Neste tutorial vamos mostrar como utilizar a biblioteca React em aplicações localizadas pontualmente em partes de um site. Para isto, vamos precisar inserir o React e o "transpilador" Babel via CDN (Content Delivery Network ou Rede de Distribuição de Conteúdo).

Obs.: Se você deseja criar um React App a partir do zero, leia: Como instalar e utilizar o React no Windows

O que é React?

O React é uma biblioteca JavaScript declarativa, eficiente e flexível para criar interfaces com o usuário. De código aberto, ele permite compor UI's complexas a partir de pequenos e isolados códigos chamados “componentes”.

UI (User Interface): A interface do utilizador ou interface de usuário, significa a interação homem máquina, ou seja, é o espaço onde a interação entre humanos e máquinas acontece podendo ser através de um um botão, um menu ou até mesmo um som.

O React foi projetado para adoção gradual e você pode usar o React o quanto precisar, sendo pouco ou muito. Talvez você só queira adicionar alguns “pontos de interatividade” a uma página web existente. Os componentes React são uma ótima maneira de fazer isso. Neste tutorial mostremos o início de como fazer isso.

1. Primeiro Passo: Estrutura na página HTML (ou PHP)

1.1. Vamos primeiro adicionar 3 tags na página HTML que criamos. É recomendável que as tags fiquem posicionadas imediatamente antes do fechamento da tag <\body>. As duas primeiras tags adicionam o React e a terceira tag irá adicionar o código do elemento React que vamos criar.

1.1.1. Observe no exemplo abaixo que criamos os arquivos index.html e exemplo.js

1.1.1.1. No arquivo index.html criamos a estrutura onde será adicionado o React e no arquivo exemplo.js criaremos o código do React.

1.1.1.2. É importante salientar que o arquivo onde criaremos o código React deve ter a extensão .js, ou seja um arquivo JavaScript. Obs.: Você também poderá, se desejar, adicionar o código React diretamente na página HTML entre as tags <script></script>.

Abaixo, segue a estrutura que utilizamos para adicionar o React no nosso exemplo:

   <!-- Adicionar o React. -->
  <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

 1.2. Para obter o React atualizado, acesse as tags diretamente do site oficial do React: CDN Links

1.2.1. Observe que a princípio utilizamos o React para desenvolvimento. Ele foi disponibilizado para ajudar o programador durante o desenvolvimento do código. Finalizado o projeto, antes de enviarmos para o servidor, é recomendado alterar o React para produção. Isto é feito substituindo develpment.js por prodution.js.

2. Segundo Passo: Localizar onde o código React será incluído

2.1. Agora vamos posicionar na nossa página HTML o local onde o React será executado. Para isso, vamos criar uma tag <div> com uma id denominada neste exemplo como "app".

2.2. Se você abrir o arquivo HTML no navegador terá algo parecido com a imagem abaixo:

2.2.1. Observe que não houve nenhuma informação do React na exibição da página.

3. Terceiro Passo: Desenvolvimento do código React

3.1. Nesta etapa iremos escrever o código no arquivo exemplo.js para que o React possa gerar e exibir itens na tela. Para isto precisaremos renderizar os elementos através da função ReactDOM.render().

3.1.1. A princípio, o ReactDOM.render() possui dois parâmetros:

1º parâmetro: O que ele vai renderizar na tela (de um texto simples até um sistema ultra complexo)

2º parâmetro: Onde o elemento será renderizado na tela. Para isto utilizaremos uma função JavaScript que irá manipular os elementos HTM, exibindo na tela tudo o que foi renderizado pelo React. Isto é feito através das funções de manipulação HTML como getElementById() ou querySelector() por exemplo.

3.1.2. Veja no nosso exemplo abaixo onde renderizaremos um texto na div definida pelo id="app" .

 

 3.2. Agora veja que o elemento de texto foi exibido na tela:

3.3. Pronto, com apenas estes 3 passos podemos inserir elementos renderizados pelo React em qualquer parte de um site.

3.3.1. Embora pareça não fazer muito sentido inserir um texto via React, mas servirá para exemplificarmos de forma muito simples como podemos renderizar elementos React em uma página web. Inserindo componentes mais complexos desenvolvidos em React podemos criar sites extremamente dinâmicos onde as ações serão executas pontualmente sem a necessidade de recarregar a página, tornando assim o site muito mais rápido, dinâmico e interativo.

4. Adicionando mais elementos React

4.1. Você poderá adicionar quantos elementos React desejar. Veja o exemplo abaixo:

4.1.1. Arquivo HTML

Nota do Autor: Por questões de organização, prefiro colocar as tags <script> para adicionar o React dentro de <head></head>.  A tag que adiciona o elemento React fica mantida imediatamente antes de </body>. Mas isso fica a critério de cada um.

4.1.2. Arquivo JavaScript

4.1.3. Veja o resultado que aparecerá na tela:

 4.3. Abaixo segue o código completo do nosso exemplo para você copiar:

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
    <h1>Inserindo um App React no site</h1>
    <div id="app"></div>
    <h1>Inserindo um segundo App React</h1>
    <div id="app2"></div>


  <!-- Adicione nosso componente React. -->
  <script src="/exemplo.js"></script>
</body>

</html>

JavaScript (exemplo.js)

ReactDOM.render(
    'Olá, eu sou o React. Estou renderizado na div app',
    document.getElementById("app")
)

ReactDOM.render(
    'Eu sou o segundo elemento React renderizado',
    document.getElementById("app2")
)

5. Usando JSX no React

5.1. Agora vamos ver como usar a extensão JSX em aplicações com React em alguma parte de um site. A extensão JSX permitirá a utilização de elementos HTML diretamente no React mantendo o poder do JavaScrtipt.

O que é JSX?

JSX nada mais é do que uma extensão da sintaxe do JavaScript criada para ajudar a dar forma aos elementos de "front-end" de uma aplicação desenvolvida em React. Veja a seguir algumas considerações sobre o uso do JSX:

  • O React não requer o uso do JSX, porém a sua utilização é quase que obrigatória (forma mais simples e intuitiva para programar com React);
  • JSX é muito similar ao HTML e XML, mas não é HTML e nem XML (lembre-se sempre disso);
  • Diferentemente do HTML, o JSX não é interpretado pelo navegador e por isso é necessário a utilização de um "transpilador" (usaremos o Babel)
  • O JSX permite colocar estruturas do tipo HTML dentro do JavaScript.

O que é Babel?

Babel é um é um compilador fonte a fonte (transpilador), que permite que se escreva códigos JavaScript mais recentes, como o JSX por exemplo, interpretando sintaxes incompatíveis ou ainda não disponíveis na forma nativa nos diferentes navegadores de internet. Para saber mais, acesse o site Babel.

5.2. Veja neste exemplo abaixo onde queremos usar o cabeçalho <h1> e itálico <i> para os textos que usamos no exemplo anterior:

5.2.1. Vamos acrescentar as tags <h1> e </h1> no primeiro texto.

5.2.2. Observe que houve um erro e os textos não foram mais exibidos na tela.

5.3. Para resolvermos este problema precisaremos utilizar a extensão JSX que possibilita a criação uma estrutura semelhante ao HTML, mas que agrega também toda interatividade do JavaScript. Para isto, basta apenas adicionarmos adicionar a biblioteca Babel na página HTML. Esta biblioteca irá compilar a estrutura que criamos para o navegador web, fazendo com que seja exibida na tela. Acesse o link https://babeljs.io/docs/en/babel-standalone usar a versão mais atualizada.

5.3.1. Vamos portanto adicionar a tag <script> específica para adicionar a biblioteca Babel:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

5.3.2. Também será necessário acrescentar a propriedade type = "text/babel" no local onde adicionamos o código React.

5.3.3. Veja abaixo o nosso exemplo de como acrescentar o Babel na página HTML:

 5.3.4. Agora podemos colocar as tags similares ao HTML no código do React que o JSX fará a compilação para o navegador web.

5.4.5. Pronto, veja o resultado abaixo:

ATENÇÃO: É importante enfatizar que para utilizarmos o JSX através do "transpilador" Babel com arquivos separados, os mesmos deverão estar hospedados em um servidor local (tipo WAMP ou XAMP) ou em um servidor web. Veja no resultado abaixo que os nossos arquivos index.html e exemplo.js foram hospedados no mesmo servidor web do site Visual Dicas.

 5.4. Se desejar, você poderá colocar tudo em um único arquivo HTML, veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>
    <meta charset="UTF-8">

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Inserindo um App React no site</h1>
    <div id="app"></div>
    <h1>Inserindo um segundo App React</h1>
    <div id="app2"></div>


  <!-- Adicione nosso componente React. -->
  <script  type="text/babel">
      ReactDOM.render(
        <h1>Olá, eu sou o React. Estou renderizado na div app</h1>,
        document.getElementById("app")
    )

    ReactDOM.render(      
        <i>Eu sou o segundo elemento React renderizado</i>,
        document.getElementById("app2")
    )  
  </script>

</body>

</html>

😀 Acesse o nosso exemplo no Squids Editor: Usando React em uma página HTML

6. Usando JSX com JavaScript no React

6.1. Como já mencionamos, o uso do JSX possibilita obtermos uma estrutura similar ao HTML com o poder do JavaScript. Nos exemplo a seguir, vamos mostrar como utilizar o JSX e JavaScript juntos no React.

6.1.1. Dica: Sempre mantenha a estrutura JSX entre as tags <div></div>, pois o React, através da função ReactDOM.render(), renderiza apenas um único elemento. Se você adicionar vários elementos em pontos diversos do site, cada elemento deverá ter uma nomenclatura diferente.

6.2. Veja o resultado do nosso exemplo:

6.3. Copie o código abaixo:

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>
    <meta charset="UTF-8">

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Usando JSX com JavaScript no React</h1>
    <hr/>
    <div id="dados"></div>  


  <!-- Adicione nosso componente React. -->
  <script  type="text/babel" src="/exemplo.js"></script>

</body>

</html>
JavaScript (exemplo.js) 
// Usando JSX com JavaScript
let nomeCliente = "Tarzã";
let idadeCliente = 32;
let profCliente = "Rei da Selva";

let elemento = (
    <div>
        <p>Nome do Cliente: {nomeCliente}</p>
        <p>Idade do Cliente: {idadeCliente}</p> 
        <p>Idade do Cliente: {profCliente}</p>        
    </div>          
)

ReactDOM.render(
    elemento,
    document.getElementById('dados')
)

6.4. Se preferir, coloque tudo em um único arquivo HTML

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>
    <meta charset="UTF-8">

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Usando JSX com JavaScript no React</h1>
    <hr/>
    <div id="dados"></div>

<script type="text/babel">
  // Usando JSX com JavaScript
  let nomeCliente = "Tarzã";
  let idadeCliente = 32;
  let profCliente = "Rei da Selva";

  let elemento = (
    <div>
        <p>Nome do Cliente: {nomeCliente}</p>
        <p>Idade do Cliente: {idadeCliente}</p> 
        <p>Idade do Cliente: {profCliente}</p>        
    </div>          
  )

ReactDOM.render(
    elemento,
    document.getElementById('dados')
)
  </script>

</body>

</html>

😀 Acesse o nosso exemplo no Squids Editor: Usando React com JSX e JavaScritpt

7. Usando valores dinâmicos em JSX (funções e objetos)

7.1. Podemos usar funções e objetos JavaScript em JSX, inserindo-os também entre chaves. Neste exemplo vamos utilizar uma função e um objeto junto com a estrutura JSX.

  7.2. Veja o resultado do nosso exemplo:

 7.3. Copie o código abaixo:

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>
    <meta charset="UTF-8">

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Usando JSX com JavaScript (funções e objetos)</h1>
    <hr/>
    <div id="dinamico"></div> 


  <!-- Adicione nosso componente React. -->
  <script  type="text/babel" src="/exemplo.js"></script>

</body>

</html>

 

JavaScript (exemplo.js)
// Usando JSX com JavaScript (funções e objetos)
function nomeCompleto(user) {
  return user.nome + ' ' + user.sobrenome;
}

let user = {
nome: 'Alberto',
sobrenome: 'Santos Dumont',
idade: 90
} 

let exibir = (
      <div>
        <h1>Oi, Mundo!</h1>  
        <p>O nome dele é <b> {nomeCompleto(user)} </b>.</p>
        <p>Ele tem {user.idade} anos.</p>
      </div>    
)

ReactDOM.render(
    exibir,
    document.getElementById('dinamico')
)

 7.4. Se preferir, coloque tudo em um único arquivo HTML

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>
    

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Usando JSX com JavaScript (funções e objetos)</h1>
    <hr/>
    <div id="dinamico"></div>


<!-- Adicione nosso componente React. -->
<script  type="text/babel">

// Usando JSX com JavaScript (funções e objetos)
function nomeCompleto(user) {
  return user.nome + ' ' + user.sobrenome;
}

let user = {
nome: 'Alberto',
sobrenome: 'Santos Dumont',
idade: 90
} 

let exibir = (
      <div>
        <h1>Oi, Mundo!</h1>  
        <p>O nome dele é <b> {nomeCompleto(user)} </b>.</p>
        <p>Ele tem {user.idade} anos.</p>
      </div>    
)

ReactDOM.render(
    exibir,
    document.getElementById('dinamico')
) 

</script>

</body>

</html>

😀 Acesse o nosso exemplo no Squids Editor: Usando React com JSX e JavaScritpt

8. Inserindo links e imagens (atributos JSX)

8.1. Assim como no HTML, podemos utilizar atributos para definirmos valores em determinados elementos em JSX. Da mesma forma que os exemplos anteriores, os atributos também deverão estar inseridos entre chaves {}.

8.1.1. Veja no exemplo abaixo onde utilizaremos os atributos: href, src, rel e target

 8.2. Veja o resultado do exemplo:

8.3. Copie o código abaixo:

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>
    <meta charset="UTF-8">

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Inserindo links e imagens com JSX</h1>
    <hr/>
    <div id="imagem"></div> 


  <!-- Adicione nosso componente React. -->
  <script  type="text/babel" src="/exemplo.js"></script>

</body>

</html>

 

JavaScript (exemplo.js)
// Usando JSX com imagens e links (atributos)
let url = 'https://www.visualdicas.com.br/images/banners/visual%20dicas%20logo%20portal%20111.jpg';

let novoElemento = (    
    <div>
       <h1>Olá, Mundo!</h1>
       <a href={'https://visualdicas.com.br'} target={'_blank'} rel={"noopener noreferrer"}>
         <img src={url} alt={'Clique aqui'} />
       </a>
       <p>Clique na imagem acima para abrir o site.</p>
    </div>
)


ReactDOM.render(
    novoElemento,
    document.getElementById('imagem')
)
 

8.4. Se preferir, coloque tudo em um único arquivo HTML

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo aplicativo React</title>
    

    <!-- Adicionar o React. -->
    <!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Inserindo links e imagens com JSX</h1>
    <hr/>
    <div id="imagem"></div>


<!-- Adicione nosso componente React. -->
<script  type="text/babel">

// Usando JSX com imagens e links (atributos)
let url = 'https://www.visualdicas.com.br/images/banners/visual%20dicas%20logo%20portal%20111.jpg';

let novoElemento = (    
    <div>
       <h1>Olá, Mundo!</h1>
       <a href={'https://visualdicas.com.br'} target={'_blank'} rel={"noopener noreferrer"}>
         <img src={url} alt={'Clique aqui'} />
       </a>
       <p>Clique na imagem acima para abrir o site.</p>
    </div>
)


ReactDOM.render(
    novoElemento,
    document.getElementById('imagem')
) 


</script>

</body>

</html>

😀 Acesse o nosso exemplo no Squids Editor: Usando atributos JSX

 Documentação Oficial

1. [Adicione o React a um site ] » Documento oficial do React.

2. [CDN Links] » Documento oficial do React.

3. [@babel/standalone] » Documento oficial do Babel.

4. [Introduzindo JSX ] » Documento oficial do React.

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO