Create, Read, Update, Delete (CRUD) | Firebase 10 | React 18 (Next.js)

what's up YouTube and welcome to this video so today we are performing Rod operations on Firebase using the latest react which uses functional components and hooks so let us begin so according to the latest documentation from react if you want to create a new react project it is recommended to use one of these Frameworks so these are the listed Frameworks so we are going to use the first one which is the next JS framework now let's open a new terminal let me get to the directory so CD desktop now this is the command and after that you should write your project name so Firebase using react hooks now it's asking that if we are going to use the typescript no we are using JavaScript no we will we will not use this no yes and yes and no so these are the answers that we used now before installing the Firebase it's necessary that we copy the project name and move to that location so CD and now we are at the location now npm install Firebase now we can open the folder with visual code now following a react radiation I will create a components folder inside SRC slash app and inside this component another folder for Firebase config and select components another folder for Firebase correct so now let's focus on Firebase config dot Js and now we have to create a Firebase database so for that you need a Google account search for Firebase console click this second link then click go to console if you are not signed in into your one of your Google accounts then it will ask you to sign in add project name it anything you want so Firebase with hooks continue click continue select default account create project now click continue now first of all go to build real-time database and create a database choose the location which is uh nearest to you or just leave it to United States we will start in test mode now get back to project overview and add a web app Firebase hoax or anything you like app now you get all of this configuration but even if you press continue you can get it through project settings and here is your configuration so copy all of this and paste it here we don't need the analytics for now we also need get database function from Firebase database now let's create a functional component Firebase config and we will also export it now delete this and copy all of this inside the component and we will return the get database function with the current configuration so this is our Firebase config component now coming to our Firebase quad create a new file basequad.js now we have to first specify that we are using a client component so this component is for the client we didn't have to specify that here because we are not rendering anything over here so in the Firebase right we will first import the configuration and then we will import some Firebase functions so we need ref said get update remove and chat from Firebase database then we will import use state from react so this is it now let's create the component Firebase let's create some State variables so let username and set username equals to use state and the default will be blank now we will return some input with labels so label username and input of type text and its value will be so its value will be attached to the username and whenever it will change so on change it will set the value it will use the function set username to set the value of the username e dot Target dot value so this is the way to go our value is attached with the username and whenever the on change function so whenever the input changes it will set the username so this username property will get set now let's use the BR tag and I will copy and paste it several times now we also need some buttons so button select data now let's see how it looks like so I will use the Firebase Squad in the page.js we also don't need these CSS so I will remove it and let's also remove all of this and this also and we will import Firebase quite so we will just return the Firebase correct now let's try to run this so for running a next JS project you have to type npm run Dev so control and click so all of this looks really weird and I don't want the next JS CSS to interfere with my design so I will go into the global CSS and delete all of this and you can see that after uh compiling this is the result so I have to put a letter of my CSS so let's create a file base required dot CSS Firebase Squad dot CSS now we can focus on the actual working so let's create the insert function insert data equals to Arrow function and before this I also want to create a useful function that will be is null or white spaces C sharp has this function built in but JavaScript does not so we will create it manually so it will take a value then it will make the value dot two string to apply the built-in string functions and it will return if value equal equals to null so if the value is null it will return true or if the value dot replace all this is also a built-in string function we will replace all the spaces with empty string then if their length is less than 1 then they are considered to be white spaces so it will be it will become true now I will use this in the insert data if alert fill all the fields and return so it it will not insert the data so after the validation now before using the Firebase function to write data I also need another thing which is I need to create a constraint database which will have the Firebase config so now I will use this database to set my data to the Firebase inside this I will use a ref function which will take database as the first argument and the second will be the address so the path let's name the folder customer and inside the customer we will save the data with the username so this is the first argument of the setter function now the second argument which will be an object with all of the properties that we want to save to the Firebase database so first is the full name it is easier if we keep all of the alphabet small but it's your choice so full name so all of the state names that we have defined here now let us create the second function to get the data so let select data equals to the arrow function to select the data we will create a constraint dbref which will take the reference database and then we use the get function which takes the child function and then the child function needs the DB reference and the address so the path so the same path will go and then we use the then function which will take so an arrow function if the snapshot exist then set the full name with the value of snapshot that we received from the database so the value function Dot so we are using the state functions that we defined over here to set these states and then we are using the value that we got from the Firebase and we are using the same name that we have saved our data to the Firebase so we are using the same name to get the data back so the snapshot is basically the piece of data that is saved in the form of Json from the fireway from the Firebase that we retrieve and it can be a part of the database or the in or even the entire database but usually it's just a small piece of the database so that's why it is called snapshot so we are we will only retrieve the data of One customer so we can say that from the entire database we are just retrieving the snapshot of One customer so that is why it is named as snapshot if the data does not exist then we say no data available we also have the catch statement in case of any errors so this is our select function now we can bind the functions with on click insert data on click select data let's try two of these functions so let's go to the database now if I enter amazing codewords hello one two three four and date of birth should not be like a simple text box but for now let's write whatever insert you can see that the customer data is inserted so amazing codewords has all of the data now we will change the type of the date of birth to date and let's create our other functions so creating the update and delete function is not hard uh one thing that I want to do is I also want to add validation here but only for the username because we will retrieve the data on the basis of username so and one thing I want to add is I want to add this get function to the insert function what this will do is it will first get the data of the user that we are trying to insert and check that if the snapshot exists then it will give an error stating that the user already exists try a different name and else if the user does not exist then it will write the data so now it will only write the data if the user does not exist let's copy this insert data and create the function to update data which is pretty simple you just have to change the set to update in the update function if the snapshot exists so if the user exists then we will gonna update his data otherwise if the user does not exist then we say that so the user does not exist that's why we can update the information and here we will check that if username is empty then we will say that so for the delete function it will say that the username is required to delete a user and after this it will try to get the user users data and if a snapshot exists if the user exists then it will just delete the user so for it will just delete the user so for that we will use the remove function from the Firebase and this will remain the same just that we will remove the object because it only requires the path else we will say that the user does not exist it is also good if you it is also good if you put dot dot then and Dot catch statements after using the functions so you remove so you can use it with the update function and also the insert function so now let's bind the rest of the functions on click update data on click delete data and let's check them out so now let's try to create some new data amazing coders to insert data dbref is not defined the the select data has the dbref so I have to Define it all the way in the delete in the update and in the insert function so now let's try to insert this customer edit successfully you can see that here is our customer now let's try to update the information to and one two three update data so the data is updated now let's try to delete the first customer let us first get its information select data so this is the information of the first customer now let's try to delete it so customer deleted successfully so the first customer is deleted so all of our function works so this is all for the video if you like it give it a thumbs up and do subscribe to the channel see you next time

Channel: The Amazing Codeverse

Views: 4,709

Keywords: firebase crud using react hooks, reactjs firebase tutorial, firebase with react 18 hooks, firebase with react and next js, firebase database v10 with react 18, firebase 10 with react hooks, nextjs firebase, react hooks firebase tutorial, next js and react tutorial, insert data into firebase using react js hooks, get data from firebase react hooks, react hooks next js, firebase 10 react 18, firebase 10 tutorial

Id: ZgXPqzU4F7M

Length: 26min 23sec (1583 seconds)

Published: Mon Jul 03 2023