{"id":5954,"date":"2024-09-25T09:26:06","date_gmt":"2024-09-25T09:26:06","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/projet-markdown-react-qu-allons-nous-faire\/"},"modified":"2024-09-25T09:26:11","modified_gmt":"2024-09-25T09:26:11","slug":"projet-markdown-react-qu-allons-nous-faire","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/projet-markdown-react-qu-allons-nous-faire\/","title":{"rendered":"6.1 Projet Markdown avec React : Qu&rsquo;allons-nous Faire ?"},"content":{"rendered":"\n<p><strong>Projet Markdown avec React :<\/strong> Un parcours fascinant o\u00f9 nous allons explorer comment transformer une page Markdown en une interface utilisateur interactive gr\u00e2ce \u00e0 React. En utilisant cette technologie, vous allez pouvoir dynamiser vos contenus Markdown et les rendre plus intuitifs et vivants. D\u00e9couvrons les \u00e9tapes de ce projet ensemble!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Projet Markdown avec 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\/706077627?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) {\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\/react-markdown-complet\/144')\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();\n    }\n});\n<\/script>\n\n\n\n<p>Ce <a href=\"https:\/\/wikiform.fr\/codespace\/projet-markdown-react-qu-allons-nous-faire\/\">projet Markdown avec React<\/a> consiste \u00e0 cr\u00e9er une application React qui peut interpr\u00e9ter et afficher du contenu Markdown de mani\u00e8re attrayante et interactive. Le Markdown est un langage de balisage l\u00e9ger appr\u00e9ci\u00e9 pour sa simplicit\u00e9 et sa rapidit\u00e9 \u00e0 structurer du texte. Coupl\u00e9 avec React, vous obtiendrez une puissante combinaison pour de superbes interfaces web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi Choisir React pour le Markdown?<\/h3>\n\n\n\n<p>React est une biblioth\u00e8que JavaScript open-source largement utilis\u00e9e pour construire des interfaces utilisateur. Sa capacit\u00e9 \u00e0 se concentrer sur les composants permet une gestion efficace de l&rsquo;\u00e9tat et des mises \u00e0 jour de l&rsquo;interface utilisateur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Exemple de composant React\nimport React, { useState } from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nfunction MarkdownEditor() {\n  const [markdown, setMarkdown] = useState(\"# Hello, world!\");\n\n  return (\n    <div>\n      <textarea\n        value={markdown}\n        onChange={(e) => setMarkdown(e.target.value)}\n      \/>\n      <ReactMarkdown>{markdown}<\/ReactMarkdown>\n    <\/div>\n  );\n}\n\nexport default MarkdownEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mise en Place de l&rsquo;Environnement<\/h3>\n\n\n\n<p>Pour commencer, nous devrons installer React ainsi que certaines d\u00e9pendances n\u00e9cessaires pour g\u00e9rer le Markdown. Voici les \u00e9tapes de mise en place de notre environnement de d\u00e9veloppement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># Cr\u00e9er une nouvelle application React\nnpx create-react-app markdown-editor\n\n# Acc\u00e9der au dossier du projet\ncd markdown-editor\n\n# Installer la biblioth\u00e8que React Markdown\nnpm install react-markdown\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Composant Simple de Rendu Markdown<\/h3>\n\n\n\n<p>Apr\u00e8s avoir configur\u00e9 notre environnement, cr\u00e9ons un composant simple qui pourra afficher du Markdown. Ce composant va convertir une cha\u00eene Markdown en rendu HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ src\/MarkdownRenderer.js\nimport React from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nfunction MarkdownRenderer({ content }) {\n  return <ReactMarkdown>{content}<\/ReactMarkdown>;\n}\n\nexport default MarkdownRenderer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration de la Saisie Utilisateur<\/h3>\n\n\n\n<p>Pour rendre notre application interactive, nous allons cr\u00e9er un composant qui permet \u00e0 l&rsquo;utilisateur de saisir du Markdown dans une zone de texte. Cette zone sera reli\u00e9e dynamiquement au rendu en temps r\u00e9el :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ src\/MarkdownEditor.js\nimport React, { useState } from 'react';\nimport MarkdownRenderer from '.\/MarkdownRenderer';\n\nfunction MarkdownEditor() {\n  const [markdown, setMarkdown] = useState(\"# Bienvenue!\");\n\n  return (\n    <div>\n      <textarea\n        value={markdown}\n        onChange={(e) => setMarkdown(e.target.value)}\n        style={{ width: \"100%\", height: \"150px\" }}\n      \/>\n      <MarkdownRenderer content={markdown} \/>\n    <\/div>\n  );\n}\n\nexport default MarkdownEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Dynamiser le Contenu avec des Plugins<\/h3>\n\n\n\n<p>Pour enrichir encore plus le contenu rendu, nous pouvons int\u00e9grer des plugins \u00e0 React Markdown pour ajouter des fonctionnalit\u00e9s avanc\u00e9es comme la syntaxe de code, les tableaux, et bien plus.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Installer des plugins suppl\u00e9mentaires\nnpm install rehype-raw rehype-sanitize\n\n\/\/ src\/MarkdownRenderer.js\nimport React from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport rehypeRaw from 'rehype-raw';\nimport rehypeSanitize from 'rehype-sanitize';\n\nfunction MarkdownRenderer({ content }) {\n  return (\n    <ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>\n      {content}\n    <\/ReactMarkdown>\n  );\n}\n\nexport default MarkdownRenderer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tester et Am\u00e9liorer l&rsquo;Interface Utilisateur<\/h3>\n\n\n\n<p>Il est essentiel de tester notre application pour garantir une exp\u00e9rience utilisateur fluide. Ajustons l&rsquo;interface utilisateur avec quelques styles CSS pour une meilleure lisibilit\u00e9 et ergonomie :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* src\/App.css *\/\n\ntextarea {\n  width: 100%;\n  height: 200px;\n  margin: 10px 0;\n  font-size: 1em;\n  line-height: 1.5;\n}\n\n.markdown-renderer {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background-color: #f7f7f7;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Le <strong>Projet Markdown avec React<\/strong> est une excellente mani\u00e8re de d\u00e9couvrir les capacit\u00e9s de React pour g\u00e9rer des contenus dynamiques et interactifs. Apr\u00e8s avoir suivi ce tutoriel, vous serez capable de cr\u00e9er des applications qui non seulement rendent du contenu Markdown, mais le font de mani\u00e8re conviviale et engageante. Continuez \u00e0 explorer et \u00e0 am\u00e9liorer votre projet avec de nouvelles fonctionnalit\u00e9s. Pour approfondir vos comp\u00e9tences, consultez nos autres tutoriels et formations chez <a href=\"https:\/\/wikiform.fr\/\">Wikiform<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/react-markdown-complet\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Si vous souhaitez aller plus loin avec React, vous pouvez explorer cet article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu'est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">diff\u00e9rences entre les single-page applications et les multi-page applications<\/a>. Pour ceux qui veulent d\u00e9couvrir de nouvelles fonctionnalit\u00e9s JavaScript, consultez notre section sur les <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">nouveaut\u00e9s JavaScript<\/a>. Si vous \u00eates int\u00e9ress\u00e9 par les derni\u00e8res technologies et outils pour les d\u00e9veloppeurs, d\u00e9couvrez les <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\" target=\"_blank\" rel=\"noopener\">meilleurs logiciels pour d\u00e9velopper avec React<\/a>. Vous pouvez \u00e9galement apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">utiliser les fonctions fl\u00e9ch\u00e9es<\/a> dans React ou comment <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-dynamiquement-classes-react-guide\" target=\"_blank\" rel=\"noopener\">g\u00e9rer dynamiquement les classes<\/a> en React.<\/p>\n\n\n\n<p><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=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Projet Markdown avec React : Un parcours fascinant o\u00f9 nous allons explorer comment transformer une page Markdown en une interface utilisateur interactive gr\u00e2ce \u00e0 React&#8230;.<\/p>\n","protected":false},"author":2,"featured_media":3249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5954","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\/5954","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=5954"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5954\/revisions"}],"predecessor-version":[{"id":5955,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5954\/revisions\/5955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3249"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}