Firebase with React - Commands & Configuration

Introduction

Firebase is a service that helps you add backend features like databases and user login to your React app without managing servers. It solves the problem of building and scaling app infrastructure easily.

When you want to add user login and authentication to your React app quickly.

When you need a real-time database to sync data between users instantly.

When you want to store files like images or documents from your React app.

When you want to deploy your React app with hosting included.

When you want to track app usage and errors without setting up your own servers.

Config File - firebaseConfig.js

firebaseConfig.js

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "AIzaSyD_example1234567890",
  authDomain: "my-app-12345.firebaseapp.com",
  projectId: "my-app-12345",
  storageBucket: "my-app-12345.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

This file sets up Firebase in your React app.

firebaseConfig holds your project details from Firebase console.

initializeApp starts Firebase with your config.

getAuth and getFirestore create services for login and database.

Exporting auth and db lets you use them in your React components.

Commands

This command installs the Firebase library so you can use Firebase features in your React app.

Terminal

npm install firebase

Expected Output

+ firebase@10.4.0

added 1 package from 1 contributor and audited 1 package in 1.234s

found 0 vulnerabilities

This creates a new React app folder named 'my-firebase-app' where you will add Firebase.

Terminal

npx create-react-app my-firebase-app

Expected Output

Creating a new React app in /home/user/my-firebase-app.

Installing packages. This might take a couple of minutes.



Success! Created my-firebase-app at /home/user/my-firebase-app

Inside that directory, you can run several commands:

  npm start

  npm run build

  npm test

  npm eject



We suggest that you begin by typing:

  cd my-firebase-app

  npm start

Starts the React development server so you can see your app in the browser while you build it.

Terminal

npm start

Expected Output

Compiled successfully!



You can now view my-firebase-app in the browser.



  Local:            http://localhost:3000

  On Your Network:  http://192.168.1.100:3000



Note that the development build is not optimized.

To create a production build, use npm run build.

Builds the React app into static files ready for deployment, including Firebase hosting if configured.

Terminal

npm run build

Expected Output

Creating an optimized production build...

Compiled successfully.



File sizes after gzip:

  45.2 KB  build/static/js/main.abcdef.js

  2.1 KB   build/static/css/main.abcdef.css



The project was built assuming it is hosted at the server root.

You can control this with the homepage field in your package.json.

Key Concept

If you remember nothing else from this pattern, remember: Firebase connects your React app to backend services like login and database without needing your own servers.

Common Mistakes

Not installing the Firebase package before importing it in React code.

The app will fail to run because the Firebase library is missing.

Always run 'npm install firebase' before using Firebase in your React app.

Using incorrect Firebase config values copied from the console.

Firebase will not connect properly and features like login or database will fail.

Copy the exact config values from your Firebase project settings and paste them into your config file.

Trying to use Firebase services before calling initializeApp with config.

Firebase services like auth or database won't work without initialization.

Always call initializeApp with your config before using other Firebase features.

Summary

Install Firebase package to use its services in React.

Create a firebaseConfig.js file to initialize Firebase with your project details.

Use npm start to run your React app locally and npm run build to prepare it for deployment.

Practice

1. What is the main purpose of using Firebase with React in app development?

easy

A. To replace React's state management

B. To style React components with CSS

C. To compile React code faster

D. To add backend features like database and authentication easily

Solution

1. Step 1: Understand Firebase role

   Firebase provides backend services like database and user authentication.

2. Step 2: Understand React role

   React handles the user interface and frontend logic.

3. Final Answer:

   To add backend features like database and authentication easily -> Option D

4. Quick Check:

   Firebase adds backend features [OK]

Hint: Firebase adds backend, React builds UI [OK]

Common Mistakes:

• Thinking Firebase is for styling
• Confusing Firebase with React state
• Assuming Firebase speeds up compilation

2. Which of the following is the correct way to initialize Firebase in a React app?

easy

A. import firebase from 'firebase'; firebase.init(config);

B. const app = new Firebase(config);

C. import { initializeApp } from 'firebase/app'; const app = initializeApp(config);

