{"id":5958,"date":"2024-09-27T09:24:55","date_gmt":"2024-09-27T09:24:55","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-html-css-projet-markdown-react\/"},"modified":"2024-09-27T09:25:00","modified_gmt":"2024-09-27T09:25:00","slug":"creer-html-css-projet-markdown-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-html-css-projet-markdown-react\/","title":{"rendered":"6.3 Cr\u00e9er le HTML et le CSS pour un Projet Markdown React"},"content":{"rendered":"\n<p><strong>Cr\u00e9er le HTML et le CSS pour un Projet Markdown React<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur front-end. Apprendre \u00e0 concevoir l&rsquo;interface utilisateur avec HTML et CSS peut transformer un projet simple en une application web professionnelle et attractive. Plongeons dans les d\u00e9tails de cette mise en \u0153uvre en suivant des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de HTML et CSS pour un Projet Markdown React<\/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\/706079855?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>Le d\u00e9veloppement frontal avec React implique souvent la transformation des interfaces utilisateur pour r\u00e9pondre aux exigences des utilisateurs. Utiliser Markdown pour formater le contenu et React pour g\u00e9rer son affichage offre une flexibilit\u00e9 impressionnante. Avant de plonger dans le code, voyons comment structurer notre projet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer le Projet<\/h3>\n\n\n\n<p>Tout d&rsquo;abord, il est n\u00e9cessaire de configurer un projet React. Voici les \u00e9tapes pour initialiser notre projet Markdown React :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npx create-react-app markdown-react-project\ncd markdown-react-project\nnpm start\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er le HTML de Base<\/h3>\n\n\n\n<p>Maintenant, nous allons cr\u00e9er le fichier HTML de base pour notre application Markdown React. Dans le dossier <code>public<\/code>, ouvrez le fichier <code>index.html<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Markdown React App<\/title>\n  <link rel=\"stylesheet\" href=\"%PUBLIC_URL%\/styles.css\">\n<\/head>\n<body>\n  <div id=\"root\"><\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter le CSS pour le Stylisme<\/h3>\n\n\n\n<p>Ajoutons maintenant le CSS pour styliser notre application. Cr\u00e9ez un fichier nomm\u00e9 <code>styles.css<\/code> dans le dossier <code>public<\/code> et ajoutez le code suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  font-family: Arial, sans-serif;\n  background-color: #f5f5f5;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n}\n\n#root {\n  width: 50%;\n  background: #fff;\n  padding: 20px;\n  box-shadow: 0 0 10px rgba(0,0,0,0.1);\n  border-radius: 10px;\n}\n\ntextarea {\n  width: 100%;\n  height: 150px;\n  margin-bottom: 20px;\n  padding: 10px;\n  font-size: 16px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n}\n\npre {\n  background: #333;\n  color: #fff;\n  padding: 15px;\n  border-radius: 5px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer React et Markdown<\/h3>\n\n\n\n<p>Cr\u00e9er l&rsquo;interface utilisateur en React implique de d\u00e9finir des composants et de les utiliser dans l&rsquo;application. Ajoutons le composant Markdown avec l&rsquo;aide de la biblioth\u00e8que <code>react-markdown<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm install react-markdown<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Le Composant Markdown React<\/h3>\n\n\n\n<p>Cr\u00e9ons maintenant notre composant <code>MarkdownEditor<\/code>. Ouvrez le fichier <code>App.js<\/code> et modifiez-le comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\nimport ReactMarkdown from 'react-markdown';\n\nfunction MarkdownEditor() {\n  const [markdown, setMarkdown] = useState('');\n\n  return (\n    <div>\n      <textarea \n        value={markdown}\n        onChange={(e) => setMarkdown(e.target.value)}\n        placeholder=\"Entrez votre texte Markdown ici...\"\n      \/>\n      <div>\n        <h2>Preview:<\/h2>\n        <ReactMarkdown>{markdown}<\/ReactMarkdown>\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default MarkdownEditor;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre l&rsquo;Application Utilisable<\/h3>\n\n\n\n<p>Pour que notre application fonctionne correctement, nous devons appeler le composant <code>MarkdownEditor<\/code> dans notre fichier principal <code>App.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport MarkdownEditor from '.\/MarkdownEditor';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <MarkdownEditor \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation et Am\u00e9lioration<\/h3>\n\n\n\n<p>Pour aller plus loin, pensez \u00e0 ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires comme :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li>Garder les donn\u00e9es du markdown en utilisant l&rsquo;API locale du stockage.<\/li>\n  <li>Int\u00e9grer une biblioth\u00e8que de gestion d&rsquo;\u00e9tat comme Redux pour un meilleur gestion de l&rsquo;\u00e9tat.<\/li>\n  <li>Ajouter du CSS suppl\u00e9mentaire pour une meilleure exp\u00e9rience utilisateur.<\/li>\n<\/ul>\n\n\n\n<p>En int\u00e9grant HTML, CSS et Markdown avec React, vous d\u00e9veloppez des comp\u00e9tences essentielles pour un d\u00e9veloppeur moderne. De plus, la connaissance de <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">fonctions fl\u00e9ch\u00e9es en JavaScript<\/a> et de <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">la cr\u00e9ation de votre premi\u00e8re application React<\/a> enrichira votre compr\u00e9hension des concepts fondamentaux. N&rsquo;h\u00e9sitez pas \u00e0 explorer d&rsquo;autres ressources comme les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">diff\u00e9rences entre les applications Single Page et Multi Page<\/a> dans React ou les <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\">meilleurs logiciels pour d\u00e9velopper avec React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Cr\u00e9er une application Markdown avec React en utilisant HTML et CSS de mani\u00e8re laborieuse et bien structur\u00e9e peut am\u00e9liorer non seulement vos comp\u00e9tences de d\u00e9veloppement front-end, mais aussi votre compr\u00e9hension du d\u00e9veloppement r\u00e9actif. N&rsquo;oubliez pas de continuer \u00e0 explorer et exp\u00e9rimenter pour am\u00e9liorer vos applications.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr\u00e9er-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.","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er le HTML et le CSS pour un Projet Markdown React est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur front-end. Apprendre \u00e0 concevoir l&rsquo;interface utilisateur avec&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3196,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5958","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\/5958","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=5958"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5958\/revisions"}],"predecessor-version":[{"id":5959,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5958\/revisions\/5959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3196"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}