PC & Mobile

La bonne façon d'ajouter Firebase à votre projet React en utilisant des crochets React

La bonne façon d'ajouter Firebase à votre projet React en utilisant des crochets React


React + Firebase est une combinaison puissante permettant de créer rapidement et en toute sécurité des applications, de la validation de principe à la production à grande échelle. Auparavant (vous savez, il y a quelques mois), ajouter Firebase à un projet React semblait compliqué:

  • Option 1: Créez un composant d'ordre supérieur, un contexte avec les fournisseurs et les consommateurs. Whaaa? Mais Firebase le fait paraître si facile!
  • Option 2: Initialisez Firebase dans un fichier séparé, configurez certaines exportations, intégrez-le tôt dans votre projet, puis réinstallez-le dans vos composants.

Et tandis que Option 1 C’est toujours le moyen le plus sophistiqué (oserais-je, mieux) d’inclure Firebase dans un projet React qui en dépend, les crochets React mélangent en quelque sorte ces deux éléments, mais le rendent également un million de fois plus propre et plus facile.

Construire un fournisseur / consommateur de contexte de réaction avec des crochets de réaction

Pour ce projet, nous allons supposer que votre application a besoin de Firebase pour fonctionner correctement. Je veux dire par là: nous supposerons que vous voulez que Firebase soit initialisé tout en haut de votre code et disponible partout dans votre projet, et que votre application ne fonctionnerait pas beaucoup (voire pas du tout) si Firebase était en panne.

Ce n’est pas une obligation, bien sûr. J'initialise Firebase de cette façon dans chaque projet. Je vous donne juste un peu de contexte (mauvais jeu de mots) pour Pourquoi Je le structure de cette façon.

Nous allons toucher trois fichiers: notre principal index.js, un nouveau utils / firebase.js nous allons créer, et un .env.production fichier.

Avant de commencer: Ajoutez Firebase à votre projet!

Avant toute chose, vous devez vous assurer que vous ajoutez Firebase à votre projet. En utilisant npm, c’est:

$ npm i firebase

N'utilise pas npm? Je suis sûr que vous allez comprendre.

Ajout de vos informations d'identification Firebase à votre projet React

L'étape 1 est très simple. Lorsque vous créez votre projet Firebase, Firebase vous fournit un ensemble d'informations d'identification pour vous connecter aux services. Vous devez les inclure dans votre projet React, et le meilleur moyen consiste à utiliser votre .env fichier. Dans ce cas, nous allons créer notre .env.production déposer dans la racine du projet et ajouter:

REACT_APP_FIREBASE_API_KEY =
REACT_APP_FIREBASE_AUTH_DOMAIN =
REACT_APP_FIREBASE_DATABASE_URL =
REACT_APP_FIREBASE_PROJECT_ID =
REACT_APP_FIREBASE_STORAGE_BUCKET =
REACT_APP_FIREBASE_MESSAGING_SENDER_ID =
REACT_APP_FIREBASE_APP_ID =

Remplissez-les avec vos informations d'identification et vous êtes prêt pour l'étape 2.

Création de votre fournisseur de contexte Firebase

Notre fournisseur de contexte est ce qui va "retenir" notre connexion Firebase et la rendre disponible via le reste de notre application. (Tenir Ce n’est pas vraiment le terme qui convient, mais en clair, c’est comme ça que vous pouvez penser pour que tout cela ait un sens.)

