{"id":6198,"date":"2025-10-20T11:54:31","date_gmt":"2025-10-20T11:54:31","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/mettre-en-place-page-accueil-react\/"},"modified":"2025-10-20T11:54:36","modified_gmt":"2025-10-20T11:54:36","slug":"mettre-en-place-page-accueil-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/mettre-en-place-page-accueil-react\/","title":{"rendered":"16.8 Mettre en Place une Page d&rsquo;Accueil avec React"},"content":{"rendered":"D&rsquo;accord, voici l&rsquo;article modifi\u00e9 avec les ajustements SEO demand\u00e9s directement dans le HTML :\n\n\u00ab\u00a0`html\n\n<p><strong>Mettre en Place une Page d&rsquo;Accueil avec React<\/strong> est une \u00e9tape cruciale pour tout d\u00e9veloppeur souhaitant cr\u00e9er des interfaces utilisateur modernes et dynamiques. Comprendre comment construire une <strong>page d&rsquo;accueil avec React<\/strong> peut am\u00e9liorer drastiquement l&rsquo;exp\u00e9rience de l&rsquo;utilisateur et l&rsquo;engagement. Apprenons \u00e0 le faire ensemble gr\u00e2ce \u00e0 un guide \u00e9tape par \u00e9tape, accompagn\u00e9 d&rsquo;exemples de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation d&rsquo;une Page d&rsquo;Accueil avec <strong>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\/706142795?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><strong>React<\/strong> est une biblioth\u00e8que JavaScript r\u00e9put\u00e9e pour sa capacit\u00e9 \u00e0 rendre des interfaces utilisateur complexes de mani\u00e8re efficace et flexible. L&rsquo;une des premi\u00e8res \u00e9tapes dans la cr\u00e9ation d&rsquo;une application React est la d\u00e9finition de la structure de la page d&rsquo;accueil, o\u00f9 les utilisateurs auront leur premi\u00e8re interaction. Explorons comment structurer et styliser efficacement notre <a href=\"https:\/\/wikiform.fr\/codespace\/mettre-en-place-page-accueil-react\" target=\"_blank\" rel=\"noopener\">page d&rsquo;accueil React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation de l&rsquo;Environnement de D\u00e9veloppement React<\/h3>\n\n\n\n<p>La premi\u00e8re \u00e9tape pour cr\u00e9er une application React est de configurer votre environnement de d\u00e9veloppement. Utilisez <code>create-react-app<\/code> pour faciliter ce processus. Voici comment d\u00e9marrer :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># Utiliser npx pour cr\u00e9er une nouvelle application React\nnpx create-react-app my-homepage\n\n# Acc\u00e9der au r\u00e9pertoire de l'application\ncd my-homepage\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Structure de Base d&rsquo;une Page d&rsquo;Accueil React<\/h3>\n\n\n\n<p>Une fois l&rsquo;environnement configur\u00e9, cr\u00e9ons une structure de base pour notre page d&rsquo;accueil. Nous allons utiliser des composants fonctionnels, qui sont une pratique recommand\u00e9e dans React moderne. Pour plus d&rsquo;informations sur la composition des composants, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">composants par classe VS fonction<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction Homepage() {\n  return (\n    <div className=\"homepage\">\n      <header className=\"homepage-header\">\n        <h1>Bienvenue sur notre Page d'Accueil<\/h1>\n        <p>D\u00e9couvrez nos fonctionnalit\u00e9s \u00e9tonnantes.<\/p>\n      <\/header>\n    <\/div>\n  );\n}\n\nexport default Homepage;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styliser la Page d&rsquo;Accueil avec CSS<\/h3>\n\n\n\n<p>Pour donner une allure professionnelle \u00e0 notre page d&rsquo;accueil, ajoutons quelques styles CSS. Cr\u00e9ez un fichier CSS et appliquez des styles \u00e0 votre page. Pour d\u00e9couvrir comment les modules CSS peuvent am\u00e9liorer votre interface, lisez l&rsquo;article sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-module-css-utiliser-react\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce qu&rsquo;un module CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* homepage.css *\/\n\n.homepage {\n  text-align: center;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.homepage-header {\n  background-color: #282c34;\n  color: white;\n  padding: 20px;\n}\n\n.homepage-header h1 {\n  font-size: 2.5em;\n  margin-bottom: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Incorporer du Contenu Dynamique<\/h3>\n\n\n\n<p>Pour rendre votre page d&rsquo;accueil interactive, int\u00e9grez du contenu dynamique \u00e0 l&rsquo;aide des hooks de React comme <code>useState<\/code> et <code>useEffect<\/code>. Voici un exemple d&rsquo;ajout de donn\u00e9es dynamiques. Vous pouvez en apprendre plus sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">hooks React<\/a> dans notre guide complet.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction Homepage() {\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => setData(data))\n      .catch(error => console.error('Erreur lors de la r\u00e9cup\u00e9ration des donn\u00e9es:', error));\n  }, []);\n\n  return (\n    <div className=\"homepage\">\n      <header className=\"homepage-header\">\n        <h1>Bienvenue sur notre Page d'Accueil<\/h1>\n        <p>D\u00e9couvrez nos fonctionnalit\u00e9s \u00e9tonnantes.<\/p>\n      <\/header>\n      <div className=\"data-section\">\n        {data.map((item, index) => (\n          <div key={index} className=\"data-item\">\n            <h2>{item.title}<\/h2>\n            <p>{item.description}<\/p>\n          <\/div>\n        ))}\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default Homepage;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Cr\u00e9er une <strong>page d&rsquo;accueil avec React<\/strong> est le point de d\u00e9part pour r\u00e9aliser des applications web modernes et dynamiques. Gr\u00e2ce \u00e0 ce tutoriel, vous avez maintenant les bases n\u00e9cessaires pour structurer, styliser et dynamiser vos interfaces utilisateur en React. Pour tirer le meilleur parti de vos comp\u00e9tences en React, explorez les diff\u00e9rences entre les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">props et le state<\/a> ou comprenez le <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">cycle de vie des applications React<\/a>. Continuez \u00e0 exp\u00e9rimenter avec d&rsquo;autres fonctionnalit\u00e9s de React pour approfondir vos comp\u00e9tences, telles que les React Router pour la navigation ou l&rsquo;int\u00e9gration de la gestion de l&rsquo;\u00e9tat avec Redux pour des applications plus complexes. Pour explorer davantage, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">cours complet sur React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-react\/150\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/react-ut-formation.gif\" loading=\"lazy\" alt=\"Formation React\" title=\"\"><\/a>\n\n\n\n<p>Avec ces bases, n&rsquo;h\u00e9sitez pas \u00e0 \u00e9tendre et personnaliser davantage vos applications React selon vos besoins sp\u00e9cifiques et les pr\u00e9f\u00e9rences de votre audience. Bonne programmation !<\/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=\"Formation Redux et React\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\nAvez-vous d&rsquo;autres modifications ou ajouts \u00e0 effectuer sur cet article ?","protected":false},"excerpt":{"rendered":"<p>D&rsquo;accord, voici l&rsquo;article modifi\u00e9 avec les ajustements SEO demand\u00e9s directement dans le HTML : \u00ab\u00a0`html Mettre en Place une Page d&rsquo;Accueil avec React est une&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6198","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\/6198","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=6198"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6198\/revisions"}],"predecessor-version":[{"id":6199,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6198\/revisions\/6199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3226"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}