React Firebase Realtime Database Tutorial

hello guys welcome to this tutorial today i'm gonna show you how to connect firebase real-time database to your react.js application the first thing that you need to know is that you need to actually add a project in your firebase to do this you just go to the console firebase google.com and then click on the add project button and here you should enter your project name test project firebase yeah then you should click continue i don't need google analytics for this project so i will uncheck it create the project yeah now my project is ready and i will be redirected to the project page i should do three things uh the first thing is that i should click on the web icon to create a web app inside my project you can name it whatever you want my web app and just click on the register app yeah i need this information so let's copy it somewhere and continue to the console and then we should go to the real-time database section in order to just enable read and write permission for all the users because by default it just works for authenticated users and because in this tutorial we are not going to do the authentication step we will get error like this one let me show you yeah you will face with this error permission denied so to fix it you easily can go to the create database section and start in testing mode because as you can see read and read and write is false but interesting mode it will be enabled for a short period of time you also can enable it forever let me show you yeah here is my database i can check my structure here or add or remove something here and inside the rules section again i will have access to those values so i can change them directly from here yeah the application that we are going to build is a simple notif transfer app i don't know what should i name it let me just show you what it is yeah here i should choose a username for myself so i'm going to use method and connect and then for the other user for example alex and maybe we are going to have another user for the 30 and here marina yeah here we have three users now i can send a message to each one that i want for example to marina hey what's up and click on the send message it will be transferred to the marina user and here you can see message from mesut hey what's up and i can again send a message to massoud i'm fine send and here yeah you can see it it's so easy let me show you how did i build this just before i start if you are new here i make videos about reaijs and javascript and this kind of stuff if you are interested please consider subscribing and like this video in order to support me if you want and yeah let's go for our code it's my project i have one app.js file as usual i have just one component connector and i'm gonna write everything within it i actually wrote some parts that are not that much important like the ui elements that are so simple and we are gonna complete them complete them and yeah do our project so the first thing that you need to have is a config.js file in your project by the way i'm gonna publish this source code on my github account and you can find a link in the description below and you can start from this stage with me so you need config.js file and you just need to paste all the things that we copied from the firebase website yeah and inside my connector i'm gonna import config from config file and then uh we should use uh firebase oh i sorry i forgot to tell you we just also need to install two packages we don't need we don't need webrtc we just need to install firebase using npm install firebase and yeah that's it okay after you install the firebase you can import the firebase from firebase app and you also if you want to use database for example for this project we are gonna use it so we should import it in this way after you import these files you can initiate your firebase using this method initialize app and you just need to pass the config file the config values that we saved here in this file and after initializing it i'm gonna store my database in my state to have access to it later so using this.state and database sorry yeah database is going to be firebase dot database it will create a new database for us and store it here so i'm gonna add database to this section and the first value should be null what else do i need for my state let me complete it first i need my id to store actually my username it should be empty at first and i need also receiver id the user id that i want to send a message to and i also need a message that i want to send to the other user and i need message list so i'm gonna store it inside message and yeah it's same to array at first okay uh i just need to add one condition here because when my database is initialized i don't want react to re-render my component because it's a useless job to prevent that render you just need to do something like this check these state database was changed from the next state so in this case i return false it means that you shouldn't render my component if the estate database was changed yeah let me do a format yeah it's now better and yeah what else do we need huh yeah let's go for this section and here we have uh one state if we were connected we should send message otherwise we just show what is your id and in in the value i should pass let me just import all the things that i want at first counts my id receiver id what else yeah message yeah i think it's enough is that the state and i should use my id for the value of this input and when the input got changed we just need to update a state with the new value which is inside e target that value so easily we can do set state and my id should be [Music] e target value yeah and also we have a button when we click on it we will call the connect button that actually here we just want to connect to the firebase database and add a listener to our application to listen to every event which is related to me for example to receive messages from the other users how to do this let me show you first of all i need to have access to my database and my id from this.state and now i can use my database it's a synchronous so i'm gonna use await and database dot ref and i should specify the location of uh inside the json tree that i want to have access to so i'm gonna use notif and plus my id dot remove at first i want to remove everything which is written inside the notice and my id because for example i was in the app before and i stored something in the database so when i connect again i want to remove everything and use the app from scratch so the other thing is for adding a listener for every changes so again database dot ref motifs and again my id attention guys if i don't add my id to the end of the natives it will be for every user but i'm using id here to make a unique path in my database to just have access to this user data and i should use on function and the first parameter should be value and the second parameter will be a snapshot object which i can read the new value from it in this way snapshot and using an error function i can check if snapshot exists it means that it is not null so we have a value just read my native from snapshot.well you just read the well value of the change and pass it to my new object named notif and this dot set state i just want to because we actually here got a message from other user and we want to store it inside our estate in order to render it underneath my form in the my application so messages first of all i need to keep the previous values so i'm going to use this.state messages and now it's time for adding the new element which should be added to message array yeah that's it we also need another set of state here to set the is connected to true because we just need to target our application from what is your id form to send the message for using this condition here okay um let me think what is remain yeah yeah we should go for the send message to send a new message let's first access to a database receiver id message and my id from this state and here i need to write on my database again database dot ref slash motifs and again we should specify we should add the unique string for that user which is his id and we got the id from the user inside our input so use receiver id here and that's set to write data in our database we should use database ref set function and here we can store everything we want so i need to store the message and also i want to know this message is sent by home so my id what else do we need we just need to set the message input bmc so just message empty yeah this section is also completed let's go for these inputs because they are not working now for the two we should use a receiver id value and inside this section these are set states receiver id should be either target that's value just let me be crazy and copy it from here just i need to change it what should it be it should be message yeah and message yeah it works but sometimes when we usually copy they don't work i don't know why okay send message is ready we just need to render receive it message here so let's do it together this dot state why is that state we can read messages here let's write a need code yeah dot map and i can add another function render messages and the first parameter will be value and the second one will be key yeah and return a div i should specify key here otherwise i get warning from react okay and inside it message from value dot from i hope that you remember we actually created from here and we stored inside the message and then we got our message from a snapshot and we stored inside notif we added native to the message and now yeah it's time to read from from value and value dot message yeah these dot render messages yeah let me think yeah this section is ready ready i think everything is ready but most of the time when i run it in this way it doesn't work let me check it and try my chance yeah what the error is we have a json error it seems the error is related to our package json we probably messed up there let me check it yeah that's why we had that er again another error do we have another issue here no maybe we should restart our application npm start yeah it's ready now and yeah it works just refresh our tabs and let's try it method connect alex and this time jennifer yeah now i want to send a message from mesut to jennifer so jenny jennifer and hello yeah we got it and send a message from jennifer to alex bye yeah we got it thank you guys for watching this video if you are interested please leave it a like and you also can watch these videos to receive more information thank you as always see you in the next one

Channel: React with Masoud

Views: 31,626

Keywords: firebase realtime database, firebase tutorial, react firebase, react firebase database, react firebase database tutorial, react js, firebase, learn react, javascript, tutorial, web development, firebase realtime database web, realtime database

Id: kpNgSwoReWc

Length: 21min 15sec (1275 seconds)

Published: Mon Sep 28 2020