{"id":6115,"date":"2025-01-13T12:54:19","date_gmt":"2025-01-13T12:54:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-application-firebase-react\/"},"modified":"2025-01-13T12:54:23","modified_gmt":"2025-01-13T12:54:23","slug":"creer-application-firebase-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-application-firebase-react\/","title":{"rendered":"11.2 Cr\u00e9er une Application sur Firebase avec React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Application Firebase React<\/strong> est un excellent moyen de tirer parti des services cloud pour d\u00e9velopper une application full-stack moderne. Dans ce tutoriel, nous allons explorer comment mettre en place et d\u00e9ployer une application web utilisant Firebase comme backend et React pour le frontend. Nous aborderons les \u00e9tapes importantes de la configuration initiale \u00e0 la mise en ligne de votre application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Application Firebase 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\/706121430?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  <!-- 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>Firebase est une plateforme de d\u00e9veloppement d&rsquo;applications mobiles et web con\u00e7ue par Google. Elle fournit divers outils et services n\u00e9cessaires \u00e0 la cr\u00e9ation d&rsquo;applications robustes, notamment l&rsquo;h\u00e9bergement, l&rsquo;authentification et une base de donn\u00e9es en temps r\u00e9el. React, d\u00e9velopp\u00e9 par Facebook, est une librairie JavaScript id\u00e9ale pour la construction d&rsquo;interfaces utilisateur r\u00e9actives et dynamiques. Combin\u00e9es, ces deux technologies sont puissantes et pratiques pour le d\u00e9veloppement d&rsquo;applications modernes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configuration de Firebase<\/h3>\n\n\n\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er un projet Firebase. Rendez-vous sur la <a href=\"https:\/\/firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">console Firebase<\/a> et suivez les instructions pour cr\u00e9er un nouveau projet. Une fois votre projet cr\u00e9\u00e9, ajoutez une application dans Firebase et choisissez l&rsquo;option Web pour obtenir votre configuration Firebase SDK.<\/p>\n\n\n\n<a href=\"https:\/\/firebase.google.com\/docs\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/firebase.google.com\/images\/brand-guidelines\/logo-built_black.png\" loading=\"lazy\" alt=\"Documentation Firebase\" title=\"\"><\/a>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Importer Firebase\nimport { initializeApp } from 'firebase\/app';\nimport { getFirestore } from 'firebase\/firestore';\n\n\/\/ Configuration Firebase SDK\nconst firebaseConfig = {\n  apiKey: \"YOUR_API_KEY\",\n  authDomain: \"YOUR_PROJECT_ID.firebaseapp.com\",\n  projectId: \"YOUR_PROJECT_ID\",\n  storageBucket: \"YOUR_PROJECT_ID.appspot.com\",\n  messagingSenderId: \"YOUR_MESSAGING_ID\",\n  appId: \"YOUR_APP_ID\"\n};\n\n\/\/ Initialiser Firebase\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n\nexport { db };\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;un Projet React<\/h3>\n\n\n\n<p>Ensuite, cr\u00e9ez une nouvelle application React en utilisant Create React App. Ouvrez le terminal et ex\u00e9cutez la commande suivante :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-firebase-app<\/code><\/pre>\n\n\n\n<p>Une fois l&rsquo;installation termin\u00e9e, d\u00e9placez-vous dans le r\u00e9pertoire du projet :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd my-firebase-app<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Int\u00e9gration de Firebase \u00e0 React<\/h3>\n\n\n\n<p>Maintenant que votre application React est pr\u00eate, nous allons int\u00e9grer Firebase. Installez les packages Firebase avec la commande suivante :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install firebase<\/code><\/pre>\n\n\n\n<p>Cr\u00e9ez un fichier <code>firebase.js<\/code> dans le dossier <code>src<\/code> de votre projet React et copiez-y la configuration Firebase que vous avez obtenue auparavant. Apprenez-en plus sur comment <a href=\"https:\/\/wikiform.fr\/codespace\/creer-application-firebase-react\">cr\u00e9er une application Firebase avec React<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter l&rsquo;Authentification Utilisateur<\/h3>\n\n\n\n<p>Pour utiliser l&rsquo;authentification Firebase, il vous suffit de configurer les fournisseurs d&rsquo;authentification dans la console Firebase sous l&rsquo;onglet \u00ab\u00a0Authentication\u00a0\u00bb. Une fois configur\u00e9, vous pouvez utiliser les m\u00e9thodes de Firebase pour g\u00e9rer les utilisateurs. Consultez \u00e9galement notre <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-erreurs-requetes-firebase-axios-react\">guide sur la gestion des erreurs avec Firebase<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import { getAuth, signInWithEmailAndPassword } from 'firebase\/auth';\n\nconst auth = getAuth();\n\n\/\/ Fonction pour connecter un utilisateur\nconst login = async (email, password) => {\n  try {\n    const userCredential = await signInWithEmailAndPassword(auth, email, password);\n    console.log(\"Utilisateur connect\u00e9 :\", userCredential.user);\n  } catch (error) {\n    console.error(\"Erreur de connexion :\", error);\n  }\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9ployer l&rsquo;Application sur Firebase Hosting<\/h3>\n\n\n\n<p>Une fois le d\u00e9veloppement termin\u00e9, d\u00e9ployez votre application en utilisant Firebase Hosting. D&rsquo;abord, installez l&rsquo;outil de ligne de commande Firebase :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g firebase-tools<\/code><\/pre>\n\n\n\n<p>Initialisez Firebase dans votre projet et suivez les instructions :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>firebase init<\/code><\/pre>\n\n\n\n<p>Ensuite, construisez votre projet React et d\u00e9ployez-le :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build\nfirebase deploy<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En suivant ce tutoriel, vous aurez cr\u00e9\u00e9 une application React et utilis\u00e9 Firebase pour ajouter de l&rsquo;authentification et d&rsquo;autres services cloud. Cette combinaison permet de cr\u00e9er des applications puissantes et \u00e9volutives avec un backend g\u00e9r\u00e9 par Firebase et un frontend moderne en React. Pour approfondir vos connaissances, explorez plus sur Firebase et React pour d\u00e9couvrir des fonctionnalit\u00e9s avanc\u00e9es et am\u00e9liorer votre application. D\u00e9couvrez aussi <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">comment cr\u00e9er votre premi\u00e8re application React<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">comprendre le cycle de vie des applications React<\/a>.<\/p>\n\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=\"Formation React et Redux sur Learnify\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Application Firebase React est un excellent moyen de tirer parti des services cloud pour d\u00e9velopper une application full-stack moderne. Dans ce tutoriel, nous allons&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3191,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6115","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\/6115","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=6115"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6115\/revisions"}],"predecessor-version":[{"id":6116,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6115\/revisions\/6116"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3191"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}