Crud operation with firebase in react js

React with Firebase

1. Install firebase using command

npm i firebase

it will include all the stuff need to connect with firebase firestore database.

After that go to firebase website

2) Register your App

Add firebase SDK in you project

// Import the functions you need from the SDKs you need

import { initializeApp } from "firebase/app";

import { getAnalytics } from "firebase/analytics";

// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

  apiKey: "AIzaSyCCrfZjlVpghgvbX0MTfIydQnbFtkOZvjUw",

  authDomain: "crud-reactjs-92ddb.firebaseapp.com",

  projectId: "crud-reactjs-952ddb",

  storageBucket: "crud-reactjs-92ddb.appfspot.com",

  messagingSenderId: "13233136550278",

  appId: "1:132331350278:web:bdf26e1565475bd5d75429687",

  measurementId: "G-VCB51B4RC4C3"

};

// Initialize Firebase

const app = initializeApp(firebaseConfig);

const analytics = getAnalytics(app);

3) Create Database.

1. Go to firestore and create database.

2. Choose the location of your database.

3. Go to rules if needed to change.

allow read, write: if true;

Note : firebase don;t have sql schema database .it is like mongo db and dynamo db. here we have collections similar to tables and document is the record or you can say one of the entry (single row record of the collection).

4) Now connection to you database.

first you need to import method

import { getFirestore } from '@firebase/firestore';

Than you need to connect.

// now connect to your firestore

export const db = getFirestore(app);

5) Read (fetch) record from database.

So first we need to create reference to which collection on database we are going to fetch.

1. first import the db

import {db} from './firebase/firebase-config';

2. call method collection it accepts two variable first which db, and second with collection.

  const usersCollectionRef = collection(db,'users');

3.Complete code of fetching data

import React ,{ useState, useEffect } from 'react'

import { db } from './firebase/firebase-config';

import { collection, getDocs } from 'firebase/firestore';

function FirebaseCrud() {

  const [users,setUsers] = useState([]);

  const usersCollectionRef = collection(db,'users');

  useEffect(()=>{

     const getUsers  = async () => {

      const data = await getDocs(usersCollectionRef);

      setUsers(data.docs.map((doc) => ({...doc.data(), id:doc.id}) ));

      console.log(data.docs);

     }

     getUsers();

  },[])

  return (

    <div>firebase-crud

      {users.map((users) => {

        return <div>

          <h1>Name: {users.name}</h1>

          <h1>Age: {users.age}</h1>

        </div>

      })}

    </div>

  )

}

export default FirebaseCrud

6) Complete crud operation.

import React ,{ useState, useEffect } from 'react'

import { db } from './firebase/firebase-config';

import { collection, getDocs, addDoc, updateDoc, doc ,deleteDoc } from 'firebase/firestore';

import { async } from '@firebase/util';

function FirebaseCrud() {

  const [users,setUsers] = useState([]);

  const usersCollectionRef = collection(db,'users');

  // for new user

  const [newName, setNewName] = useState('');

  const [newAge, setNewAge] = useState('');

  useEffect(()=>{

     const getUsers  = async () => {

      const data = await getDocs(usersCollectionRef);

      setUsers(data.docs.map((doc) => ({...doc.data(), id:doc.id}) ));

      // console.log(data.docs);

     }

     getUsers();

  },[])

// create user

const createUser = async () => {

  await addDoc(usersCollectionRef,{name:newName,age: Number(newAge)});

  setNewName('');

  setNewAge('');

}

// update user

const updateUser = async (id, age) => {

  const userDoc  = doc(db,'users',id);

  const newFeilds = {age: age+1};

  await updateDoc(userDoc,newFeilds);

}

// delete user

const deleteUser  = async (id) => {

  const userDoc  = doc(db,'users',id);

  await deleteDoc(userDoc);

}

  return (

    <div>

      <h1>firebase-crud</h1>

      <input placeholder='Enter name'

      value={newName}

      onChange={(e) => {

        setNewName(e.target.value)

      }}

      />

      <input placeholder='Enter age'

      value={newAge}

      onChange={(e) => {

        setNewAge(e.target.value)

      }}

      />

      <button onClick={createUser}>Create user</button>

      {users.map((users) => {

        return <div>

          <h1>Name: {users.name}</h1>

          <h1>Age: {users.age}</h1>

          <button onClick={()=>{updateUser(users.id,users.age)}}>Increase age</button>

          <button onClick={()=>{deleteUser(users.id)}}>Delete User</button>

        </div>

      })}

    </div>

  )

}

export default FirebaseCrud