{"id":5964,"date":"2024-09-30T09:24:41","date_gmt":"2024-09-30T09:24:41","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/transformer-texte-en-html-markedjs-react\/"},"modified":"2024-09-30T09:24:45","modified_gmt":"2024-09-30T09:24:45","slug":"transformer-texte-en-html-markedjs-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/transformer-texte-en-html-markedjs-react\/","title":{"rendered":"6.6 Transformer le Texte en HTML avec MarkedJS React"},"content":{"rendered":"\n<p><strong>Transformer le Texte en HTML avec MarkedJS et React<\/strong> est une comp\u00e9tence essentielle pour quiconque souhaite ma\u00eetriser le d\u00e9veloppement web moderne. Cet article vous guidera pas \u00e0 pas \u00e0 travers l&rsquo;utilisation de MarkedJS avec React pour convertir du texte en HTML, offrant une lecture plaisante et enrichissante.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>MarkedJS et React<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706080626?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n\n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Dans cette vid\u00e9o, vous d\u00e9couvrirez comment utiliser MarkedJS pour transformer du texte en HTML au sein de votre application React. MarkedJS est une biblioth\u00e8que JavaScript rapide et flexible, tandis que React, d\u00e9velopp\u00e9 par Facebook, est une biblioth\u00e8que JavaScript puissante pour la cr\u00e9ation d&rsquo;interfaces utilisateur interactives et dynamiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00e9paration de l&rsquo;Environnement<\/h3>\n\n\n\n<p>Pour commencer, nous devons pr\u00e9parer notre projet en utilisant <em>Create React App<\/em> et installer la biblioth\u00e8que MarkedJS. Ouvrez votre terminal et ex\u00e9cutez les commandes suivantes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npx create-react-app markedjs-react\ncd markedjs-react\nnpm install marked<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er Composant React Basique<\/h3>\n\n\n\n<p>Maintenant, nous allons cr\u00e9er un composant React simple qui utilise MarkedJS pour convertir le texte en HTML. Ouvrez le fichier <code>App.js<\/code> et remplacez son contenu par :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport marked from 'marked';\n\nconst App = () => {\n  const [markdown, setMarkdown] = useState('');\n\n  const handleChange = (e) => {\n    setMarkdown(e.target.value);\n  };\n\n  const getMarkdownText = () => {\n    const rawMarkup = marked(markdown, { sanitize: true });\n    return { __html: rawMarkup };\n  };\n\n  return (\n    <div className=\"App\">\n      <textarea\n        value={markdown}\n        onChange={handleChange}\n        placeholder=\"Enter Markdown text\"\n        rows=\"10\"\n        cols=\"50\"\n      \/>\n      <div\n        dangerouslySetInnerHTML={getMarkdownText()}\n      ><\/div>\n    <\/div>\n  );\n};\n\nexport default App;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explications du Code<\/h3>\n\n\n\n<p>Dans cet exemple, nous avons cr\u00e9\u00e9 un \u00e9tat local <code>markdown<\/code> pour stocker le texte saisi par l&rsquo;utilisateur dans la <code>textarea<\/code>. La fonction <code>handleChange<\/code> met \u00e0 jour cet \u00e9tat \u00e0 chaque changement de texte. Ensuite, la fonction <code>getMarkdownText<\/code> utilise MarkedJS pour convertir le texte en HTML. Le rendu HTML est ensuite inject\u00e9 dans le <code>div<\/code> gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 <code>dangerouslySetInnerHTML<\/code>, qui est une mani\u00e8re s\u00e9curis\u00e9e d&rsquo;ins\u00e9rer du HTML g\u00e9n\u00e9r\u00e9 dynamiquement en React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Am\u00e9liorations et Styles<\/h3>\n\n\n\n<p>Pour rendre notre composant plus agr\u00e9able visuellement, nous allons ajouter quelques styles CSS. Cr\u00e9ez un fichier <code>App.css<\/code> \u00e0 c\u00f4t\u00e9 de <code>App.js<\/code> et ajoutez les styles suivants :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>textarea {\n  width: 100%;\n  margin-bottom: 20px;\n}\n\ndiv {\n  border: 1px solid #ddd;\n  padding: 10px;\n  border-radius: 5px;\n  background-color: #f7f7f7;\n  word-wrap: break-word;\n}<\/code><\/pre>\n\n\n\n<p>Puis, importez le fichier CSS dans <code>App.js<\/code> en ajoutant cette ligne en haut du fichier :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import '.\/App.css';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tendre les Fonctionnalit\u00e9s<\/h3>\n\n\n\n<p>Pour aller plus loin, nous pouvons ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires comme la mise en \u00e9vidence de la syntaxe gr\u00e2ce \u00e0 PrismJS. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm install prismjs<\/code><\/pre>\n\n\n\n<p>Modifiez alors <code>App.js<\/code> pour inclure PrismJS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\nimport marked from 'marked';\nimport Prism from 'prismjs';\nimport 'prismjs\/themes\/prism-okaidia.css';\nimport '.\/App.css';\n\nconst App = () => {\n  const [markdown, setMarkdown] = useState('');\n\n  useEffect(() => {\n    Prism.highlightAll();\n  });\n\n  const handleChange = (e) => {\n    setMarkdown(e.target.value);\n  };\n\n  const getMarkdownText = () => {\n    const rawMarkup = marked(markdown, {\n      sanitize: true,\n      highlight: function (code, lang) {\n        return Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup, lang);\n      }\n    });\n    return { __html: rawMarkup };\n  };\n\n  return (\n    <div className=\"App\">\n      <textarea\n        value={markdown}\n        onChange={handleChange}\n        placeholder=\"Enter Markdown text\"\n        rows=\"10\"\n        cols=\"50\"\n      \/>\n      <div\n        dangerouslySetInnerHTML={getMarkdownText()}\n      ><\/div>\n    <\/div>\n  );\n};\n\nexport default App;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration avec d&rsquo;autres technologies<\/h3>\n\n\n\n<p>L&rsquo;int\u00e9gration de MarkedJS avec React pour transformer du texte en HTML est une d\u00e9marche qui peut s&rsquo;\u00e9tendre \u00e0 d&rsquo;autres technologies et outils JavaScript pour enrichir vos applications. Par exemple, <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">React<\/a> permet une gestion efficace de l&rsquo;\u00e9tat des composants et la cr\u00e9ation de single-page applications dynamiques. De m\u00eame, si vous devez g\u00e9rer des donn\u00e9es complexes dans votre application, vous pouvez envisager d&rsquo;utiliser <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">Redux<\/a> pour une gestion de l&rsquo;\u00e9tat simplifi\u00e9e et centralis\u00e9e.<\/p>\n\n\n\n<p>En outre, si vous d\u00e9butez avec React, il est \u00e9galement crucial de comprendre les <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">cycles de vie<\/a> des composants ainsi que la mani\u00e8re de g\u00e9rer les \u00e9tats et props dans vos composants. Pour des cas d&rsquo;utilisation plus avanc\u00e9s, vous pouvez explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-react-hooks-guide-complet\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a>, une fonctionnalit\u00e9 ajout\u00e9e dans les versions r\u00e9centes de React, qui permettent de g\u00e9rer les \u00e9tats et les effets dans les composants fonctionnels de mani\u00e8re \u00e9l\u00e9gante.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des outils suppl\u00e9mentaires pour am\u00e9liorer le rendu<\/h3>\n\n\n\n<p>Outre MarkedJS et PrismJS, il existe de nombreux outils et biblioth\u00e8ques suppl\u00e9mentaires qui peuvent \u00eatre int\u00e9gr\u00e9s \u00e0 votre projet pour am\u00e9liorer le rendu et la performance. Par exemple, vous pouvez utiliser <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Objets_globaux\/Promise\" target=\"_blank\" rel=\"noopener\">Promise<\/a> et <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Fetch\" target=\"_blank\" rel=\"noopener\">Fetch API<\/a> pour g\u00e9rer les op\u00e9rations asynchrones et les requ\u00eates HTTP, respectivement.<\/p>\n\n\n\n<p>De plus, pour le stylisme avanc\u00e9 de vos composants, vous pouvez explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-styled-components-site-react\" target=\"_blank\" rel=\"noopener\">Styled Components<\/a>, qui permettent de cr\u00e9er des composants de style dynamiques dans vos applications React. Les modules CSS et autres techniques de gestion de styles sont \u00e9galement incontournables pour les projets de plus grande envergure.<\/p>\n\n\n\n<p>Si vous souhaitez ajouter des animations interactives et dynamiques, vous pouvez utiliser des m\u00e9thodes telles que les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">fonctions fl\u00e9ch\u00e9es<\/a> et les \u00e9v\u00e9nements de cycle de vie pour d\u00e9clencher des animations et des transitions CSS de mani\u00e8re fluide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Utiliser <strong>MarkedJS avec React<\/strong> permet de transformer efficacement du texte en HTML interactif et stylis\u00e9. Vous pouvez d\u00e9sormais incorporer ce savoir-faire dans vos projets pour enrichir l&rsquo;interactivit\u00e9 et la pr\u00e9sentation des contenus textuels. Pour continuer votre apprentissage, consultez d&rsquo;autres <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">ressources sur React<\/a> et <a href=\"https:\/\/marked.js.org\/\" target=\"_blank\" rel=\"noopener\">documentation de MarkedJS<\/a>. Ne manquez pas \u00e9galement de v\u00e9rifier les nouveaux <a href=\"https:\/\/wikiform.fr\/codespace\/novateur-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">d\u00e9veloppements JavaScript<\/a> qui peuvent affecter la fa\u00e7on dont vous pouvez optimiser et am\u00e9liorer votre application React.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-react-reduction.gif\" loading=\"lazy\" alt=\"Formation Cr\u00e9er des Sites Interactifs avec React et Redux\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation Cr\u00e9er des Sites Interactifs avec React et Redux\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Transformer le Texte en HTML avec MarkedJS et React est une comp\u00e9tence essentielle pour quiconque souhaite ma\u00eetriser le d\u00e9veloppement web moderne. Cet article vous guidera&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5964"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5964\/revisions"}],"predecessor-version":[{"id":5965,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5964\/revisions\/5965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3275"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}