CRUD Operation with Firebase Firestore in React Js || Insert Update Delete Get data from Firebase

hello everyone in this video I'll show you product operation with Firebase file store in react.js here I'm going to add a first name demo here this is last name and I'm going to click create here it is added and yeah here I'm going to refresh this page here we have detail inside detail we have one ID here we have demo and data this is f and f name and this is your name okay and I'm going to add more data this is one and this is two means and I'm going to click create here another one is added and I'm going to click edit here demo one and this is data one okay here I'm going to click update go to Firebase here it is updated demo one this is data one this is one and two okay and number two delete this one and two okay I mean this first one yeah first one is deleted go to Firebase here we have only one ID and demo one and data one is present okay yeah let's start open firebase.google.com and click get started before that you need to create your own account here click this add project you can give your project name this is Firebase YT and click continue I don't want any of those and click create project yeah click continue here our project is created Firebase YT okay number two click this web because I'm going to connect this Firebase into web app here you can give nickname for that project Firebase it and click Register App need to install Firebase so copy this and install in your project in my case I already installed and after that I'm going to copy this importation and here I already created a react project and also I'm running this project okay I'm going to use these three files here I'm going to design and I'm going to add a Firebase details here and I'm going to use this style okay and yeah inside config file I'm going to paste that in in size app and I'm going to copy this till this and paste it here and after that I'm going to import Firebase and file store import Firebase class fire store and Moto create a git firestore okay I'm going to use this copy this and after that create accounts this is data days and here replace that get Firebase sorry five store I'm going to copy this and pass here and I'm going to export this okay export and I'm going to copy this and save this file and go to Firebase files store yeah I'm going to put the database here import sorry import paste that database from dot slash this config file okay before that we need to create two input fields but here I'm going to create on change and before that I need to create a two State one is for first and first name another one is for class name okay const here F name set F name sorry you state let's say it's empty I'm going to duplicate this for one more time this is your name okay and yeah these two and yeah I'm going to copy this and here go past the event here and I'm going to paste that set F name here I'm going to pass e dot Target Dot value and yeah I'm going to pass a value here this is f name okay and I'm going to duplicate this for one more time this is real name this is also okay and after that I'm going to create a button this is create and I'm going to create on click for this share to create a handle click or a handle create I'm going to copy this and here the sync Arrow function okay paste that function here I think yeah now you need to create a database name I mean this name detail like detail okay you can give one here launched this is value here I'm going to use a collection okay here inside the collection I'm going to pass this database okay pause that and you can give your database name here demo okay demo and I'm going to copy this inside create now wait we are going to use add top to I mean insert data from Firebase okay here I'm going to pass that this value and our first name and last name okay inside object you can give name and pass this okay and real name and your name okay or you can give name one this is name two okay save this and go to browser I'm going to refresh this page here we got two input Fields yeah before that you need to complete this Firebase setup continue to console inside build choose Firebase database click create database starting with the production mode and click next and yeah enable here our database is created inside rules we are going to allow read write is true okay and click publish here our changes is published and again click data and inside our project I'm going to give one and this is two and click create move into Firebase here I'm going to refresh this page yeah we have database name demo and 190 yeah first name name one and name two is created yeah successfully we insert the data in the Firebase and I'm going to get this data before this Hamilton create use effect yeah I'm going to create one function inside the use effect here Moto use update into get data from that base get doc docs okay this is used to get data from Firebase we need to pass this value because this is our database detail okay and after this I'm going to copy this and I need to call after this and I'm going to create one state this is pal and set well to state this is some array okay I'm going to create that cons this is DB value Moto who's this DB value in this array copy this and paste it here and EB Val before that I need to map this okay dot docs Dot map because I want to push one by one in this array here I give dog and to create a object to split this dock okay talk dot data I mean inside this doc dot data we get first name last name okay I'm going to pass the ID here here doc dot ID okay and save this yeah number two map this value I mean Val after this I'm going to paste this well dot map here values okay I'm going to create a div and this is H1 inside H1 I'm going to copy this values here values Dot name one and I'm going to duplicate this for one more time this is name two okay and save this go here yeah we got a value from Firebase this one okay Moto add one more okay here one one and this is Now to create here values added okay and number two update and delete this value okay so we need to first I delete the value here to create a button this is delete and click handle and delete val dot ID I mean values dot ID and I'm going to copy this and after this const again I think sync Moto git ID here yeah inside delete I'm going to use a dock this is Firebase symbol function it's imported here and I'm going to pass a database details okay this one this config details okay I'm going to pass this inside the dock and also our database name is demo this one copy this and paste it here and we need to pass this ID data ID and here okay advanced delete Val and how to copy this after this create delete I mean I'm going to use this delete block this is also a 5A symbol function this is used to delete it okay save this and before that we need to add a weight yeah save this I'm going to refresh this page here go to click delete here yeah data is delete here we have only one ID and data I'm going to delete these two I mean this one here our database is empty okay I'm going to add and click create and databases I mean data is inserted I'm going to update this data okay so we need to create a button this is edit edit and this is edit okay and I'm going to pass ID and values dot M1 and values dot name to remember to copy this and after this I'm going to create const and here I'm going to get okay here ID name on okay name one and name two and yeah we need to set this values in state we have F name and last name and we need to create one state for a idea for ID okay inside edit I'm going to set this three values in State okay so here I'm going to set name copy this and paste it here I'm going to duplicate this for one more time this is L name okay I'm going to set this edit value in this state okay in this state and this is 2 and we need to set the ID in one state so we need to create one state to set ID here ID and copy this and paste it here I'm going to pass ID here and we need to create a update button here I'm going to change this create to update this is update and I'm going to copy this and after this I want to create on state for update value okay I think yeah and number two create one state two show the update button okay launched so say it so okay initially it's false and copy this yeah first I'm going to copy this initially we are not going to show this update button okay if it is shows false means we are going to display this else else this okay save this here initially it's showing create when user click here did here value centered and you need to show the update button here so we need to inside handle edit we are going to set show us true save this I'm going to refresh this page here if I click edit here it's showing update button okay and if I click I mean type something and if I click update we need to update this data okay so yeah inside update I'm going to create const this is update data here I'm going to use doc and database I'm going to pass a database name our database name is demo copy that and add here and you need to pass this ID because we are going to update this ID okay and paste it here after that I'm going to use await here I'm going to use update dock this is used to update our data this is also a Firebase symbol function here it's imported here and I'm going to pass this value I mean this and I'm going to pass the one change value okay here I'm going to pass name one is this F name okay where it is yeah it's here you want to pass name to us L name this one okay this is cell name I'm going to save this go to browser and to update this value click edit here values change here I'm going to change this to this and click update here values updated but this we need to show after update we need to empty this field and we are going to show a create button here okay so we need to copy this and after edit I mean update we are going to change this to false we are going to display a create button here and also after update we are going to empty string for this first name and last name and save this and refresh this page here to add and something and click create here values added to edit this here to remove and this one update the value is updated here update button is changed to create and this fields are empty okay and I'm going to delete this here value is deleted something I'm going to add and then I'm going to click update I mean create after that we are going to we need to empty this Fields okay that is I'm going to copy this paste it here to edit this too one and update this and to change this to one and this is two okay I'm going to update update this I'm I'm going to browser refresh this page here it's loading here we have two IDs this is one and two this one okay and I'm going to click this here it's showing one and two in number okay we have stored this values this is what I try to tell in this video I think this video will help you bye

Channel: Coding Comics

Views: 3,115

Keywords: crud operation with firebase firestore in react js, crud operation in react js firebase, crud app in react js firebase, crud react js firebase, firestore database react, firebase react js crud, firebase crud with react, insert update delete firebase firestore in react, crud with firebase react, react crud with firebase, react crud app with firebase, react with firebase crud operations, insert data in firebase react, update data in firebase react, delete data from firebase react

Id: ukZr_cRxeac

Length: 20min 47sec (1247 seconds)

Published: Sat Jun 10 2023