{"id":5912,"date":"2024-09-08T18:13:47","date_gmt":"2024-09-08T18:13:47","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\/"},"modified":"2024-09-08T18:13:51","modified_gmt":"2024-09-08T18:13:51","slug":"creer-premiere-application-react-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\/","title":{"rendered":"3.1 Cr\u00e9er sa Premi\u00e8re Application avec React : Tutoriel"},"content":{"rendered":"\n<p><strong>Cr\u00e9er sa Premi\u00e8re Application avec React<\/strong> peut sembler un d\u00e9fi, mais ce tutoriel vise \u00e0 simplifier la d\u00e9marche. Comprendre les bases de React et savoir comment mettre en place votre premi\u00e8re application sont des \u00e9tapes cruciales pour ma\u00eetriser ce puissant framework. Apprenons comment cr\u00e9er une application React de A \u00e0 Z gr\u00e2ce \u00e0 des exemples concrets de code.<\/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\/706053283?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 d\u00e9velopp\u00e9e par Facebook, utilis\u00e9e pour cr\u00e9er des interfaces utilisateur modernes et r\u00e9actives. Elle se distingue par son approche bas\u00e9e sur les composants, qui permet de diviser l&rsquo;application en petites parties r\u00e9utilisables. Commen\u00e7ons par installer les outils n\u00e9cessaires et cr\u00e9er notre premi\u00e8re application React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00e9-requis<\/h3>\n\n\n\n<p>Avant de d\u00e9marrer, assurez-vous d&rsquo;avoir Node.js et npm (Node Package Manager) install\u00e9s sur votre machine. Vous pouvez les t\u00e9l\u00e9charger et les installer depuis le <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">site officiel de Node.js<\/a>. Pour en savoir plus sur les outils n\u00e9cessaires pour d\u00e9velopper avec React, consultez cet <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\">article d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code sh\"><code># V\u00e9rifiez les versions install\u00e9es\nnode -v\nnpm -v\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Nouvelle Application React<\/h3>\n\n\n\n<p>L&rsquo;outil Create React App simplifie la configuration initiale de votre projet React. Utilisez la commande suivante pour cr\u00e9er une nouvelle application :<\/p>\n\n\n\n<pre class=\"wp-block-code sh\"><code># Installez Create React App globalement (si non d\u00e9j\u00e0 install\u00e9)\nnpm install -g create-react-app\n\n# Cr\u00e9ez une nouvelle application React\ncreate-react-app my-first-react-app\n\n# Acc\u00e9dez au r\u00e9pertoire de l'application\ncd my-first-react-app\n\n# Lancez l'application\nnpm start\n<\/code><\/pre>\n\n\n\n<p>Cette commande g\u00e9n\u00e8re les fichiers et dossiers n\u00e9cessaires pour d\u00e9marrer avec React. Vous pouvez maintenant ouvrir votre application dans un navigateur \u00e0 l&rsquo;adresse <code>http:\/\/localhost:3000<\/code>. Pour des d\u00e9tails suppl\u00e9mentaires, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">guide complet sur l&rsquo;utilisation des fonctions fl\u00e9ch\u00e9es en React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Explorer la Structure du Projet<\/h3>\n\n\n\n<p>Familiarisez-vous avec la structure par d\u00e9faut du projet :<\/p>\n\n<ul>\n  <li><strong>public\/<\/strong> : Contient les fichiers publics comme <code>index.html<\/code>.<\/li>\n  <li><strong>src\/<\/strong> : Contient les fichiers source de votre application React, y compris <code>index.js<\/code> et <code>App.js<\/code>.<\/li>\n  <li><strong>node_modules\/<\/strong> : Contient les modules npm install\u00e9s.<\/li>\n  <li><strong>package.json<\/strong> : Contient les informations et d\u00e9pendances de votre projet.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Composants<\/h3>\n\n\n\n<p>Les composants sont les blocs de construction de toute application React. Commen\u00e7ons par cr\u00e9er un composant simple. Dans <code>src\/<\/code>, cr\u00e9ez un fichier <code>Greeting.js<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\n\nfunction Greeting(props) {\n  return <h1>Hello, {props.name}!<\/h1>;\n}\n\nexport default Greeting;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Composants<\/h3>\n\n\n\n<p>Maintenant, importez et utilisez ce composant dans <code>App.js<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React from 'react';\nimport '.\/App.css';\nimport Greeting from '.\/Greeting';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <Greeting name=\"World\" \/>\n        <Greeting name=\"React Developer\" \/>\n      <\/header>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter du Style<\/h3>\n\n\n\n<p>Pour appliquer du style, modifiez le fichier <code>App.css<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.App {\n  text-align: center;\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer l&rsquo;\u00c9tat avec useState<\/h3>\n\n\n\n<p>React utilise le hook <code>useState<\/code> pour g\u00e9rer l&rsquo;\u00e9tat des composants fonctionnels. Ajoutons une fonctionnalit\u00e9 pour changer le nom affich\u00e9 dynamiquement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\nimport '.\/App.css';\nimport Greeting from '.\/Greeting';\n\nfunction App() {\n  const [name, setName] = useState('World');\n\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <Greeting name={name} \/>\n        <input \n          type=\"text\" \n          placeholder=\"Enter a name\" \n          value={name} \n          onChange={e => setName(e.target.value)} \n        \/>\n      <\/header>\n    <\/div>\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>Vous venez de cr\u00e9er votre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">premi\u00e8re application React<\/a>\u2009! En ma\u00eetrisant les bases des composants, des hooks, et du style, vous \u00eates maintenant pr\u00eat \u00e0 explorer des concepts plus avanc\u00e9s et \u00e0 construire des applications React complexes. Continuez \u00e0 exp\u00e9rimenter et \u00e0 apprendre pour explorer tout le potentiel de React. Pour en savoir plus, consultez d&rsquo;autres articles sur Comment utiliser les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">fonctions fl\u00e9ch\u00e9es dans JavaScript React<\/a> ou sur la <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">compr\u00e9hension du cycle de vie d&rsquo;une application React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/learn-react.example.com\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/example.com\/assets\/react-course-offer.png\" loading=\"lazy\" alt=\"React Course Offer 50%\" title=\"\"><\/a>\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" 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 et Redux\" title=\"\"><\/a>\n\n1. Apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">qu&rsquo;est-ce que React: introduction et avantages<\/a>.\n\n2. Diff\u00e9rences entre <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">single page et multi page en React<\/a>.\n\n3. Importance des <a href=\"https:\/\/wikiform.fr\/codespace\/propriete-children-react-utilisation\">propri\u00e9t\u00e9s children en React<\/a>.\n\n4. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-spin-nous-markdown-react\">ajouter un spinner de chargement en React<\/a>. \n\n5. Consultez nos <a href=\"https:\/\/wikiform.fr\/codespace\/exercices-s-ameliorer-react-guide\">exercices pour s&rsquo;am\u00e9liorer en React<\/a>.\n\nPour aller encore plus loin et obtenir une expertise encore plus pouss\u00e9e sur les technologies utilis\u00e9es avec React, nous vous recommandons de consulter les ressources suivantes :\n\n&#8211; [Forum de la communaut\u00e9 React](https:\/\/reactjs.org\/community\/support.html)\n&#8211; [Documentation officielle de React](https:\/\/reactjs.org\/docs\/getting-started.html)\n&#8211; [Cours en ligne sur React de Codecademy](https:\/\/www.codecademy.com\/learn\/react-101)\n\nEn suivant ce tutoriel, vous avez fait un grand pas dans le d\u00e9veloppement de votre premi\u00e8re application React, et nous esp\u00e9rons que vous allez continuer \u00e0 vous \u00e9panouir dans ce domaine passionnant. Pour d\u00e9couvrir plus de projets passionnants, visitez notre page sur <a href=\"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-react-qu-allons-nous-faire\">les projets To-Do List en React<\/a>. Bon codage\u2009!<\/p>\n<!-- \/wp:post-content -->","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er sa Premi\u00e8re Application avec React peut sembler un d\u00e9fi, mais ce tutoriel vise \u00e0 simplifier la d\u00e9marche. Comprendre les bases de React et savoir&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5912","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\/5912","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=5912"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5912\/revisions"}],"predecessor-version":[{"id":5913,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5912\/revisions\/5913"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3198"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}