# 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](https://stackblitz.com/fork/reactfire-sample).
## 1. In a terminal, create a fresh React app and `cd` into its directory
> Prerequisite: make sure you have [Node.js](https://nodejs.org/en/) installed.
```shell
npx create-react-app myapp
cd myapp
```
## 2. Install ReactFire and the Firebase SDK
```bash
# 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
1. Add a document
1. In the _Data_ tab of the console, click _Add Collection_
1. Name the collection **_tryreactfire_**
1. Add a document with ID **_burrito_** and boolean field `yummy: true`
1. Add the following to your security rules and click _Publish_
```text
match /tryreactfire/burrito {
allow read: if true;
allow write: if request.auth.uid != null;
}
```
## 4. Modify `src/index.js`
1. Import Firebase and ReactFire
```js
//...
import { FirebaseAppProvider } from 'reactfire';
//...
```
1. Wrap your app in a `FirebaseAppProvider` and provide the config object from the Firebase console
```jsx
//...
const firebaseConfig = {
/* add your config object from Firebase console */
};
ReactDOM.createRoot(document.getElementById('root')).render(
);
//...
```
## 5. Modify `src/App.js`
1. Import the `useFirestoreDocData` and `useFirestore` hooks
```js
//...
import { useFirestoreDocData, useFirestore } from 'reactfire';
//...
```
1. Add a function component
```jsx
//...
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 The burrito is {isYummy ? 'good' : 'bad'}
;
}
//...
```
1. 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:
```jsx
//...
function App() {
return (
{/*
SuspenseWithPerf behaves the same as Suspense,
but also automatically measures load times with the User Timing API
and reports it to Firebase Performance Monitoring
*/}
);
}
//...
```
## 6. Run your app!
```bash
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](https://firebase.google.com/docs/perf-mon/automatic-web)!
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:
