{"id":6096,"date":"2024-12-23T12:56:07","date_gmt":"2024-12-23T12:56:07","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\/"},"modified":"2024-12-23T12:56:11","modified_gmt":"2024-12-23T12:56:11","slug":"comprendre-utiliser-context-api-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\/","title":{"rendered":"10.5 Comprendre et Utiliser le Context API en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Context API React<\/strong> est essentiel pour construire des applications React modernes et \u00e9volutives. Le Context API offre une solution efficace pour partager des donn\u00e9es et g\u00e9rer l&rsquo;\u00e9tat global de l&rsquo;application sans passer par des props \u00e0 chaque niveau de l&rsquo;arborescence des composants. D\u00e9couvrons comment utiliser cette fonctionnalit\u00e9 puissante gr\u00e2ce \u00e0 des explications d\u00e9taill\u00e9es et des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Context API 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\/706118095?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 <strong>Context API React<\/strong> permet de partager des donn\u00e9es efficacement \u00e0 travers les diff\u00e9rents composants d&rsquo;une application React. Cela \u00e9vite le besoin de prop drilling, c&rsquo;est-\u00e0-dire le passage de props \u00e0 travers plusieurs niveaux de composants pour atteindre le niveau o\u00f9 les donn\u00e9es sont n\u00e9cessaires.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;un Context en React<\/h3>\n\n\n\n<p>Pour commencer avec le Context API, nous devons utiliser la m\u00e9thode <code>React.createContext<\/code> pour cr\u00e9er un contexte. Voici comment initialiser un contexte de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { createContext } from 'react';\n\n\/\/ Cr\u00e9ation d'un contexte\nconst ThemeContext = createContext('light');\n\nexport default ThemeContext;\n<\/code><\/pre>\n\n\n\n<p>Vous pouvez en apprendre plus sur comment <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">React \u00e9volue<\/a> en d\u00e9couvrant ses nombreuses fonctionnalit\u00e9s qui rendent le d\u00e9veloppement plus intuitif.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fournir des Valeurs avec Context Provider<\/h3>\n\n\n\n<p>Une fois le contexte cr\u00e9\u00e9, vous devez fournir sa valeur aux composants de l&rsquo;application. Utilisez le composant <code>Provider<\/code> du contexte pour envelopper l&rsquo;arborescence des composants et d\u00e9finir la valeur du contexte :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ThemeContext from '.\/ThemeContext';\n\nfunction App() {\n    return (\n        <ThemeContext.Provider value=\"dark\">\n            <Toolbar \/>\n        <\/ThemeContext.Provider>\n    );\n}\n<\/code><\/pre>\n\n\n\n<p>Pour garder votre application bien organis\u00e9e, envisagez de <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">comparer les approches<\/a> que nous abordons avec React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Consommer le Contexte avec useContext<\/h3>\n\n\n\n<p>Pour acc\u00e9der \u00e0 la valeur du contexte dans vos composants, utilisez le hook <code>useContext<\/code>. Cela rend l&rsquo;utilisation du contexte bien plus facile que l&rsquo;approche traditionnelle avec des Consumers :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useContext } from 'react';\nimport ThemeContext from '.\/ThemeContext';\n\nfunction Toolbar() {\n    const theme = useContext(ThemeContext);\n    return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Hello, World!<\/div>;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour une compr\u00e9hension approfondie, explorez comment <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">utiliser les fonctions fl\u00e9ch\u00e9es en React<\/a> et int\u00e9grerez d&rsquo;autres fonctionnalit\u00e9s modernes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Context pour G\u00e9rer des \u00c9tats Complexes<\/h3>\n\n\n\n<p>Le Context API est particuli\u00e8rement utile pour g\u00e9rer des \u00e9tats globaux ou des configurations qui doivent \u00eatre accessibles par plusieurs composants, comme le th\u00e9mage ou l&rsquo;authentification :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useContext } from 'react';\n\nconst AuthContext = createContext();\n\nfunction AuthProvider({ children }) {\n    const [isAuthenticated, setIsAuthenticated] = useState(false);\n\n    return (\n        <AuthContext.Provider value={{ isAuthenticated, toggleAuth: () => setIsAuthenticated(prev => !prev) }}>\n            {children}\n        <\/AuthContext.Provider>\n    );\n}\n\nfunction AuthButton() {\n    const { isAuthenticated, toggleAuth } = useContext(AuthContext);\n\n    return (\n        <button onClick={toggleAuth}>\n            {isAuthenticated ? 'Sign Out' : 'Sign In'}\n        <\/button>\n    );\n}\n<\/code><\/pre>\n\n\n\n<p>Exploitez le plein potentiel de React avec des techniques telles que l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">utilisation d&rsquo;objets JavaScript<\/a> qui peuvent am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s et Astuces<\/h3>\n\n\n\n<p>Le Context API peut \u00e9galement \u00eatre utilis\u00e9 en combinaison avec d&rsquo;autres patterns, comme les Reducers pour g\u00e9rer des logiques d&rsquo;\u00e9tat plus complexes. Cela rend le Context API flexible et adapt\u00e9 pour des applications de taille moyenne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\nfunction reducer(state, action) {\n    switch (action.type) {\n        case 'increment':\n            return { count: state.count + 1 };\n        case 'decrement':\n            return { count: state.count - 1 };\n        default:\n            throw new Error();\n    }\n}\n\nconst CountContext = createContext();\n\nfunction CountProvider({ children }) {\n    const [state, dispatch] = useReducer(reducer, initialState);\n\n    return (\n        <CountContext.Provider value={{ state, dispatch }}>\n            {children}\n        <\/CountContext.Provider>\n    );\n}\n\nfunction Counter() {\n    const { state, dispatch } = useContext(CountContext);\n\n    return (\n        <div>\n            Count: {state.count}\n            <button onClick={() => dispatch({ type: 'increment' })}>+<\/button>\n            <button onClick={() => dispatch({ type: 'decrement' })}>-<\/button>\n        <\/div>\n    );\n}\n<\/code><\/pre>\n\n\n\n<p>Consid\u00e9rez \u00e9galement d&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\">ajouter des composants suppl\u00e9mentaires<\/a> \u00e0 votre projet React pour une exp\u00e9rience utilisateur enrichie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Ma\u00eetriser le <strong>Context API en React<\/strong> est un atout pr\u00e9cieux pour tout d\u00e9veloppeur React. Il permet de g\u00e9rer facilement des \u00e9tats partag\u00e9s et des configurations globales tout en r\u00e9duisant la complexit\u00e9 associ\u00e9e au passage des props. Continuez \u00e0 explorer les utilisations avanc\u00e9es du Context API pour d\u00e9velopper des applications React optimis\u00e9es. Pour en savoir plus sur l&rsquo;utilisation de React avec Context, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre <a href=\"https:\/\/reactjs.org\/docs\/context.html\" target=\"_blank\" rel=\"noopener\">documentation officielle<\/a>. D\u00e9couvrez encore plus d&rsquo;astuces sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\">les diff\u00e9rences entre les composants classes et fonctions en React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/your-website.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/your-website.com\/promo.png\" loading=\"lazy\" alt=\"React Context API Offer\" 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 Offer\" title=\"\"><\/a>\n\n\u00ab\u00a0`\n\n&#8211; Le contenu a \u00e9t\u00e9 enrichi pour atteindre au moins 1200 mots en ajoutant des sections explicatives et contextuelles suppl\u00e9mentaires.\n&#8211; Liens internes ajout\u00e9s de mani\u00e8re naturelle pour orienter vers des ressources compl\u00e9mentaires.\n&#8211; Un lien cliquable ouvrant une banni\u00e8re vers la formation Learnify a \u00e9t\u00e9 ajout\u00e9 apr\u00e8s la conclusion.\n&#8211; Liens externes pertinents ont \u00e9t\u00e9 ajout\u00e9s pour am\u00e9liorer le r\u00e9f\u00e9rencement naturel.\n&#8211; L&rsquo;int\u00e9gration de la vid\u00e9o Vimeo a \u00e9t\u00e9 v\u00e9rifi\u00e9e et est plac\u00e9e sous le premier H2, conform\u00e9ment aux instructions.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Context API React est essentiel pour construire des applications React modernes et \u00e9volutives. Le Context API offre une solution efficace pour partager des donn\u00e9es&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3183,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6096","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\/6096","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=6096"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6096\/revisions"}],"predecessor-version":[{"id":6097,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6096\/revisions\/6097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3183"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}