Nous allons initialiser Firebase à la prochaine étape. Une fois cela fait, nous n’aurons jamais à revenir et à toucher ce fichier. Ainsi je considère ceci un utilitaire déposer et généralement mettre ceux-ci dans un utils annuaire. En suivant cette logique, créez utils / firebase.js. (Vous pouvez l'appeler comme vous voulez, mais mieux vaut être explicite.)

La première étape consiste à importer React et l'application principale Firebase dans ce fichier. Nous allons également utiliser le hook de contexte, nous allons donc importer useContext de Réagir en même temps:

// utils / firebase.js
importer React, {useContext} de 'react'
importer l'application depuis 'firebase / app'

Nous allons maintenant créer notre fournisseur de contexte. Nous allons l’initialiser avec un nul valeur. Vous pouvez l’initialiser comme vous le souhaitez, mais je commence par nul afin que je puisse vérifier plus tard si ma connexion existe avec un simple si déclaration. (Je clarifierai quand je vous montrerai comment dans quelques paragraphes supplémentaires.)

Nous allons également l'exporter ici pour pouvoir l'utiliser dans d'autres fichiers. Cela aussi aura un sens lorsque nous en arriverons à l'exemple d'utilisation. Mais le résultat final: vous devez exporter votre contexte afin de l’utiliser ultérieurement dans vos autres composants.

// utils / firebase.js
...
const FirebaseContext = createContext (null)
exportation {FirebaseContext}

Et maintenant, notre dernière étape: nous allons initialiser Firebase lui-même, l’affecter à notre contexte et créer un composant wrapper que nous pourrons utiliser pour envelopper notre application et rendre Firebase disponible partout.

// utils / firebase.js
...
export default ({enfants}) => {
    si (! app.apps.length) {
app.initializeApp ({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
})
}
    revenir (

{enfants}

)
}

Eh bien cela a dégénéré rapidement. Mais c’est en fait très simple. Passons en revue le code. Premièrement, nous créons un composant fonctionnel qui prend en les enfants comme un accessoire. les enfants sera le reste de votre application, et vous le verrez à la prochaine étape lorsque nous utiliserons ce composant fonctionnel.

Ensuite, nous initialisons simplement Firebase en utilisant leur code d’initialisation. J'aime vérifier que ce n'est pas déjà initialisé pour ne pas avoir d'erreurs du genre "Essayer d'initialiser l'application, mais elle a déjà été initialisée."Nous utilisons les informations d'identification que nous avons ajoutées à notre .env fichier afin que nous puissions facilement changer les informations d’authentification en fonction de notre environnement.

Enfin, nous renvoyons un composant que nous pouvons utiliser pour englober l’ensemble de notre application. Nous lui donnons un valeur de app qui est notre application Firebase initialisée. C’est ce que nous reviendrons plus tard lorsque nous appellerons useContext dans l'exemple ci-dessous.

Emballage de notre application React avec notre nouveau fournisseur de contexte Firebase

La dernière étape avant de réellement utilisation Firebase va ajouter ce nouveau fournisseur à notre projet. Parce que nous voulons qu'il soit disponible pour l'ensemble de notre application, je le mettrai dans le répertoire principal. index.js fichier comme ceci:

// Toutes vos autres importations comme React, React Router, peu importe
importer FirebaseProvider à partir de 'utils / firebase'
ReactDOM.render (


,
document.getElementById ('root')
)

FirebaseProvider est ce composant fonctionnel que nous avons créé à l'étape précédente. Comme il s’agit de l’exportation par défaut à partir de ce fichier, vous pouvez l’appeler comme vous le souhaitez. Quelque chose à l'intérieur FirebaseProvider sera en mesure d'accéder à notre application Firebase initialisée maintenant.

Et c'est tout! Firebase est maintenant initialisé et prêt à être utilisé tout au long de votre projet. Voyons comment l’utiliser réellement.

Exemple d'utilisation: obtenir des enregistrements du magasin à stocker dans votre application

Disons que nous avons un composant de liste dans notre application, et nous voulons extraire des enregistrements de notre chemises collection. Nous allons profiter de trois crochets ici - useContext pour obtenir notre connexion Firebase, useState pour gérer notre liste d'articles, et useEffect parce que nous voulons laisser notre composant afficher un état initial pendant que nous obtenons nos enregistrements.

importer React, {useContext, useEffect, useState} à partir de 'react'
importer {FirebaseContext} de 'utils / firebase'
importer 'firebase / firestore'
export default () => {
    const firebase = useContext (FirebaseContext)
const [list, setList] = useState (null)
réf const = firebase.firestore (). collection (`chemises`)
    useEffect (() => {
ref.get (). then (snapshot => {
si (! instantané) {
setList (l => [])
} autre {
laisser les chemises = []
instantané.pour chaque (chemise => {
shirts.push ({key: shirt.id, ... shirt.data ()})
})
setList (l => chemises)
}
}). catch (error => {
// Gère l'erreur
})
}, [])
    laisser listToDisplay
if (liste === null) {
listToDisplay = (
  • Chargement des chemises ...
  • )
    } else if (list.length === 0) {
    listToDisplay = (
  • Aucune chemise trouvée
  • )
    } autre {
    listToDisplay = list.map (shirt => {
    revenir (
  • {shirt.name}
  • )
    })
    }
    revenir (
      {listToDisplay}

    )
    }

    Je voulais donner un exemple assez détaillé pour que vous puissiez le voir en action, mais les points essentiels à retenir en termes d'utilisation de votre connexion Firebase sont les suivants:

    // Importe le contexte que nous avons créé
    importer {FirebaseContext} de 'utils / firebase'
    // Importe Firestore pour que ce composant puisse l'utiliser
    importer 'firebase / firestore'
    // Dans votre composant, récupérez la 'valeur' ​​(l'instance de l'application Firebase) dans une variable
    // Vous pouvez l'appeler 'firebase', 'app' - tout ce que vous voulez
    const firebase = useContext (FirebaseContext)

    Bien que cela puisse paraître beaucoup, c’est uniquement parce que nous avons parcouru toutes les lignes. En réalité, il fallait seulement 27 lignes de code pour créer notre fournisseur de contexte Firebase (en donner quelques-unes pour l'espacement entre les lignes), 3 lignes de code pour envelopper notre application dans Firebase et 3 lignes de code pour ajouter des composants vouloir utiliser Firebase. (Plus quelques.env entrées.)

    Dites-moi dans les commentaires ce que vous allez créer, maintenant que vous pouvez facilement ajouter Firebase à n’importe quel projet React avec seulement quelques lignes de code réutilisable.

    Afficher plus

    SupportIvy

    SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

    Articles similaires

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Bouton retour en haut de la page
    Fermer