Como renderizar HTML no React

Neste artigo você vai aprender a como renderizar HTML no React, vou te mostrar como é fácil fazer isso, vem conferir!

Fala programador(a)! Bora aprender mais sobre código HTML no React!

O React é uma biblioteca popular para construção de interfaces de usuário que facilita o desenvolvimento de aplicativos web ricos e interativos.

Uma das tarefas comuns em qualquer aplicativo web é renderizar HTML de maneira segura e eficiente.

Neste artigo, vamos explorar como renderizar HTML no React sem comprometer a segurança ou a integridade do seu aplicativo.

Introdução: Por que renderizar HTML no React?

Há várias situações em que você pode precisar renderizar HTML no React, como exibir conteúdo formatado proveniente de uma API, mostrar descrições de produtos ou artigos em um blog, ou permitir que os usuários insiram e visualizem seu próprio conteúdo formatado.

Independentemente do caso de uso, é crucial entender como renderizar HTML no React de maneira segura e eficiente.

Renderização segura de HTML no React com a propriedade dangerouslySetInnerHTML

O React não permite a renderização direta de strings HTML como conteúdo de um componente.

Isso ocorre porque a inserção direta de HTML pode levar a vulnerabilidades de segurança, como ataques de Cross-Site Scripting (XSS).

Para contornar essa limitação e renderizar HTML no React, você pode usar a propriedade dangerouslySetInnerHTML.

Como o nome sugere, é importante ter cuidado ao utilizar essa propriedade, pois pode abrir brechas de segurança se não for usada corretamente.

Aqui está um exemplo de como renderizar HTML no React usando dangerouslySetInnerHTML:

import React from 'react';

function RenderHtml(props) {
  const { htmlContent } = props;

  return (
    <div
      className="render-html"
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    />
  );
}

export default RenderHtml;

Neste exemplo, criamos um componente RenderHtml que recebe uma propriedade htmlContent.

Utilizamos a propriedade dangerouslySetInnerHTML para injetar o conteúdo HTML na div com a classe “render-html”.

Sanitização do HTML antes de renderizar

Antes de renderizar o HTML usando dangerouslySetInnerHTML, é essencial garantir que o conteúdo HTML seja seguro e não contenha scripts maliciosos ou elementos indesejados.

Você pode fazer isso utilizando uma biblioteca de sanitização de HTML, como o DOMPurify.

Para instalar o DOMPurify, execute o seguinte comando:

npm install dompurify

Agora, importe a biblioteca DOMPurify e utilize-a para limpar o conteúdo HTML antes de renderizá-lo:

import React from 'react';
import DOMPurify from 'dompurify';

function RenderHtml(props) {
  const { htmlContent } = props;
  const sanitizedHtml = DOMPurify.sanitize(htmlContent);

  return (
    <div
      className="render-html"
      dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
    />
  );
}

export default RenderHtml;

Ao usar o DOMPurify, você garante que apenas o HTML seguro seja renderizado no seu componente, mitigando os riscos associados a ataques de XSS.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Ao dominar a técnica de como renderizar HTML no React usando a propriedade dangerouslySetInnerHTML e a biblioteca de sanitização DOMPurify, você estará mais bem equipado para criar aplicativos web React ricos e interativos que exibem conteúdo HTML de maneira segura e eficiente.

Lembre-se de que a renderização direta de strings HTML pode levar a vulnerabilidades de segurança, como ataques de Cross-Site Scripting (XSS).

Portanto, é crucial garantir a sanitização adequada do conteúdo HTML antes de renderizá-lo no seu aplicativo.

É importante notar que a propriedade dangerouslySetInnerHTML deve ser usada com cautela e apenas quando absolutamente necessário.

Sempre que possível, opte por utilizar os recursos nativos do React para criar e manipular elementos do DOM.

Em resumo, renderizar HTML no React é uma tarefa que exige atenção à segurança e às boas práticas de programação.

Ao seguir as orientações apresentadas neste artigo e manter-se atualizado sobre as melhores práticas de segurança, você estará no caminho certo para construir aplicativos web confiáveis e seguros com o React.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!