{"id":5900,"date":"2024-09-06T06:14:00","date_gmt":"2024-09-06T06:14:00","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\/"},"modified":"2024-09-06T06:14:04","modified_gmt":"2024-09-06T06:14:04","slug":"utilisation-classes-javascript-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\/","title":{"rendered":"2.5 Utilisation des Classes en JavaScript pour React"},"content":{"rendered":"\n<p><strong>Les Classes en JavaScript pour React<\/strong> sont un aspect fondamental que tout d\u00e9veloppeur React se doit de ma\u00eetriser. Utiliser des <strong>classes en JavaScript<\/strong> permet d&rsquo;organiser votre code de mani\u00e8re plus modulaire et r\u00e9utilisable. D\u00e9couvrons ensemble comment fonctionnent ces classes et comment les impl\u00e9menter dans vos projets React gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Classes en 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\/706050373?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 only if it hasn't been displayed before\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, une classe est utilis\u00e9e pour cr\u00e9er des composants plus robustes et r\u00e9utilisables. Ces classes s&rsquo;\u00e9tendent souvent de <code>React.Component<\/code>, fournissant ainsi des fonctionnalit\u00e9s suppl\u00e9mentaires pour g\u00e9rer l&rsquo;\u00e9tat et les cycles de vie des composants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants Bas\u00e9s sur des Classes en React<\/h3>\n\n\n\n<p>Pour cr\u00e9er un composant bas\u00e9 sur une classe, vous devez \u00e9tendre la classe <code>React.Component<\/code> et impl\u00e9menter une m\u00e9thode <code>render()<\/code> qui renvoie un arbre DOM. Si vous souhaitez approfondir votre connaissance des composants, consultez notre article sur les <a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\" rel=\"noopener\">nouveaux composants React<\/a> pour une approche plus large.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Component } from 'react';\n\nclass Welcome extends 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\">G\u00e9rer l&rsquo;\u00c9tat dans les Composants Bas\u00e9s sur des Classes<\/h3>\n\n\n\n<p>Les composants bas\u00e9s sur des classes peuvent avoir un \u00e9tat local, que vous initialisez dans le constructeur de la classe en utilisant <code>this.state<\/code>. Vous pouvez \u00e9galement utiliser <code>this.setState<\/code> pour modifier l&rsquo;\u00e9tat. Apprenez-en plus sur la diff\u00e9rence entre les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-entre-props-et-state-react\" rel=\"noopener\">props<\/a> et le state pour une meilleure gestion des donn\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Component } from 'react';\n\nclass Clock extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { date: new Date() };\n  }\n\n  componentDidMount() {\n    this.timerID = setInterval(\n      () => this.tick(),\n      1000\n    );\n  }\n\n  componentWillUnmount() {\n    clearInterval(this.timerID);\n  }\n\n  tick() {\n    this.setState({\n      date: new Date()\n    });\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Bonjour, monde !<\/h1>\n        <h2>Il est {this.state.date.toLocaleTimeString()}.<\/h2>\n      <\/div>\n    );\n  }\n}\n\nexport default Clock;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cycle de Vie des Composants en React<\/h3>\n\n\n\n<p>Les composants bas\u00e9s sur des classes en React ont acc\u00e8s \u00e0 plusieurs m\u00e9thodes appel\u00e9es \u00ab\u00a0m\u00e9thodes de cycle de vie\u00a0\u00bb. Ces m\u00e9thodes permettent d&rsquo;ex\u00e9cuter certains codes \u00e0 diff\u00e9rents moments de la vie du composant (ex. lors de la mont\u00e9e initiale, lors d&rsquo;une mise \u00e0 jour, etc.). Si vous vous int\u00e9ressez aux cycles de vie des composants, consultez notre guide d\u00e9taill\u00e9 sur les <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" rel=\"noopener\">cycles de vie des applications React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Component } from 'react';\n\nclass ExampleComponent extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  componentDidMount() {\n    console.log('Component did mount!');\n  }\n\n  shouldComponentUpdate(nextProps, nextState) {\n    \/\/ D\u00e9terminez si le composant doit se mettre \u00e0 jour\n    return true;\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    console.log('Component did update!');\n  }\n\n  componentWillUnmount() {\n    console.log('Component will unmount!');\n  }\n\n  render() {\n    return (\n      <div>\n        <p>Le compteur est \u00e0 : {this.state.count}<\/p>\n        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Incr\u00e9menter<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default ExampleComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Propri\u00e9t\u00e9s en React<\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s (props) sont des param\u00e8tres pass\u00e9s aux composants React et sont principalement utilis\u00e9es pour passer des donn\u00e9es d&rsquo;un parent \u00e0 un enfant. Les propri\u00e9t\u00e9s sont immuables dans le contexte des composants enfants, ce qui signifie que le composant enfant ne peut pas modifier ses propres props. Pour une meilleure compr\u00e9hension des propri\u00e9t\u00e9s, explorez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" rel=\"noopener\">les props en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Component } from 'react';\n\nclass Hello extends Component {\n  render() {\n    return <h1>Bonjour, {this.props.name}<\/h1>;\n  }\n}\n\nexport default Hello;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Passer des Props entre Composants<\/h4>\n\n\n\n<p>Pour comprendre le passage de props, voici un exemple plus complexe o\u00f9 un composant parent passe des donn\u00e9es \u00e0 un composant enfant. Consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/stocke-donnees-avec-state-react\" rel=\"noopener\">stocker des donn\u00e9es avec le state en React<\/a> pour d&rsquo;autres approches sur la gestion des donn\u00e9es.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Hello from '.\/Hello';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <div>\n        <Hello name=\"Alice\" \/>\n        <Hello name=\"Bob\" \/>\n        <Hello name=\"Charlie\" \/>\n      <\/div>\n    );\n  }\n}\n\nReactDOM.render(<App \/>, document.getElementById('root'));\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utilisations Contextuelles Avanc\u00e9es<\/h4>\n\n\n\n<p>Les composants React suscitent une grande flexibilit\u00e9 et permettent des utilisations contextualis\u00e9es pour des besoins avanc\u00e9s comme la gestion de th\u00e8mes multiples, l&rsquo;internationalisation, ou encore le partage de donn\u00e9es global entre plusieurs sections de votre application. Pour un exemple pratique, vous pouvez explorer l&rsquo;article sur <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" rel=\"noopener\">l&rsquo;utilisation des classes en JavaScript pour React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Component } from 'react';\n\nconst ThemeContext = React.createContext('light');\n\nclass ThemeProvider extends Component {\n  state = {\n    theme: 'light'\n  };\n\n  toggleTheme = () => {\n    this.setState(state => ({\n      theme: state.theme === 'light' ? 'dark' : 'light'\n    }));\n  };\n\n  render() {\n    return (\n      <ThemeContext.Provider value={{ theme: this.state.theme, toggleTheme: this.toggleTheme }}>\n        {this.props.children}\n      <\/ThemeContext.Provider>\n    );\n  }\n}\n\nclass ThemedButton extends Component {\n  render() {\n    return (\n      <ThemeContext.Consumer>\n        {({ theme, toggleTheme }) => (\n          <button\n            onClick={toggleTheme}\n            style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}\n          >\n            Toggle Theme\n          <\/button>\n        )}\n      <\/ThemeContext.Consumer>\n    );\n  }\n}\n\nclass App extends Component {\n  render() {\n    return (\n      <ThemeProvider>\n        <ThemedButton \/>\n      <\/ThemeProvider>\n    );\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n \n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>classes en JavaScript pour React<\/strong> offrent une fa\u00e7on structur\u00e9e et puissante de cr\u00e9er des composants r\u00e9utilisables et g\u00e9rables dans votre application. Elles apportent de la modularit\u00e9, facilitent la gestion de l&rsquo;\u00e9tat et s&rsquo;int\u00e8grent harmonieusement dans le cycle de vie des composants React. Continuez \u00e0 explorer et exp\u00e9rimenter l&rsquo;utilisation des classes pour d\u00e9couvrir toutes leurs possibilit\u00e9s. Pour plus de tutoriels sur React, consultez nos articles sur <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" rel=\"noopener\">les diff\u00e9rences entre composants par classe et fonction<\/a> et apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/quand-mettre-parentheses-react-guide\" rel=\"noopener\">utiliser les parenth\u00e8ses dans React<\/a>.<\/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\">\n  <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 et Redux\" title=\"\">\n<\/a>\n","protected":false},"excerpt":{"rendered":"<p>Les Classes en JavaScript pour React sont un aspect fondamental que tout d\u00e9veloppeur React se doit de ma\u00eetriser. Utiliser des classes en JavaScript permet d&rsquo;organiser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5900","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\/5900","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=5900"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5900\/revisions"}],"predecessor-version":[{"id":5901,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5900\/revisions\/5901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3277"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}