Firebase with React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Firebase configuration into your React app.

Firebase

import { initializeApp } from 'firebase/app';
const app = initializeApp([1]);

Drag options to blanks, or click blank then click option'

AappConfig

BfirebaseConfig

CconfigFirebase

DfirebaseApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name for the config object.

Forgetting to import initializeApp from 'firebase/app'.

You need to pass the Firebase configuration object named firebaseConfig to initialize the app.

2fill in blank

medium

Complete the code to get a Firestore database instance in React.

Firebase

import { getFirestore } from 'firebase/firestore';
const db = getFirestore([1]);

Drag options to blanks, or click blank then click option'

AfirebaseConfig

Bdatabase

Cfirestore

Dapp

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the config object instead of the app instance.

Not importing getFirestore from 'firebase/firestore'.

You must pass the initialized Firebase app instance app to getFirestore to access Firestore.

3fill in blank

hard

Fix the error in the React useEffect hook to fetch Firestore documents.

Firebase

useEffect(() => {
  const fetchData = async () => {
    const querySnapshot = await getDocs(collection(db, [1]));
    // process data
  };
  fetchData();
}, []);

Drag options to blanks, or click blank then click option'

Adb.users

Busers

C'users'

DcollectionName

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the collection name without quotes causing a reference error.

Using incorrect variable names for the collection.

The collection name must be a string, so it should be wrapped in quotes like 'users'.

4fill in blank

hard

Fill both blanks to add a new document to Firestore with React.

Firebase

import { collection, [1] } from 'firebase/firestore';

const addUser = async (user) => {
  await [2](collection(db, 'users'), user);
};

Drag options to blanks, or click blank then click option'

AaddDoc

BsetDoc

CupdateDoc

DdeleteDoc

Attempts:

3 left

💡 Hint

Common Mistakes

Using setDoc without a document reference.

Confusing updateDoc or deleteDoc with addDoc.

You import and use addDoc to add a new document to a Firestore collection.

5fill in blank

hard

Fill all three blanks to update a Firestore document in React.

Firebase

import { doc, [1] } from 'firebase/firestore';

const updateUser = async (id, data) => {
  const userRef = doc(db, 'users', [2]);
  await [3](userRef, data);
};

Drag options to blanks, or click blank then click option'

AupdateDoc

Bid

DsetDoc

Attempts:

3 left

💡 Hint

Common Mistakes

Using setDoc instead of updateDoc when only updating fields.

Passing wrong variable names for the document ID.

You import updateDoc, use the id variable for the document ID, and call updateDoc to update the document.