web-dev-qa-db-fra.com

Où puis-je initialiser l'application Firebase dans React application?

J'essaie d'intégrer Firebase dans mon React et après avoir regardé divers tutoriels, je n'arrive pas à trouver un consensus sur l'endroit où mettre le code d'initialisation de Firebase firebase.initializeApp(config).

La structure de mon application est la suivante:

- app.js
- components
   |___Index.jsx
   |___Layout.jsx
   |___PageContent.jsx

Chaque fichier ressemble à ce qui suit

app.js

Est-ce que toute la configuration express avec le rendu côté serveur

Index.jsx

import React from 'react';
import Layout from './Layout.jsx';
import PageContent from './PageContent.jsx';
import './global.css';

class Index extends React.Component {
  render() {
    return (
        <Layout title={this.props.title}>
            <PageContent />
        </Layout>
    );
  }
}

export default Index;

PageContent.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import LandingPage from './components/Landing_Page/Landing.jsx';

class PageContent extends React.Component {
    render() {
        return (
            <LandingPage />
        );
    }
}

if (typeof window !== 'undefined') {
    ReactDOM.render(     
        <PageContent />,
        document.getElementById('root')        
    );
}

export default PageContent;

Je dois m'assurer que Firebase est disponible sur chaque page de mon site Web. Pour le moment, il s'agit d'une application d'une seule page, mais j'en ajouterai éventuellement d'autres.

Quelqu'un peut-il m'aider à comprendre où je pourrais mettre le code d'initialisation de la base de données afin qu'il soit appliqué partout?

javascriptreactjsfirebase
16
MarksCode

c'est comme ça que je le fais

créer un fichier Firebase.js à côté de app.js et mettez votre code d'initialisation

Fichier Firebase.js 

import * as firebase from 'firebase';

let config = {
    apiKey: "XXXXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXX",
    storageBucket: "XXXX",
    messagingSenderId: "XXXX"
};
firebase.initializeApp(config);

export default firebase;

puis importez Firebase.js fichier partout où vous voulez l'utiliser, par exemple

import React from 'react';    
import firebase from './../Firebase.js'     // <------  import firebase

class Test extends React.Component {

    componentDidMount(){
        firebase.database().ref().child("X").on('value' , {...});
    }

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

export default Test;
19
Ali

Il semble que ce que vous voulez, c'est que Firebase puisse être globalement disponible pour vos composants React.

C'est la même question avant d'utiliser redux, comment les composants React consomment-ils l'arbre d'état global? Variables globales? Allez, nous saurons que les variables globales sont mauvaises. React props? Il semble très réactif mais passer des accessoires de la racine aux composants de la feuille ne peut pas être amusant.

Context API vient à la rescousse. Vous avez simplement besoin de liaisons Firebase pour réagir comme le faisait redux/react-router.

Supposons que vous ne vouliez pas réinventer les roues,

et bien sûr, vous pouvez également créer vos propres liaisons Firebase React via le contexte React comme nous venons de le mentionner.

3
Xlee