{"id":5884,"date":"2024-09-02T22:14:01","date_gmt":"2024-09-02T22:14:01","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\/"},"modified":"2024-09-02T22:14:07","modified_gmt":"2024-09-02T22:14:07","slug":"qu-est-ce-que-react-introduction-avantages","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\/","title":{"rendered":"1.1 Qu&rsquo;est-ce que React : Introduction et Avantages"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Qu&rsquo;est-ce que React : Introduction et Avantages<\/strong> est un point de d\u00e9part essentiel pour toute personne int\u00e9ress\u00e9e par le d\u00e9veloppement web moderne. Comprendre ce qu&rsquo;est React et les avantages qu&rsquo;il offre peut transformer la mani\u00e8re dont vous d\u00e9veloppez des applications front-end, en rendant votre travail plus efficace et vos interfaces utilisateur plus r\u00e9actives. Apprenons tout cela ensemble dans ce tutoriel d\u00e9taill\u00e9.<\/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\/706046305?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 est une biblioth\u00e8que JavaScript libre d\u00e9velopp\u00e9e par Facebook depuis 2013. Elle est principalement destin\u00e9e \u00e0 la cr\u00e9ation d&rsquo;interfaces utilisateur. Gr\u00e2ce \u00e0 sa capacit\u00e9 de gestion facile du DOM gr\u00e2ce \u00e0 son rendu virtuel, React est devenue une des biblioth\u00e8ques favorites des d\u00e9veloppeurs pour construire des applications web r\u00e9actives et performantes. Si vous souhaitez en savoir plus sur les <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">bases de React<\/a>, ce tutoriel est pour vous.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi Utiliser React ?<\/h3>\n\n\n\n<p>React offre de nombreux avantages qui en font un outil pr\u00e9cieux pour les d\u00e9veloppeurs :<\/p>\n<ul>\n  <li><strong>Composants R\u00e9utilisables :<\/strong> React encourage l&rsquo;utilisation de composants r\u00e9utilisables, facilitant la maintenance et la mise \u00e0 jour de votre code.<\/li>\n  <li><strong>Rendu Virtuel :<\/strong> Le DOM virtuel de React permet de minimiser les mises \u00e0 jour inutiles et maximise les performances des applications.<\/li>\n  <li><strong>Unidirectional Data Flow :<\/strong> Les donn\u00e9es circulent dans une seule direction, ce qui simplifie le d\u00e9bogage et le filtre des erreurs. Pour plus de d\u00e9tails, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" target=\"_blank\" rel=\"noopener\">ce guide sur les props et state en React<\/a>.<\/li>\n  <li><strong>Support Large de la Communaut\u00e9 :<\/strong> Avec une communaut\u00e9 de d\u00e9veloppeurs active et des ressources abondantes, il est facile de trouver de l&rsquo;aide et partager des connaissances.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Exemple de composant simple en React\nimport React from 'react';\n\nfunction Welcome(props) {\n  return <h1>Bonjour, {props.name}!<\/h1>;\n}\n\nexport default Welcome;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation de Composants en React<\/h3>\n\n\n\n<p>Un des concepts cl\u00e9s de React est de diviser l&rsquo;interface utilisateur en composants. Chaque composant repr\u00e9sente une partie isol\u00e9e et r\u00e9utilisable de l&rsquo;interface, ce qui simplifie le d\u00e9veloppement et la gestion du code.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nclass Welcome extends React.Component {\n  render() {\n    return <h1>Bonjour, {this.props.name}!<\/h1>;\n  }\n}\n\nexport default Welcome;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Hooks pour G\u00e9rer l&rsquo;\u00c9tat<\/h3>\n\n\n\n<p>Les Hooks sont une fonctionnalit\u00e9 puissante introduite dans React 16.8. Ils permettent d&rsquo;utiliser l&rsquo;\u00e9tat et d&rsquo;autres fonctionnalit\u00e9s de React sans \u00e9crire de classes. Pour en savoir plus sur les Hooks, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">guide d&rsquo;introduction aux React Hooks<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\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)}>\n        Cliquez ici\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mise \u00e0 jour Dynamique des Interfaces Utilisateurs<\/h3>\n\n\n\n<p>Avec React, vous pouvez rendre votre interface dynamique en fonction des changements d&rsquo;\u00e9tat ou des propri\u00e9t\u00e9s pass\u00e9es aux composants. Gr\u00e2ce au DOM virtuel, React garantit que seules les parties de l&rsquo;interface qui n\u00e9cessitent une mise \u00e0 jour sont effectivement mises \u00e0 jour, ce qui augmente les performances de l&rsquo;application.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction Timer() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setCount(count + 1);\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [count]);\n\n  return <p>Seconde \u00e9coul\u00e9e : {count}<\/p>;\n}\n\nexport default Timer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Validation des Entr\u00e9es Utilisateur en Temps R\u00e9el avec React<\/h3>\n\n\n\n<p>React permet de valider les entr\u00e9es utilisateur en temps r\u00e9el, assurant ainsi une exp\u00e9rience utilisateur fluide et interactive. Voici un exemple de formulaire simple avec validation des entr\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction AgeForm() {\n  const [age, setAge] = useState('');\n  const [error, setError] = useState('');\n\n  const validateAge = (value) => {\n    const age = parseInt(value);\n    if (isNaN(age) || age < 0) {\n      setError(\"L'\u00e2ge doit \u00eatre un nombre positif.\");\n    } else {\n      setError(\"\");\n    }\n    setAge(value);\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={age}\n        onChange={(e) => validateAge(e.target.value)}\n        placeholder=\"\u00c2ge\"\n      \/>\n      <p style={{color: 'red'}}>{error}<\/p>\n    <\/div>\n  );\n}\n\nexport default AgeForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de React<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension de React, voici quelques exemples avanc\u00e9s qui montrent comment exploiter toute la puissance de la biblioth\u00e8que. Un projet int\u00e9ressant \u00e0 consid\u00e9rer serait le <a href=\"https:\/\/wikiform.fr\/codespace\/projet-markdown-react-qu-allons-nous-faire\" target=\"_blank\" rel=\"noopener\">Projet Markdown<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion d&rsquo;\u00c9tats Compos\u00e9s et Complexes<\/h4>\n\n\n\n<p>Un aspect souvent rencontr\u00e9 dans les applications r\u00e9elles est la gestion des \u00e9tats complexes. React propose des solutions performantes pour cela \u00e0 l&rsquo;aide du hook <code>useReducer<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\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\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <div>\n      <p>Compteur : {state.count}<\/p>\n      <button onClick={() => dispatch({ type: 'increment' })}>+<\/button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-<\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Synchronisation de Donn\u00e9es Entre Composants<\/h4>\n\n\n\n<p>Interagir entre plusieurs composants de mani\u00e8re fluide est une force de React. Les props et context API sont des outils cl\u00e9s pour cette synchronisation. Pour en savoir plus sur le Context API, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\" target=\"_blank\" rel=\"noopener\">comment utiliser la Context API en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { createContext, useState } from 'react';\n\nconst UserContext = createContext();\n\nfunction Parent() {\n  const [user, setUser] = useState('John Doe');\n\n  return (\n    <UserContext.Provider value={user}>\n      <Child \/>\n    <\/UserContext.Provider>\n  );\n}\n\nfunction Child() {\n  const user = React.useContext(UserContext);\n\n  return (\n    <div>\n      <p>Utilisateur: {user}<\/p>\n    <\/div>\n  );\n}\n\nexport default Parent;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u00c9tendre les Composants avec les Higher-Order Components<\/h4>\n\n\n\n<p>Les Higher-Order Components (HOCs) sont une mani\u00e8re avanc\u00e9e de r\u00e9utiliser la logique entre les composants. Ils fournissent une solution \u00e9l\u00e9gante pour l&rsquo;abstraction de la logique commune. Pour un tutoriel d\u00e9taill\u00e9, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-hoc-react-explications\" target=\"_blank\" rel=\"noopener\">explication sur les HOCs en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React from 'react';\n\nfunction withLoading(Component) {\n  return function WithLoadingComponent({ isLoading, ...props }) {\n    if (!isLoading) return <Component {...props} \/>;\n    return <p>Chargement...<\/p>;\n  };\n}\n\nfunction DataComponent({ data }) {\n  return (\n    <div>\n      {data.map(item => (\n        <p key={item.id}>{item.name}<\/p>\n      ))}\n    <\/div>\n  );\n}\n\nconst DataComponentWithLoading = withLoading(DataComponent);\n\nexport default DataComponentWithLoading;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h3>\n\n\n\n<p>Voyons comment utiliser React dans un projet complet. Nous allons cr\u00e9er une application ToDo simple, qui couvre les concepts de base et avanc\u00e9s. Vous pouvez \u00e9galement vous pencher sur le d\u00e9veloppement de <a href=\"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-react-qu-allons-nous-faire\" target=\"_blank\" rel=\"noopener\">projets To-Do List plus avanc\u00e9s<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction TodoApp() {\n  const","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Qu&rsquo;est-ce que React : Introduction et Avantages est un point de d\u00e9part essentiel pour toute personne int\u00e9ress\u00e9e par le d\u00e9veloppement web moderne. Comprendre ce&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3258,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5884","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\/5884","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=5884"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5884\/revisions"}],"predecessor-version":[{"id":5885,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5884\/revisions\/5885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3258"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}