Como adicionar uma tag script no JSX

Neste artigo você aprenderá a como adicionar uma tag script no JSX, uma ação bem interessante que não é permitida por padrão

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Muitas vezes, ao desenvolver aplicações com React JS, precisamos incorporar um script externo à nossa aplicação.

Se você já tentou inserir uma tag <script> diretamente no JSX, provavelmente se deparou com algumas dificuldades.

Afinal, JSX não é exatamente HTML, e tem algumas peculiaridades que devemos entender para trabalhar corretamente com ele. Neste artigo, vamos explorar como adicionar corretamente uma tag script no JSX.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Entendendo JSX

JSX é uma extensão da sintaxe JavaScript que nos permite escrever HTML dentro do JavaScript de uma maneira que se assemelha à criação de templates HTML.

No entanto, há algumas diferenças importantes entre JSX e HTML que devemos ter em mente.

A primeira é que, enquanto em HTML podemos usar a palavra-chave class para atribuir classes a elementos, em JSX usamos className.

Outra diferença significativa é como JSX trata as tags de script.

Adicionando Tags Script em JSX

Se tentarmos inserir diretamente uma tag <script> em JSX, o compilador do React irá lançar um erro. Isso ocorre porque a tag script não é executada pelo navegador quando inserida em JSX.

No entanto, existem algumas maneiras de contornar essa limitação.

Usando o método componentDidMount

Uma maneira de inserir uma tag de script em uma aplicação React é no método componentDidMount de um componente de classe.

No entanto, como queremos nos concentrar em componentes funcionais, vamos para a próxima solução.

Usando useEffect em Componentes Funcionais

Em componentes funcionais, podemos utilizar o Hook useEffect para criar uma tag script dinamicamente e adicioná-la ao DOM.

A função passada para useEffect será executada após o render do componente.

Veja um exemplo:

import React, { useEffect } from 'react';

function MeuComponente() {
  
  useEffect(() => {
    const script = document.createElement('script');

    script.src = "https://meu-script-externo.com/script.js";
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, []);

  return (
    /* JSX do componente */
  );
}

Neste exemplo, estamos criando um novo elemento script, definindo seu src para o URL do script externo, marcando-o como async e anexando-o ao corpo do documento.

O retorno da função useEffect é outra função que remove o script do corpo do documento quando o componente é desmontado. Isso ajuda a prevenir possíveis problemas de memória.

Considerações de Segurança

Inserir scripts externos em sua aplicação pode trazer riscos de segurança, principalmente se o script for de uma fonte não confiável.

Sempre certifique-se de que os scripts que você está inserindo são seguros e provenientes de fontes confiáveis.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Embora a adição de tags script diretamente em JSX possa ser um pouco complicada devido às peculiaridades da biblioteca React, ainda é possível inserir scripts externos de forma eficiente.

Seja usando o método componentDidMount em componentes de classe ou o hook useEffect em componentes funcionais, você pode adicionar qualquer script necessário à sua aplicação React.

Lembre-se sempre de fazer isso com cautela e garantir a segurança dos scripts que você está usando.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.