{"id":5956,"date":"2024-09-26T09:26:33","date_gmt":"2024-09-26T09:26:33","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/preparer-projet-markdown-react-etapes\/"},"modified":"2024-09-26T09:26:38","modified_gmt":"2024-09-26T09:26:38","slug":"preparer-projet-markdown-react-etapes","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/preparer-projet-markdown-react-etapes\/","title":{"rendered":"6.2 Pr\u00e9parer son Projet Markdown avec React : \u00c9tapes"},"content":{"rendered":"\n<p><strong>Pr\u00e9parer son Projet Markdown avec React<\/strong> est une comp\u00e9tence pr\u00e9cieuse pour les d\u00e9veloppeurs web. Ce guide vous montrera \u00e9tape par \u00e9tape comment configurer et utiliser Markdown dans un projet React. Vous apprendrez \u00e0 int\u00e9grer Markdown, \u00e0 le parser et \u00e0 l&rsquo;afficher de mani\u00e8re efficace dans votre application.<\/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\/706079790?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\/devenir-un-d%C3%A9veloppeur-python\/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(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Markdown est un langage de balisage l\u00e9ger facile \u00e0 apprendre, utilis\u00e9 pour formater des textes de mani\u00e8re simple et rapide. Lorsqu&rsquo;il est combin\u00e9 avec une biblioth\u00e8que front-end comme React, Markdown permet de cr\u00e9er des interfaces utilisateurs dynamiques et r\u00e9actives en manipulant simplement le texte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation Initiale du Projet React<\/h3>\n\n\n\n<p>Pour commencer, nous devons cr\u00e9er un nouveau projet React en utilisant <code>create-react-app<\/code>. Ex\u00e9cutez la commande suivante dans votre terminal :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npx create-react-app my-markdown-app\ncd my-markdown-app\nnpm start\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter les Biblioth\u00e8ques N\u00e9cessaires<\/h3>\n\n\n\n<p>Nous aurons besoin de quelques biblioth\u00e8ques suppl\u00e9mentaires pour manipuler le Markdown et l&rsquo;afficher correctement dans notre application React. Installez les biblioth\u00e8ques <code>marked<\/code> et <code>react-markdown<\/code> en utilisant npm :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code>npm install marked react-markdown\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Composant MarkdownRenderer<\/h3>\n\n\n\n<p>Nous allons cr\u00e9er un composant React pour rendre le Markdown. Cr\u00e9ez un fichier nomm\u00e9 <code>MarkdownRenderer.js<\/code> dans le dossier <code>src<\/code> et ajoutez le code suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nconst MarkdownRenderer = ({ markdownText }) => {\n  return (\n    <div className=\"markdown-container\">\n      <ReactMarkdown>{markdownText}<\/ReactMarkdown>\n    <\/div>\n  );\n};\n\nexport default MarkdownRenderer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer le Composant dans App.js<\/h3>\n\n\n\n<p>Nous allons maintenant utiliser notre composant <code>MarkdownRenderer<\/code> dans le fichier <code>App.js<\/code>. Modifiez ce fichier comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\nimport MarkdownRenderer from '.\/MarkdownRenderer';\nimport '.\/App.css';\n\nfunction App() {\n  const [markdownText, setMarkdownText] = useState('# Hello, Markdown!');\n\n  const handleInputChange = (event) => {\n    setMarkdownText(event.target.value);\n  };\n\n  return (\n    <div className=\"App\">\n      <textarea\n        value={markdownText}\n        onChange={handleInputChange}\n        rows=\"10\"\n        cols=\"50\"\n      \/>\n      <MarkdownRenderer markdownText={markdownText} \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styliser l&rsquo;Application<\/h3>\n\n\n\n<p>Pour un rendu visuel agr\u00e9able, nous allons ajouter quelques styles CSS dans le fichier <code>App.css<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.App {\n  font-family: Arial, sans-serif;\n  text-align: center;\n  margin-top: 20px;\n}\n\ntextarea {\n  width: 80%;\n  margin: 20px 0;\n}\n\n.markdown-container {\n  text-align: left;\n  margin: 20px auto;\n  width: 80%;\n  border: 1px solid #ddd;\n  padding: 10px;\n  background-color: #f9f9f9;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Fonctionnalit\u00e9s Avanc\u00e9es<\/h3>\n\n\n\n<p>Maintenant que nous avons une application de base fonctionnelle, nous pouvons ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires pour enrichir l&rsquo;exp\u00e9rience utilisateur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Support des Syntaxes Avanc\u00e9es de Markdown<\/h4>\n\n\n\n<p>Nous pouvons am\u00e9liorer l&rsquo;affichage des syntaxes avanc\u00e9es de Markdown, telles que les listes de t\u00e2ches, les tableaux, et les liens. Assurez-vous que le Markdown que vous utilisez supporte ces syntaxes et ajustez votre composant si n\u00e9cessaire.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\n\nconst MarkdownRenderer = ({ markdownText }) => {\n  return (\n    <div className=\"markdown-container\">\n      <ReactMarkdown remarkPlugins={[remarkGfm]}>\n        {markdownText}\n      <\/ReactMarkdown>\n    <\/div>\n  );\n};\n\nexport default MarkdownRenderer;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Sauvegarder et Charger du Markdown<\/h4>\n\n\n\n<p>Ajouter des fonctionnalit\u00e9s pour sauvegarder le texte Markdown dans le localStorage et le charger automatiquement au d\u00e9marrage de l&rsquo;application :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\nimport MarkdownRenderer from '.\/MarkdownRenderer';\nimport '.\/App.css';\n\nfunction App() {\n  const [markdownText, setMarkdownText] = useState(() => {\n    const savedText = localStorage.getItem('markdownText');\n    return savedText || '# Hello, Markdown!';\n  });\n\n  const handleInputChange = (event) => {\n    const text = event.target.value;\n    setMarkdownText(text);\n    localStorage.setItem('markdownText', text);\n  };\n\n  return (\n    <div className=\"App\">\n      <textarea\n        value={markdownText}\n        onChange={handleInputChange}\n        rows=\"10\"\n        cols=\"50\"\n      \/>\n      <MarkdownRenderer markdownText={markdownText} \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Pr\u00e9visualisation en Temps R\u00e9el<\/h4>\n\n\n\n<p>Ajouter une fonctionnalit\u00e9 de pr\u00e9visualisation en temps r\u00e9el pour une meilleure exp\u00e9rience utilisateur. Cela aidera les utilisateurs \u00e0 voir instantan\u00e9ment les modifications apport\u00e9es \u00e0 leur contenu Markdown.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>function App() {\n  const [markdownText, setMarkdownText] = useState(() => {\n    const savedText = localStorage.getItem('markdownText');\n    return savedText || '# Hello, Markdown!';\n  });\n\n  const handleInputChange = (event) => {\n    const text = event.target.value;\n    setMarkdownText(text);\n    localStorage.setItem('markdownText', text);\n  };\n\n  return (\n    <div className=\"App\">\n      <textarea\n        value={markdownText}\n        onChange={handleInputChange}\n        rows=\"10\"\n        cols=\"50\"\n      \/>\n      <div className=\"markdown-preview\">\n        <h2>Preview:<\/h2>\n        <MarkdownRenderer markdownText={markdownText} \/>\n      <\/div>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>En suivant ces \u00e9tapes, vous avez maintenant une application compl\u00e8te de rendu Markdown dans React. Cette base peut \u00eatre enrichie avec de nombreuses fonctionnalit\u00e9s avanc\u00e9es propos\u00e9es par React. Si vous \u00eates curieux de d\u00e9couvrir les diff\u00e9rences entre composants par classe et fonctions, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">les composants par classe vs. les fonctions dans React<\/a>. Vous pourriez \u00e9galement \u00eatre int\u00e9ress\u00e9 par notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">comment ajouter un nouveau composant dans React<\/a>, ou notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">la cr\u00e9ation de votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<p>Poursuivez \u00e9galement votre exploration avec notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">le cycle de vie des applications React<\/a> et la <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\">manipulation des classes en JavaScript<\/a> pour une utilisation optimale avec React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En suivant ces \u00e9tapes, vous avez maintenant une application compl\u00e8te de rendu Markdown dans React. Vous pouvez non seulement afficher du texte Markdown, mais aussi ajouter des fonctionnalit\u00e9s avanc\u00e9es comme la pr\u00e9visualisation en temps r\u00e9el et la sauvegarde locale. Continuez \u00e0 explorer les possibilit\u00e9s offertes par Markdown et React pour cr\u00e9er des interfaces utilisateur encore plus dynamiques. Pour en savoir plus sur React, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\">cours complet sur React et Redux<\/a>. Pour plus de tutoriels sur le d\u00e9veloppement web, visitez notre blog.<\/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-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation React et Redux Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-PYTHON-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Python Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Pr\u00e9parer son Projet Markdown avec React est une comp\u00e9tence pr\u00e9cieuse pour les d\u00e9veloppeurs web. Ce guide vous montrera \u00e9tape par \u00e9tape comment configurer et utiliser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3244,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5956","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\/5956","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=5956"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5956\/revisions"}],"predecessor-version":[{"id":5957,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5956\/revisions\/5957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3244"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}