{"id":5910,"date":"2024-09-08T08:13:48","date_gmt":"2024-09-08T08:13:48","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\/"},"modified":"2024-09-08T08:13:52","modified_gmt":"2024-09-08T08:13:52","slug":"prets-a-decouvrir-react-guide-introduction","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/prets-a-decouvrir-react-guide-introduction\/","title":{"rendered":"2.10 Pr\u00eats \u00e0 D\u00e9couvrir React ? Guide d&rsquo;Introduction"},"content":{"rendered":"\n<p><strong>Pr\u00eats \u00e0 D\u00e9couvrir React ?<\/strong> React est une biblioth\u00e8que JavaScript open-source con\u00e7ue pour cr\u00e9er des interfaces utilisateur dynamiques et interactives. Gr\u00e2ce \u00e0 sa structure modulaire et r\u00e9active, React facilite le d\u00e9veloppement de composants r\u00e9utilisables et la gestion de l&rsquo;\u00e9tat de l&rsquo;application. Allons explorer ses fonctionnalit\u00e9s cl\u00e9s et comment l&rsquo;impl\u00e9menter dans vos projets \u00e0 l&rsquo;aide de ce guide d&rsquo;introduction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <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\/706051194?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>React repose principalement sur les concepts de composants et de l&rsquo;\u00e9tat. Un composant en React est une fonction ou une classe qui renvoie un \u00e9l\u00e9ment React, d\u00e9crivant une partie de l&rsquo;interface utilisateur. Comprendre les bases des composants et de l&rsquo;\u00e9tat est fondamental pour ma\u00eetriser cette biblioth\u00e8que. Pour en savoir plus, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce que React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er Votre Premier Composant<\/h3>\n\n\n\n<p>Un composant en React peut \u00eatre aussi simple qu&rsquo;une fonction qui renvoie du JSX, une extension syntaxique pour \u00e9crire du HTML avec JavaScript. Voici comment cr\u00e9er un composant de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\n\nfunction Welcome(props) {\n  return <h1>Bonjour, {props.name}<\/h1>;\n}\n\nReactDOM.render(\n  <Welcome name=\"John\" \/>,\n  document.getElementById('root')\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser l&rsquo;\u00c9tat et les Effets<\/h3>\n\n\n\n<p>Pour g\u00e9rer l&rsquo;\u00e9tat dans les composants fonctionnels, React offre le hook <code>useState<\/code>. De m\u00eame, <code>useEffect<\/code> est utilis\u00e9 pour effectuer des effets de c\u00f4t\u00e9, comme les requ\u00eates API ou la manipulation de DOM. Pour en savoir plus, lisez notre guide complet sur la <a href=\"https:\/\/wikiform.fr\/codespace\/exercices-s-ameliorer-react-guide\" target=\"_blank\" rel=\"noopener\">manipulation des hooks en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction Clock() {\n  const [date, setDate] = useState(new Date());\n\n  useEffect(() => {\n    const timerID = setInterval(() => tick(), 1000);\n    return () => clearInterval(timerID);\n  }, []);\n\n  const tick = () => {\n    setDate(new Date());\n  };\n\n  return (\n    <div>\n      <h2>Il est {date.toLocaleTimeString()}.<\/h2>\n    <\/div>\n  );\n}\n\nexport default Clock;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les \u00c9v\u00e9nements<\/h3>\n\n\n\n<p>La gestion des \u00e9v\u00e9nements en React est similaire \u00e0 la manipulation des \u00e9v\u00e9nements en DOM native, mais avec une syntaxe l\u00e9g\u00e8rement diff\u00e9rente. Voici un exemple de gestion d\u2019un \u00e9v\u00e9nement de clic :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction ActionButton() {\n  const handleClick = () => {\n    alert('Le bouton a \u00e9t\u00e9 cliqu\u00e9!');\n  };\n\n  return (\n    <button onClick={handleClick}>\n      Cliquez ici\n    <\/button>\n  );\n}\n\nexport default ActionButton;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de Redux pour G\u00e9rer l&rsquo;\u00c9tat<\/h3>\n\n\n\n<p>Pour les applications plus complexes, Redux est un conteneur d&rsquo;\u00e9tat pr\u00e9visible pour les applications JavaScript, aidant \u00e0 g\u00e9rer l&rsquo;\u00e9tat de mani\u00e8re centralis\u00e9e. D\u00e9couvrez notre guide complet sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">utilisation de Redux<\/a> avec React.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import { createStore } from 'redux';\n\nconst initialState = { count: 0 };\n\nfunction counterReducer(state = initialState, 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      return state;\n  }\n}\n\nconst store = createStore(counterReducer);\n\nstore.subscribe(() => console.log(store.getState()));\n\nstore.dispatch({ type: 'INCREMENT' });\nstore.dispatch({ type: 'INCREMENT' });\nstore.dispatch({ type: 'DECREMENT' });\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;une Application avec Create React App<\/h3>\n\n\n\n<p>Create React App est un outil officiel pour initialiser un nouveau projet React avec une configuration par d\u00e9faut. Voici comment l&rsquo;installer et l\u2019utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code># Installer Create React App globalement\nnpm install -g create-react-app\n\n# Cr\u00e9er une nouvelle application React\ncreate-react-app my-first-react-app\n\n# Navigate to the app folder\ncd my-first-react-app\n\n# D\u00e9marrer l'application\nnpm start\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9ploiement de Votre Application React<\/h3>\n\n\n\n<p>Une fois que votre application React est pr\u00eate, vous pouvez la d\u00e9ployer sur une plateforme d&rsquo;h\u00e9bergement. Voici comment d\u00e9ployer sur Netlify :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-shell\"><code># Build your app for production\nnpm run build\n\n# Login to Netlify\nnetlify login\n\n# Deploy your built app\nnetlify deploy -d build\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>React est une biblioth\u00e8que puissante et flexible pour cr\u00e9er des interfaces utilisateur modernes et dynamiques. En ma\u00eetrisant les concepts de base des composants, de l&rsquo;\u00e9tat et des hooks, vous pouvez d\u00e9velopper des applications web performantes et maintenables. Pour approfondir vos comp\u00e9tences, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\">cours complet sur React et Redux<\/a> et commencez \u00e0 b\u00e2tir des applications robustes d\u00e8s aujourd&rsquo;hui.<\/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 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 React Redux Offre\" title=\"\"><\/a>\n\n\n<p>Pour en savoir plus sur les fonctionnalit\u00e9s avanc\u00e9es de React et les meilleures pratiques, explorez nos autres articles d\u00e9taill\u00e9s comme <a href=\"https:\/\/wikiform.fr\/codespace\/quand-mettre-parentheses-react-guide\" target=\"_blank\" rel=\"noopener\">quand mettre des parenth\u00e8ses en React<\/a> ou <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\" target=\"_blank\" rel=\"noopener\">comment ajouter un nouveau composant en React<\/a>. D\u00e9couvrez \u00e9galement les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">extensions indispensables pour d\u00e9velopper avec React<\/a> ainsi que les <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\" target=\"_blank\" rel=\"noopener\">meilleurs logiciels pour d\u00e9velopper en React<\/a> pour tirer le meilleur parti de cette biblioth\u00e8que JavaScript moderne.<\/p>\n\n<p>N&rsquo;oubliez pas de consulter nos ressources externes pour un approfondissement suppl\u00e9mentaire : <a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"dofollow noopener\">Documentation officielle de React<\/a>, <a href=\"https:\/\/redux.js.org\/introduction\/getting-started\" target=\"_blank\" rel=\"dofollow noopener\">Guide de d\u00e9marrage de Redux<\/a>, et <a href=\"https:\/\/www.netlify.com\/\" target=\"_blank\" rel=\"dofollow noopener\">Netlify pour le d\u00e9ploiement<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Pr\u00eats \u00e0 D\u00e9couvrir React ? React est une biblioth\u00e8que JavaScript open-source con\u00e7ue pour cr\u00e9er des interfaces utilisateur dynamiques et interactives. Gr\u00e2ce \u00e0 sa structure modulaire&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3247,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5910","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\/5910","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=5910"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5910\/revisions"}],"predecessor-version":[{"id":5911,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5910\/revisions\/5911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3247"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}