React-Firebase CRUD Application

    // useState - Assign initial value to a variable and create a function that can be used to change value of variable

    const [tasks, setTasks] = useState([])   

    // const tasks = [] , setTasks() is the function which is used to set value of tasks

    // useEffect - Run code indside it when there is change in second arg.
    useEffect(()=>{
        someCode
    },[dependent variable])    // When dependent variable changes useEffect runs 

import { initializeApp } from "firebase/app";

import { getFirestore } from '@firebase/firestore'

// Firebase Configuration
const firebaseConfig = {
    apiKey: "XXXX",
    authDomain: "XXXX",
    databaseURL: "XXXX",
    projectId: "XXXX",
    storageBucket: "XXXX",
    messagingSenderId: "XXXX",
    appId: "XXXX",
    measurementId: "XXXX"
};

// Connect firebase to our application
const app = initializeApp(firebaseConfig);

// connect to Firestore (firebase nosql db)
export const db = getFirestore(app);

const collectionRef = collection(db, "collection_name")

import {addDoc } from 'firebase/firestore'

const saveTask = async (e) => {
    await addDoc(todosCollectionRef, newTask)   // Add new doc
}

import {getDocs } from 'firebase/firestore'

const getTasks = async (e) => {
    const taskList = await getDocs(todosCollectionRef);   // Get all Docs
}

import {updateDoc } from 'firebase/firestore'

const saveTask = async (e) => {
    const task = doc(db, "todos", id);    // find doc 
    await updateDoc(task, {isComplete: true})  // update doc 
}

import {deleteDoc } from 'firebase/firestore'

const deleteTask = async (id) => {
    const task = doc(db, "todos", id)
    await deleteDoc(task)   // Delete doc
}