Connect React to Firebase (Firestore)

hello everyone in this video we will create a react application and then we will connect it to Firebase firestore database it's a service provided by the Google it's for free for now and to do that first thing is to go to GitHub and create a new repo you can name it anything I'm naming it because YouTube react create your repo copy the link go to any place in your computer open the command line and give clone and that's it now let's wait for the repo to be created it's created now open the directory of the parent folder try to find your project folder here it is YouTube react copy the name CD your project folder name and that's it now you're inside your project folder we're clear up the console MPX create react app because we will create a react application in Project folder it's done now we can clear up the console we will download a few packages and those packages the first one is react route you will not need to use this package actually but in any case let's download it because there is hardly any other any react project that you will create without react router though and but these two dot embm Firebase we will definitely need them so let's download these two packages it's nice now let's open the project folder in vs code so I'm saying code and Dot it's nice now let's make a cleanup a quick clean up grab everything here one two three four five accepting the index.html and delete them go to Source folder app CSS logo SVG web vitals setup test and also this app test lab everything and delete open app.js delete everything between these view tags and also these import lines and maybe you can type some random things here and that's it fjs is finished now go to index.js delete all those lines here also these web vitals that's it and go to index delete the code here I like the Boucher it's up to you whatever you like and then maybe a background color can be nice so what is all these Olive trap I'm not sure what kind of cover it is okay and open the index.html delete all those link tags all of them and this there is one more here and these command line is deleted and no script deleted and change the name you can say my app and here you need to I mean you should Define your project but I will just type something random and I think it's finished but we need to add two more things here these two script tags they will help us let me show you when you open a project when you open a website on your browser and if you have this react extension then you can see if this website is using react.js or not so this website is using VHS because as you can see this icon is active right here and when you are creating a new project this icon is again active but it's red so to overcome that red icon you should put I mean to make that red icon disappear you should put these two text there options okay I mean you don't need to think anything about them they are not relevant to this project they are optional okay so it's finished yeah now we can go to Firebase console click on ADD project type your project so I will say YouTube it's nice let's continue enable Google analytics it's no harm continue select an account default account Firebase the project is created let's continue there it is nice so click on I mean on the left panel you will see firestore database click on it and wait for it actually first we need to create an app so let's go to YouTube let's add an app this one and let's Name It We Will name it as fire store app that's nice so we want these five five bits config but for now let's go to the console and Erie is our five firestore database let's create one start in the production mode test mode you can choose production it's fine and let's check that choose the region Which is closest to you and open your firestore database I forgot to show you how you can change the rules you remember in the production we said for the right operation if false so just delete everything and leave it like that our file store database ready everything is done so click on this project settings and go down and you will see this SDK and then this file let's see so copy it copy everything here okay copy it open your code editor and inside source folder create an e-file you can name it as firebase.js or Firebase config.js I prefer seeing Firebase config paste it that's nice let me check yeah so I mean we can make our project project just like that but it's not going to be safe and I will show you how you can save your sensitive data in this case all those API keys and Etc in a DOT TMV file so to do that create a DOT EMV yeah and here inside the dot EMV we need to follow a certain invention to create our variable names make the names like this okay do not change react app your variable names they should stop it react app then make it just like that and then grab everything here paste it so I'm going to be pasting these values inside the relevant API key okay so I have copy pasted all the values here inside this dot tmb file except database URL database URL is needed when you're creating your project with real-time database not with firestore but with real-time database so in this case we can just leave it like that and that's it actually now now we need to also change this values here I mean the keys are going to stay the same but where are these people Point them to our DOT ENT file and to do that let me show you how you can do that just grab everything here and paste it there and you will be good to go exam so that's fine and if you prefer you can delete this database URL and actually that's it we are finished with the Firebase config close this close this one also now we can connect react application the Firebase and to do that we'll just copy this and paste it there so that we won't be losing too much time I will try to explain it to you so here we are importing three functions from firestore and here I have a specifically put this code here put this line here because sometimes you might face some not loud not loading error so if you face Firebase not loading error in your application then you should put this because this will make sure that Firebase config will happen before you load your application to the browser and later this is simple action I mean as you can see if you know some react yes it's very simple it's just two input Fields with a button and button is connected to this function save data to firestore to write some data to the firestore database okay and here I saved my collection but you can say anything else you can now close this and now let's say npm stuck but before that let's clean up the console and hit and start so now let's type something I will say Apple nice tasty fruit let's I mean I will try to write these two input fields to the firestore database now click on the save file store documentary in the database go to your database refresh the page and you should see your document written to firestore database here is it my collection this is the document ID this ID is provided by the file base field one example field queue is nice tasty fruit that's nice everything is nice actually yeah so now let's also create another button which this time display all those values that we have written database and again here I have written everything here so that we will not be losing too much time and let's put the button first it will add this import ant because we will need one more special function to display data from Firebase firestore so but instead of saying I mean instead of two import lines I can just use the same input okay and that's it more than that we also need to create another and variable this time it will be an array because we will grab all the documents inside firestore they are objects so we will save them inside this array but when we save them inside this array they will not be like well Json objects they will be JavaScript objects so it can be let it can be consider it's up to you and after that yeah there is this but I will show you this later so let's just grab the function which will grab all the data from firestore and maybe you can put it down here okay and here we are getting all the documents inside our collection so just put your collection name here and it's pointing to the firestore database and we are using get docs as you can see in the in the right in the right operation we are using add talks in the the get operation we are using getbox and here I have created this temporary every again you can say console left it's up to you and we are first saving all those objects inside the temporary array but before save and inside we are using this data method I mean this data is is converting that object into a JavaScript object data part of that object in into a JavaScript object so once we push everything inside temporary array then we can set we can set this set stored values every two temporary array that we can display here but let me show you how we can display maybe we can let's put a Break Tag here now let's create a new tag let's open some early bases here now we can grab the stored values and then we will call the map function so the first thing is like the element let's say item and the second thing is index and this I mean in the case of this map function this index will point the index number of elements inside this store valves array and then you can just go down and we can display them actually it's easy maybe another viewpack okay and one more here and here inside this give tag let's say key is equal to index and then we can put a paragraph or you can even put list elements you know like unorganized lists or organize leads it's up to you what was the name of the fields yeah field one and field two so I will say this in I will say item dot field one two column here and another curly brace we will say item field 2. and that's it actually yeah I mean the project is finished so the project 3 started let me save one more thing here I will say orange is orange fruit colors say firestore nice now let's fetch all those data inside file store and display them on this react front end you see that's nice that's how you do it and hope this was useful and if you liked the video please don't forget to like And subscribe see you next time bye bye

Channel: Soft.Tomatoes

Views: 6,270

Keywords: VSCode, clean coding, coding tips, developer tools, react.js, boilerplate, clean react.js, clean up react.js project, react, clean react folder, Firebase, Firebase Firestore, Firestore, Connect to Firebase, Web development database, Javascript, #ReactJS, #Firebase, #Firestore, #WebDevelopment, #JavaScript #CodingTutorial, #FirebaseFirestore #ReactTutorial, #RealTimeDatabase, #CRUDOperations

Id: -lAlGo5nRms

Length: 15min 42sec (942 seconds)

Published: Sat Sep 23 2023