Ir para conteúdo principal

Como incorporar código em um aplicativo React

Teo テオ avatar
Escrito por Teo テオ
Atualizado há mais de 2 anos

Neste tutorial, irei fornecer um guia detalhado sobre como incorporar seu widget em uma aplicação React.

1. O primeiro passo é copiar o código do widget criado:

2. Depois de copiar o código, você precisará separar o código HTML do JavaScript, por exemplo:

Este é o código do widget do EmbedSocial:

<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>
<script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script>

Código HTML:

<div class="embedsocial-hashtag" data-ref="f718fc77f3f7142d374023362f2fd1f2aa471605"></div>

Código JavaScript:

(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));

3. Em seguida, acesse sua aplicação React e crie um novo componente no diretório de componentes e cole o código HTML dentro da função render:

Cole o código JavaScript dentro do método de ciclo de vida componentDidMount:

4. Navegue até a página onde deseja exibir o widget, no nosso caso, adicionaremos ao App.js principal e importe o componente que acabamos de criar:

5. Isso é tudo. Depois de fazer isso e salvar as alterações, o widget aparecerá na sua página.

Se tiver alguma dúvida, clique no ícone de chat no canto inferior direito para falar com nossa equipe de sucesso do cliente ou envie um e-mail para support@embedsocial.com

Estamos aqui para ajudá-lo 🙏

Isto respondeu à sua pergunta?