React 어플리케이션의 Firebase 어플리케이션은 어디서 초기화합니까?

React 어플리케이션의 Firebase 어플리케이션은 어디서 초기화합니까?

Firebase를 React 앱에 통합하려고 하는데 여러 튜토리얼을 살펴봐도 Firebase 초기화 코드를 어디에 둘지 합의점을 찾을 수 없습니다.firebase.initializeApp(config).

앱의 구조는 다음과 같습니다.

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

각 파일은 다음과 같습니다.

app.module

서버측 렌더링을 사용하여 모든 익스프레스 셋업을 합니까?

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;

제 웹사이트의 모든 페이지에 Firebase가 있는지 확인해야 합니다.지금은 1페이지 앱이지만, 나중에 추가하게 될 것입니다.

데이터베이스 초기화 코드를 어디에 넣어야 하는지 아는 사람 있나요?

나는 이렇게 한다

파일 작성Firebase.js옆에app.js초기화 코드를 입력합니다.

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;

다음으로 Import 합니다.Firebase.js예를 들어 파일을 사용할 모든 위치에 파일을 저장합니다.

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;

파이어베이스라는 이름의 파일을 만듭니다.js

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: 'AIzaXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: 'test-XXXX.firebaseapp.com',
  databaseURL: 'https://test-db.firebaseio.com',
  projectId: 'test-XXXX',
  storageBucket: 'test-bucket.appspot.com',
  messagingSenderId: 'XXXXXXX',
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};


firebase.initializeApp(firebaseConfig);
export const firebaseAuth = firebase.auth();
export const firestore = firebase.firestore()

다음으로 다음과 같이 사용합니다.

import { firebaseAuth } from 'firebase'
import SigninForm from 'signin.js'

const ModalSignIn = props => {

  const [email, setEmail] = useState()
  const [password, setPassword] = useState()

  const handleSubmit = e => {
    e.preventDefault()
    firebaseAuth
      .signInWithEmailAndPassword(email, password)
      .then(res => {
        console.log(res.user)
      })
      .catch(err => {
        const { code, message } = err
        console.log(code, message)
      })
  }

  return (<SigninForm/>)

여러분이 원하는 것은 반응 구성요소가 전 세계적으로 사용할 수 있는 파이어베이스인 것 같습니다.

redux를 사용하기 전에 동일한 질문을 합니다. 리액션 컴포넌트는 글로벌 상태 트리를 어떻게 소비합니까?글로벌 변수?가자, 우린 글로벌 변수가 악하다는 걸 알게 될 거야.리액션 소품?리액션도 좋지만 뿌리에서 잎 성분으로 소품을 전달하는 것은 재미가 없습니다.

Context API는 복구에 사용됩니다.redux/react-router와 마찬가지로 반응하기 위한 파이어베이스 바인딩이 필요합니다.

바퀴를 재발명하고 싶지 않다고 가정하면

• redux를 사용하는 경우 react redux Firebase를 고려하십시오.
• 보일러 플레이트를 싫어할 경우 반응 방화벽을 고려하십시오.

물론 앞서 언급한 반응 컨텍스트를 통해 자체 반응 Firebase 바인딩을 구축할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/48492047/where-do-i-initialize-firebase-app-in-react-application