Build a Full-Stack CRUD App Using React, Node, MySQL for Beginners
ฝัง
- เผยแพร่เมื่อ 8 มี.ค. 2023
- In this video, we'll be building a full-stack CRUD app using React, Node, MySQL, and Xampp. We'll be using React to create the user interface, Node to handle the backend database operations, MySQL to store the data, and Xampp to serve the app. We'll also be using React Router to create dynamic routes, and Bootstrap to create a user interface.
By the end of this video, you'll have built a complete CRUD app using React, Node, MySQL, and Xampp! This is a practical and in-depth guide that will help you learn how to build a CRUD app using React, Node, MySQL, and Xampp. So don't
How to build a basic CRUD app with Node.js and ReactJS.
Build CRUD app using React + Node.js + Express + MySQL.
CRUD Tutorial using Node JS, Express, React JS, and MySQL.
![เปิดบ้านสุดหรู "เเจ็ค the ghost" ลั่นถ้าป๋องกพลลำบากผมเลี้ยงเอง!! l [Nickynachat]](http://i.ytimg.com/vi/1xbW4vULqGc/mqdefault.jpg)
I am really glad for your help. Searched the whole internet didn't find the exact video explaining how to send database info to frontend and fetch in frontend👍👍👍
Amoung the millions, best code chanel, ZazakAllah Khairan.
thank you so much for this. God bless you
hi bro i have even copied your code and get method is working fine but in case of update and create the browser is showing unsupported protocol localhost . what should i do
Loved this video
Love this video. Really helpfull
good job thanks bro love you
جزاكم الله خيرا
I did exactly as you said in video and the submit, update, delete buttons are not working.
thx for helping me
onclick of submit button in add+ section the deatails given are not adding to db and list of students in home
Can you create a tutorial mysql node and react. Admin backend system please 😊 thank you
I can't open localhost:8081 in a browser, it still opens dashboard in 8081 host. Problem starts in 9:55
is this same in react native?
very good
Cool tutorial man but could you please on the future be more patient with creation of the files and modifies? Is hard to follow
Why the browser is refreshing?
37:42 , bro Hello, I would like to ask for the Update button.. link to '/update/${data.ID}' in that case at the API Shows /update/1 how do I process kind of code 'update/${data.ID}' that shows a float warning I think if I use the string type that shows like that
ID should be integer change it and check if you faced again then share that with me
did u sorted the issue i do getting same error
actually, my backend is fetching my data from mysql , but the data is not getting displayed at the front end , and on the console where the data should get displayed its showing index.html file. what do i do?
Same thing
What is the solution for this
everything works just follow his guide instead of copy paste.
Hello bro,
I have a concern about the .map, I must download a library. It is generating an error in that arrangement. Thank you very much and what an excellent video
what library did u download
What did you download
please help me its not fetching data err is coming
Failed to load resource: net::ERR_FAILED like this
hi bro i have recently got job as a full stack developer i have doubt in the project that was given i need your guidance on it like an idea how to do that .How to connect with you bro??can you please share any contact info
I laugh so hard @1:18 when you said oh this was suppose to be inside the backend hahaha.. But bro Seriously thanks for the shared knowledege it help me alot .
Hhhhhhh 😀
Where is the source
Atleast share the zip file or something
Hi
Great lesson but for me not diplay content database in my react .Data is diplay in localhost:8081 but not for frontend .
i dont undestand why
an idea ??
Thank you
Even I want same answer
For me xampp is not working
Bro please also make video on free hosting of full stack website
I do same steps as you do but giving network error in console when try to get data in frontend ,please give me solution
www.buymeacoffee.com/codewithyousaf/build-full-stack-crud-app-react-node-mysql
does anyone here know how to change the background color?
How to upload in live
hi bro, can you pls provide source code file?, thanks
i need code of this
Can you share all app ? :)
I did exactly as you in video and the submit button doesn't work
check the code I have uploaded
@@codewithyousaf your code is messy on the link and is not readable. I have the same issue and did exactly the same but no action
@@codewithyousafwhere is the link to the code?
I have all the same codes but when I click update or add a student nothing comes out
download the code you have the link in description or check the comments you will find the code
exactly all the time it is showing unsupported protocol localhost in axios .I have even copied same code but nothing is working
@@codewithyousafwhere is the link to the code?
@@benjaminvanlalduhkimachhak8446
www.buymeacoffee.com/codewithyousaf/build-full-stack-crud-app-react-node-mysql
Do remove the ID as primary key in table then it wrks
nodemon app crashed - waiting for file changes before starting (problem facing)
error in server side code.
I am facing error with the map function can u help
Make sure to have the data in array.
How to type again after "listening" in 5:41 ?
press 'Ctrl+c'
Hello. Thanks fir this tutorial. Please share the source code.
Hi, I have a problem. I keep getting "axios" error.Why might I be getting this error? I am very confused with this error in your videos.
AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
:
"ERR_BAD_REQUEST"
config
:
{transitional: {…}, adapter: 'xhr', transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
:
"Request failed with status code 404"
name
:
"AxiosError"
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
:
{data: '
Cannot PUT /update1
', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
stack
:
"AxiosError: Request failed with status code 404
at settle (localhost:3000/static/js/bundle.js:49949:12)
at XMLHttpRequest.onloadend (localhost:3000/static/js/bundle.js:48635:66)"
[[Prototype]]
:
Error
This is the error I always keep getting
AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
:
"ERR_BAD_REQUEST"
config
:
{transitional: {…}, adapter: 'xhr', transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
:
"Request failed with status code 404"
name
:
"AxiosError"
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
:
{data: '
Cannot POST /create
', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
stack
:
"AxiosError: Request failed with status code 404
at settle (localhost:3000/static/js/bundle.js:49959:12)
at XMLHttpRequest.onloadend (localhost:3000/static/js/bundle.js:48645:66)"
[[Prototype]]
:
Error
This is the another error
What type of error?
@@codewithyousaf I have sent errors to you there up of yours message
I also keep having that problem and I think it is because the server.js is not open parrallely. I can't solve it either
bro how to deploy the code to vercel make a video
th-cam.com/video/-yoyIiuJQBU/w-d-xo.html
This is mongodb based right.. but how to do xampp based fullstack project deployment? There API's used are localhost how it will be working anywhere to deploy? So what to do in that case @@codewithyousaf
Is this for web or app?
Thanks I guess, didn't work for me, wheres the source code?
bro why you use "require " instead of "import"
to use that just go to your packege.json file and import module as import then we can use that for I didn't yet in the next videos I will implement it.
@@codewithyousaf ok bro . can you give a video that contains how to create a [chat bot] using mern stack
You didn't tell what front-end packages you install, you have to give full information rather then skip.
He said in the video, axios, react router dom bootstrap... After 3:20
React js. Frontend
Node js. Backend
Please. share the code of this tutorial
Ok I will drop the link
www.buymeacoffee.com/codewithyousaf/build-full-stack-crud-app-react-node-mysql
@@codewithyousaf Thank you so much
@@asmaparveen8545 yes you can
0:03 how do i get intouch with you. Do u have and email
ERROR in ./src/App.js 6:0-46
Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in 'D:\Code By Himawari\full_stack\frontend\src'
ERROR in ./src/App.js 7:0-64
Module not found: Error: Can't resolve 'react-router-dom' in 'D:\Code By Himawari\full_stack\frontend\src'
ERROR in ./src/App.js 8:0-32
Module not found: Error: Can't resolve './Studetn' in 'D:\Code By Himawari\full_stack\frontend\src'
ERROR in ./src/index.js 6:0-21
Module not found: Error: Can't resolve './index.css' in 'D:\Code By Himawari\full_stack\frontend\src'
this is my problem, can you help me fix
There is not a problem but there are problems.
install bootstrap, react-router-dom and solve the Student component.