MERN Tutorial For Beginners | Learn MERN In 60 Minutes

guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to go over the basics of mern which is a tech stack very common in the web development world um in about 60 minutes i'll try to keep it short um but it is a pretty big topic and i really just wanted to make this beginner video for those who are interested in learning the tech stack so i'll go over how to set up the mongodb cluster how to set up the mongodb database in your computer um also um how to create the back end and we're gonna finalize everything by creating a react app that um will allow you to communicate with your backend so with that in mind before we get into the video if you guys could leave a like and subscribe i would massively appreciate it because it will help push my videos to more people and it will just help support the channel we just hit 30k which i'm really really happy about so i really really wanted to thank you guys because of that so with that in mind let's get into the tutorial [Music] [Applause] [Music] okay everyone so the first thing we have to do is set up our mongodb database um and the reason for that is because mern uses mongodb as the database management system and in order to get it to work for us we need to create an instance of our database in the cloud and the way we're going to do this is we're going to be using the atlas service provided by mongodb and i'm going to leave a link for it in the description you just go into the website create an account it's free completely free you just sign in create an account with your email or whatever so when you create your account and you go into the website you'll see that um you'll find yourself in this page over here probably um it's just a page showing all the projects that you currently have set up in your your moment to be atlas um like account and um currently i have a couple but um these are old projects and if you'll probably have none if this is your first time using it so what we want to do is we need to create a new project so i'll click on the new project button and i'll give it a name in our case let's call it um mern and 60 minutes obviously this is a horrible name but just put whatever you want to put um and you can add other members to it if you're doing a project in a group but i'll just keep it like this which will be fine so we'll click on create project and it will start creating the project for us um which is good and one thing in mind is that when you create a project you'll see that it'll ask us to build a database right because we our project is empty it doesn't have any databases inside of it um you can only create one database inside of a project which is free so if you have a project you can only have one cluster which is free so keep that in mind when creating your mobile db database so i'm going to click on build a database and you should see all of these options over here the one that we're going to choose is the shared one for obvious reasons we want to keep it free especially if we're just trying to learn and explore the mongodb cloud environment as they say over here um if you're actually building something that will be used for by a lot of people choosing the dedicated one or the serverless option are very good because um you'll have faster speed and um just better control over your database so when we create this one over here we'll click on create and it will ask us some information the first information will ask us or the first thing we we can change is a cloud provider it doesn't really matter at all especially because um all of those google cloud um aws and azure are all great options i'm going to choose aws because i'm kind of biased since i really like the the amazon cloud provider so if you're interested in choosing one of those just choose i'm going to leave it as aws then we can choose a place and it doesn't really matter at all especially since it is just a beginner's project i'm going to choose the oregon one because i'm closer to it but choose somewhere near you um and it should be fine then what we do is there's a cluster tier we're going to choose the free one which is the n0 sandbox and again if you are creating you can only have one of those per project so you can create multiple clusters but you can only have one of them which is um an m0 and it can only handle um at max 100 databases inside of it and uh or 500 collections and 500 connections that won't be a problem at all especially since this is a beginner's tutorial then all of this should be fine you can give it a name i'm just going to call it cluster zero i don't really care but you can put whatever name you want you can't change so it is important to account that just put a name that makes sense for you and it should be fine then what we do is we click create cluster and after it's been created you'll see it will say your cluster is being created and it takes one to three minutes to actually um be made right to actually work now what we do now is we actually start by writing and creating our project in vs code so i had this code opened here and i created a project or a folder called mer tutorial i would just recommend creating a folder and opening vs code inside of that folder and inside of here initially what we want to do is we want to create two different folders and the reason why we want to create two different folders is because we want to separate our front end from our backend so this is a mirror tutorial so the front end will handle all the react stuff and the backend will handle all of the um like the node.js express and mongodb stuff so for now we'll just create the server and the client which is the frontend so we'll have both of these folders in our project the server one is where we want to start so how we add stuff to our and actually create stuff inside of two different folders is um currently we are we have two folders so i need to go inside of the server folder by going into my terminal and writing cd which is change directory and then in the name of the folder which is server then i press enter and now i'm inside of the server folder and what i want to do is i want to initialize an express server or an express application inside of this folder so to initialize an express application i just write npm then init like this and then i just press dash y and what this will do is it will just create a package.json file in my application and um with everything kind of already set up for us as you can see over here and this is the like the initial thing that we have to do to create our project now what we do is we start by installing the different dependencies and the packages that we want in our application so the first thing that i want is i want to install um express which is um the the framework we're going to use to build our api then i'm going to install mongoose and what is mongoose basically um mongodb is a database right and we're using it for our project so we'll have a mongodb database but in order to communicate to that database in express or using node.js we can use this library called mongoose which is very famous because it allows us to make database queries and database like actions or statements very easily so mongoose just allows us to communicate with our database in a very easy manner then what we're going to also install is course which is a dependency that is crucial for us to make a connection between our react app and our back end and then finally i want to install nodemod which will allow us to develop faster and i'll explain to you guys um what exactly it does in a second so when i press enter it should start installing everything and make sure that you're installing it inside of the server directory because i don't want to install it in the client one or outside i want to install it inside of here so as you can see it finished installing everything and we can actually start by creating our first file so i'm just going to come here to the server file folder and create a new file called index.js and this will be the entry point of our api it will be the file which we use to start our api and here is where we're going to write all the api setup and our database setup information so i'm going to start by just like importing the express library that we just installed by creating a variable called express and setting it equal to require then express like this then what i want to do is i want to create a variable called app and this app variable represents all the express um stuff that we get from the library so we will use this to do a lot of stuff including um applying middlewares um telling our api to start creating routes whatever we want and if you are not familiar with those don't worry we will go over them so i just need to create this app variable over here and if i want to tell my api to start all i have to do is i just have to say app the listen and then i put a port over here so port number since we're going to be running this locally i'm going to put the port number 3001 um because react will run on the port 3000 so we'll just keep this as 3001 and it should be fine then i want to put a callback function over here which will just run when your server starts running so if your server actually runs and everything is set up correctly it should run this function which means i'll just console log something saying like server runs perfectly i don't know whatever you want i actually never use perfectly but i'll just say the server runs and this should give us an indication that the server is running now we can test it out by opening our terminal over here and just running node then the name of the file that we created which is index.js and you'll see that um it says a server runs perfectly and the server will continue running until we kill the terminal you see i can't write anything else like i can't write any commands the server is running and if i want to stop it i need to uh right like put the on my keyboard ctrl c and we'll kill the terminal now an issue is we wanna be able to whenever we make any changes to our server restart the server so that it shows the changes right and in order to do that we can use the library that we installed called node one to make that work the the thing is the way we can do that is we come here to the scripts inside of the package.json and inside of here we add a new script called start and we just write node one index.js and what this should do is whenever we run npm start it should start node one which whenever we make any changes to our files it will restart the server and make our development environment a lot easier you'll see that if i write npm start now it's going to run node 1 our server is running perfectly and if i save the file it will restart the server which means that i can just make some changes without having to kill the terminal and run node index.js again if you're not familiar with node 1 it is widely used and i wouldn't worry at all about this but it's just a nice thing to have while you're developing now we can start setting up our mongodb connection and the way we do this is very very simple we need to come over here and at the top we need to import uh mongoose from the mongoose library so we're going to say const mongoose equals to require mongoose then what we do is we just say mongoose dot connect like this and the mongoosa connect it takes in a string over here which basically represents the connection to the cluster that we just created over here if it doesn't make sense i'll explain to you guys in a second basically what we do is this is our database it was created remember that in the beginning it was still creating well it's been three minutes so it created over here so i'll click on it and i'll click connect and when you click connect it will ask us a bunch of information um to allow us to connect securely and one thing that we can do is um we need to click add current ip address because um it will only allow us to have connection to this database if we are currently in this ip address um so i'll just click add ip address and it says an ipad just has been added to your ip access list which is perfect then um we need to create a user for our database why do we need to create a user well because we don't want people who shouldn't have access to the database in the backend or when they're developing having access to the database so we can create a user over here and i'll just call it user one two three and the password will be um pass word i'll just show you guys i'll write password one two three well makes it make this a little bit more um secure obviously i'll just i'll delete this right after i finish recording this video uh just so you guys know um so i just created these values for simplicity reasons but put better values so that your database is more secure then we're going to click on create database user and um damn it says the password is too weak okay i'll say something like um password one two three um i don't know tech for pedro tag and we'll click on create database user then it will say you'll need your mongodb users credentials in the next step we'll then click on choose a new connection method and what we want right now is we want to click on connect using mongodb compass now what exactly does this mean well obviously we want to connect to our database uh in our application over here and this is just for us to be able to write code that will be able to alter the values in the database but we want to have a way to actually see the the data in the database in our computer and the way we do this is by using this software called mongodb compass i'm going to leave the link to the website so you can download in the description but it's a very simple like a software that is created by mongodb so it is very reliable and um what we need to do now is in order to connect our database inside of the software we just click on connect using mongodb compass then i'll say i have mongodb compass um just leave it like this and you'll see that this is the string that we use now what this string represents is and the connection string that we'll put both use on the mongodb compass and on our mongoose.connect function over here so we'll just copy it like this and i'll paste it over here one change that i need to make is i need to put the password inside of here instead of this password thing over here because they don't want to put your password they already put your username but you need to change this to your password and my password was password one two three tech like this and when i click connect you should see that it is connecting and now we have access to our like database that we just created in the cloud which is amazing so now what we can do is we can come over here just put the string again inside of here and again change this to um the the name of the like our password so i'll put password like pass word one two three then um what else we need to put attack like this and there is uh only one difference which is um this over here is connecting to our mongodb compass it is a bit different to connect it to our um to our actual server so what we do is we come over here we'll click on close then then what we do is we click on connect again and instead of saying connect using mongodb compass we connect to our application and this is the full string that we want to use you see it's a bit different right um it's not like completely different but it is just a some minor changes i want to keep this password somewhere inside of this file so i don't have to rewrite it then i'm going to paste the whole string that we we just got and um then i'll change this over here to um the password that we created like this and we just save it but there's one final thing we need to do you see that it says my first database over here um the reason is that we created a cluster and this connects to the cluster but we still need to create a database for this project so how do we do that is by coming to our mongodb compass and clicking on create database then we put a name for this database in our case over here i'm going to call it mern tutorial but obviously call it something else like if you're making a i don't know if you're making a social media put social media database whatever whatever you want like it's just just for for learning but put a name for the database and a name for a collection inside of that database so what are collections well if you're familiar with um sql or any other type of database a collection is just a table um we'll have you can have multiple of them inside of our projects and the one that we're going to create is a user collection so in our project as an example we'll be able to create users so i'll create a table or a collection called users and then i'll click on create database to create our collection and now we have this database over here and with a collection called users as you can see um the thing we want is we want to basically copy the name mern tutorial and paste it instead of my first database to tell mongodb which database we are connecting to and then finally this over here should be all good and now that we have this done um we have a connection to our um database now what we want to do is we want to be able to create um collections um and models inside of our project so we did create a collection called users so we want to like set um the fields and values that exist inside of this collection so the way we do this is we come here to the server and we create a folder called models and every mongodb project will probably have a models folder and inside of it we basically just create files that represent different collections that we have in our database so for example if we have a user's collection we create a user's file so we'll create a users.js and inside of here we're going to define the structure of this model we start by importing mongoose from um or not from we'll say equal to require um and then we require the mongoose library then we create something called a schema by saying const users schema like this and setting it equal to actually i'll call it user schema because it makes much sense and then i'm going to say new mongoose dot schema like this and then we'll create an object inside of here that kind of defines all the fields and values that the schema should contain so for example in a user we might want to keep track of their name so i'll create a name property over here and um we need to give certain information about this this field for example what is the type of it well the type for a name is a string so we'll write string then um is it required or not well i want to i want every user to have a name so it must be required i should just keep it like that and it should be fine i also want to give an h so that we have the age of the users so we'll say h then the type will be well h is a number so the type will be number and we'll also make this required so required is equal to true now finally let's just add one more thing um because i always always like to add um like some sort of email or something like that i'm actually going to add um username so this is just a final field we'll give a type of string like this and required will be true as well so this is our schema each user will have a name an age and a username and it looks it looks really good so this is how you kind of define your schema you can do this as many times as you want for different schemas throughout your application and you just follow the same format and there's other properties you can use as well i would recommend just going over the documentation which they list out all the different stuff that you can add to each of your fields but now what we do is down here at the bottom we need to create a model out of this schema so we create a variable called the user model and set it equal to mongoose dot model and this model function will take in two things first the name of the collection or the name of the model and then the schema that represents that model the schema will be user schema the one that we just created and the name will be users which is the one that we have over here so we'll put users and by the way we already created the users one so we'll just like replace that one but if you um haven't created one and you're running your application um by just by doing this it will automatically create it inside of your database system so you shouldn't really worry about that finally all we have to do is we just have to come here at the bottom and we need to export this for outside of this file so that we have access to this model and we can make changes to our table or collection throughout our application so i'm going to say module.exports equals to user model and that means that now we have access to the user model outside of this file so i'm going to save this and we'll actually come here to our index.js and for simplicity reasons all of the api requests that i make will exist inside of this file so to do that all i have to do is i i can write get requests for example by writing app.get or if i want to make a post request i can write app.post this is kind of how you can write http requests inside of um express um and there's other ways of doing this if you want to use routes um to separate it throughout your files you can do that too but this since it's not the focus of the videos i won't go over that since it's a little bit more complicated um but what we want to do is we want to create two simple like requests in this api just to to get you guys going and teach you guys the basics of um express and mongodb so what are these requests well we just have a connection to our database but we don't have any way to request data from the database in the front end and we don't have any way to add data from the front end to our database well the way we do this is by creating this kind of bridges in the back end which connects which when requested in the front end makes a connection to our database and then sends back information and this bridges are called api requests or api endpoints so we'll create some requests over here and the first one we want to create is the app.get request and this request is pretty simple all it does is we put over here some sort of route that determines what it is so i'm going to call it get users as in a callback function over here this is a format of a request in express this callback function takes in always two arguments wreck and rest and reckon wrath basically means request and response um with rec we can get information that is sent from the front end and with res we can send information from the backend to the front end and you'll get more used to them as you go but um they are extremely important and we'll be using them in this tutorial so inside of here we write all the logic that we want to have for when the front end makes a request or get request to the slash get users route and what is exactly the logic that we want well basically over here is where we're going to request data from our database and in our case let's just keep it simple all we want to get is we want to get all the users as a list from our mongodb collection so imagine if in this collection over here it is full of data right now it doesn't have anything we can actually add data if we want to and if we want to add data manually through mongodb compass all we have to do is we just click on add data then insert document then you'll see this over here it automatically adds an id a random id since um each element in the collection will have an id on them all we do is we just add the information that we want for each user for example a user will have um certain name so i'll add a field called name and this is json so um you need to put quotation marks around the fields so we'll say that the name is pedro then the age is i'm 20 because that's my age then finally let's give a username i'll call it um page or tag like this and we'll just click insert data and you should see that now our database includes one user inside of it and we didn't actually have to do anything inside of our code we just manually added it to our database um through mongodb compass now now that we have one user it is good because what we want to do with the get request is we want to just return back a list of all the users that exist in the table currently and right now we only have one so we will only get one back and what we do is we need to use our model that we created to um tell it to find the data that we want so we need to have access to that model so over here at the top i'll say const user model like this user model is equal to require and then we need to get the user model that we created in the models slash users file and then what we do is with this specifically um we can basically just use this function called the find function so i'll say user model.find and you'll see that there are many options that you can actually use you can find by id you can find a one find and delete you can do many things you want technically what we want is just to use the find function because we want to retrieve all the users so what you can do with this is if you say usermodel.find and then just put an empty object it will basically return back all the documents or all the data inside of the collection and with that in mind we can and with that in mind after it returns back all the the data it will call this callback function over here and this callback function will return two arguments the first one is any errors that occur and the second one is the result from the query from the request to the database so we can basically just have the simple um syntax format which just says if there's any errors then i want to handle those errors i want to do something related to that like understand why there was an error making the request but if there was no error then i want to return back to the front end the result that we just got back from our database so how do we send data back to the front-end well i mentioned that this res over here is meant for that so the way we do this is i'm going to say res dot json and this json file or this json function over here it is used for transforming this and passing this into json and sending back um json data to our front end so i'll say rest.json result and it will send back uh the results that we got from our table and about in relation to the error what we can do is we can just say ras.json the error right send back the error so that in the front end we can see which error was returned you're wondering how do we test this out because we just created this endpoint but the only way to test it out is it really just creating the whole front end to test out if this request works well no you can actually test it out um inside of your vs code there's an extension that i use called thunderclient and i recommend installing it it's called thunderclient just install it in your vs code i'll leave the link for it in the description if you're interested and basically what i can do is i can click on new requests over here then i'll put over here um http um then two slashes localhost 3001 and the reason why i say localhost 3001 is because um this is the link to our api this is where our api will be running in our computer and then if i want to make a request to the get users um endpoint that we just created we need to make sure that we're making a get request so it is a get request as you can see over here and we need to make sure that we're making a request to the slash get users route so i'll copy this and put it at the end over here so we'll be making a request to this and if it if everything is working what should happen is when i make this request over here it should return back success and as you can see it returns back the data from our database which is amazing it means everything is working perfectly if there was any errors you can see for example if i don't if i make the request to the wrong endpoint it will just say that there isn't um it didn't find any requests with the given um route which is slash get so there was no request with that endpoint so i'll just say get users which is the one that works and you should see that it keeps returning back the data from the database which is amazing now that we created our get request let's create our post request which is a request to add data to our um to our collection to our database so to make the post request we're going to come down here at the bottom and we're going to say app dot post and we're just gonna put another route um name for example we call the the get one get users we're gonna call this create users or create user makes more sense then we'll use the same syntax by using rec res over here and um creating a callback function to this request now in the previous one we didn't use the rack but we used the rest in this one we're going to be using both the reason why is because i want you to picture this in the front end we're going to have some sort of form which the user can put some data in like their name their age and their username and then i want to receive that data over here so that then i can use that data to insert it inside of our database well how do i get that data from the front-end well when you make a request from the front-end you can pass an object so like an object like this and the name of that object is called the body so the body will exist inside of this rack variable over here so what we do is we assume the the front end will send um some sort of body object and we'll call it user so we'll say user is equal to rec the body so this over here represents the data that we want to insert in our database and we will be sending this from the front end then what we can do is we can just come over here and in order to add um the data to our model or to to our collection we actually need to create a variable called new user and set equal to new um user model which is the the model that we have and then over here we just pass the object that we created that we want or the user that we want to add which is this over here now when we do this um we have to come down here at the bottom and we need to say that we want to save this new information well to do that we can only do it by making this an async function because most of this operations are all going to be async so i would always recommend making the functions inside of here asynchronous so that when you come to for example adding your data or updating data or deleting data you can do something like await new user dot save which is a function that exists in mongoose now this is a very weird syntax especially in the beginning and i do recognize that but um just practice by creating multiple um endpoints multiple routes and requests that in your api and just know that remember to create a new user you just say new user model pass the data that you want to insert into the the database and then say await and save that data finally when everything is done when we've added we just want to return back to our front end because we always need to use the res variable because we need to send back something in a request and all we want to send back is the new user that we created and the reason for that is because um we won't be using this data but um we just send it send it back so that we know we're actually getting the the correct um information in our in our backend so now that we have this endpoint done let's test it out similar to what we did here in the in the this one that we created the cat one so in order to test out a post request we change this to post and we also change this to create user because that's the one the name that we gave so create user then what we need to do is we need to come over here into our body and as i mentioned you need to pass a body from the front end so since we're simulating a request we pass it over here as json like this we just add some sort of json and i'll zoom out a bit just so you guys can get a better view of this but basically we just need to pass the data in the json format by giving it a name so let's call this person json then the h let's make json 35 then the username and the username will be json123 well this is fine this is the body so when we say wreck.body over here we should be getting this object over here now there's an issue this is json right and we want to have it as an object well so we need to parse the json but we don't need to do that manually because express allows you to do that by just coming over here and saying app like over here and saying app dot use express dot json if you don't do this then any requests that involve the body will give you an error so you need to do this or else it won't work so now that we have that done we can actually test out this request by clicking send over here and you see that um the status was okay which means it might have worked and we get back the data that we sent this isn't a confirmation that the data is in our database to see if it is in a database we just come to the mongodb compass we refresh this and you should see that json now is in our database which means that it is working we added a new user directly from our api now this is basically it for our backend because we created our two endpoints over here and we just need to find a way to connect them in our front end using react now the react part will go a little bit faster because um it will i won't be worrying about like appearance or anything like i don't care how my react type looks all i care about is being able to make requests to this api using react so in order to do that we need to before come over here and import something called course from the course library so require course and we installed this in the beginning if you if you remember this is basically go this is basically going to allow us to connect this api with our react front end and without giving us any errors that's all you have to worry about course in the beginning just know that you need to do this or else it will definitely give you errors so just say app.use course and import the library and this should fix all the errors that would emerge if you didn't do that so this is basically it for the back-end so we can just close this and come to our client folder and start developing our front-end okay so at this point i just want to point out that it's more than 60 minutes so um i definitely didn't uh so at this point i just realized uh it is currently more than 60 minutes so i realized that i wasn't able to teach you guys in 60 minutes and it's fine um i'll just say that this whichever like time it takes for me to to finish this will be the the length of the video but with that in mind let's start working on our react part of application so in order to do that what we want to do is we want to open up our terminal and open up a new tab in our terminal um and the reason we do this is because one tab will be running our server and the other tab will be running our react server so there's two different servers the front end and the back end um so for the front end what we want to do is we now are in our like outside directory we want to change our directory to go inside of the client folder so cd client and you can see that now we're inside of our client folder and in order to run a react app inside of here we need to do something similar to what we did with the server but we need to run the command npx create react app this is the command that creates a react application a boilerplate application for um that the handles react and it's going to generate the files for us so with the react part of the application it's going to be pretty simple in the sense that we won't be installing anything crazy like we were with um our ex node.js and express um part of our application um it's all going to be simple react the only thing we'll be installing is a package called axios and i'll just open up my terminal here it's finishing installing i'll be back in a second when it finishes okay just finished um so i'll just install by running npm install um axios and axios is a library that allows you to um basically allows you to make api requests um very simply without having to use the fetch api that exists inside of um javascript naturally so it's a library that allows you to make api requests in a very simple manner so now that it ha it is installed what we want to run is we're going to run npm start and what this should do is it should run our react tab so that in this browser over here it should open up our local host 3000 and it should open up our application and we should see a simple page running this so this is just what it comes with when you run create react app but what we want to do is we want to just come to our source folder and delete delete a couple files we want to delete the setup tests the logo the index.css and the app.test.js because we won't be dealing with them especially in the beginning i'll move them to trash then i'll come to the index.js and i'll delete this import statement because we just delete the index.css so there's no more file to import and then we're going to come here to our app.js and i want to start from the beginning so i'll delete everything inside of here including this logo import statement and it should be fine we should just see now if i refresh my page over here um a simple web page that is empty which is perfect and we can start developing our front-end so what exactly do we want to do with the front-end well i'm not going to be writing any css because there's no reason for it it's just going to make this video unnecessarily long and it's not the point of the video the point of the video is setting up a marin application so in order to do that we want to test out our two api endpoints that we created which were the the import for getting a list of users and the endpoint for creating a new user well how will we do that well the first thing i want to do is test the endpoint for getting a list of users and in order to make this work i'll just basically i just want to display i want to have a a div over here um i'll give it i'll even give it a class name just so we can get an idea of like a structure of the website but this div will basically be the users display and inside of here we're going to display each user and their information in uh in the list manner right so how exactly we would we make this work well to make this work we need to make an api request to our back end and then we need to store that data inside of a state so i'm going to create a state by coming over here and say import from um react and i want to import a hook called the use state hook if you're not familiar with the eustate hook i have a video where i go over all the hooks that exist in react some of them will be more complicated some of them will be more simple um but the use date hook is extremely important and it is fundamental that you know before trying to work with any full stack application so i would recommend checking that out and what we do with the use state hook is we're gonna come over here and we're gonna create a state which is going to be a list so its initial value will be an empty array and this list will be just um called list of users and then we're going to create a function that is used to alter this state so it's going to be set then list of users and what we need now is we need a way to when someone enters the website when someone refreshes the page or goes to this url we want to automatically make an api call to our back end and populate this state with the information right because for example if initially the this list was just like um just a list with a single user we can give it an idea of one name of pedro um age of 20 and i think the last one was username and the username will be um i don't know page or one to three then what happens is now our state contains only one user and what we want to do with this is inside of of this div we want to grab the state and map through each value of this list now the map function will basically run through each element of the list and in react what we can do with this is we can basically create a function that returns some html for every element of the list so technically we can just say that each element in the list will be called a user and i want to return here uh some sort of div for each user which will contain the information about the user we can even divide those informations um by using some header tags so i'll say that for the name for example we'll just say name is equal to and we can directly add javascript inside of here so i can just say user dot name and then for the age i can do the same thing by saying um user dot h and i'll just pass age over here and we can do the same thing for username now this is a very common syntax in react what happens is it will just look through the list for each user that currently exists in the list it's going to create a new div with all this information and populate these values with the correct value for each element right now we only have one user because we just like pre-populated um as an example a fake user and if we save this you should see that it actually works um it is displaying the information but what we really want to do is instead of pre-populating this we want this to be empty and we want to make the api call as we refresh this page or as we go into the website and to do that we need another hook called the used wrap hook and or no no not the user they use the fact hook sorry about that and down here the user fact hook is basically just a function that is going to run immediately when the website is loaded so it's the first thing it's going to run when the website is loaded it's going to be whatever we put inside of this function so the syntax is very simple we just say use effect then we create a function inside of here and at the end over here we just pass um a list an empty array and if you're not familiar with the syntax again i recommend watching that that video where i go over all the hooks because i go over what this is but basically all you need to do to know is that inside of this use effect i'm going to make an api call to my backend and here's where axios come into place because i'm going to import axios from the axios library and axios it has a very nice syntax where if i want to make a get request for example all i have to do is i just have to say axis.get then put the url to my api or to the endpoint which we know the the the url because we've been working with it if i go to thunderclient which we've been using and i just copy this url over here but instead of being create user we want to get the get users um endpoint if i just copy this i can just paste it over here and this is the endpoint for our api it's where it's running this is like this because our api is running locally but if it's running on a website this would be the url to the website right to the server and get users is just the end point that we want to make our get request and what we can do now is after this api request is done we want to get the data so this will return the promise and i can just say dot then and instead of here i'll get the data the response from this api request so if you recall in our back end we keep saying through to for every um for every request we say response.json right so this response is going to send data and we're going to catch that data we're going to get that data in this responsive variable over here so whatever we send from the backend we're going to receive in this variable over here and to access the data we just have to say uh something like response dot data this is how we access the data from the api request so technically we're gonna get back the list of users so what we can do is we can set a list of users equal to the response.data so then now when we make this api request it's going to set the list of users to whatever we get from this api request i'm going to save this right here and we will see if it is actually working and we can check to see if this is working by coming here to our website and refreshing the page and if it's working you can see that our data is being displayed perfectly in our screen now obviously it is super ugly and uh technically we only have two two pieces of data we only have two users in our database um but it's fine uh i wanted to give you the tools to make this work but you guys can make it look better on your own because the hard part about this is not making it look good it is actually setting up everything so that it is working in the back end and in the front end so that you have a good full stack application now this is the basics of making a get request but how would we make a post request because we want to send data from our front into our back end to create a new user how can we do that well what i want to do is i'm going to create a div over here straight up and and what i need to do is i need to create some inputs that we're going to be using in the website to um for the user to input some data and send it as as a form right so let's create the inputs i'll create an input over here and this input will be of type text and what i plan to do with this input is i plan to this one would be for the name so let's put a placeholder called name and i'll create two more inputs for um the age and the username so the age will be of type number and we'll say age and then the other will be of type text and we'll say username now we should see the three inputs appearing here in our screen the user can input information so that we can send it to the backend but currently it's not doing anything we do have to add some functionalities to it but before that we need to add a button which when you click on it it will say it will actually send the data so we're going to say create user and this will be the button that we click to make the api request to send the data well what we need to do is we need to create some sort of function up here that will be called when we click on that button so i'm going to call this function create user and over here we're going to have some sort of um ax use request some access post request that is made when the button is clicked so i'll just say on click on this button when this button is clicked i want to call the create user function but the thing is um we're just going to set up the basics of this access request we're going to say axios dot post because it's a post request then we're going to put the url for our post request which is this one over here but instead of being get users it's going to be create user um which is how we called it in the backend then we're going to say dot then um if there's any response which in our case we really don't care about the response right because it's just a post request we're just creating and adding some users to the database um we'll just alert a message over here saying um success right i'll just i'll just say like user creative and what will happen is we'll add the user to the database um and then if it is if it works out we'll just alert a message saying user created the reason why we're not touching on the response is because we're not we don't care about the response when um when like um we create a user because it doesn't really matter we do care about the response because we're on the get request because we're sending data back but with the create user we really don't care about the data that we're getting back we only care about the data that we're sending to the backend now there's a bit there's a difference um if you recall for the post request we we send some data to the backend through an object called the body right over here i mentioned that in the post request we need to assume that the the person making the request will send the user information an object including the name the agent the username through the body well how do we do this in the front end well to do that all we have to do is we just have to pass an object over here which is going to represent that object for the body so we need to pass some sort of object that is going to include the name or some sort of name value some sort of age value and some sort of username value well currently we are not getting that information from those inputs so what we need to do is we need to find a way to get whatever the user wrote in this input and put it over here so that we send that information through the request so the way we do this is we create some states that are going to hold that information so i'm going to create a state for each of those inputs so name and set name and this will be a a string like this then i'll create one for the username and one for the h so age and set age and age is a number so i'll start out as zero and then username and set username like this and then it will also be a string now what we do with the states is um when when there's any changes to the input we want to detect that so whenever there's any change so on change whenever there's any change or someone wrote write anything in the input we can call a function like this and this function we can grab the value of the input so we can get whatever currently exists inside of the input by accessing this thing called an event and we can just set the state so this is the name input we can set the state name to be equal to whatever value exists inside of the input by saying event dot target dot value this is a very common thing you're doing react um to ou to get the data from an input so we're going to do the exact same thing for the other inputs but instead of being um name it will be set age because this is the um the age input so set h and we'll do the same thing for the username as well by coming over here and just pasting it as well and changing this to such username like this now when we say this it should be fine we should be populating this states with whatever values the input are like whatever values we are writing on the input over here um so what we just need to do now is we just need to pass those those states over here so name um we're going to pass the name state age we'll pass the age stage and username will pass the username state now a tip i'll give you guys is um whenever you have an object that the key is equal to a variable with the same name so like the key is name and the name of the state or the variable is name we don't need to say name is equal to name we can just say name like this and we'll do the same for age the same for username this is just a little thing that you can do whenever you're working with objects like this um in my opinion it makes it look better um but basically this means it is working now we need to test it out how do we test it out well we'll come over here we'll refresh our page let's try to create a new user currently we just have jason and pedro i'm gonna add um to our thing someone called paulo of age 21 and username will be orb less whatever that means then we're going to click create user and we saw that we have user created now this means that our api request worked so it means that we sent data to the backend and we made a request for the back-end now did it actually add the user to the database well to check that out let's just refresh the page and make a get request again if we make a get request again now it includes paulo which is amazing now you might be questioning well whenever you create a new user do you always have to refresh the page well it depends it's uh it depends because if you want to to to query the data if you want to get the accurate data that is in the back end every time you click on a button you technically need to make a get request every time to refresh the data in your page but there's a little work around for this which is um we can alter the list of user state directly so over here after we make after we add the user instead of just saying user created we can say set um a list of users and we want to add the new user that we're trying to create to the end of this list so we'll just say we want to set the list of users to be whatever existed in the previous list of users so the syntax just means i want to set this equal to an array with everything inside of list of users plus whatever i put over here and what i want to put over here is the object or the user with the name equal to name or just this body that we passed as the request so just the user that we just created right i'll just copy this and paste it over here and when we save this you should see that when i add a new user so i'm going to add a user called and i'll just zoom in so you guys can see it better if i add a user called um colin of age 56 username collin123 and click create user the column user was now added to our thing and we can create multiple users i'm going to create someone called leo of age 190 1980 um and i'll call this person leo zalo and click on create user and the user is over here as well if i refresh the page the users will continue here because they were also added to our mongodb database let me refresh it so you can see all the data exists inside of here now this is basically it um i really just wanted to go over the basics of creating your first mern application so your first full stack marine application if you're interested in seeing everything related to morning i do have a series where i go over update requests um delete requests everything you might want to know it's four videos just going over everything so i'll probably link that um down in the description or just add a card over here um so that's basically it i really appreciate you guys watching if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i post two times a week and i'll massively appreciate if you guys could support the channel comment down below any questions you guys have because i'll be answering um as much as i can um to try to help you guys out and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause]

Channel: PedroTech

Views: 6,583

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, MERN, mern tutorial, learn mern, mern beginners, mongodb tutorial, mongoose, mern tutorial beginner, mongodb

Id: I7EDAR2GRVo

Length: 59min 39sec (3579 seconds)

Published: Tue Nov 02 2021