Where do I initialize Firebase app in React applic

问题:

I'm trying to integrate Firebase into my React app and after looking at various tutorials, I can't seem to find a consensus on where to put the firebase initialization code firebase.initializeApp(config).

My app's structure is this:

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

Each file looks like the following

app.js

Does all the express setup with server-side rendering

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;

I need to make sure Firebase is available in every page of my website. Right now it is a single page app but eventually I'll be adding more.

Can anybody help me understand where I might put the database initialization code so that it is applied everywhere?

回答1:

this is how I do it

create file Firebase.js next to app.js and put your initialization code

Firebase.js file

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;

and then import Firebase.js file every where you want to use it , for example

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;

回答2:

It seems that what you want is that firebase can be globally available to your react components.

It's the same question before using redux, how does react components consume the global state tree? Global variables? Come on, we'll know global variables are evil. React props? It seems very react but passing props down from root to the leaf components can't be fun.

Context API comes to rescue. You simply need firebase bindings for react just as redux/react-router did.

Assume you don't want to reinvent wheels,

• If you use redux, consider react redux firebase
• If you hates boilerplates, consider react firebase

and of course you can also build your own react firebase bindings through react context as just mentioned.