CRUD Tutorial - ReactJS, NodeJS, MySQL [Part 1]

hey guys how's it going i'm back here with another video and in this video i'm going to be teaching you guys how to make a crud application with react and a node backend so basically for those who don't know crud basically means create read update and delete it's an application that is going to be communicating with the backend and it's going to have a a database which in our case we're going to be using mysql and we're going to be able to read data from the database updated created and deleted so in our case we're going to be using react for the front end and a note for the back end it might seem overkill since it's a very simple application but i just want to teach you guys how to kind of communicate between a front end and a back end using react and a back end using node so in our case we created a folder called crud application and we're going to create two files two folders inside of our our our project right so we're gonna create one called client and i'm gonna explain why we're creating two folders and another one called uh server basically when you're trying to communicate and have two uh two sides of the project so working in the front end and working on the back end you need to have two parts of the project so one it's going to be the server which is going to contain the back end and the client is going to contain the react application so we're going to first start with the react part so i'm going to go to my folder by doing cd client and as you can see now i'm in my my client folder and i'm gonna use the create react tab boilerplate so npx create react app and i'm going to put a dot which basically means that i want to create the application on this folder so press enter and it's going to take a while to install react so i'm going to cut right to when it finished installing okay so as you can see everything installed we have our react application over here and for now we're only only going to work on our react it's going to be really fast it's really simple so we're already in the client i wanna npm start so we start our application and it's gonna run over here so let's see and while it's doing that you can see that it's the simple like the the beginning of a react application this is what it looks like every time so we're going to erase most of this we're going to erase the app.test.js the index.css the logo the service worker the setup tests that erase everything the only thing we need are the app.js and the index dot js and the app.css let me now remove all the imports let me remove this trick mode and add a comma right here then remove remove this and save it and then came to come to app.js and remove the logo and finally erase everything and right here hello okay you can see that now we have a an empty application with a tag saying hello and that's right for now so what we're going to do is almost everything in our application are going to is going to be made through the app.js we're going to be writing a title first so h1 um crud application and in our case we want to let's let's put a use case to this basically let's think of um try to make an application where you can add and delete uh movie reviews so like just just a review right so we're gonna store the movie name and our review so let's add some inputs input and of type text text and this is going to be the um movie name right so basically we have an input where we're gonna write the movie name and we're gonna have another one where we're gonna write the the review and in our application we're going to be able to just create a a movie review read a movie review which basically basically means that we can select see all the movie reviews and we're going to be able to update it and delete it so in our case we already have this we're also going to let me come here and create a div around this so so it doesn't look like horrible let me see div and let me give this a class name of um form whatever and i'm going to come to the app.css and let me erase everything because this was the initial css and right here form and give it a display flex and a flex direction of column so so that they're stacked on top of each other called okay okay what happened we also want to get the input so form f form input and let's make the width equal to like 300 pixels the height equal to like uh i don't know 60 pixels and let's put a margin so margin like 10 pixels okay it doesn't look perfect but that's okay i also want to align i align items send center and justify justified content center this will basically put everything in the middle so as you can see we have our application over here we write the movie names and over here we have we write the review and for that we're also going to add a label label um over here movie name and let's copy this and write um review okay review it looks fine let me just increase the font size because it's giving me it's irritating me a bit so 25 pixels maybe um okay yeah it looks good and finally we need to add a button right here so that we can submit our information so button and the button is going to be submit and it's okay over here we're going to write the movie name the review we click submit it's going to be sending the information to the database and it's all fine right so now i'm thinking we should transition to the backend and the reason why is i need to create the database i need to create the node.js and express server and there's not much we can do right now without having the backing done so to create the backing i'm gonna close everything from the front end and i'm going to like not look at the folder i'm gonna open the the server folder in our case you can see that we are in the client folder right here so i'm going to get out of the client server by writing cd to dots now we are in the major directory so we are in the crud application directory and we're going to cd into the server so change directory into the server and how do we create a node.js application basically we need to write npm init and it's going to create a json file just click enter to all these questions that are going to appear here it doesn't matter click yes and you can see that now a package.json was created inside of here it declares that the main file is index.js i usually call it app.js it doesn't matter in our case just to not make it complicated i'm going to call it index.js so go to your server and create a file called index.js this is going to be the file where our server is going to be running through so we need to install some dependencies first we're going to be using an express server and i'm going to increase the size in this so you guys can see it we're going to be using an express server so npm install express we're also going to be using another dependency called buddy parser so let's install this and i'm going to explain what each one of these means and for now i think that's it also but also we need to install mysql right so mysql is the database we're going to be using so i need to install that these are the three things we want so let's press enter and it's going to be installed and while it's installing let's create the express server so to create an express server and you can see that everything was installed and on the package.json the three things appear right here oh i forgot something we need to install another dependency called node node one and what's the good thing about node one is that we can run our server without having to rerun it every time we make some changes so npm install node mod and for now let's just let it stall you can see that all the dependencies appear right here and that's good so let's go to the index.js and create our express server to create an express server you need to uh const express we're creating a variable quad express and we're going to require the express middle where which basically means like to express a dependency and then we want to create an app through that express variable so constab equals express and we want to listen to it so in our case we're gonna write app.listen we we gotta pass a port since our local host for the react application is running on three thousand let's run our server on three thousand and one and let's pass a function so we're gonna pass an arrow function in our case so just this and inside of here let's write a like a simple console log just making sure that we're actually running the server so running on port 301 it should be good and let's run the server for now since i i haven't uh configured node 1 i'm just going to run it through node index.js and that's going to run you can see that it says running on port 3001 and if we go here and write localhost 3001 you can see that it says cannot get slash this basically means that it's working we're just not doing anything to our server uh we can do something with the server for example if we want to access the the route which it's basically the initial route we can write app dot use no app.get and call the initial route so they slash and we pass here a function with a rack and a res and i'm gonna explain what what each one one of them means you can send a ras.send a text so we're gonna send hello world right and if we see here and update this oh i forgot we need to run it again so um let's run it again node index.js you can see that now it does it says hello world and basically what this means is in express you have the app variable right and you want to detect whenever you're reaching certain routes in your browser if i was trying to reach the slash i don't know login it'll say cannot get login why because we have we're not saying what we need what we want to do if someone tries to reach the slash login in our case we're saying we want to do something we want to send a message called hello world whenever someone try to reach the slash like the empty slash which basically means it's the it's just the url so that's why when we go to the empty slash it says hello world and when you say app.get you pass the the route then you pass the parameters of a function these parameters are almost always the same rack means required and res means response so when we say when we say res it's it's like a response we're sending to the front end we're basically wanting to send this information to so that the user can see it in your front end and rack will be used when we're trying to get information from the front end so this is basically like the simplest information the simplest description of what this means but for now it's cool that it's a bit complicated to understand at first so what we need to do now is configure nodemon and this is really simple we just need to go to our package.json and you'll see that on the scripts there is just a test over here which basically means that whenever we run the test command we want to test our application however we will also want to add a way so that no one knows that we're trying to run our application and it will continuously re refreshing our server so that we see the changes so let's first add a a start command whenever we want to start our application we want to run node index.js this is simple this basically means that whenever you write the command node index.js we want to start our application but we also want to uh we also want to communicate that we want to run a development environment so we want to run a server that's only in case of development so that he knows that it's going to continuously refresh so how we do this is by basically running the command dev start and writing the the following command node one and the name of our file so index.js basically just says that whenever we run this command we want to run the the server through node 1 and in order to run this we write npm run dev start and as you can see it says that it's running everything on port 3001 and you can see that this will change over here every time we we refresh our page it will run the server again automatically so if we change here to my name hello page and we refresh this it will automatically refresh here you can see this right so this is a very easy way of working through your node.js application it's what most people do because no one has the time of to like keep re-running the command to refresh your server so yeah that's basically it so i just realized that this video is actually going to be a lot longer than i expected in our case we're like 50 minutes in 15 minutes in so i'm probably gonna make this into two videos so yeah this is for this video please stick around to see the next video of my series and i hope you guys enjoyed this video please leave a like if you enjoyed it please comment down below whatever video you guys want me to do because i'll definitely go around and do this video so i hope you guys enjoyed it and see you guys next time

Channel: PedroTech

Views: 117,356

Rating: 4.9730115 out of 5

Keywords: avascript, programming, css, html, react, react.js, angular, javascript framework, teaching myself coding, coding, code, tutorial, react.js tutorial, react.js in 10 minutes, reactjs, reactjs tutorial, reactjs building, javascript tutorial, javascript for beginners, javascript project, javascript crash course, frontend, nodejs, reactnative, react tutorial, components, algorithms, data structure, mysql, sql, crud, api, axios, insert in database, crud javascript, crude node js, crud reactjs

Id: T8mqZZ0r-RA

Length: 15min 22sec (922 seconds)

Published: Sat Aug 29 2020

Reddit Comments

[u/spoticamp]

Thank you for this tutorial , it really helped me.

[u/Cronos-Sama]

thank you for your tutorial , if may i ask why did use MySQL i mean there is other databases ,
All i mean is i want to learn a database but you know there is MongoDB and MySQL but i don't know which one to focus on

​

and again thank you

[u/warpedspockclone]

I swear to god I'm going to avoid React as long as I can. Fortunately, I'm a back end engineer.