READ, WRITE, UPDATE, DELETE Data | Firebase Realtime DB v9 | React JS

what's up youtube and welcome to this react tutorial so the topic today is how we can read write update and delete data uh from firebase using react so let us begin let me open this folder in visual code so we will open a new terminal and create a new react project and dot means here so you can tell if the installation was successful when you see this happy hacking message now we also have to install the firebase so npm install firebase so firebase is also installed and we don't see any errors so it means that it's correctly installed now let me run this app so now open your browser and search for firebase go to firebase console and you need to be logged in into your google account to use this add project and let's name it firebase react continue create project and continue and follow this step that you need to create the database first create database choose the location suitable for you start in test mode now click project overview and we need to create a web app so create a web app and name it anything you like react app register app now continue to console and you can get the configuration from the project settings so the same configuration that was shown before now let us create a new folder components and inside the component firebase config and another folder in the component crud so inside the firebase config a new file index.js and this will be a functional component having all of the firebase configuration so first two import statements are needed and this comes from firebase database now the rest of the configuration and this will go inside a component start firebase and return get database which will have the app as an argument and then export default the start firebase function now inside the current folder a file index.js and import react import start firebase and we also need these functions from the firebase database so now our class component and the first thing which is the constructor props and the super props now this dot state will have some important properties so the first one is db and so this is gonna be the data that we will store in our firebase so inside the component did mount method i will update the state so set state and we will get the db from start firebase function and then the render method so now i need some labels and some inputs returned with an id of user box and value will be this dot state dot username so basically i'm binding the value of this dot state dot username to this input so whenever this dot state dot username changes it will update the value of the input and it is a one way binding that works in react but we also have to uh set the on change event otherwise this one-way binding will affect the input and it will not let us change the input i will create an arrow function so e is the event object update this dot set state which will be user name e dot target dot value and let me copy this four times now we need four buttons on click and we will create a interface function later so this dot interface this will handle the fact that what pattern is created and what functions to execute so the render method is complete now let us focus on some other methods so the interface method will receive event constraint id which will be equals to event dot target dot id and if the id is equal equals to insert button then run this dot insert data else if and let me comment them for now now let us make the insert data method and it is important to bind this interface method as it is used as an event so this dot interface equals to this dot interface dot bind this and before writing the insert method i will create another method so i am creating a method get all inputs and this will get me an object which will have a username this dot state dot user name and then what i'm gonna do is first i need a constant db which i will get from the state and then another constant data which i will get from this function i can use the set function from the firebase database which takes a reference or the reference function which takes two argument tb and the address where we want to save the data so i want to create a folder customer slash and then data dot username then we need to pass an object so full name data dot name phone number so data dot phone and date of birth now let us run this component and i didn't export this class so it is necessary that i export the class i noticed that i created the component folder outside but it needs to be inside the src and now inside the app.js so let me remove this content and we will return the tried imported from the current folder then components then grid and index which is the file now we can use our credit component save now let's run it let's come to the real-time database let me check i think i know the error yes i wrote insert insert instead of add so the id was add button so this should be date off but another thing that i want to add is the phone should be in number now save and also let us add let us add some extra method and let us also uh involve some error catching methods so then this is if the uh data is added successfully so and then dot catch now save and let us try again add data data was added successfully you can see that there is all the data the phone number is in the number form now let us write the update method so the update method works the same so we don't need to change much update function from the firebase data was updated successfully and that's it now let us also create the uh delete method so the delete method is also easy we don't need an object for the delete method change this to remove and that's it and we can extract the username right from here and pass it directly to the method now let us also make the select data method and we need a db reference for this so the reference method this dot state dot db then the same username and we use a get function and inside that a child function which will take the db reference along with the address dot then and inside this then an arrow function which will take an argument snapshot so snapshot here is an object that carries all the data retrieved from the database in the form of an object and much more info inside it so a snapshot if the snapshot exists so with an s this dot set state and pass in the object we need these properties snapshot dot well which is a function to get a property from the a snapshot then the names that we used for saving the data else no data found and we can also catch any error if it happens so now let us test our application let's fix some css so let us add a css file index dot css and so so this is the css that i wanted to add now i need to import it here so and let me also check if if there is any unfinished business so i also need to remove these comments and everything looks fine let me save this let's say that i want to update user one two three let me first get its data from the database now uh i want to update the phone number update data so it was updated successfully and uh now i want to delete the data so it still says data updated successfully so a lit a little syntax error over here 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: 28,219

Keywords: firebase 9 react js tutorial, react firebase tutorial, store and retrieve data firebase using react 17, firebase version 9 tutorial for react, crud in firebase using react js, firebase 9 crud with react 17, firebase version 9 realtime db using react js, react js, firebase, realtime database, react 17, firebase version 9

Id: 1TIVdIOIX64

Length: 17min 23sec (1043 seconds)

Published: Mon Mar 21 2022