{"id":5938,"date":"2024-09-17T09:24:49","date_gmt":"2024-09-17T09:24:49","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/quand-mettre-parentheses-react-guide\/"},"modified":"2024-09-17T09:24:54","modified_gmt":"2024-09-17T09:24:54","slug":"quand-mettre-parentheses-react-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/quand-mettre-parentheses-react-guide\/","title":{"rendered":"3.14 Quand Mettre des Parenth\u00e8ses en React : Guide"},"content":{"rendered":"\n<p><strong>Quand Mettre des Parenth\u00e8ses en React<\/strong> : Un guide pour comprendre l&rsquo;importance des parenth\u00e8ses dans la syntaxe JSX et JavaScript en React. Apprenons comment les utiliser efficacement gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Quand Mettre des Parenth\u00e8ses 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\/706058621?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>En React, les parenth\u00e8ses jouent un r\u00f4le crucial dans la structuration du code JSX et JavaScript. Elles aident \u00e0 assurer la lisibilit\u00e9, la clart\u00e9 et la pr\u00e9cision du code. Nous verrons comment et quand les utiliser efficacement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Parenth\u00e8ses en JSX<\/h3>\n\n\n\n<p>Tout d&rsquo;abord, les parenth\u00e8ses sont souvent utilis\u00e9es en JSX pour retourner des \u00e9l\u00e9ments multi-lignes de mani\u00e8re propre et structur\u00e9e. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function App() {\n  return (\n    <div>\n      <h1>Bonjour, monde!<\/h1>\n      <p>Bienvenue dans l'univers de React.<\/p>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>Comme on peut le voir, utiliser des parenth\u00e8ses pour entourer le JSX permet de maintenir une organisation claire et lisible pour les \u00e9l\u00e9ments imbriqu\u00e9s. Si vous vous int\u00e9ressez \u00e0 la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\/\">introduction et aux avantages de React<\/a>, ce principe de structuration deviendra une habitude essentielle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Appels de Fonctions et Parenth\u00e8ses<\/h3>\n\n\n\n<p>En JavaScript, inclure des parenth\u00e8ses indique un appel \u00e0 une fonction. En React, cela est essentiel pour l&rsquo;import de composants ou la mise en \u0153uvre de hooks :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction Compteur() {\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)}>Cliquez-moi<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u00c0 noter que les hooks comme <code>useState()<\/code> sont indispensables pour g\u00e9rer l&rsquo;\u00e9tat dans les composants fonctionnels. Pour en savoir plus sur la diff\u00e9rence entre les composants par <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\/\">classe et fonction<\/a> en React, poursuivez votre lecture sur notre article d\u00e9di\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conditionnels et Parenth\u00e8ses<\/h3>\n\n\n\n<p>Les parenth\u00e8ses sont aussi utilis\u00e9es pour les conditionnels, soit dans les expressions ternaires, soit avec les op\u00e9rateurs logiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function App() {\n  const isLoggedIn = true;\n  \n  return (\n    <div>\n      {isLoggedIn ? <p>Bienvenue!<\/p> : <p>Connectez-vous, s'il vous pla\u00eet.<\/p>}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>Un autre exemple utilisant les op\u00e9rateurs logiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function App() {\n  const messages = [\"Salut!\", \"Vous avez de nouveaux messages.\"];\n\n  return (\n    <div>\n      {messages.length > 0 && <p>{messages.length} nouveaux messages.<\/p>}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>Pour approfondir la compr\u00e9hension des conditionnels en React, vous pouvez examiner les <a href=\"https:\/\/wikiform.fr\/codespace\/conditions-ternaires-afficher-contenu-react\/\">conditions ternaires<\/a> et d&rsquo;autres strat\u00e9gies dans notre guide complet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Au-del\u00e0 des Parenth\u00e8ses : Structurer le Code Complexe<\/h3>\n\n\n\n<p>Pour les cas plus complexes, structurer du code en React n\u00e9cessite des parenth\u00e8ses pour organiser des retours de fonctions, des conditions imbriqu\u00e9es et des fragments de code :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function ComplexComponent({ user }) {\n  if (!user) {\n    return <div>Chargement...<\/div>;\n  }\n\n  return (\n    <div>\n      {user.isLoggedIn ? (\n        <div>\n          <h1>Bienvenue, {user.name}!<\/h1>\n          <p>Vous avez {user.notifications.length} nouvelles notifications.<\/p>\n        <\/div>\n      ) : (\n        <div>\n          <h1>Connectez-vous<\/h1>\n          <button>Connexion<\/button>\n        <\/div>\n      )}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>Si vous souhaitez approfondir la structure et la gestion des composants React, notre guide sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-react-fragments-utiliser\/\">utilisation des fragments<\/a> pourrait \u00eatre tr\u00e8s utile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctions Fl\u00e9ch\u00e9es et Parenth\u00e8ses<\/h3>\n\n\n\n<p>Les fonctions fl\u00e9ch\u00e9es utilisent souvent des parenth\u00e8ses pour les arguments et pour retourner des objets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const ajouter = (a, b) => a + b;\n\nconst creerPersonne = (nom, age) => ({\n  nom,\n  age\n});\n<\/code><\/pre>\n\n\n### Fonctions Fl\u00e9ch\u00e9es et Rendement\n\nDans le cadre du d\u00e9veloppement React, les fonctions fl\u00e9ch\u00e9es sont \u00e9galement tr\u00e8s utiles pour g\u00e9rer les \u00e9v\u00e9nements et les \u00e9tats. Elles permettent de rendre le code plus concis et plus lisible. Par exemple :\n\n\u00ab\u00a0`javascript\nconst handleClick = () => {\n  console.log(&lsquo;Bouton cliqu\u00e9&rsquo;);\n};\n  \n<button onClick={handleClick}>Cliquez-moi<\/button>\n\u00ab\u00a0`\n\nIci, la fonction fl\u00e9ch\u00e9e `handleClick` est utilis\u00e9e comme gestionnaire d&rsquo;\u00e9v\u00e9nements pour le clic d&rsquo;un bouton. Cela permet de d\u00e9finir une action sp\u00e9cifique lorsque l&rsquo;utilisateur interagit avec l&rsquo;\u00e9l\u00e9ment.\n\nPour en savoir davantage sur la mani\u00e8re d&rsquo;utiliser les fonctions fl\u00e9ch\u00e9es en JavaScript avec React, consultez notre article complet <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\/\">ici<\/a>.\n\n### Parenth\u00e8ses et Hooks Avanc\u00e9s\n\nLes hooks sont une fonctionnalit\u00e9 puissante de React qui permettent de g\u00e9rer l&rsquo;\u00e9tat et les effets dans les composants fonctionnels. Par exemple, le hook `useEffect` est souvent utilis\u00e9 pour effectuer des actions \u00e0 des moments sp\u00e9cifiques du cycle de vie d&rsquo;un composant :\n\n\u00ab\u00a0`javascript\nimport React, { useEffect, useState } from &lsquo;react&rsquo;;\n\nfunction Timer() {\n  const [seconds, setSeconds] = useState(0);\n  \n  useEffect(() => {\n    const intervalId = setInterval(() => setSeconds(seconds + 1), 1000);\n    return () => clearInterval(intervalId);\n  }, [seconds]);\n  \n  return <div>Temps \u00e9coul\u00e9 : {seconds}s<\/div>;\n}\n\u00ab\u00a0`\n\nDans cet exemple, nous utilisons des parenth\u00e8ses pour encapsuler l&rsquo;\u00e9tat initial et mettre \u00e0 jour le compteur de secondes \u00e0 chaque intervalle. Le hook `useEffect` g\u00e8re l&rsquo;effet secondaire du composant, en ex\u00e9cutant un intervalle de mise \u00e0 jour toutes les secondes.\n\nPour une exploration approfondie des hooks, vous pouvez visiter notre ressource compl\u00e8te sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\/\">les hooks React<\/a>.\n\n### Parenth\u00e8ses dans le Context API\n\nLa Context API de React est une autre fonctionnalit\u00e9 avanc\u00e9e qui utilise les parenth\u00e8ses pour g\u00e9rer des donn\u00e9es globales dans une application. Voici un exemple d&rsquo;utilisation de la Context API :\n\n\u00ab\u00a0`javascript\nimport React, { createContext, useContext, useState } from &lsquo;react&rsquo;;\n\nconst UserContext = createContext();\n\nfunction UserProvider({ children }) {\n  const [user, setUser] = useState({ name: &lsquo;John Doe&rsquo;, email: &lsquo;john.doe@example.com&rsquo; });\n  \n  return (\n    <UserContext.Provider value={user}>\n      {children}\n    <\/UserContext.Provider>\n  );\n}\n\nfunction UserProfile() {\n  const user = useContext(UserContext);\n  \n  return (\n    <div>\n      <h1>{user.name}<\/h1>\n      <p>{user.email}<\/p>\n    <\/div>\n  );\n}\n\nexport default function App() {\n  return (\n    <UserProvider>\n      <UserProfile \/>\n    <\/UserProvider>\n  );\n}\n\u00ab\u00a0`\n\nDans cet exemple, les parenth\u00e8ses sont utilis\u00e9es pour fournir les donn\u00e9es utilisateur \u00e0 tous les composants enfants via le contexte. La Context API offre une mani\u00e8re efficace de passer des donn\u00e9es globales sans avoir besoin de prop drilling.\n\n### Structuration Complexe avec des Fragments\n\nLes fragments en React permettent de regrouper des listes d&rsquo;enfants sans ajouter de n\u0153ud suppl\u00e9mentaire au DOM. Cela peut \u00eatre particuli\u00e8rement utile pour des structures de layout complexes :\n\n\u00ab\u00a0`javascript\nimport React from &lsquo;react&rsquo;;\n\nfunction ComplexLayout() {\n  return (\n    <>\n      <header>Header Section<\/header>\n      <main>Main Content<\/main>\n      <footer>Footer Section<\/footer>\n    <\/>\n  );\n}\n\u00ab\u00a0`\n\nDans cet exemple, les fragments `<>&#8230;<\/>` permettent de regrouper toutes les sections sans wrapper suppl\u00e9mentaire.\n\n### Conclusion\n\nEn comprenant quand et comment utiliser les parenth\u00e8ses en React, vous pouvez \u00e9crire du code plus propre, plus lisible et plus maintenable. Continuez \u00e0 explorer et pratiquer pour ma\u00eetriser cette comp\u00e9tence essentielle. Pour plus de guides et tutoriels sur React, n&rsquo;h\u00e9sitez pas \u00e0 consulter nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\/\">cr\u00e9er votre premi\u00e8re application React<\/a>, <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\/\">comprendre le cycle de vie des applications React<\/a>, et <a href=\"https:\/\/wikiform.fr\/codespace\/transformer-texte-en-html-markedjs-react\/\">transformer du texte en HTML avec MarkedJS et React<\/a>.\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-react\/144\" 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<p>Par ailleurs, si vous souhaitez en savoir plus sur des concepts avanc\u00e9s de React et Redux, ne manquez pas notre formation exclusive avec une offre sp\u00e9ciale en cliquant sur l&rsquo;image ci-dessous :<\/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 src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify","protected":false},"excerpt":{"rendered":"<p>Quand Mettre des Parenth\u00e8ses en React : Un guide pour comprendre l&rsquo;importance des parenth\u00e8ses dans la syntaxe JSX et JavaScript en React. Apprenons comment les&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5938","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\/5938","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=5938"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5938\/revisions"}],"predecessor-version":[{"id":5939,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5938\/revisions\/5939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3254"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}