{"id":6186,"date":"2025-09-08T11:55:47","date_gmt":"2025-09-08T11:55:47","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-composant-input-react\/"},"modified":"2025-09-08T11:55:51","modified_gmt":"2025-09-08T11:55:51","slug":"creer-composant-input-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-composant-input-react\/","title":{"rendered":"16.2 Cr\u00e9er un Composant Input en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Composant Input React<\/strong> est une \u00e9tape essentielle pour tout d\u00e9veloppeur souhaitant r\u00e9aliser des applications web modernes et interactives. Ma\u00eetriser l&rsquo;art de cr\u00e9er des <strong>composants Input en React<\/strong> enrichira vos capacit\u00e9s \u00e0 construire des interfaces utilisateur efficaces et r\u00e9actives. D\u00e9couvrons ensemble comment concevoir un composant Input avec du code concret et des pratiques \u00e9prouv\u00e9es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation d&rsquo;un Composant Input React<\/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\/706141520?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>Un composant Input en React se concentre sur la gestion des \u00e9tats et des \u00e9v\u00e9nements. En tirant parti de la gestion des \u00e9tats offerte par React, on peut r\u00e9aliser un composant qui non seulement capte les entr\u00e9es de l&rsquo;utilisateur, mais les utilise \u00e9galement pour rendre l&rsquo;exp\u00e9rience utilisateur plus fluide. Voici un exemple de mise en \u0153uvre d&rsquo;un composant Input :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction InputComponent() {\n    const [inputValue, setInputValue] = useState('');\n\n    const handleChange = (e) => {\n        setInputValue(e.target.value);\n    };\n\n    return (\n        <div>\n            <input type=\"text\" value={inputValue} onChange={handleChange} \/>\n            <p>Valeur actuelle : {inputValue}<\/p>\n        <\/div>\n    );\n}\n\nexport default InputComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tapes pour Cr\u00e9er un Composant Input en React<\/h3>\n\n\n\n<p>Pour construire un composant Input en React, nous devons commencer par comprendre quelques notions fondamentales telles que les hooks d&rsquo;\u00e9tat et la gestion d&rsquo;\u00e9v\u00e9nements. Suivons pas \u00e0 pas la cr\u00e9ation de notre composant :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Initialiser l&rsquo;\u00c9tat avec useState<\/h3>\n\n\n\n<p>Le hook <code>useState<\/code> est utilis\u00e9 pour initialiser et g\u00e9rer l&rsquo;\u00e9tat de notre composant Input. Il nous permet de conserver la valeur de l&rsquo;input utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const [inputValue, setInputValue] = useState('');<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Capturer l&rsquo;\u00c9v\u00e9nement onChange<\/h3>\n\n\n\n<p>L&rsquo;\u00e9v\u00e9nement <code>onChange<\/code> du champ input nous permet de capter toutes les modifications effectu\u00e9es par l&rsquo;utilisateur sur le champ textuel :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const handleChange = (e) => {\n    setInputValue(e.target.value);\n};<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Afficher les Changements de Valeur<\/h3>\n\n\n\n<p>Pour rendre l&rsquo;exp\u00e9rience utilisateur plus interactive, nous affichons la valeur actuelle de l&rsquo;input sous le champ :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>&lt;p&gt;Valeur actuelle : {inputValue}&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e des Composants Input en React<\/h3>\n\n\n\n<p>Apr\u00e8s avoir construit un composant de base, nous pouvons explorer des fonctionnalit\u00e9s suppl\u00e9mentaires comme la validation en ligne, ou l&rsquo;ajout d&rsquo;animations pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Voici quelques exemples avanc\u00e9s :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Validation de Donn\u00e9es en Direct<\/h4>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const validateInput = (value) => {\n    if (value.length < 3) {\n        return \"Le texte est trop court\";\n    }\n    return null;\n};\n\nreturn (\n    &lt;div&gt;\n        &lt;input type=\"text\" value={inputValue} onChange={handleChange} \/&gt;\n        &lt;p&gt;Valeur actuelle : {inputValue}&lt;\/p&gt;\n        &lt;p&gt;{validateInput(inputValue)}&lt;\/p&gt;\n    &lt;\/div&gt;\n);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Ajout d'Animation \u00e0 l'Input<\/h4>\n\n\n\n<p>Nous pouvons am\u00e9liorer l'interactivit\u00e9 en ajoutant des classes d'animation qui r\u00e9agissent aux changements dans l'input :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import '.\/InputComponent.css'; \/\/ Assuming you have a CSS file for styling\n\nreturn (\n    &lt;div className={\"input-container \" + (isValid ? 'valid' : 'invalid')}gt;\n        &lt;input type=\"text\" value={inputValue} onChange={handleChange} \/&gt;\n        &lt;p className={\"fade-in\"}&gt;Valeur actuelle : {inputValue}&lt;\/p&gt;\n    &lt;\/div&gt;\n);\n\n\/\/ CSS example\n\/\/ .valid { border-color: green; }\n\/\/ .invalid { border-color: red; }\n\/\/ .fade-in { transition: opacity 0.5s ease-in; }\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <strong>cr\u00e9ation d'un composant Input React<\/strong> est un concept fondamental pour tout d\u00e9veloppement d'application web moderne. Les comp\u00e9tences acquises ici vous aideront \u00e0 construire des interfaces utilisateur riches et dynamiques. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter avec React pour affiner vos comp\u00e9tences. Pour des tutoriels approfondis, consultez des sites comme <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener\">React Documentation<\/a> et <a href=\"https:\/\/www.freecodecamp.org\/\" target=\"_blank\" rel=\"noopener\">freeCodeCamp<\/a>. Am\u00e9liorez vos comp\u00e9tences React en pratiquant r\u00e9guli\u00e8rement et en consultant des ressources communautaires pour alimenter votre apprentissage.<\/p>\n\n\n<!-- Liens internes -->\n<p>Pour approfondir vos connaissances sur React, consultez \u00e9galement nos articles suivants :<\/p>\n<ul>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Qu'est-ce que React? Introduction et avantages<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\" target=\"_blank\" rel=\"noopener\">Nouveaut\u00e9s JavaScript \u00e0 savoir pour React<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" target=\"_blank\" rel=\"noopener\">Utilisation des Classes JavaScript dans React<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\" target=\"_blank\" rel=\"noopener\">Ma\u00eetriser les Objets JavaScript pour D\u00e9velopper en React<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er sa premi\u00e8re application React: Tutoriel<\/a><\/li>\n<\/ul>\n\n<!-- Liens externes -->\n<p>En plus de cela, pour encore plus d'apprentissage, voici quelques ressources externes utiles :<\/p>\n<ul>\n    <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Modules\" target=\"_blank\" rel=\"noopener\">Guide des Modules JavaScript - MDN<\/a><\/li>\n    <li><a href=\"https:\/\/javascript.info\/\" target=\"_blank\" rel=\"noopener\">Javascript Info<\/a><\/li>\n    <li><a href=\"https:\/\/www.codecademy.com\/learn\/react-101\" target=\"_blank\" rel=\"noopener\">Codecademy: React 101<\/a><\/li>\n<\/ul>\n\n<!-- Promotion Learnify -->\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 Offre 50%\" title=\"\">\n<\/a>\n```","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Composant Input React est une \u00e9tape essentielle pour tout d\u00e9veloppeur souhaitant r\u00e9aliser des applications web modernes et interactives. Ma\u00eetriser l&rsquo;art de cr\u00e9er des composants&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3194,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6186","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\/6186","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=6186"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6186\/revisions"}],"predecessor-version":[{"id":6187,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6186\/revisions\/6187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3194"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}