Renderizar HTML sin procesar con ReactJS
- Convertidor online de HTML a JSX
-
Utilice el método incorporado
ReactDOM.render() -
Utilice el método
dangerouslySetInnerHTML - Conclusión
La versatilidad y flexibilidad del marco React no se puede enfatizar lo suficiente. Ni siquiera necesita aprender a React demasiado antes de que pueda aprenderlo como desarrollador, gracias a su capacidad que permite a los usuarios generar códigos HTML dentro de React.
Para aquellos que han escrito mucho código en HTML y están buscando la forma más rápida de llevarlo a React, en este tutorial veremos diferentes medios para hacerlo.
Convertidor online de HTML a JSX
Este método trae recuerdos de cuando descubrí por primera vez los sitios web de conversión de medios en línea cuando las películas y las canciones eran difíciles de descargar.
El sitio web ("https://transform.tools/html-to-jsx") convierte el código HTML puro en JSX (JavaScript Syntax Extension), por lo que se puede utilizar dentro del marco de reacción.
Fragmento de código - App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="goog.css" />
<title>Google</title>
<header>
<nav className="navi">
<div id="left">
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Stores</a>
</li>
</ul>
</div>
<div id="right">
<ul>
<li>
<a href="#">Gmail</a>
</li>
<li>
<a href="#">Images</a>
</li>
<li>
<a href="#">Social</a>
</li>
<li>
<button type="submit">Sign In</button>
</li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div className="google-logo">
<img
src="googlelogo_color_272x92dp.png"
alt="google-logo"
id="logo"
width={272}
height={92}
/>
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL" />
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav className="footer">
<div id="left-foot">
<ul>
<li>
<a href="#">Advertising</a>
</li>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">How Search Works</a>
</li>
</ul>
</div>
<div id="right-foot">
<ul>
<li>
<a href="#">Privacy</a>
</li>
<li>
<a href="#">Terms</a>
</li>
<li>
<a href="#">Settings</a>
</li>
</ul>
</div>
</nav>
</footer>
</>
</div>
);
}
export default App;
Envolvemos los códigos dentro del div .App, y luego nos aseguramos de envolverlo dentro de fragmentos porque contiene múltiples elementos.
Utilice el método incorporado ReactDOM.render()
Este método le permite utilizar los códigos HTML en su forma más pura. El ReactDOm.render() nos permite mostrar los códigos HTML que hemos especificado.
Además, ReactDOM.render() está preinstalado una vez que creamos una nueva aplicación React con éxito, por lo que no hay necesidad de dependencias adicionales. El ReactDOM.remder() es un método ideal para crear aplicaciones de reacción ligera.
Nos dirigimos dentro del archivo index.js del proyecto React y declaramos un const myelement.
Fragmento de código - index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const myelement = (
<>
<title>Google</title>
<body>
<header>
<nav class="navi">
<div id="left">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Social</a></li>
<li><button type="submit">Sign In</button></li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div class="google-logo">
<img src="googlelogo_color_272x92dp.png" alt="google-logo" id="logo" height="92" width="272"/>
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL"/>
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav class="foot">
<div id="left-foot">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search Works</a></li>
</ul>
</div>
<div id="right-foot">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</nav>
</footer>
</body>
</>
);
ReactDOM.render(myelement, document.getElementById('root'));
Después de haber declarado nuestro elemento, vamos a continuación para agregar el elemento dentro de ReactDOM.render() y asegurarnos de envolver los códigos en etiquetas de fragmento.
-Method.webp)
Utilice el método dangerouslySetInnerHTML
Este es el método más popular para representar HTML en un estado sin procesar en el marco de React. Este método alerta al usuario sobre la vulnerabilidad de seguridad de este método.
El método dangerouslySetInnerHTML permite a los atacantes almacenar scripts maliciosos dentro de los datos enviados desde la búsqueda de sitios web de envío de formularios.
Fragmento de código - App.js:
import logo from './logo.svg';
import './App.css';
const App = () => {
const data =
<body>
<header>
<nav class="navi">
<div id="left">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div id="right">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Social</a></li>
<li><button type="submit">Sign In</button></li>
</ul>
</div>
</nav>
</header>
<main id="content">
<div class="google-logo">
<img src="googlelogo_color_272x92dp.png" alt="google-logo" id="logo" height="92" width="272">
</div>
<div id="search-bar">
<input type="text" placeholder="Search or Type a URL">
</div>
<div id="buttons">
<button type="submit">Google Search</button>
<button type="submit">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<nav class="foot">
<div id="left-foot">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search Works</a></li>
</ul>
</div>
<div id="right-foot">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</nav>
</footer>
</body>
;
return (
<div
dangerouslySetInnerHTML={{ __html: data }}
/>
);
}
export default App;
Primero declaramos nuestro componente usando const y luego envolvemos los códigos HTML dentro de acentos graves. Luego declaramos el dangerouslySetInnerHTML y envolvemos nuestro componente de data dentro de sus llaves.
Conclusión
Los métodos crean un camino emocionante para familiarizarse con React sin tener que pasar por cursos rigurosos. Sin embargo, la desventaja de este enfoque es que da como resultado códigos elásticos, lo que de alguna manera anula la verdadera razón para crear el marco de React en primer lugar.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn