{"id":6098,"date":"2024-12-30T12:55:15","date_gmt":"2024-12-30T12:55:15","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/exercices-s-ameliorer-react-guide\/"},"modified":"2024-12-30T12:55:19","modified_gmt":"2024-12-30T12:55:19","slug":"exercices-s-ameliorer-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/exercices-s-ameliorer-react-guide\/","title":{"rendered":"10.6 Exercices pour S&rsquo;am\u00e9liorer en React : Guide"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Exercices pour S&rsquo;am\u00e9liorer en React<\/strong> sont essentiels pour quiconque souhaitant ma\u00eetriser cette biblioth\u00e8que JavaScript incontournable pour le d\u00e9veloppement d&rsquo;interfaces utilisateur. En explorant une s\u00e9rie d&rsquo;exercices pratiques, vous apprendrez \u00e0 renforcer vos comp\u00e9tences en React et \u00e0 cr\u00e9er des applications web interactives et performantes. Plongeons ensemble dans ce guide enrichissant !<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Exercices en 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\/706119680?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>L&rsquo;apprentissage de React passe par des exercices concrets. Voici une s\u00e9lection d&rsquo;exercices cl\u00e9s qui vous permettent d&rsquo;explorer et de comprendre les concepts essentiels de React tels que les \u00e9tats, les propri\u00e9t\u00e9s, les composants et les hooks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exercice 1 : Cr\u00e9er un Composant Statique<\/h3>\n\n\n\n<p>Pour commencer, cr\u00e9ons un composant simple en React. Cela vous aidera \u00e0 comprendre comment les composants sont structur\u00e9s et utilis\u00e9s.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction Welcome() {\n  return (\n    <div>\n      <h1>Bienvenue \u00e0 l'apprentissage de React !<\/h1>\n    <\/div>\n  );\n}\n\nexport default Welcome;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exercice 2 : Utiliser les \u00c9tats avec useState<\/h3>\n\n\n\n<p>Les \u00e9tats sont une part essentielle de React. Apprenons \u00e0 utiliser <code>useState<\/code> pour g\u00e9rer l&rsquo;\u00e9tat local dans un composant fonctionnel.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Vous avez cliqu\u00e9 {count} fois<\/p>\n      <button onClick={() => setCount(count + 1)}>\n        Cliquez moi\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exercice 3 : Passer des Propri\u00e9t\u00e9s entre Composants<\/h3>\n\n\n\n<p>D\u00e9couvrons comment passer des donn\u00e9es entre composants parent et enfant gr\u00e2ce aux propri\u00e9t\u00e9s. Pour plus de d\u00e9tails, d\u00e9couvrez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\">l&rsquo;utilisation des classes en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction Greeting(props) {\n  return <h1>Bonjour, {props.name}!<\/h1>;\n}\n\nfunction App() {\n  return (\n    <div>\n      <Greeting name=\"Alice\" \/>\n      <Greeting name=\"Bob\" \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exercice 4 : G\u00e9rer les Effets de Bord avec useEffect<\/h3>\n\n\n\n<p>Apprenons \u00e0 g\u00e9rer les effets de bord tels que les appels API ou les inscriptions \u00e0 des abonnements avec le hook <code>useEffect<\/code>. Pour une introduction aux props et states, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/voir-modifier-props-states-navigateur-react\">la gestion des props et states<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\n\nfunction DataFetcher() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => setData(data));\n  }, []); \/\/ Le tableau vide signifie que cet effet ne s'ex\u00e9cutera qu'une seule fois.\n\n  return (\n    <div>\n      <h2>Donn\u00e9es r\u00e9cup\u00e9r\u00e9es :<\/h2>\n      <pre>{JSON.stringify(data, null, 2)}<\/pre>\n    <\/div>\n  );\n}\n\nexport default DataFetcher;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exercice 5 : Gestion d&rsquo;\u00c9v\u00e9nements Utilisateur<\/h3>\n\n\n\n<p>Apprenez comment React permet de g\u00e9rer les \u00e9v\u00e9nements utilisateur tels que les clics, les saisies au clavier, etc. D\u00e9couvrez plus en d\u00e9tail comment g\u00e9rer ces \u00e9v\u00e9nements dans notre article complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/evenements-disponibles-react-guide\">les \u00e9v\u00e9nements disponibles en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\n\nfunction EventHandling() {\n  const handleClick = () => {\n    alert('Bouton cliqu\u00e9 !');\n  };\n\n  return (\n    <button onClick={handleClick}>\n      Cliquez ici\n    <\/button>\n  );\n}\n\nexport default EventHandling;\n<\/code><\/pre>\n\n\n\n<p>Renforcer sa compr\u00e9hension des composants React est crucial. Explorez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">les diff\u00e9rences entre les composants par classe et fonction<\/a> pour enrichir votre savoir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Gr\u00e2ce \u00e0 ces exercices pratiques, vous avez maintenant une base solide pour explorer davantage React et ses possibilit\u00e9s. Continuez \u00e0 cr\u00e9er et \u00e0 jouer avec vos propres projets pour ma\u00eetriser cet outil puissant. Pensez \u00e9galement \u00e0 consulter des ressources comme les documents officiels de React ou des plateformes de cours en ligne pour continuer votre apprentissage. Vous pouvez aussi approfondir vos connaissances avec notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">la ma\u00eetrise des objets en JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REACT-offre-50.gif\" 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<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>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Exercices pour S&rsquo;am\u00e9liorer en React sont essentiels pour quiconque souhaitant ma\u00eetriser cette biblioth\u00e8que JavaScript incontournable pour le d\u00e9veloppement d&rsquo;interfaces utilisateur. En explorant une s\u00e9rie&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3208,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6098","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\/6098","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=6098"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6098\/revisions"}],"predecessor-version":[{"id":6099,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6098\/revisions\/6099"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3208"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}