Build a Contact form using React and Firebase - Hooks, Cloud Firestore

hello everyone and welcome back to a brand new video and in this video i'm going to be teaching you how to create a contact form using react.js and firebase now basically on youtube a lot of these videos might be popping out on your subscription feed based on react and five days so it's kind of becoming famous so it would be a great time to kind of learn but besides that this is a nice stack to be in react in five years goes really well and today we're going to be learning about how to create a contact form using react and firebase so we've got a pretty looking ui here um so let me this is a demo so i'll leave a link to that in the description as well so i'll put my name in the name field and then put my email and then for a test message so i'll say this is a test message and this is the database that we're dealing with so stuff called collections and documents so once i click on submit it's gonna show me kind of a loading symbol here which is kind of disabling the button and as you guys can see it's showing alert so it's saying that the message has been submitted so if i click on ok the loading symbol has gone so as this is the first connection that we are creating the file store although it's a real-time database the cloud firestore it does not automatically kind of real time give it so you want to refresh it as it's the first collection that we're giving it because we're creating one so as you guys can see there's a collection called contacts and that's the document which has an auto generated id with all the credentials that we passed in so that's exactly what we're gonna be creating guys hope you guys are gonna be enjoying if you do enjoy make sure to leave a like on this video share it with your friends leave a comment down below if you have any questions and i will get back with you so with that said let's get started with the video so i've got a normal react boilerplate code here and then um so we're going to be having a little bit of folders here so you first of all if you're getting started what you want to do is you want to open up your terminal visual studio code or any kind of code editor that you're using you should type in mpx create react app and you want to name your app anything you want you could just say firebase contact form or anything but i do have a boilerplate code together with me if you click on enter with that particular code you would get all these boilerplate files and folders okay so inside the source folder you want to delete everything except for app.js and index.js so if i go to index.js we would have only this we don't need the service worker and all those kind of stuff and we'll go to app.js inside the app.js we've got one say a div with a class of app saying hello from app so let's npm start this let's start the server so i'll say npm start to start the server but basically there's another server going on here saying localhost 3000 so it will ask for well asked saying do you want to run your server on another i mean domain or host so on 3.3001 so let's wait for a while and check if the server's gonna be running so exactly so if i click enter it's gonna give it yes and then the server is loading up so let's put this side by side and start working i've got the code at the side so that i don't miss anything and you guys don't miss anything as well um and we could get started properly okay so i'm sorry if you guys can hear some laptop noise like my laptop kind of foils every time so okay so the first thing is in the app.js here we wanna know first of all inside the source folder we want a component folder usually this is how the folder structure works so inside the components we need a contact.js component so this is going to be one component basically don't matter about this folder structure this is just a way of kind of uh making everything look good and also be uh usable reusable so i'll type r a f c e it's gonna give everything for me so how did i get this i'm using a live extension called es7 uh yeah es7 react redux graphql snippets it's really popular it's got around 1 million downloads so that's pretty awesome i don't want that so right after that what i want to do inside of the contact.js i want to return a form instead of a div i want to return a form and inside of that form we need uh three main things so let me give a class called form and inside of this we need basic three four things which is the first one we're going to be saying contact form and i'll just put an emoji you could put any emoji or anything let me put this okay so i'll put that and right after that i need a label and an input so those are the two things that we need so first we want to get the name and then the input so for the input i'll give a placeholder saying name and we will be dealing with the state but uh in the future like a little bit afterwards let me just build a ui first and we're going to be replicating the same thing so name email and email again and here we need a message and instead sorry message instead of an input we need a text area so we want the user to kind of um import a lot of words just like this this is not an input this is text area as you guys can see we could expand it we've got a minimum height and a minimum width so that you can't actually go beyond limit okay so we're going to be dealing with that as well so i mean just for text area and inside of the text area here when we have your placeholder as well as we can see saying um message okay so um yeah so that's pretty much it for the ui let me just check how it's going so we have rendered in the app.js so let's go to app.js and i'll import this component from the component folder itself so import it from dot slash component slash contact and instead of rendering this hello from app uh i will render this component just like that and as you guys can see it's got all of the functional uh just the ui bit okay so right after that you want to create app.css inside of this source folder so let's say app.css and sorry guys so basically i don't want to focus that much on the says as i said uh if i didn't i'm sorry guys um this github repository will be linked in the description so if you want to clone it or kind of folk or comment or anything you could use this github repository i'll leave a link to it in the description down below it's got all the functionality that we're going to be adding as well uh together with the firebase so i'll copy this css let me get let me know guys because i'm not sure if you if we should kind of go with like copying and pasting the css or just to hard code the css or something so if you want me to kind of code the css next time let me know in the comments down below so inside of the contact.js we want to import the app dot css so dot dot slash app dot css because we're going out of the components inside of the source folder so [Music] okay so there's a problem here let me check okay so also for the app.js we want to import the app.css because we have a style for the app.css as well app.css so if we save it [Music] import app.css dot slash let's change that [Music] let me refresh okay so one thing i missed out was a button obviously to submit the button submit the form we don't need a button i don't i don't know why this went down uh we need a button and that button is going to be a type of submit and we are also going to be dealing with the loadings uh loading kind of feel to it and let's just say submit if i save it it's going to be right there and all the effects are going to be already applied because we had the applause yes let me add another emoji for that maybe that led some color to it yes so now we almost we are done with the ui now we can work on the firebase part of it so [Music] basically we wanna use the console of firebase so you wanna go to console.fire firebase dot and so you should go to console.firebase or google.com inside of that what you want to do first of all if you don't have any projects you click on add new project because you're going to create a new project to store all of your information so if you're not sure with what firebase is it's basically a real-time database which you could use to show to store all of your data so it doesn't you don't need to have kind of knowledge on known dodges or stuff but if you do have the uh like drive for learning all known dodgers and stuff it's definitely worth studying down dodges but if you want to get some applications up and running really quick flat business can't help you with that so i'll just name it react contact form so you want to click continue you want to uncheck google analytics and you wanna click on create project and that's gonna take you to what's called uh the console the firebase console so you will be greeted with just this and you wanna go to database and you want to create the cloud firestore you want to just check everything that they give you so you want to check everything that they give you and then you will be greeted with all the database and all those kind of stuff no let me do it um i'll see a project i'll say react contact form i don't need google analytics but you have to pay for it though so i'll click on create project so this is the loading symbol that i didn't want to get to that's exactly i didn't create the project but it's totally fine i could work on it okay so we have to work uh wait for that so until that let's create firebase.js which is going to hold all of our component level uh applications and also let's npm install firebase because we are dealing with the firebase and then we have to import it as a module in order to use it so will you say npm installed firebase that's installed so our project is ready let's click on continue and as i said this is going to be the website uh place that will be redirected with so you want to click on cloud firestore because that's what we are using there's also real time database which you could use if you want so click on create database we'll start in test mode production mode we do not need it for now so let's uh just use test mode next and next we want to wait for that a little bit as well i would recommend you guys also do this project together with the tutorial because it's definitely going to be helping you learn every single bit of what we're going to be doing because kind of this is the firebase and also pack and it is not as simple as it might be on the front end so it's pretty much done uh right now you want to go to the settings uh icon you want to click on project settings you want to get all the credentials to work with it so we are making an application for the web so click on the web and i'm going to name it react contact form we don't need firebase hosting until now uh maybe another video would be great for that and now they will give you all the credentials that you need and we'll copy the whole thing that's inside of this script because that's what we need this if you're only using the javascript for it you could use the cdn but we're using react of a library actually so click on continue to console which is going to be taking me to this page again when i click on database again and let's shrink that navigation and we copied it and as we installed firebase we could in import firebase from firebase and we could paste it and have you know 14 lines of code that's fine but it's there's another way you could do you could say firebase app equals firebase or initial initialize that so we are already initializing it without actually initializing it here so we are minusing on two lines of code that's pretty good i mean it's not a problem if you want to do the way they give you it's totally fine so after that we want to create a variable called db which is going to be the database that we're using currently we're using the cloud firestore but you could also use a real-time database but i would recommend you use your cloud firestore um so we'll say firebase app dot file store so we are initializing our appear so this is the way react actually knows that this our credentials and to store the data right here and right after that we want to be able to use this uh throughout the website throughout the code so i'll export the db variable right here and import the db variable which we exported from dot slash dot dot slash fire base and here we're going to be having all the code that we do need so if we go to contact.js first of all we need a lot of state basically you yeah you could type in it now but you want to make sure that the values that we are typing is stored in one particular place so for that i'm gonna create a three different pieces of state const name and set name will be equals to you state and right there you want to import your state as well and i want to do the same thing for email and message so email and message let's say set message and set email and then set message this is going to hold the same piece of state everywhere so for the input we want to give the value to be named and as a user changes it we want to run arrow function that makes the value that is inside the input to the value that the user is typing in so you want to get e which is going to be the event and set the name to e dot target dot value so basically we are making the value of it the state which is nothing and as the user changes it we are making it available so that as a user changes it we are setting the variable to the kind of the text that our user is typing in so if you did not understand that i would highly recommend you guys to check that yet documentation or watch some videos so the value is email for the email section and set email for the email input and we're going to do that the same thing for the text area as well message and set message to the e dot target of value so as the user submits the form we want to run a function called handler submit which we haven't created it yet but we will create it so let's say handle submit and let's get the event so we can prevent the default t dot prevent default every time does he there's a form you better do this because it's gonna refresh it if you don't and all the data that you stored is going to be kind of gone i would guess and that's not what you do so dealing with the 5s database it's really really easy what you do is db.collection which is the collection that is inside of the database so each collection is known as each kind of page you would say is known as collection and we're gonna name it saying contacts and what we're gonna be doing is we're going to add we are not going to set if we set the value there's two different ways to add or set the data in firebase you could add or set if you set it's going to overwrite the uh kind of data that is already in there so you don't want that if you want unique values such as you know user signing up you want to get all the information it should be unique for every user you want to use add not set but if you want to overwrite something such as user profile information you could use set so it's kind of going to update the name and you'll use a name or use a profile picture of each and every user that's a lot of um so explanation so let's add and inside that you want to put object sign and put name will be equal to the state name and that we have right here and we'll say email equals email and message will be equals to message so just like that we're almost done but we also want to do something right after the user has submitted the form and fibas has stored it you want to make sure that the user knows that it's done so let's alert saying message has been submitted message has been submitted and let's put it emoji sync thumbs up okay so we also want to do the loading symbol right after this so let's catch an error if there is any error in the process of adding it to the database that's alert error dot message so 5bc is going to do all the error stuff and for us we don't need to do anything so that yet the five is is going to be working so uh if i do let me check a little bit if it's gonna work okay one one thing after we do or after we do type in all the values and after we click on submit the values are just gonna stay the same inside of the input so we want to set the name to nothing and also set email to nothing and also set the message which is in the text area to nothing as well so if i do take a look now if i put my name and just put a test at gmail.com and if i said this is a test in email if i click on submit i should get an error saying the message has been submitted if i click on ok and go to the contact form so as this is the first collection as i said we have to refresh for it to kind of add the collection to the database and as we go on if you need more information so as you guys can see the collection has been added saying contacts and it's loading this specific document and as you guys can see all the data is stored but we want the loadings kind of thing to happen because we want the user to know that what he came for is actually going on so let's just say style will be equals to we are putting some inline styling and before that we want to use a state uh you you wanna do something with this state that is going to check if the user is submitting and the process is going on with the database adding adding the data okay so um let's create a state called loader and set loader initially we want it to be loading obviously um yeah we want it to be loading no we want it to be not loading because obviously the button should be filled with the color at the start so as the user submits once user submits we want to make sure that the loader is working so let's set the loader to be true after so that then is a promise so after the promise has been made let's say set loader to be false because we want the loader befalls after it has completed uh it's whatever it's supposed to do adding the data and also if there's any error let's set the loader to false because we want the loading to stop as well so inside this style we want to do some optional um we want to do some javascript here so style should be the background should be if the background okay the background should be so let's just check if the loader is true if the low if the load is true if the if it's actually loading we want to set it to ccc so we don't need that we want to set it to ccc which is going to be grey kind of a disabled uh field of view to it and or else we want to bring up the same blue that we have in the css so i'll say rgb and that button so if we do take a look and if i put all my credentials and all this stuff i'll just say test and test message if i click on submit it's going to show the disabled once i click on ok it's going to go and all the info forms are uh kind of set to the default value and we've got the second one if you go to the second document we could see tests test message and my name so that's pretty much it guys and it's really really simple uh 25 minutes and that's a lot obviously and this is really easy to do so if you're kind of kind of finding it difficult obviously you shouldn't be finding it difficult guys keep going i'm sure you will get it um if any difficult obviously you could go to the react contact form and refer to it anytime you want and that's about for the video guys hope you did enjoy if you have any questions leave it in the comments leave a like if you like love the video also share it with your friends and also subscribe to the channel for more videos follow me on twitter obviously in the description down below thank you guys and i'll see you guys next time

Channel: Shanjai Raj

Views: 26,868

Keywords: react contact form tutorial, react and firebase tutorial, firebase tutorial, how to create a reactjs form, how to make a form in reactjs

Id: RKj3OjgftXc

Length: 25min 44sec (1544 seconds)

Published: Mon Aug 03 2020