Beginners CRUD Tutorial - ReactJS, MySQL, NodeJS

hey guys how's it going i'm back here with another video and today i decided to make a simple video where i'm going to be explaining you guys how to make um kind of like it's it's kind of like a crud application but we're actually going to be building um kind of like an hr management system so it's nothing too complicated this is a beginner's tutorial so for those who know my my most popular video on my channel is where i build a credit application using react node and mysql and that video i made like a long time ago i didn't explain stuff too well i also didn't have a microphone so the auto the audio is horrible so i decided that i wanted to make something similar to that but i'm going to be explaining stuff better i'm also going to be including some stuff that are more important in this video and i'm gonna try not to confuse most of you guys so i hope this i hope you guys will enjoy this video so the first thing we gotta do here is you can see that we have our simple application right here we have a web browser to our left and this is just a simple like i just opened vs code and i created a folder called simple crud and i opened the project inside of here if you've never worked with vs code before then i wouldn't actually recommend like not vs code if never worked with programming in general before i wouldn't recommend watching this video because it is it is a beginner's tutorial but it is a beginner's react and no tutorial so that's the basic idea so let's start our project in order to start our project we're going to come here and write new terminal and we're actually going to be opening and by the way i'm going to increase the size of this for now because i know my camera is like my camera is over here so i want you guys to see my terminal i'm going to write npx actually no i'm going to create two folders so the first one is going to be client and you can see that when i say when i put this command over here on the right client the folder appears to our left and i also want to create a server folder so server this is how we're going to divide our application we're going to have a client folder and a server folder the client is going to include all of our react part of our project the server will include everything related to the node and the express part of the project so first of all we need to navigate towards the client folder and you can see i'm inside the client folder by writing cd client and now i'm inside of it and over here i'm going to write the simple npx create react app and a dot that will basically create a react app in our client folder and it will put all of the starter folders that we need so while it's doing that i'm going to open a new terminal by clicking on this i could also click on the plus sign and we'll create a new terminal to write and you can see i'm currently inside of the client folder but but i want to go to the server folder so i need to write cd two dots and i need to go to the server folder the two dots basically brings me back i was inside of the client folder now i'm back over here and i can access the server folder now i'm inside of it over here and i can just write npm init this will create this will basically prompt a bunch of questions and we can just press enter to all of them literally it's just a bunch of questions and now it's okay you can see there's a package.json that appears to our left so now that we basically created our package.json we can install all of the different packages that we want all of our dependencies so in our project the only dependencies that we actually need are mysql because we're going to be using mysql and also express because it is the framework we're going to be using to create our back-end so oh i actually wrote it wrong so i need to write npm install install mysql and express now while it's installing you can see that to our left our react app just was created so you when i open this you can see we have a bunch of folders to our left and most of them are actually unnecessary so what i like to do when i create a react application is i like to delete most of the stuff that are unnecessary so for example i'm going to delete the tests so let me delete this i also want to delete the the logo i want to delete the index.css the app.task.js and that's basically it so i'm going to delete all of this and now that we deleted a bunch of files we need to delete where those files are called so for example we deleted the index.css i'm just going to delete the like the the calling for the index.css in the index.js let's save this there's nothing else that we deleted that is being imported so let's go to the app.js and here's like it has a lot of stuff so when you create a react application it already starts with like a basic template of a project we're going to delete that because we're going to actually make stuff on our own we're also going to delete the the logo at the top and if we go to our app.css the css starts with a bunch of stuff we're just going to delete everything but the first one so that's the basic idea now that we kind of like set up everything you can see that on our left uh most of where that were installed and you can see over here we can go to our package.json and it says that express and mysql were installed and that's great so what we need to do now is we need to actually create our file that is going to be the file we write all of our code and our back-end so i'm going to start and i'm going to create a index dot gs i will call this index.js because you can see right here we set our main file to be index.js but if you want to call it server.js or app.js which are pretty common names that people use for this file you can just change it over here and call that the file whatever you want but that's fine so in the beginning we're actually not going to start with uh the server we're going to start with our react part of our application so i'm going to come here to our terminal where we are inside of the client so you can see right here i'm going to write yarn start so i'm using yarn as you can see right here but if you're using npm then just write npm start it doesn't matter both are the same so yarn start is going to start our application and you can see right here right over here we have our react app opened so obviously there's nothing inside of here because we haven't actually created anything but if you came over here and we wrote like hello youtube we saved this we came over here you can see hello youtube appears here so that's great i'm going to kind of do this maybe so you guys can like kind of see stuff so yeah this is a bit too big okay let me do it like this okay so basically what we got to do now is remember i'm planning on making an application which um is like a management system so we have some inputs that a manager in a company or whatever can basically create a user uh an employee and what they need to do is they need to actually just put the information for the employee so they need to put a name uh age maybe i don't know gender maybe i don't know position also stuff like the employee id that kind of stuff so when the when the user when they employ the the manager puts all that information they're going to click on a button which will basically add that information that information is going to be sent to our database which is a mysql database and when we want to see all of our employees information we can just click on a button show employee information and it's going to display a list of all the different employees that we have in our system and all the information for each of the employees so that's the basic idea of our project it's going to teach you guys a bunch of stuff especially between like the connection between a front end and react and a back end in node also how to use mysql i'm going to try to teach it all for you guys so now that we just wrote hello youtube we're actually going to delete this we're going to start working on our project so in order to do that we're going to create our different inputs right so what i mean by input is this right here so if we come here and write input and we close this we give this a type of text so it's just like if you're working with html you'll see that this appears right here and this is where we're actually going to be writing all of our stuff we want to write our name so the name of the the employee you can just write pedro for example this is what i mean by by an input so we're going to create a bunch of them let's just brainstorm what do we want we want uh employee right when the name so let's give it a label over here and say name and you can see name appears let's also give an age so age by the way h won't be text it will be number why because age is a number and now you can see our input we can like have these buttons where we can increase and decrease the number that's great but basically that's the idea right so what else do we want to add i'm not going to add gender because we can just add something like i don't think they're allowed to ask the gender for for employee let's think what else position so position uh that's going to be text let's also add what do we want to add maybe before position let's add a country and that's great we have four different things honestly and also salary right yeah let's write here salary and our wage so wage this is the wage and it's going to be a number okay this is wage and i'm gonna write over here uh per or actually year so it's it's how many how much the person get earns per year so you can see it's obviously very confusing over here because we haven't styled anything and i'm going to do a bit of css but obviously nothing too too difficult it's just going to be for us to like have an idea and it looks a little bit more appealing you know so we created here uh one two three four five different inputs which are the five different pieces of information we want from the employee and let me start stylingly styling it a bit so basically what i'm going to do is i'm going to create a div at the top here and it's going to be wrapping around all the inputs and by the way if you want to know why my when i when i save my application the stuff gets like um aligned i'm using an extension called prettier a lot of people ask me this so it's really it's really cool i have a video about it it basically aligns everything and organizes everything when you make when you save your application so we created a div we're gonna give this a class name of um i don't know information and let's open here our css and over here you can see it's saying text align center we're actually going to delete this and what we want to do is basically we're going to we're not gonna have different pages in our application this is a simple application at the top here we're gonna have a place for the employer or the the manager to put the information they wanna add to the database and over here at the bottom we're gonna have a button saying show employees and when you click on it it's going to be displayed over here so basically we want to have our application stacking stuff on top of each other the the manager part is over here and here is the part where you see the information for all the employees so in order to do that we're gonna use a display flex and if you if you're not really good with css don't worry this isn't anything complicated i would honestly recommend if you don't care that much about css just copy this because css is literally something you can just like google and copy code from stack overflow so it doesn't really matter so we're going to write display flags and we're going to put a flex direction of columns so that stuff are stacked on top of each other you can see currently it just changed a bit because we haven't actually done anything yet but i really want to justify stuff at the center so i want to align stuff to be right at the center so if i write justify content center it's obviously not going to change anything for the moment but we're going to see here i'm going to come here to the bottom and say information so we're going to grab the information that we that we wrote and we're going to give a display flex for it as well and we're going to do the same thing i want to put stuff on top of each other so let's basically a flex direction make it a column as well so you're going to see stuff are like stuck on top of each other and you can see it's kind of like had this effect where it's totally stretched but we're going to fix that and maybe i think that's fine right i don't think yeah that's fine so over here in the bottom we're going to say information and we're going to grab the inputs so all the different inputs inside of the information div which is this one right here we're gonna basically just give it a width of uh i don't know 300 pixels maybe i don't want to make it too too big the height is going to be something like 50 pixels i always always make this too big and let's see how it looks yeah that's okay and now let's go here we want to justify stuff to the center uh and we want to increase the width to be like with a hundred percent let's see if that fixes it um it didn't let's let's just see what what this div looks like so let's add a background color to just to see it you can see that div is over here right so it means it's working but let's let's try align items center and now it's working so we're going to center stuff in this right at the center i'm going to delete this and that's fine so let's save this and you can see stuff for looking okay right it's not perfect but it's okay so the another problem is that when we write on the input you can see the text is really small so we want to kind of fix that we're going to fix that by coming here and writing font size and giving it like 18 pixels now it's gonna increase the size a little bit more so 20 pixels and that's okay and let's add a bit of a padding to the left so that stuff aren't like right at the edge you know so let's add a 10 pixel padding so yeah that's fine so we can see here we have our inputs i don't want to put it i don't want to make it like any more beautiful than this it's okay i don't really care about the the visual for now i just want to teach you guys all the logic behind making this application so right at the bottom here we want to add a button right so let's come here and add a button that is going to be just a button that will say add employee so the button is going to be right here and this button is going to be the button which when we click on it it's going to send the information to the database so let's edit it a bit by coming here and saying information button and over here we're just going to give it a an increase in width i'm just going to give the width and the height of the of what we did for the inputs so you can see it's going to be a little bit um larger we're also going to give it a margin top so i wrote margin wrong so margin top of like 15 pixels let's see how it looks okay let's also give a margin top for all the also just a margin for all the inputs because we want to give it a bit of a space and that's fine right i'm just going to increase the size the width of the button a little bit more to like 20. let's see if it looks yeah now it's better so you can see we have a button over here and finally the last thing i'm going to do is i'm just going to give it a hover effect because this is kind of like something i always do and it irritates me a bit if i don't do this when we give it a hover effect we just want to change the cursor because currently when you hover over the button your cursor is the same we want to change it to pointer so that when you hover it it's now a pointer that's just something i always do so that's fine this is all the css we're going to do for now and we have all of our different inputs which is great because we're basically just uh we're able to write stuff on our screen however currently we're not being able to keep that information we're not we're not able to store the information that we're writing here if i write pedro and i want to start that into a variable to send that value to our database we're not being able to do that so in order to do that we're going to use something called states and states in react is awesome uh if you if you don't know a lot a lot about states i have videos about it but basically we can just come here and say const and we create the the name of the variable so name and we can say a function to change that variable called set name for example and we're going to write use state and over here we can just pass an initial value since name is a string we're just going to pass an empty string we want to import the state from react so we're going to write use state and from react so that's fine we're importing this use state hook and we can now use it so honestly state is going to be something really important in this project if you've never worked with state with with states before i'm not going to go too much in depth about it but i would recommend learning it a bit before or else you might be a bit confused but this is the basic idea it's just a variable that can be changed and b can be sent to our database so let's create the state let's create more states because we have different variables we're going to create five states one for each variable or information we want to send so name we also want to change age and we're going to change this to set age this isn't going to be a string so it's going to be a number so we can just put like 0 here it's gonna start at zero um let's also change this to country change this to set country and then position set position and finally wage so wage set set wage okay this is going to be a number as well so zero okay zero so now we have our five different states that we can basically store the values that we write over here and how do you actually do this well if you've worked with react before worked with inputs and states before you know that in order to do that you're going to go to your input for example name this is the input for name and you're going to give it an onchange event which will basically take a function inside of here and that function will basically be a very simple function which the only thing it does is it grabs whatever we currently wrote in our input and it ch it sets the the state equal to that so basically this on change of uh property over here is going to call a function every time something changes in the input for example if i wrote here p it will call the function inside of here if i wrote e it will call the function inside of here what we want to do is every time there's a simple change we just want to change the variable to whatever is the new value over here so how do we do this well we call the event over here we grab the event variable our argument we pass an empty function and over here we can just say set name equal to event dot target value so if you're a bit confused by this very simple don't worry this just with practice you'll get this but you you'll pass an unchanged event it always have an event uh argument because this is an input and over here the only thing we're doing inside of this function is we're setting the name equal to the event the target of value event or target the value is the current value in the input so currently over here event.target the value is equal to pe if i put a d it's going to be ped so that's the basic idea and we want to do this for all the the inputs so we're going to copy this we're going to come here to the to the input 4h and the only thing we're going to change is we're going to change this to set age we're going to do the same for the 1 4 country change this to set country and let's do the same for the one for position change this to set position and finally we're gonna do the same for the uh the one for the wage so set wage okay that's fine so we now have our different values or different variables that are storing the information that we wrote over here if you want to be sure that we're actually doing this well let's let's do this let's do something cool so we're going to create a function here really quick just so i can show you guys it's just going to be display info it's literally a very simple function the only thing it's going to do is it's just going to console the log the name plus the age plus the country plus the position plus the wage it's just showing it's just a console log the function is basically just a console log of all the information that we currently have so when i click on the button it's going to display that and in order to do that we're just going to come here we're going to call this function whenever we click on the button and to make a function be called whenever you click on the button it's similar to how you do it with normal javascript you just give it an on click event and instead of here you can put the name of the function we called it display info so that's fine so let's come here so we can see let's inspect elements so you guys can see it we're going to open the console and let's just write whatever whatever whatever whatever and whatever so let's click add employee and you can see that all the information that we wrote here are written right next to each other but it means that we're actually storing the variable the the the states are grabbing whatever we wrote over here and they're keeping it on the variable so that's fine that's great that's what we want to do so let's delete this that was just so you guys could see it and now let's start working with our back end the reason why we want to work with the backend now is because we actually set up everything to send the information from the front end from our react app to our backend so we got to start working on our backend and in order to do that i'm going to open here our explorer i'm going to close our app.js we're actually going to kind of like close our client folder for now we're not going to be working on that for now we're just going to open our server folder over here and go to our index.js and start from there so in our index.js we're just going to set up a simple express server how do we do that well first we gotta require express so const express equals require express now we have an instance of the express library and we can just create an app from that so const app equals to express and right at the bottom we can actually start our app by writing app.listen we want to choose a port so this over here as you can see it's running on 3000 i'm gonna run mine on 3001. if you're getting an error try changing the port because maybe your port is in use so 3001 and over here i can pass a function from to basically tell us if it's actually running or not so it's just going to be an empty function which at the bottom here it's going to console.log a message and that message is going to be yay your server is running on port 3001 so let's save this and let's actually check to see if it's running to run a server in a node the basic idea of how you do this and i don't know if the camera is picking up this so what i'm going to do is i'm just going to push this a bit to the left this is the the terminal you can see i have two terminals this is react and this is the node terminal so in order to do this i'm going to write node index.js and you can see it it said yeah your server is running on par 3001. that's great because it means it means it's running but how do we actually check to see if it's running we can just come here and open up here and just write localhost 3001 and if this message appears here it means it's working it means it's working i know it says cannot get slash that just means it's working so that's great so that means our server is running now what we want to do is we actually want to set up our mysql part of our project so if you've worked with masquel before you probably heard about mysql workbench it's a great way to visualize your your mysql database and your table so i would definitely like 100 recommend don't work on a database on the terminal it's very like i i don't recommend it at all so i have my mysql workbench over here and i haven't actually created the database yet because i want to do it with you guys so i would recommend first of all installing mysql workbench it's a simple application and when you come up with this you're going to open the application and you're going to see that there's not like none of this will appear for you this is a these are all mine and in order to create a database here you're going to come here to the left you're going to write create schema so let's create this and call this employee system or employee system i'm just going to call it like this and let's click on apply so apply that means it executed an sql statement to create the database we're going to find the database over here it's employee system as you can see right here we can click on the arrow and you can see there's a place called tables we haven't created any table yet so let's create the table you can just right click on here click on create table and give the table name so let's call this employees and let's add all the different columns we want so the first one is going to be employee id so that's the id right usually we don't call this employee id we just call it id and i always do this however since usually on a employee system there is an employee id honestly i'll just call this id actually because this is the what we usually call we always have a column for the id and it's going to be type int and also we're going to put primary basically this this is saying that it's a primary key and it's we have to do this and also not know meaning that when you create a user or an employee you have to have an id and finally we want to put the check mark for auto increment meaning that whenever we create a different employee we don't want to set the id it will automatically just add one to the previous id you know what i mean so if we add one employee that one would have the id of one the second employee we add will have an id of two it's auto incrementing so this is very simple the id part now we wanna add the name it's gonna be a let's change this to text and let's put like two five five this is just the size of the text i don't know let's just put whatever so it's gonna be a text and we we we don't want to allow the the unemployed to be created without a name so let's select the not null then yeah that's fine that's basically what we want to do this is the only thing we want to add then we want to grab an age an h is an int not a text and we also don't want to make it null then let's add um let me grab here so we can see what else do we want actually we don't even need this we can just open this over here and we can take a look at the what we have so age country let's add a country it's going to be a text as well so text 255 we can be null then let's say position and let's say not no i accidentally also added another thing over here which is fine because we can just say wage and it's going to be oh i forgot to change this to text and let's put 255 as well i'm putting 255 you can put whatever you want but this is the maximum size so i'm just putting like whatever it doesn't really matter i don't think there's a country with 255 characters so let's just put whatever so now let's add an int because its wage is an integer and it's also not no so that's fine we created everything we wanted and in order to actually create this hasn't created the table yet we need to apply at the bottom here and it's going to create this is the sql statement to create a table in our database and we're going to say apply so it executed correctly and we're going to close over here i'm going to close this over here and we're going to see our database you can see that on our left here to our employee system a new table was created it's called employees if you want to see all the data that is included in that table we can just right click here and click on select rows limit 1000. so you can see it shows our table with no data in it because we haven't actually added anything inside of it so that's great we're going to start working with our backend now that we have our mysql table so let's open here our and our file and let's import mysql so in order to import it we can just say const mysql equals to require mysql so with mysql you need to set up the connection to the database and this is the part where a lot of people get errors so i'll try to explain as much as possible so you guys can copy exactly how i do it so you're going to create a variable called db db4 database this is the variable you're going to use to make all the the the calls for your database to insert to delete to whatever you want to do and we're going to set it equal to mysql dot create connection and the create connection we're now able to instead of here past an object so you can see i opened and closed curly braces and this object will contain all the different information regarding our tr database one of the information is basically for example user you can see it even shows us and the user usually is called roots so just put root if you've changed the user then that's great i'm going to call mine root because that's the the standard then we want to put the the host which usually is localhost so localhost then we want to add the password and this is the part where it actually gets some errors so usually there's two ways in which if you downloaded mysql workbench for some reason usually it it's either the password it's either just an empty password so like this or as in my case it's going to be just password so i don't know which one is yours try try actually not putting password try try like this first if it doesn't work try password but it should work on one of those two now the bottom we want to put the database so the database is just the name of the database that we created we called it employee system as you can see right here we have to put it exactly how we called it so let's write here employee system so that's great we're going to save this and now we have a variable called tb which is able to make all the queries so in node.js in express if you want to create a a request create an api endpoint you can just write app for the app the variable they've created over here we can say something like post or something like get so that's the idea right so let's create a post request which is basically going to insert uh stuff into our database so in order to make a post request in with express you have to put the route what do i mean by the route well you can see here we have localhost 2001. so in our frontend when we want to make that post request we want to call a route and we can't just put everything in the localhost 2001 directly because then we would only be able to do four things because there's only app there's only post get put and delete right those are the basic ones so we actually want to create routes for example if i want to create a user let's our employee let's get let's create a route called create so this is a route called create and if you want to create a user you're going to go to your front end and you're going to make a request to the localhost 2001 slash create so that's the idea right so we created a route called create and over here we have to pass two variables one called rack and the other called res if you're confused about this basically whenever you create um a request with express rec.res means request and response this is these are the standard ones if you want to grab something sent from the front end for example you use request if you want to send something to the frontend you use rest response so right here we're just gonna this is this are the arguments and this is a function so this is the standard syntax and over here we can start working with our logic so the first thing we want to get is actually the variables sent from the front end so you can see right here we have all these variables in the front end and when we make the request from our front end to our backend we're gonna send variables we haven't done that right now but let's imagine we're gonna we already did because we're just gonna grab those variables and in order to grab variables from a front end to a backend we can just come here and for example create a variable called name and set it equal to rec meaning request dot body dot the name of the variable sent from the front end and when we send that variable from the front end we want to call it name right i'm just going to call it name but you could call it whatever you want but if you call it name over here you have to send it as name when you're sending it from the front in so i hope i'm not getting confusing but this is basically this is how we're going to get information from our front end so i'm going to copy and paste five times because we're going to grab an age it's going to be age so age we want to grab what else let me come here we also want country so country and let's put country let's then put position and let's put position then wage finally wage and the wage okay so we've got our four our five variables these are the four variables and like values that we're going to send into our database and now you might be asking well how do i actually send data to our like how do how do i insert stuff into our database well you do it very simply by coming here and by the way i'm just gonna indent everything so you can come here and just use the variable db that we created over here write a dot query and inside of here we can put the sql statement and if we've worked with sql before you know that to insert something into our database we're going to write insert into the name of the database which is know the name of the table sorry which let's take a look we called it employees this is the name of the table so let's call it employees insert it into employees um and now we have to pass the columns that we want to insert and in our case what do we want to insert we want to enter in a column called name a column called age a column called country a column called position and one called wage and then we're gonna write values i'm gonna increase the size of this so you guys can see values and here is where stuff starts to happen so we're seeing here we want to insert into our employees table in the columns name age country position and wage the values and here we should put the value right but wait you don't actually just put the value directly here because that's kind of not secure what you usually do is you put question marks here and and i know it might look confusing but i will show you guys what this means we put five question marks one two three four five and those question marks represents the variables well how do we actually use the question like put the values that we got here into those question marks well you can come here right next to here and you can pass an array in this array each element in the array will represent one question mark so the first element in this array will be the first value which should be the age as you can see right here so let's pass the no not the age the the name so let's pass the name here then let's just put it in order name age country position and wait so name age country position wage okay so the idea of this is instead of putting this variable directly into the sql statement we're just putting it as an array right next to it and over here we're putting question marks and this is great this is a great like feature that we're able to to use and this is kind of like the standard and over here after the we can put a comma and right here we have to put a callback function which basically represents what will we do when after the statement is done so usually what we do is we pat we grab two variables error and result error is if there's any error that occurred making the sql statement then the arrow will be displayed over here and result is just the result of that statement so let's create a function using this two variables and over here we can just if error meaning if there's any error we want to [Music] uh console log the error by the way for some reason started raining like a lot here where i live which never rains and i don't know if the audio is kind of like catching the rain i hope not but that's i'm just saying this is why probably there's some sounds so if error console.log error else just i don't know res dot send uh yo no actually i'm not going to say anything i'm just going to say values inserted so you might be wondering well what is res.send well we want to end the request right so we can just say res.send which will basically send a like a message or we can send variables we can send whatever we want we're just sending a message saying values. values inserted to our request so that we know that it actually worked so if there's an error we're console logging it else we're just sending a message saying values inserted that's great now that that's done you can i'm gonna leave it like this a bit and i'm gonna be posting the the code so you guys can see on github so the code is definitely on the description if you want to check it out and that's great so basically this is the idea right we created these variables and we're putting them into our database but you might be wondering well now how do we send those variables to our backend well we're going to do it right now i'm going to open up here and i'm going to come here i'm going to close this index.js and i'm going to come here to our client we're going to be working with our react part again so in our app.js over here i'm going to close this a bit we're actually going to be inserting a library so i don't i don't usually like to be using external libraries on this beginner's tutorial videos but since we're working with requests and creating an api this is the that like this will make your life a lot easier and it's a very famous library called x use if you've been on my channel before you heard of it so basically axios and i'm gonna create a terminal here actually i won't i'll just use the old terminal so i'm gonna come here to our react terminal currently it's running the react so i'm going to write control c to stop running the react part so we can install the excuse library and i'm going to install it by basically running yarn and exuse or npm install x if you if you want so inside of the client folder we're adding axis and what is x use well active is the very famous library which allows you to make requests to an api either it be like a public api that someone else created or your own so that's great now that it installed we're just gonna yarn start again and it's gonna run over here so now that it installed we're gonna come here and we're gonna access axios at the top so in order to import x's i'm going to write import x use from axios and right over here we want to create a function right so axis will just be used when you to make the request so when do we want to make the request well we want to make the request when we click on this button at employ so in order to do that we're going to come here and say const add employee something like this equals to a function and this function will be very simple we're just going to come here we're just going to give this the button and on click event which when it's clicked we want to call the add employee function so inside of this function what we want to do is we basically just want to make the access request so let's grab axios we're going to make a post request because if you remember we actually created a post request and the what we put over here is just a string which contains what is the end point that we want to create that we want to make the request remember that we created an endpoint on our server called slash create so how do we do this well we're going to grab the localhost over here and we're just going to paste it over here and at the end we're going to say slash create because this is the endpoint that we want to make the request now access.post what do we do now remember that we're sending information from our front end to our backend where and you might be wondering well where do we actually send that information it's right over here well this is considered if you put a comma over here this is considered a body so we're sending a buddy right and that body is an object so we're going to put here an object by just adding you know opening and closing a curly braces and inside of here we can add all the different properties of that object so that's the body so what are the properties we want well we want a name which the value is the name variable that we have over here we want an age which again same thing it's the age variable we went to country which is the country and i'm going to save this so it becomes more clear for you guys then we want uh i'm going to open this a bit then we want to position which is a position then we want a wage which is a wage and that's fine so if you're kind of confused just think about this this is an object which is the body object and we're sending this object to the back end and inside of there we want to have a key val a key like key value pairs so basically this is the key name and for the key name we want to pass the value name which is the variable we have over here the state i'm going to do this for all the variables so that when we come here to our backend in our index.js and we say well we want to create a variable called name which is equal to rec.body.name now buddy is an object which contains the name as you can see right here we created a property name inside of the body and that property now has the value name which is the state we created over here so we're passing our value to our backend that's great so let's save this and by the end like right at the end of the post request since this is a promise and if you're if you're confused with promises this is probably a great like opportunity to learn it it's it's very simple basically we don't know when we don't know when the the request is done so we can just say dot then meaning that our whole function will stop until the request is done until the access.post request is done and then we want to basically i don't want to even grab the response we're just going to kind of like for now console.log we're going to pass a function here which is going to console.log success so that's fine so you can see we're making a post request we're sending to this endpoint we're sending this information and then we have we have a callback function basically which is just a console log of the word success so that's fine we're gonna save this um let's come here to our index.js by the way um i've never like i i usually use a package on our back end called nodemon i'm not gonna use node one in this video i have videos talking about an old mod um i don't want to complicate stuff but basically every time you wanna you make changes to your index.js to your server you have to run it again so let's come here to our terminal for the server and i'm gonna open this terminal a bit so you guys can see it better let's just push this a bit so you guys can see it over here i'm going to close the terminal by writing the ctrl c and then over here i'm going to write node index.js again and that's going to run again and there weren't any errors so that's great we're going to come here and now we're going to try sending the information to our database you've seen our database it's empty so let's try it again let's add an employee called pedro my shadow that's my name i'm going to put my age here 19 we're gonna add my country brazil i'm gonna end up my position uh i don't know full stack developer my wage i really hope to make i don't know i'm gonna put something crazy like eight hundred thousand dollars a year so one two three let's imagine i'm making a hundred thous a hundred thous 800 000 a year i'm gonna click add employee so the words there was an error and this is great i always i always forget to do this you're gonna probably encounter this error too and you might be wondering well why why is it why is this happening well the reason why this is happening is because we haven't added course and we're going to add course right now so basically what course is is just a library in um and it's just an idea like if you're making a request from your front into the back end from your own api like from your own front into an api to your own api you need to allow it by using course so let's install course right here i'm gonna again open up my terminal here for the server i'm going to close the the i'm going to close the the server that is running by writing control by pressing ctrl c then i'm going to write npm install course it's going to install course and now that installed i'm going to come here to the top i'm going to write const course equals to require course by the way if you're confused by course don't worry i was confused uh i was very confused for like the first 10 months until i started learning more about networking don't worry at all this isn't really important just know that this is something you you always need to do you need to write app.use course and now this error is fixed you're now able to make requests from your front end to the backend so let's save this we're going to run our server again by node index.js i'm going to push this to the left here and since our information is already since this was an error with our backend we weren't even able to make the request because of course but now that course is installed we just we can just click on the add employee again we don't need to refresh our front end or anything because all the changes we made were in the backend so let's try clicking add employee again and we can see we haven't we have an error and that's great because i can show you guys what kind of kind of errors we're going to get so let's look at the error here you can see what's console log it said cannot read property name of undefined well apparently name is undefined so this over here is undefined let's take a look to see what happened well something is great it means that the request was made but apparently name is undefined which is weird um so it's on the no it's not here actually is it no it's in the 16 yeah it's over here so name is undefined this means that we made a mistake here by sending by sending name let's see what we made well let's first of all console log a name so let's say console.log name to see if we're actually grabbing the word name so let's click add employee and yeah we actually have the value pedro my shadow to our left so that means we're actually grabbing the word name so why is it not working well let's take a look um name name we're passing the value here that's correct um okay x is opposed that's correct it should be working i'm setting name let's console.log name over here so cons so log actually let's console.log the rack.buddy so we can see the object that we're getting from our frontend so let's let's come here and let's just let's refresh this let's come here to our react and let's click add employee again we're going to see what is console logged in our server well apparently was there anything console logged let's look at the top um oh we made a change to our back end we haven't actually restarted our server so let's restart our server by writing node index.js again so let's make the request at employee let's look at the top here what was you can see it said undefined meaning we're actually not sending the body to our from our front end to our backend well i don't actually know why this is happening i'll figure it out and i'll be back when i figured it out to explain to you guys hey guys i'm back this was a very stupid mistake i for some reason forgot this i already forgot this like in other videos and it's something i'll probably always forget but i know what the error is i just need to apply the json middleware so that when we send information from the from the front end we actually parse the json and that might be sounding kind of confusing but i'll explain to you guys the only fix is just coming here and writing app.use express dot json so dot json that should fix everything so let's restart our server here by writing control c running our server again and now the server i'm i'm positive that this will work yes so it works you can see here it says success and that means that apparently a request was made right so let's take a look at our database to see if the data was inserted if we in order to make the you can see we selected all from employee system when we said when we clicked on select rules right so if we want to call it again we can just click on this kind of like a lightning bolt over here we can just click on it and you can see that now our data is in our database that means a bunch of stuff it means our request is working it means we're getting the information from the front end it means that our database connection worked when we clicked over here so this worked and if you got to this point it means that a lot of stuff has worked for you so now what we have to do is basically just work a little bit more and we should be done with this this is the hardest part has we have passed because this is the hardest part is setting up stuff without getting errors so now that we're able to send information from our back into our front end we want to see that information right so how do we see it well we're going to come here to our app.js to our basically our our server our front end here and what i want to do is i just want to add a line break so we kind of have have like a division so we can see like you can see this is basically what i'm adding well what happened um did i did i do something wrong let me refresh this [Music] okay maybe i won't add a line break i just wanted to add something here let me try to if i did something like this let me see if it appears okay yeah this is not this this is not what you should do but i'm just gonna put a bunch of lines here so you have an idea of uh like we're this is a different place right okay so this is what we're doing right this is our project and over here at the bottom we want to have a button which is going to say show employees when we click on that button it's going to show all of our employees in our database and the information for each employee so how we're going to do that is we're going to come over here we're just going to come over here we're going to create a button right we're going to right here button and in this button it's going to say show employees so show employees this button is over here when you click on this button you should be able to show all the employees so that's great and how do we actually show the employees by the way i don't like that it's kind of like spaced out so what i'm actually going to do is i'm going to come here and i'm going to remove this information.button i'm just going to like apply this to all the buttons in the screen so it's the same button you can see right here right so over here what i want to do is i want to kind of add a div around this button thing over here and i'm going to decrease this a bit i'm going to increase this a bit as well we're going to add a div to wrap this so div div and over here we're going to give this a class name this class name is going to be employees so we're going to come here to our app.css we're just just going to say employees and it's fine because we can just say now display play flex then we want to give it a flex direction actually the flex direction it's already fine we're just gonna align items to the center okay and the width we want to make it a hundred percent okay so is it aligned let's give a background color so aqua let's see yeah it's working now so basically what we want to do is we want to also justify content center maybe let's see what it does because uh yeah in this case it's working oh i actually get what it means we need to add the flex direction right flex direction column okay now it's working we have centered everything let's change the background color and now we have a button right here when we click on this button we just want to display a list of all the employees and each employee should have the information for like the employer right so let's let's see how we can do this let's close let's close the app.css and over here let's create a function right our state actually we're going to create a state called employee list so to create a state we can just say here employee list and it's going to take any set employee list function and it's going to be equal to use state and it's going to be an array or a list so our initial value over here is going to be just an empty array so what does this employee list state does well when we make our request we want to get all of the information we currently have in our database and we're going to store all that information in a list and then we're going to display that list over here that's the basic idea well how do we get that information from the database well we're going to come here we're going to say const get employees it's just a function we're going to create and in this function we're going to make a nexus request so let me grab this and obviously we're not going to be sending anything we just want to get all the the employees in the database so let's remove this and also it's not going to be a post request it's going to be a get request so get access.get and we haven't created the endpoint yet but we're going to fix that so basically we want to change this to get so get employees so let's just create an endpoint called employees it's going to be localhost 3001 employees and it's going to be a get request and at the dot then differently from the at employee when we add something to the database we don't want to receive anything right we're just adding stuff but this time we actually want to receive we want to get a response so on the dot then we can just say response we're going to get a response and this variable right here response will contain whatever we send from our backend so that's the idea right now let's just console log the response so that's fine and at the button right here we want to give it an on click event on click and we're going to pass the get employees okay so when we click on this button we want to get the employees from our back-end we haven't created this endpoint yet though so let's do it right now let's go to our index.js and you can see we have here our our post request let's change that and let's create one which is a get request so app.get and remember the endpoint we created was uh slash employees so we can just say slash employees and over here we want to do the same thing so rack res and a function remember this is standard for when you're creating a request using express so we're not sending anything from our front end we just want to receive stuff we just want to receive everything from our database so we don't need to do all of this because we're not actually sending anything but we actually need to do this so how do we do this we're just going to come here and say db dot query and if you've worked with mysql before you know that in order to select everything from a database from a table you can just say select all so this asterisk means all from the name of the table which is employees this is literally what we want to do and we're not going to actually pass any array with variables because we don't want to we're not sending like any variable to the request we're just asking well we want to select everything from the employees so that's fine but we actually need to do something here we want to do the last thing which is just passing the error and the result function so how do we do this i'm going to come here and say error result just like we did before and it's just a function which if there is any error if errors then we want to console log the error so console.log error and else this time we're actually going to do something with the result remember that i said that res.send values inserted sent this information from the back into the front end with a message saying value is inserted well this time we might want to send more information we actually want to send the results from this request so what we can do is we can just say here res dot send or we can just use rest.json2 this is another way to do it i'm just going to say rest.send we're going to send result so we're going to make this request to our database select all from employees then we're going to if there isn't any error we're going to send this result so let's save this let's come here and by the way since we made a change to our backend we can come here to our terminal we have to close our terminal and we run nodeindex.js again now it's running and now let's come here and it should be working everything should be fine you can see where console logging the response so let's check this let's open up this and oh my god this is look this looks super ugly so i'm just going to remove this it's just that for some reason the hr tag is not working so let me check this hr yeah it's not working for some reason yeah that's fine though i'm just gonna ignore this we just have a button here saying show employees that's fine so what we want to do is we want to basically just click on this button and see what happens so let's open our console log remember that we're just console logging the response from this request so let's check our console log to see if we click on this button it will show the data in our database which currently is just pedro machado 19 brazil full stack developer and 800k so let's click on this you can see that we made a request this is the response it's an object which contains a bunch of stuff one of the stuff that contains is basically the configuration which is just a bunch of random stuff you don't need to worry you actually don't need to worry about anything rather like the only things you need to worry about is the status meaning that if it's 200 it means it's worked and the data the data is what we received from our backend so if i click on here you can see we received an array which only has one element because we just have one like row in our database containing all the information we want so everything about pedro is over here so that means it's working we're making the correct request and now we just want to display our users in our in our front end but before we actually do that i want to add some more fake data to our database because i just want to have a list it's currently just one user so let's check i want to add john i don't know john fish whatever age 29 country germany that's not a name for a german person but position web ux actually ux wage 100 okay and i'm going to click add employee let's check if this works let's check again it worked john fish was inserted let's change this let's add jessica barnes age 22 from the i don't know you i don't know colombia again not a name for i don't know actually i don't know if that's a name for a colombian person ux i'm just going to say no i'm not going to say ui i'm going to say front and and the wage will be 500k one two three at employee let's check again the employee was added to our to our database that means it's working let's check if we're getting the information the correct information again let's click on show employees we got the request and now it's an array with three different people so that means everything is working let me refresh the page everything is working and that's fine so now we got the information let's how do we display this information in our screen we want to display it right so well in order to do that we're going to come here to our button we're going to add a javascript variable inside of our jsx and if you've worked with react before you know that in order to render a list in your in your page you have to do it like this you want to grab the list so employee list i'm going to pass the dot map function and inside of this dot map you open and close the parenthesis you open and close parenthesis again and inside of here you can grab a key and a value right so value key and you can pass a function inside of here so this is the idea right don't get like i know it's a bunch of curly braces and parentheses but if you want to copy this just take a look also i have the code but basically we're mapping through every element in the employee list and we want to return a div so just a div which contains the information so div and it's just a div and inside of here i want to put for now let's just put the variables we want to see so for example what is value well remember that every element in our list in our employee list should be a employee but an employee is an object because it contains a name an id an age a country a position a wage contains all this stuff so vol is actually the object for the current element in the array so it's a current employee so since it's an object we can just say vol.name and it's going to display a name for example so let's see if that works and actually that won't work for now because we actually haven't inserted anything into our list we are just console logging the response so how do we insert stuff into our list how do we convert the the values that we received from our back end into the list for the employees we have in our react well i can just say here set employee list equal to response dot data why dot data because if you remember response contains a bunch of information including a property or a key called data which inside of that key contains the array of employees so we're setting our employee list equal to the response.data meaning it's all correct so let's save this and now if we click on show employees you should see all of our employees beautifully appearing down here but let's do a little bit more this we can just come here and say i don't know val.name we're gonna kind of style it a bit we're going to say we're going to add a class name and that class name is going to be employee i know we have an employees we're just going to call this employee i know it might be confusing but just get it it's employee and employees so val.name then we want to add maybe um so we want to change it a bit we're going to grab we're going to add all the different labels actually let's add headers so h3 oh i did this wrong so h three it's going to be a header inside of here we're going to add the name so vol.name and then we want to add we're going to add another h3 let me save this so you guys can see it um we have a header here and we want to add more information right we want to add a all the other information too so val.name valdo age vol.country i think valdo position and let's add a final one val dot salary no no it's not salary it's wage sorry wage okay so you see it's appearing here it's all fine let's edit the div a bit so let's come here to our app.css and inside of here let's say dot employee and a dot employee will basically allow us to access this div right here so this over here everything here so let's make it a little bit it looks look a little bit better so how do we do that let's add a width of like i don't know 700 pixels and a height of like 400 pixels i don't know if that's going to be too small so and let's add a background color for now something very very simple let's add azuri let's see how it looks so you can see no that looks horrible let's add a that's a light gray if it looks bad i don't care that much it should it still looks bad okay i'm not gonna add a background color i'm just gonna add a border okay border of one pixel solid and black okay that's what i usually do it's just a border the height is huge so let's fix this let's make this one 80. and that's fine and now let's also add a margin to all of this so margin 10 pixels so they're kind of like spaced out and you can see that currently this appears right here that's fine you know why because we're actually going to divide this we're going to give this a display flex flex we're going to put them right next to each other and we're going to maybe add a padding as well padding of 10 pixels so it's kind of like to the side we're going to grab each h3 so you can just come here and say employee h3 and each a3 will have a definitely a margin of like 20 pixels i want to put them spaced out and then finally what i want to do is i want to come right here this is the name right i don't want to just display the name i want to display the word name and then the name so we actually this is the html this is the jsx so we can write name here and when we put open and close the the credit braces we're putting javascript so when i say name then open and close curly braces and say vol.name we're saying name and the variable so that's fine we can do the same thing for the other ones so let's change this to age let's change this to country let's change this to [Music] maybe a position and i know this isn't perfect at all because this video is already too long so i probably won't have that much time to make it perfect but then what we want to maybe do is we want to maybe not make this a um a header let's just make this a maybe a paragraph so let's see how it looks so let's say p okay let me fix this so p and i'm going to put a comma here so let's see how it looks it looks the same so i'm not even going to bother with this i'm just going to remove this right here so this is basically what we have right now right it's not perfect obviously not even close to being perfect because the looks horrible i'm going to try to make it a little bit better but it doesn't really matter at the end let me just say font family the point of this video was just showing functionality i have other videos with ui i'm gonna give this a mono space so it looks a little bit better it doesn't i'm gonna make this career new okay looks a little bit better and yeah that's the basic idea right you can see we have all of our different users i'm going to crease i'm going to decrease this to like actually i'm just going to make this auto let's see how it looks auto yeah it looks a little bit better already so this is the list if we want to add a new user we're going gonna see here right here can come here and say fernanda whatever james and this isn't even a name so let's put she's five years old she's from cambodia i probably wrote that wrong um it's cambodia right yeah position which is um ceo wage uh two million or whatever so let's click add employee we clicked at employee let's see the employee show employee and now the fernanda james from cambodia is down here so that's great if you want to add when you add the employee you just want to see it directly appearing here instead of just having to click show employees well we can fix that so something that is really cool is the fact that we can use array destructuring to add elements to the database automatically so how do we actually do that well we can come here to our and this is probably the last thing i'll show in this video because this video is already probably more than a one hour long than one hour long video but i can show you guys more stuff i can make another video just continuing this in which i can show you guys how to delete stuff and directly delete it when you click delete the the element will be delete from the database and also delete it from the list can also show you guys how to like update stuff automatically so that's great but for now let's just fix it like this so i want to add the element to the to the list and to the database at the same time without having to click on show employees how do i do that well when you say add employee after you add the employee wouldn't we can just come here instead of saying console logging success we can just say set employee list then we gotta pass an array then we've got to say employee list three dots wait what happened let's just pass actually three dots employee list then over here we can say that we can pass the new value and this might be confusing to you and i'm just going to pass this object right here this might be confusing to you but don't worry um it it's confusing for everyone it's it's called the radius structuring so it's basically we're adding the value to a value to an array without using the push method which is how you usually do it and this is how you add new values to an array and react so let's see if that works if i want to change her name to like or let's actually just add a guy um john hopkins and age 9 us it's a ceo as well let's just write at employee you'll see that a new employee was automatically added and it is john hopkins it's mean it's working it means that we we're actually send that into the database as well so if you come here you'll see that june hopkins appears in the database so that's great and that means everything is working so that's great this is how you basically do it there's many different ways of doing this kind of project this is just a simple introduction to how to work with react msql and node i've made videos about this in the past but i really thought that i didn't explain stuff well i also had a pretty bad audio so i really wanted to make a new video for this so yeah i really hope you guys enjoyed it if you really want to see the parts where i delete stuff i edit stuff like edit and employ information i can definitely do that so that's great can make that video too so i hope you guys enjoyed this video if you liked it please leave a like down below comment what you want to see next subscribe because i'm posting every single day like today i just made this one hour long video and i'm in university so i have a lot of work so i'm putting a lot of effort into this channel and i really appreciate if you guys could subscribe or like the video or just share it to your friends or whatever and i would really appreciate that so yeah i hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 57,850

Rating: 4.9749999 out of 5

Keywords: crud, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js, node js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, crud tutorial, crud in reactjs, react and mysql, react mysql, crud reactjs, crud nodejs, crud in react, crud javascript, crud with react and node js, crud with react js, sql, insert into database, react.js tutorial

Id: re3OIOr9dJI

Length: 73min 33sec (4413 seconds)

Published: Thu Nov 05 2020