Comment connecter votre application React à Firebase

Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.

Selon l'enquête Stack Overflow de 2022, 21,14 % des développeurs utilisent Firebase, ce qui en fait la quatrième plate-forme cloud la plus populaire. Il s'agit d'une technologie évolutive permettant d'intégrer le backend de manière transparente.

Avec Firebase, vous pouvez développer une application complète sans écrire une seule ligne de code backend. Découvrez comment connecter votre application React.js à Firebase dès aujourd'hui et développer en déplacement.

Installer le package Firebase

Après créer votre application React, changez de répertoire pour le dossier racine de votre projet et installez le package Firebase en exécutant :

npm installer base de feu

Ajoutez votre application React à un projet Firebase

L'étape suivante consiste à créer un projet Firebase et à le lier à votre application React. Allez à la Console Firebase:

1. Cliquez sur Ajouter un projet pour démarrer un nouveau projet Firebase.
2. Entrez un nom de projet, puis cliquez sur Continuer.
3. Cliquez sur Continuer à la page suivante.
4. Sélectionnez votre compte Firebase dans le menu déroulant ou cliquez sur Créer un nouveau compte si vous n'en avez pas déjà un.
5. Enfin, cliquez Créer un projet.
6. Cliquez sur Continuer une fois le processus terminé.
7. Ensuite, cliquez sur l'icône Web () en haut à gauche de la page suivante pour configurer Firebase pour le Web.
8. Entrez un surnom pour votre application dans le champ fourni. Puis clique Enregistrer l'application.
9. Copiez le code généré et conservez-le pour l'étape suivante (abordée dans la section suivante).
10. Cliquez sur Continuer vers la console.
11. Il existe de nombreuses options sur la page suivante. Faites défiler vers le bas et sélectionnez Cloud Firestore puisqu'il vous suffit de configurer une base de données dans ce cas.
12. Ensuite, cliquez sur Créer une base de données.
13. Cliquez sur Suivant. Sélectionnez votre emplacement Firestore préféré dans la liste déroulante.
14. Puis clique Activer pour créer une base de données Firestore.

Initialiser Firebase dans votre application React

Créez un nouveau dossier dans votre projet src annuaire. Vous pouvez appeler ce firebase_setup. Ensuite, créez un firebase.js fichier à l'intérieur de ce dossier. Collez ensuite le code généré précédemment dans ce fichier.

Pour l'instant, vous pouvez stocker l'objet de configuration (firebaseConfig) dans un .env déposer. Mais envisagez d'utiliser un façon de masquer les secrets de React en production. Les données que vous stockez dans un .env Le fichier peut facilement fuir dans la construction de votre application.

Par exemple, pour saisir la clé secrète Firebase de votre application dans le champ .env déposer:

REACT_APP_apiKey = votre clé d'accès Firebase

Ainsi, vous pouvez affiner le code généré comme suit :

importer { initializeApp } depuis "firebase/application" ;
importer { getFirestore } depuis "@firebase/firestore"
constante firebaseConfig = {
clé API: processus.env.REACT_APP_apiKey,
authDomain: processus.env.REACT_APP_authDomain,
ID de projet: processus.env.REACT_APP_projectId,
stockageBucket: processus.env.REACT_APP_storageBucket,
messagerieSenderId: processus.env.REACT_APP_messagingSenderId,
ID d'application: processus.env.REACT_APP_appId,
ID de mesure: processus.env.REACT_APP_measurementId
};
constante app = initializeApp (firebaseConfig);
exporterconstante firestore = getFirestore (application)

Testez votre connexion Firebase

Vous pouvez tester la connexion en soumettant des données factices à Firestore. Commencez par créer un poignées dossier dans votre projet src annuaire. Créez un gestionnaire de soumission dans ce fichier. Vous pouvez appeler cela handlesubmit.js, par exemple:

importer { addDoc, collection } depuis "@firebase/firestore"
importer { firestore } depuis "../firebase_setup/firebase"
constante handleSubmit = (testdata) => {
constante ref = collection (firestore, "test_data") // Firebase le crée automatiquement
laisser données = {
 données de test: données de test
 }
essayer {
 addDoc (réf, données)
 } attraper(erre) {
console.log (erreur)
 }
}
exporterdéfaut gérerSoumettre

Puis à l'intérieur App.js:

importer './App.css';
importer gérerSoumettre depuis './handles/handlesubmit' ;
importer { useRef } depuis 'réagir';
fonctionApplication() {
constante dataRef = useRef()
constante submithandler = (e) => {
e.preventDefault()
gérerSoumettre(dataRef.actuel.valeur)
 dataRef.current.value = ""
 }
retour (
<div nom_classe="Application">
<formulaire onSubmit={submithandler}>
<type d'entrée= "texte" ref={dataRef} />
<type de bouton = "soumettre">Sauvegarder</button>
</form>
</div>
 );
}
exporterdéfaut application ;

Exécutez votre application React et essayez de soumettre des données via le formulaire. Actualisez la console de base de données Firebase pour voir les informations soumises dans votre collection. Avec les bases en place, vous pouvez explorer de nombreux autres choses que Firebase peut faire pour voir comment l'utiliser au mieux.

Construisez en déplacement avec Firebase et réagissez

Firebase est une solution backend-as-a-service polyvalente qui vous permet de faire évoluer efficacement votre application. Une fois que vous avez connecté votre application React, vous pouvez tirer parti de ses nombreuses fonctionnalités pour créer votre site Web à votre guise.

Par exemple, la boîte à outils d'authentification Firebase est l'une des fonctionnalités que vous voudrez peut-être explorer.