How to Connect Firebase With React Application

hello everyone this is because from small academy and welcome to another video in this video today i'm going to talk about react and firebase we will learn how to connect our react react application with firebase project so if you have just started working with firebase and you want to connect with your connect your firebase project with react application then this is the perfect video for you so in this video i will create new firebase project as well as new react project and we're going to connect that together so let's get started at the beginning i'm gonna go to the desktop here and create a new folder to save our react project so let's give it a name once the directory is created let's go inside it and here we will open the terminal to be able to create a react application you need to have the react node everything installed so if you haven't done that you should go and watch some videos on the youtube and install all that software but if you want me to create new video on that let me know in the comment below and i will create new video on how to set up the react development environment but right now i'm assuming that you already have the react setup environment so let's go ahead and create a react project so to create a react project we're gonna use create react app command so npx create react app command and i'm going to give dot or a full star to indicate that i want to create project in this particular directory that i have opened here so click on that so once you hit the enter it's going to start creating the react application for you now it's going to take some time to generate all the required files so i'm going to skip ahead and come back once this is done okay so once the setup is done you will be able to see the following files created in your directory and here you'll see this happy hacking message that means we have successfully created our project in react so now i'll open this particular directory in my vs code so let me go ahead and open the vs code if you have other code editor it's perfectly fine but i like using vs code for the react applications so i'm gonna open the folder here so i'm gonna click onto the file and go to open folder and from the desktop i will select the directory that i have created and i will select the folder okay you can click on yes i trust the author options here if that message pop up while selecting the directory now you can see all the project files inside this explorer okay now next step is to create the firebase project so let's go ahead and create a firebase project so i'm gonna go to the console of firebase so if you are doing this for the first time then you need to have the gmail address to be able to create the uh firebase project so go to console.firebase.com and there you can select your email address and it's going to create an account for you once that process is done you will get to this page and here you can add new project all right so let's click on this add project and here it will give us an option to add the project name so i'm gonna give the project name as sample app okay and click on continue you can enable or disable this so i don't really need this analytics so i'm just gonna disable it click on create project and it's gonna take some time to create the firebase project for you okay the project is ready click on continue so now you will see this welcome page and from here we'll go ahead and start connecting our firebase project with the react project so to connect the react project we need to select this web app here click on that it's gonna again ask for the name of the application so i'm gonna give the actual name that is react demo all right so click on register app and once that registration is done it's going to ask us to install this firebase tool okay so we need to install this plugin into our file uh react application so click on copy here and go back to your project here okay so this is our project now we need to install the required plugin so click on terminal go to new terminal and from here we'll install the firebase plugin so paste the command that we have just copied and hit install hit enter and it's going to start installing the firebase plugin for us and it's gonna take some time once that is done we can proceed ahead to connect the firebase to our react application now the firebase plugin is installed now what we'll do is we'll start this project so enter npm start and once the scripts is loaded it's going to open the chrome browser here and you can see the welcome message here in the application so here you can see the logo of the react and it says uh source.js has saved to reload and so on so that means our application is running perfectly okay so now there are some steps that we need to follow to connect our firebase project that we have so firebase provides this uh step-by-step guide so we all we can do is follow this so we need to create new file and save this configuration statements okay so copy this go back to our vs code and inside the source directory i'm going to create new file called firebase.js this firebase.js file is going to store the settings that we have just copied so let's paste it here and i'm gonna delete this because we don't need these comments okay and now yeah it's giving us this app equals to initialize app firebase config so we are having this constant app variable that we can import and use in other files of this particular react project okay now at this point we have connected our react project with firebase project but to make sure it is working let's go ahead and implement some simple writing and reading uh documents of firebase from this react application so to test this what i'm going to do is i'm going to create a simple form and i'm going to insert some data into the file store okay so to be able to use the fire store into our react application first we need to enable the fire store in our firebase console and then we need to connect we need to initialize the file store here in the firebase.js so to enable the firestore let's go to our console here and we still need to click on continue to console okay once you do that it's gonna open this firebase console for us and click on firestore database once you click on this file restore database it's going to open the this welcome screen just click on create database and here we need to uh follow some rules so for now we are going to start this in a test mode because in the test mode we can just read and write the data without authentication but in the coming videos we'll implement the firebase authentication and there we will start using the production mode but for now we'll just start with this test mode all right so click on next and here you need to select the server but for me i think usually i think the u.s server is fine so i'm just click on enable but if you want to change your server location based on your preference then you can do so from the drop down menu but for me the us central is fine so it's gonna set up the security rules and so on once that is done we can use the file store so let's wait for that okay now the file store is loaded so i can enable this in my react application so let me import the file store here in the firebase.js first so to import the firestore we need to write some commands so import and we need to specify the path that comes from the firebase plugin so firebase slash file store now this command is going to get the file restore from our plugin and now we can create new variable here constant variable so that we can refer this in our project so constant file store and we will use we'll use the get file restore variable that we have given here and we'll pass the app that contains the initialization of our firebase configuration all right now we can refer this file store constant variable in our other file here now save the file and now we'll go to the source here i'm going to create new folder called pages and inside this i will create new file called home dot jsx and inside it will test our firebase script okay let's create a react function here so i'm gonna create this react function and inside this react function uh we will write the code to test our firebase database okay so let me change that to capital now i'll import this home page to our app.js so let's go here i'm gonna remove all this home and we need to import that as well so let me remove this logo we don't need that and we don't need this header as well okay now here i'm gonna import home from the content of the home is displayed in our application so let me add something here welcome message and if we go to our browser we should be able to see this welcome message here okay so that is our welcome message now here i'm gonna add some forms html forms and what we'll do is we'll insert some data into our firebase database okay so in that way we'll make sure that our connection is successful so let's add some form here okay and we'll add some label and now we'll have the button so button of type sumbit so let me actually enter the text type in quotes and it says message ref is not defined so let's define that so inside this uh home function let me create a constant variable for message ref and we will use ref here so use if you are not familiar with these uh hooks like rev use ref then you need to go to the react documentation and um read about it okay we have defined our message ref so let me fix that typo there okay message message all right now it is running so if i if we go back here you can see we have this intra message and i forgot to give the name here so let me give the type value as a save okay now you can see we have enter message and save so let me fix that typo there okay now enter message and now we can some enter some data here and we can click on save okay in our react application when somebody click on the save button we will save the data into our firebase okay our file restore database so here on submit we will call handle save method and we'll create that method here so const handle save and it's going to be of type async so we'll create some error function now whenever user click on save button it's going to uh call this handle save method and here i'm going to prevent the default so that the page is not reloaded when the user click on submit button or save button so prevent default and i'm just gonna log the data that we received from the form okay so console.log and we'll use the message reference so messagerift.com dot value okay let's see go back to our form here and enter some message hello and let's go to our console and click on save it's gonna display the message hello okay now we are able to get this message into our console now what we can do is we can connect i save this message into our firebase okay here right now we don't have any collections so let me go back here and import the firebase first so import firebase from firebase okay and we also need to import collections and add dock methods hooks okay we need to import that so add dock and we also need collections okay now here what we'll do we'll create the reference for the collections so where we want to save the data so we'll call the collection method and here we need to pass the firebase reference firebase and we need to give the collection name so if this collection name messages is not present then it's going to create that collection for us okay the new fix has typo firebase and now we can use it here okay and inside this handle say button we will save the data so i'm gonna use strike catch block so add dock and we need to pass the reference to the firebase to the collection actually so we need to pass the reference and the message that we want to pass so let me create a data map here and message and we will just get the message from the reference so we'll save that and now we'll pass the data here as a content of our documents and if any error occur we'll cache that error and console to the log so console dot log and we'll call pass the event okay so when we click on the save button now it should uh save the data but let's see we have some error here so it says import it as a firebase was not found in firebase okay so let me go to the firebase.js here and actually we need to export this so let me export the firebase first because without exporting we won't be able to use that right we'll export that okay so uh here let me actually import the fire restore because we don't have the fire base export we have fire store export right so i'll just import the fire store here and replace that with this now we should be able to use it so let me save it okay now we don't have any error so let's go to our react application here and refresh this again okay now hello world is the message that i want to save so click on save okay nothing happens because we have not uh implemented the redirection and so on now if everything is connected we should be able to see the message in our firebase console here so let me come back to the firebase console and refresh this okay now you can see we have this messages collection and this one document and that says hello world so if i type another message here hello again and save it it should add another document here so let me refresh okay now we have another document that is hello again so guys that that's how we connect the react application with firebase project i hope you are able to uh do so uh while following my instruction with me but if not if you get any error or stock anywhere let me know in the comment below and i'll be more than happy to help you and if you want this code then i will post this code in my github so you can check that link in the description as well thank you for watching i will see you in the next tutorials

Channel: SmallAcademy

Views: 39,163

Keywords: react firebase crud, react firebase tutorial, react firebase authentication, connect react to firebase database, connect firebase to react native, how to connect firebase database with react native, firestore with, firestore with react, firestore with flutter, firestore with python

Id: ad6IavyAHsQ

Length: 17min 19sec (1039 seconds)

Published: Fri Apr 01 2022