Rendu HTML brut avec ReactJS
- Convertisseur HTML en JSX en ligne
-
Utilisez la méthode intégrée
ReactDOM.render() -
Utiliser la méthode
dangerouslySetInnerHTML - Conclusion
La polyvalence et la flexibilité du framework React ne peuvent pas être surestimées. Vous n’avez même pas besoin d’apprendre à React trop profondément avant de pouvoir l’acquérir en tant que développeur, grâce à sa capacité qui permet aux utilisateurs de restituer des codes HTML dans React.
Pour ceux qui ont écrit beaucoup de code en HTML et qui recherchent le moyen le plus rapide de le transférer vers React, nous verrons différents moyens de le faire dans ce didacticiel.
Convertisseur HTML en JSX en ligne
Cette méthode me rappelle la première fois que j’ai découvert des sites Web de conversion de médias en ligne lorsque les films et les chansons étaient difficiles à télécharger.
Le site Web ("https://transform.tools/html-to-jsx") convertit le code HTML pur en JSX (JavaScript Syntax Extension), de sorte qu’il devient utilisable dans le cadre de réaction.
Extrait de code - 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;
Nous enveloppons les codes à l’intérieur de la div .App, puis nous nous assurons de l’envelopper à l’intérieur de fragments car il contient plusieurs éléments.
Utilisez la méthode intégrée ReactDOM.render()
Cette méthode vous permet d’utiliser les codes HTML dans leur forme la plus pure. Le ReactDOm.render() nous permet d’afficher les codes HTML que nous avons spécifiés.
De plus, le ReactDOM.render() est préinstallé une fois que nous avons créé une nouvelle application React avec succès, il n’y a donc pas besoin de dépendances supplémentaires. Le ReactDOM.remder() est une méthode idéale pour créer des applications de réaction légère.
Nous nous dirigeons vers le fichier index.js du projet react et déclarons un const myelement.
Extrait de code - 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'));
Après avoir déclaré notre élément, nous venons ci-dessous pour ajouter l’élément à l’intérieur du ReactDOM.render() et nous assurer que nous encapsulons les codes dans des balises de fragment.
-Method.webp)
Utiliser la méthode dangerouslySetInnerHTML
C’est la méthode la plus populaire pour rendre le HTML à l’état brut sur le framework React. Cette méthode alerte l’utilisateur sur la vulnérabilité de sécurité de cette méthode.
La méthode dangerouslySetInnerHTML permet aux attaquants de stocker des scripts malveillants dans les données envoyées à partir de la recherche de sites Web soumettant des formulaires.
Extrait de code - 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;
Nous déclarons d’abord notre composant en utilisant const, puis enveloppons les codes HTML à l’intérieur de backticks. Ensuite, nous déclarons le dangerouslySetInnerHTML et enveloppons notre composant data à l’intérieur de ses accolades.
Conclusion
Les méthodes créent une voie passionnante pour se familiariser avec React sans avoir à suivre des cours rigoureux. Pourtant, l’inconvénient d’une telle approche est qu’elle entraîne des codes extensibles, ce qui va en quelque sorte à l’encontre de la véritable raison de créer le cadre de réaction en premier lieu.
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