D. firebase.initialize(config);

Solution

1. Step 1: Check Firebase v9+ syntax

   Firebase modular SDK uses initializeApp from 'firebase/app'.

2. Step 2: Verify correct import and call

   import { initializeApp } from 'firebase/app'; const app = initializeApp(config); correctly imports and calls initializeApp with config.

3. Final Answer:

   import { initializeApp } from 'firebase/app'; const app = initializeApp(config); -> Option C

4. Quick Check:

   Use initializeApp from 'firebase/app' [OK]

Hint: Use modular import initializeApp from 'firebase/app' [OK]

Common Mistakes:

• Using old firebase namespace import
• Calling non-existent init or initialize methods
• Creating Firebase instance with new keyword

3. Given this React code snippet using Firebase Firestore:

import { useEffect, useState } from 'react';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

function UsersList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    const db = getFirestore();
    getDocs(collection(db, 'users')).then(snapshot => {
      const list = snapshot.docs.map(doc => doc.data().name);
      setUsers(list);
    });
  }, []);
  return <ul>{users.map(name => <li key={name}>{name}</li>)}</ul>;
}

What will this component display?

medium

A. A list of user names from the 'users' collection

B. An empty list because useEffect has no dependencies

C. A list of document IDs instead of names

D. A syntax error due to missing async keyword

Solution

1. Step 1: Analyze data fetching

   useEffect runs once, fetches 'users' collection documents, maps to their 'name' field.

2. Step 2: Analyze rendering

   Users state is set to list of names, rendered as list items in <ul>.

3. Final Answer:

   A list of user names from the 'users' collection -> Option A

4. Quick Check:

   Firestore docs mapped to names displayed [OK]

Hint: useEffect fetches once, maps docs to names [OK]

Common Mistakes:

• Thinking useEffect needs async keyword directly
• Confusing document IDs with data fields
• Assuming empty list due to empty dependency array

4. What is wrong with this React Firebase code snippet?

import { useEffect, useState } from 'react';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

function Items() {
  const [items, setItems] = useState([]);
  useEffect(async () => {
    const db = getFirestore();
    const snapshot = await getDocs(collection(db, 'items'));
    setItems(snapshot.docs.map(doc => doc.data()));
  }, []);
  return <div>{items.length}</div>;
}

medium

A. getDocs requires a second argument for options

B. useEffect callback should not be async function

C. setItems should be called outside useEffect

D. useState initial value must be null

Solution

1. Step 1: Identify async useEffect issue

   React's useEffect callback cannot be async directly; it should call an async function inside.

2. Step 2: Confirm other parts

   getDocs usage and setItems inside useEffect are correct; initial state as empty array is valid.

3. Final Answer:

   useEffect callback should not be async function -> Option B

4. Quick Check:

   Async function inside useEffect, not async callback [OK]

Hint: Never make useEffect callback async directly [OK]

Common Mistakes:

• Making useEffect callback async directly
• Thinking getDocs needs extra arguments
• Believing setState must be outside useEffect

5. You want to build a React app that shows a live list of chat messages from Firebase Firestore. Which approach correctly updates the UI in real-time?

hard

A. Use Firestore's onSnapshot listener inside useEffect to update state on data changes

B. Call getDocs repeatedly every second inside useEffect to fetch new messages

C. Fetch messages once on component mount and never update state again

D. Use Firebase Realtime Database instead of Firestore for real-time updates

Solution

1. Step 1: Understand real-time update methods

   Firestore provides onSnapshot to listen to live data changes and update UI immediately.

2. Step 2: Compare options

   Use Firestore's onSnapshot listener inside useEffect to update state on data changes uses onSnapshot inside useEffect, which is best practice for real-time updates in React.

3. Final Answer:

   Use Firestore's onSnapshot listener inside useEffect to update state on data changes -> Option A

4. Quick Check:

   onSnapshot enables real-time UI updates [OK]

Hint: Use onSnapshot listener for live Firestore updates [OK]

Common Mistakes:

• Polling with getDocs wastes resources
• Fetching once misses updates
• Confusing Firestore with Realtime Database necessity