Reactfire-入门

我找到这个了 youtube video reactfire .

我正在尝试配置它,以便我可以使用react fire,但遇到了webpack问题。我发现了 this post

有人知道如何开始使用反作用射击吗?

当我尝试使用入门指南时,我会得到一个错误,上面说:

类型错误:对象(…)不是函数

import React, { Component } from 'react';

// import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom';
import { FirebaseAppProvider, 
    useFirestoreDocData,
    useFirestore,
    SuspenseWithPerf } from 'reactfire';

import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';


const devConfig = {
    apiKey: process.env.REACT_APP_DEV_API_KEY,
    authDomain: process.env.REACT_APP_DEV_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_DEV_DATABASE_URL,
    projectId: process.env.REACT_APP_DEV_PROJECT_ID,
    storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_DEV_APP_ID

  };


  const prodConfig = {
    apiKey: process.env.REACT_APP_PROD_API_KEY,
    authDomain: process.env.REACT_APP_PROD_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_PROD_DATABASE_URL,
    projectId: process.env.REACT_APP_PROD_PROJECT_ID,
    storageBucket: process.env.REACT_APP_PROD_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_PROD_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_PROD_APP_ID
  };


  const firebaseConfig =
    process.env.NODE_ENV === 'production' ? prodConfig : devConfig;


    function App() {
        return (
          <FirebaseAppProvider firebaseConfig={firebaseConfig}>
            <h1>test</h1>
            <SuspenseWithPerf
              fallback={<p>loading burrito status...</p>}
              traceId={"load-burrito-status"}
            >
              <p>taskf</p>
            </SuspenseWithPerf>
          </FirebaseAppProvider>
        );
      }

createRoot(document.getElementById("root")).render(<App />);

这个 stackblitz example有一个package.json文件,其中包含了react的实验版本——尽管这些版本在文档或演示视频中没有指定为需求(并且它指出,没有它们,它应该是稳定的)。

有没有一种方法可以不用实验模式来使用反动射击?

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();