reactfire/docs/quickstart.md

ReactFire Quickstart

⚛ + 🔥 = 🌯

We'll build a web app that displays, in real time, the tastiness of a burrito. It will listen to Cloud Firestore for its data, and we'll configure Firebase Performance Monitoring so we can get some perf stats.

To see the completed app, check out this StackBlitz workspace.

1. In a terminal, create a fresh React app and cd into its directory

Prerequisite: make sure you have Node.js installed.

npx create-react-app myapp
cd myapp

2. Install ReactFire and the Firebase SDK

# yarn
yarn add firebase reactfire

# npm
npm install --save firebase reactfire

3. Create a document in Cloud Firestore

1. Go to the Database tab in the Firebase console. If your project doesn't have a Cloud Firestore instance yet, initialize it in locked mode

2. Add a document

   1. In the Data tab of the console, click Add Collection

   2. Name the collection tryreactfire

   3. Add a document with ID burrito and boolean field yummy: true

   

3. Add the following to your security rules and click Publish

   match /tryreactfire/burrito {
     allow read: if true;
     allow write: if request.auth.uid != null;
   }
   

4. Modify src/index.js

1. Import Firebase and ReactFire

   //...
   import { FirebaseAppProvider } from 'reactfire';
   //...
   

2. Wrap your app in a FirebaseAppProvider and provide the config object from the Firebase console

   //...
   const firebaseConfig = {
     /* add your config object from Firebase console */
   };
   ReactDOM.createRoot(document.getElementById('root')).render(
     <FirebaseAppProvider firebaseConfig={firebaseConfig}>
       <App />
     </FirebaseAppProvider>
   );
   //...
   

5. Modify src/App.js

1. Import the useFirestoreDocData and useFirestore hooks

   //...
   import { useFirestoreDocData, useFirestore } from 'reactfire';
   //...
   

2. Add a function component

   //...
   function Burrito() {
     // lazy load the Firestore SDK and create a document reference
     const burritoRef = useFirestore()
       .collection('tryreactfire')
       .doc('burrito');
   
     // subscribe to the doc. just one line!
     const burrito = useFirestoreDocData(burritoRef);
   
     // get the value from the doc
     const isYummy = burrito.yummy;
   
     return <p>The burrito is {isYummy ? 'good' : 'bad'}</p>;
   }
   //...
   

3. Render your component inside of a Suspense tag

We need to do this because useFirestoreDocData throws a Promise while it is waiting for a response from Firestore. Suspense will catch the Promise and render fallback until the Promise is resolved.

Replace the App function with the following:

//...
function App() {
  return (
    <div className="App">
      {/*
        SuspenseWithPerf behaves the same as Suspense,
        but also automatically measures load times with the User Timing API
        and reports it to Firebase Performance Monitoring
      */}
      <SuspenseWithPerf
        fallback={'loading burrito status...'}
        traceId={'load-burrito-status'}
      >
        <Burrito />
      </SuspenseWithPerf>
    </div>
  );
}
//...

6. Run your app!

yarn start
# or
npm run start

1. Edit the value of yummy in the Firebase console, and watch it update in real time in your app! 🔥🔥🔥

About Firebase Performance Monitoring

SuspenseWithPerf will lazy load the Firebase Performance Monitoring library and report on on our custom trace, load-burrito-status, that we set in the traceId prop of SuspenseWithPerf. In addition, it will automatically measure common performance stats!

Note that Firebase Performance Monitoring can take about 12 hours to crunch your data and show it in the Performance tab of the Firebase console.

This is an example of some of the stats in the Firebase Performance Monitoring console after 12 hours: