{"id":5892,"date":"2024-09-04T14:15:13","date_gmt":"2024-09-04T14:15:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\/"},"modified":"2024-09-04T14:15:17","modified_gmt":"2024-09-04T14:15:17","slug":"nouveautes-javascript-savoir-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\/","title":{"rendered":"2.1 Nouveaut\u00e9s JavaScript : Ce qu&rsquo;il Faut Savoir pour React"},"content":{"rendered":"\n<p><strong>Nouveaut\u00e9s JavaScript React : Ce qu&rsquo;il Faut Savoir pour React<\/strong> est un sujet captivant et crucial pour les d\u00e9veloppeurs React. Les technologies \u00e9voluent rapidement, et JavaScript ne fait pas exception avec ses nouvelles fonctionnalit\u00e9s. Comprendre ces nouveaut\u00e9s peut grandement am\u00e9liorer vos projets React, en termes de performance, de lisibilit\u00e9 du code et d&rsquo;exp\u00e9rience utilisateur. Plongeons dans les d\u00e9tails pour ma\u00eetriser ces nouvelles fonctionnalit\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Nouveaut\u00e9s JavaScript pour 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\/706049554?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('.amount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.amount 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>Les nouveaut\u00e9s JavaScript concernent souvent des am\u00e9liorations de performance, des nouveaux syntaxes ou des fonctionnalit\u00e9s qui simplifient le code. Ces \u00e9l\u00e9ments peuvent \u00eatre int\u00e9gr\u00e9s parfaitement avec React pour rendre vos applications plus efficaces et maintenables. Explorons quelques-unes des nouveaut\u00e9s les plus marquantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Fonctions Asynchrones et Await<\/h3>\n\n\n\n<p>Les fonctions asynchrones et l&rsquo;op\u00e9rateur <code>await<\/code> simplifient la gestion des op\u00e9rations asynchrones en JavaScript. Ils permettent d&rsquo;\u00e9crire du code asynchrone avec une syntaxe plus lisible et g\u00e9rable par rapport aux promesses classiques. Pour en savoir plus, explorez la diff\u00e9rence entre <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">Single Page Applications et Multi Page Applications en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Exemple simple de fonction asynchrone\nasync function fetchData(url) {\n    try {\n        let response = await fetch(url);\n        let data = await response.json();\n        console.log(data);\n    } catch (error) {\n        console.error('Erreur:', error);\n    }\n}\n\n\/\/ Utilisation de la fonction\nfetchData('https:\/\/api.example.com\/data');\n<\/code><\/pre>\n\n\n\n<p>En React, les fonctions asynchrones peuvent \u00eatre utilis\u00e9es dans vos composants pour g\u00e9rer les appels API, rendant vos applications plus r\u00e9actives et performantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Champs Optionnels Chaining<\/h3>\n\n\n\n<p>Le <code>Optional Chaining<\/code> est une fonctionnalit\u00e9 puissante qui permet d&rsquo;\u00e9viter les erreurs lorsque des propri\u00e9t\u00e9s ou des m\u00e9thodes n&rsquo;existent pas. Cela simplifie grandement la manipulation des objets imbriqu\u00e9s.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const user = {\n    profile: {\n        name: 'John Doe',\n        address: {\n            city: 'Paris'\n        }\n    }\n};\n\n\/\/ Sans Optional Chaining\nconst city = user && user.profile && user.profile.address && user.profile.address.city;\n\n\/\/ Avec Optional Chaining\nconst city = user?.profile?.address?.city;\n\nconsole.log(city); \/\/ Output: Paris\n<\/code><\/pre>\n\n\n\n<p>En React, le <code>Optional Chaining<\/code> permet de rendre le code plus propre et de r\u00e9duire les v\u00e9rifications manuelles de nullit\u00e9. Pour explorer davantage cette fonctionnalit\u00e9, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">guide sur les props en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Nullish Coalescing Operator<\/h3>\n\n\n\n<p>Le <code>Nullish Coalescing Operator<\/code> (<code>??<\/code>) permet de g\u00e9rer les valeurs nulles et ind\u00e9finies de mani\u00e8re concise. Il retourne son op\u00e9rande de droite lorsque son op\u00e9rande de gauche est null (ou undefined).<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>let user;\nlet username = user ?? 'Guest';\n\nconsole.log(username); \/\/ Output: Guest\n\nuser = 'John Doe';\nusername = user ?? 'Guest';\n\nconsole.log(username); \/\/ Output: John Doe\n<\/code><\/pre>\n\n\n\n<p>En React, cet op\u00e9rateur est particuli\u00e8rement utile pour g\u00e9rer les valeurs par d\u00e9faut dans les composants fonctionnels. Vous pouvez \u00e9galement retrouver plus d&rsquo;informations sur l&rsquo;utilit\u00e9 des <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">fonctions fl\u00e9ch\u00e9es en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Functional Components et Hooks<\/h3>\n\n\n\n<p>Les composants fonctionnels et les hooks apportent une nouvelle mani\u00e8re de g\u00e9rer l&rsquo;\u00e9tat et les effets de bord dans React. Ils rendent le code plus lisible et component-driven, tout en permettant de profiter des derni\u00e8res fonctionnalit\u00e9s de React. Pour diff\u00e9rencier les composants par classe et fonction, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">diff\u00e9rences entre composants par classe et fonction en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\n\nfunction UserProfile({ userId }) {\n    const [user, setUser] = useState(null);\n\n    useEffect(() => {\n        async function fetchUserData() {\n            const response = await fetch(`\/api\/users\/${userId}`);\n            const data = await response.json();\n            setUser(data);\n        }\n\n        fetchUserData();\n    }, [userId]);\n\n    return (\n        <div>\n            {user ? (\n                <>\n                    <h1>{user.name}<\/h1>\n                    <p>{user.email}<\/p>\n                <\/>\n            ) : (\n                <p>Loading...<\/p>\n            )}\n        <\/div>\n    );\n}\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<p>Avec les hooks, les composants React peuvent g\u00e9rer l&rsquo;\u00e9tat local, effectuer des effets c\u00f4t\u00e9 client et m\u00eame cr\u00e9er des hooks personnalis\u00e9s pour une r\u00e9utilisation de code optimis\u00e9e. Pour plus d&rsquo;informations, explorez notre guide complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Modules ES6<\/h3>\n\n\n\n<p>Les modules ES6 permettent de structurer le code JavaScript en le d\u00e9composant en fichiers de mani\u00e8re modulaire et r\u00e9utilisable. Cette approche am\u00e9liore la maintenance du code et facilite la gestion des d\u00e9pendances.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ math.js\nexport function add(a, b) {\n    return a + b;\n}\n\nexport function subtract(a, b) {\n    return a - b;\n}\n\n\/\/ main.js\nimport { add, subtract } from '.\/math.js';\n\nconsole.log(add(5, 3)); \/\/ Output: 8\nconsole.log(subtract(5, 3)); \/\/ Output: 2\n<\/code><\/pre>\n\n\n\n<p>En React, les modules ES6 permettent de composer des composants, des hooks, des utilitaires et des constantes, favorisant ainsi la r\u00e9utilisabilit\u00e9 et la clart\u00e9 du code. Pour apprendre \u00e0 utiliser efficacement les modules en React, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/importer-exporter-modules-javascript-react\" target=\"_blank\" rel=\"noopener\">l&rsquo;importation et l&rsquo;exportation des modules en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Propositions de Clauses Optionnelles d&rsquo;Import<\/h3>\n\n\n\n<p>Les propositions pour les clauses optionnelles d&rsquo;importation am\u00e9liorent la flexibilit\u00e9 des imports en JavaScript. Vous pouvez conditionnellement importer des modules n\u00e9cessaires seulement dans certains contextes, ce qui peut optimiser les chargements et les performances.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Chargement conditionnel\nif (process.env.NODE_ENV === 'development') {\n    import('react-dev-tools').then(devTools => {\n        devTools.install();\n    });\n}\n<\/code><\/pre>\n\n\n\n<p>En React, cette fonctionnalit\u00e9 peut \u00eatre utilis\u00e9e pour charger des outils de d\u00e9veloppement uniquement lors de l&rsquo;environnement de d\u00e9veloppement, r\u00e9duisant ainsi la charge en production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les BigInt<\/h3>\n\n\n\n<p>BigInt repr\u00e9sente des entiers de taille arbitraire, ce qui est particuli\u00e8rement utile pour les applications qui n\u00e9cessitent des op\u00e9rations math\u00e9matiques sur de grands nombres, comme des calculs financiers ou cryptographiques.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const bigNumber = BigInt(12345678901234567890);\nconsole.log(bigNumber); \/\/ Output: 12345678901234567890n\n\nconst anotherBigNumber = 23456789012345678901234567890n;\nconsole.log(bigNumber + anotherBigNumber); \/\/ Output: 23456789024691357802469135780n\n<\/code><\/pre>\n\n\n\n<p>En React, les BigInt peuvent \u00eatre utilis\u00e9s dans les contextes sp\u00e9cifiques o\u00f9 des calculs pr\u00e9cis et sans perte sont n\u00e9cessaires, notamment dans les biblioth\u00e8ques financi\u00e8res ou analytiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>nouveaut\u00e9s JavaScript React<\/strong> offrent des outils puissants pour am\u00e9liorer vos projets <strong>React<\/strong>. De l&rsquo;utilisation des fonctions asynchrones \u00e0 l&rsquo;int\u00e9gration des hooks, en passant par les modules ES6 et BigInt, chaque fonctionnalit\u00e9 apporte une valeur ajout\u00e9e qui peut transformer significativement vos applications. Continuez \u00e0 explorer et \u00e0 apprendre ces fonctionnalit\u00e9s pour rester \u00e0 la pointe de la technologie et maximiser l&rsquo;efficacit\u00e9 de vos projets. Pour des tutoriels d\u00e9taill\u00e9s et des cours approfondis, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/nouveaut%C3%A9s-javascript-react\/150\">cours sur les nouveaut\u00e9s JavaScript pour React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-javascript\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript 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","protected":false},"excerpt":{"rendered":"<p>Nouveaut\u00e9s JavaScript React : Ce qu&rsquo;il Faut Savoir pour React est un sujet captivant et crucial pour les d\u00e9veloppeurs React. Les technologies \u00e9voluent rapidement, et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5892","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\/5892","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=5892"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5892\/revisions"}],"predecessor-version":[{"id":5893,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5892\/revisions\/5893"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3237"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}