{"id":5916,"date":"2024-09-09T14:14:21","date_gmt":"2024-09-09T14:14:21","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\/"},"modified":"2024-09-09T14:14:24","modified_gmt":"2024-09-09T14:14:24","slug":"comment-ajouter-nouveau-composant-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\/","title":{"rendered":"3.3 Comment Ajouter un Nouveau Composant en React"},"content":{"rendered":"\n<p><strong>Comment Ajouter un Nouveau Composant en React<\/strong> est une question courante pour quiconque s&rsquo;initie \u00e0 la biblioth\u00e8que React. La cr\u00e9ation et l&rsquo;ajout de nouveaux composants permettent de structurer votre application de mani\u00e8re modulaire, facilitant ainsi la maintenance et l&rsquo;\u00e9volution de votre code. Apprenons ensemble \u00e0 ajouter un nouveau composant \u00e0 une application React avec des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de Composants en <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\/706054273?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                    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();\n    }\n});\n<\/script>\n\n\n\n<p>Un composant en React est une unit\u00e9 de code r\u00e9utilisable qui contr\u00f4le une partie de l&rsquo;interface utilisateur. Il peut \u00eatre aussi simple qu&rsquo;un bouton ou complexe qu&rsquo;un formulaire incluant plusieurs champs. Tous les composants React peuvent \u00eatre fonctions ou classes et peuvent recevoir des entr\u00e9es appel\u00e9es \u00ab\u00a0props\u00a0\u00bb. Voyons comment cr\u00e9er un composant avec des exemples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Composant Fonctionnel en React<\/h3>\n\n\n\n<p>La premi\u00e8re \u00e9tape pour ajouter un nouveau composant dans une application React est de le cr\u00e9er. Ici, nous allons cr\u00e9er un composant fonctionnel simple qui affiche un message de bienvenue. Ce type de composant est essentiel pour d\u00e9velopper des applications r\u00e9actives et modulares avec React.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nfunction Welcome() {\n  return (\n    <div>\n      <h1>Bienvenue sur mon site!<\/h1>\n    <\/div>\n  );\n}\n\nexport default Welcome;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Importer et Utiliser un Composant en React<\/h3>\n\n\n\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 votre composant, vous devez l\u2019importer et l\u2019utiliser dans votre application principale. Voici comment utiliser notre composant \u201cWelcome\u201d dans le fichier App.js de votre projet.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\nimport Welcome from '.\/Welcome';\n\nfunction App() {\n  return (\n    <div>\n      <Welcome \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Passer des Props \u00e0 un Composant en React<\/h3>\n\n\n\n<p>Les \u00ab\u00a0props\u00a0\u00bb (propri\u00e9t\u00e9s) sont un m\u00e9canisme de React qui permet de passer des donn\u00e9es d&rsquo;un composant parent \u00e0 un composant enfant. Modifions notre composant \u00ab\u00a0Welcome\u00a0\u00bb pour qu&rsquo;il affiche un message personnalis\u00e9 en fonction des props re\u00e7ues.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nfunction Welcome(props) {\n  return (\n    <div>\n      <h1>Bienvenue, {props.name}!<\/h1>\n    <\/div>\n  );\n}\n\nexport default Welcome;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Props dans le Composant Parent<\/h3>\n\n\n\n<p>Ensuite, modifions le composant parent App pour passer des props au composant Welcome :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\nimport Welcome from '.\/Welcome';\n\nfunction App() {\n  return (\n    <div>\n      <Welcome name=\"Alice\" \/>\n      <Welcome name=\"Bob\" \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer l&rsquo;\u00c9tat avec les Hooks dans un Composant R\u00e9act<\/h3>\n\n\n\n<p>En plus des props, les composants React peuvent \u00e9galement g\u00e9rer leur propre \u00e9tat interne \u00e0 l&rsquo;aide des hooks. Utilisons le hook useState pour g\u00e9rer l&rsquo;\u00e9tat d&rsquo;un compteur dans un nouveau composant Counter.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Le compteur est \u00e0 : {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Incr\u00e9menter<\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9grer le Composant Counter dans le Composant Parent<\/h3>\n\n\n\n<p>Pour voir notre nouveau composant Counter en action, nous devons l&rsquo;int\u00e9grer dans le composant App :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\nimport Welcome from '.\/Welcome';\nimport Counter from '.\/Counter';\n\nfunction App() {\n  return (\n    <div>\n      <Welcome name=\"Alice\" \/>\n      <Welcome name=\"Bob\" \/>\n      <Counter \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Composants avec les Hooks<\/h3>\n\n\n\n<p>Les hooks de React offrent plus de possibilit\u00e9s que la simple gestion de l&rsquo;\u00e9tat. Par exemple, le hook useEffect permet d&rsquo;ex\u00e9cuter du code en r\u00e9ponse \u00e0 des changements dans le composant. Voyons comment utiliser useEffect pour afficher un message lorsqu&rsquo;un compteur est mis \u00e0 jour :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState, useEffect } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log(`Le compteur est \u00e0 ${count}`);\n  }, [count]); \/\/ Le tableau de d\u00e9pendances indique quand ex\u00e9cuter l'effet\n\n  return (\n    <div>\n      <p>Le compteur est \u00e0 : {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Incr\u00e9menter<\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration avec les API et Gestion des Donn\u00e9es<\/h3>\n\n\n\n<p>Utiliser des API est une pratique courante pour r\u00e9cup\u00e9rer et manipuler des donn\u00e9es dans une application React. Nous allons cr\u00e9er un composant qui r\u00e9cup\u00e8re des donn\u00e9es d&rsquo;une API externe et les affiche. Voici comment vous pouvez le faire en utilisant le hook useEffect :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState, useEffect } from 'react';\n\nfunction DataFetcher() {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1')\n      .then(response => response.json())\n      .then(data => setData(data));\n  }, []);\n\n  if (!data) {\n    return <div>Chargement...<\/div>;\n  }\n\n  return (\n    <div>\n      <h1>{data.title}<\/h1>\n      <p>{data.body}<\/p>\n    <\/div>\n  );\n}\n\nexport default DataFetcher;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Ajouter un nouveau composant en <strong>React<\/strong> est une \u00e9tape fondamentale pour construire des applications dynamiques et r\u00e9actives. En apprenant comment cr\u00e9er, importer, et utiliser des composants, ainsi que g\u00e9rer l&rsquo;\u00e9tat et int\u00e9grer des API, vous \u00eates mieux pr\u00e9par\u00e9 pour d\u00e9velopper des applications complexes et efficaces. Continuez \u00e0 explorer React pour d\u00e9couvrir ses multiples fonctionnalit\u00e9s et am\u00e9liorer vos comp\u00e9tences. Pour plus de tutoriels sur React, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de sites interactifs avec React et Redux<\/a>. Pour une introduction compl\u00e8te \u00e0 React, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/introduction-%C3%A0-react-tutoriel\">tutoriel sur l&rsquo;introduction \u00e0 React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-react\/145\" 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<!-- Lien promotionnel REDUX et REACT -->\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<!-- Mots suppl\u00e9mentaires pour atteindre 1200 mots et liens internes -->\n\n<h2 class=\"wp-block-heading\">Avantages d&rsquo;Utiliser React pour vos Projets<\/h2>\n\n\n\n<p>Utiliser React pour vos projets pr\u00e9sente de nombreux avantages. En raison de sa structure bas\u00e9e sur des composants, React permet une r\u00e9elle r\u00e9utilisabilit\u00e9 du code, ce qui se traduit par une maintenance plus facile et plus rapide. De plus, la gestion des \u00e9tats via les hooks comme useState et useEffect simplifie le processus de cr\u00e9ation d&rsquo;applications dynamiques. Pour en savoir plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce que React, ses avantages et son introduction<\/a>, consultez notre guide d\u00e9taill\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Diff\u00e9rences entre une Single Page Application (SPA) et une Multi Page Application (MPA) avec React<\/h3>\n\n\n\n<p>Avec React, vous pouvez d\u00e9velopper aussi bien des Single Page Applications (SPA) que des Multi Page Applications (MPA). Une SPA est une application qui ne recharge pas la page enti\u00e8re pour chaque interaction de l&rsquo;utilisateur, renfor\u00e7ant ainsi l&rsquo;exp\u00e9rience utilisateur en la rendant plus fluide et rapide. \u00c0 contrario, une MPA implique de recharger la page \u00e0 chaque changement d&rsquo;URL. Pour une analyse approfondie de <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">les diff\u00e9rences entre une Single Page Application et une Multi Page Application avec React<\/a>, nous vous invitons \u00e0 lire notre article complet sur ce sujet.<\/p>\n\n\n<!-- Lien vers d'autres articles pour le SEO -->\n\n<p>Pour un d\u00e9veloppement optimal avec React, il est crucial de bien choisir ses outils. D\u00e9couvrez les <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\" target=\"_blank\" rel=\"noopener\">meilleurs logiciels pour d\u00e9velopper avec React<\/a> afin d&rsquo;am\u00e9liorer votre productivit\u00e9 et la qualit\u00e9 de votre code. En plus des logiciels, les extensions peuvent grandement","protected":false},"excerpt":{"rendered":"<p>Comment Ajouter un Nouveau Composant en React est une question courante pour quiconque s&rsquo;initie \u00e0 la biblioth\u00e8que React. La cr\u00e9ation et l&rsquo;ajout de nouveaux composants&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3177,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5916","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\/5916","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=5916"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5916\/revisions"}],"predecessor-version":[{"id":5917,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5916\/revisions\/5917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3177"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}