Beginners CRUD Tutorial - ReactJS, MySQL, NodeJS

In this video I will teach you guys how to make a simple CRUD Application using ReactJS, NodeJS, and MySQL. I've made a similar video in the past, but I wanted to present a different view on the topic. I also corrected some errors in that video and the audio quality improved. Hope you guys enjoyed it!
🌟 Learn Programming Fundamentals on Brilliant: brilliant.sjv....
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Code: github.com/mac...
Please leave a comment on what topic you guys want me to cover next!
-
❤️ Support the Channel: / pedrotech
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: [e-mail]
Tags:
- CRUD
- MySQL
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[@szuchenshen1293]

It is more clear than other tutorials I found in the past weeks, quite suitable for beginners

[@serhiitarasenko1979]

Thank you! Few tips for those who's watching: - For you to use a Workbench, make sure, you have installed MySQL on your computer. - You might have some issues with authorization when trying to post data to the database. you can use mysql2 instead of mysql, set your password in the workbench itself. - will appear if you add width and height. - instead of creating bunch of states for your each input, you can control them (inputs) by giving name and value attributes linked to the state object, and store all the data in one state object Once again, thank you Pedro for your effort. :)

[@biso1552]

mvp, appreicate this, thank you.

[@cityisbetter]

mysql2 saved me!!

[@ludvigdahlgren7592]

what a legend

[@jorgeserratoc3031]

if anyone wanna know the last tip, there you have: function App() { const [employeeData, setEmployeeData] = useState({ name: '', age: 0, country: '', position: '', wage: 0 }); const handleInputChange = (e) => { const { name, value } = e.target; setEmployeeData(prevData => ({ ...prevData, [name]: value })); }; return ( Name: Age: Country: Position: Wage (year): Add Employee ); }

[@YuyangXing-h7x]

that really helps, the second line! thx so much!

[@TheSidhdarth]

It was just awesome I was facing issue from last week Yesterday I successfully completed db connection and inserted data through my app

[@globalsavors]

Issues I had... 1) if you have never installed MySQL on your computer, make sure to get the server first which is needed to connect the workbench database to the backend code. 2) the app.use(cors) method still posed some issues for me so instead use this app.use(function (request, response, next) { response.header("Access-Control-Allow-Origin", "*"); response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

[@albiameti7]

THANK YOU

[@manupareek5986]

Man! Thanks from the core of my heart! Pls keep these kind of tuts comin !

[@PedroTechnologies]

More to come! Appreciate the support :0

[@TheKEEEEEeK]

Your way of teaching, the attention to detail, simplicity and thorough explanations of everything you do...Wow, perfection

[@PedroTechnologies]

So nice of you, Thank you!

[@CourageToGroww]

this guy was far from perfection tbh he didnt really seem like he understood this stuff at a professional level almost like he just got out of a boot camp and also didnt show how to set up the mySQL to local host as someone who never used mysql use to MongoDB, that was a frustrating experience good tutorial none the less

[@naissacharles107]

any suggestions on how to fix Warning: Each child in a list should have a unique "key" prop. This issue occurred after I tried displaying the employees (managers) by clicking the show employees button. This is my code: Show Managers {managerList.map((val, key) => { return {val.fName }; })} in the get function: setManagerList(response.data);

[@PedroTechnologies]

Hey, yes! in the div being returned, add a key property. Like this: return {val.fName}

[@awin5819]

for ppl with errors recently, just do npm install mysql2 and then replace require('mysql') with require('mysql2'). Fixed it for me

[@baltazar1106]

Yup, then for the password I had to use my personal password I set when I installed mysql workbench I recommend installing dotenv and use a .env file to securely use your password

[@JulesChavent]

Reaaaaally nice tuts, even for french people who are not fluent in english. If by any chance you would find the motivation to add timestamps it would be just perfect ! I find myself comming back to this video a lot and it's a pain to find just the information I need. You have a new sub anyway !

[@PedroTechnologies]

I am trying to add timestamps to my new videos! It takes a bit of time but I think it is helpful

[@cotonillo]

Tengo un 50% de inglés y logré entenderte muy bien saludos desde Guatemala me gusta Reac con MySQL

[@PedroTechnologies]

Muchas gracias! Yo hablo un poquito de español también, pero soy de Brasil. Me quedo muy feliz por estar ayudando!

[@JenniferStewart100]

I have an idea for the video. How about taking this project and connecting it to AWS MySQL, and import the db info. Like how do we get our db to sync with AWS, and use it as storage. Just an idea. Really like this video, and how you get right to the point.

[@brNoMundo123]

I'm a self-taught front-end developer and I'm starting to see MySQL, this tutorial was very important for me to see how MySQL integration and front-end work. 👩‍💻 I'm also from Brazil 🇧🇷 and I prefer to watch videos in English to practice this skill and it's good to know that there are Brazilians who make quality content like you!! Thanks for the tutorial, I loved your teaching😍🥰🤓

[@anvildevils]

Such a good video! You had me laughing my ass off when you were talking about how horrible you thought it looked at 1:08:50

[@matthew4892]

20:33 there has to be a better way than to manage the state than using 5 onChange event listeners. wouldn't it be easier to update the state with one setState using a destructed object? ie useState( ( ) => { Name: " ", Age: 0, Country: " ", Position: " ", Wage: 0 } ) ;

[@PedroTechnologies]

Yes, absolutely! I didn't do this in the video because I wanted to make it as simple as possible for beginners!

[@derickmcmillian]

Nice. I didn’t know you could do that either. I’ll definitely use this method.

[@vivekpaliwar7217]

thanks Pedro it help me how to work with API in node

[@ezequielzion]

Hey man just letting you know that this video specifically helped me a great deal getting my first job, so im really thankful for this. Keep putting out great videos, obrigado cara

[@PedroTechnologies]

Wow, I am extremely happy to hear that I helped you get a job hahaha I really appreciate the support!

[@mohitgoyal6979]

where did you get the job? I m also searching

[@bharatsinghtanwar5963]

@@mohitgoyal6979 go to Internshala apply for an internship, once you complete the internship some companies offer jobs to good candidates.

[@erenjeager396]

Our instructor wants us to make this type of app even though he hasn't taught us shit. Thank you so much for this T_T

[@hussainimam2222]

bruh

[@SleepyPunkRecordings]

workbench looks completely different for me. i don't have an "apply" button. is this tutorial out of date or am i missing something?

[@BDCPT-amPhiHoang]

The create-react-app command gave me package-lock.json instead of yarn.lock. I search it up but no results. Is that okay?

[@uas8078]

Please make a video with it being dockerized

[@ShikmanRotMG]

you are saving us on our project. pedro 2024

[@PedroTechnologies]

LMAO Im glad I could help!

[@joseulissescastro4883]

#pedro2024

[@eumm11]

excellent video man, exactly what i needed, thank you so much!!

[@guatemalaboy17]

For the input state, you can also create a set called [formData, setFormData] And make it into an object that tracks all the inputs, instead of naming each for the state. Keeps it DRY

[@jorgeochoa2731]

Awesome! the best tut i've watched. Nice bro! Thanks

[@vvevvlord12]

am getting an error at the employeelist.map part saying "Warning: Each child in a list should have a unique "key" prop.". how do I fix this?

[@vvevvlord12]

nvm got it fixed, xd

[@thomaspgeorge4339]

This is perfect!!🔥Thank you so much for this!!

[@PedroTechnologies]

Glad you like it!

[@LuizFelipe-fm1yz]

Sempre suspeitei que você era Brasileiro. Very nice dude!

[@PedroTechnologies]

Kkkkkkk meu nome entrega!

[@gabrielmarinho6803]

@@PedroTechnologies Mano pior que o sotaque também entrega kkkk esse é o primeiro vídeo que vejo seu e já tive quase certeza que tu é brasileiro pela forma de falar, porque eu falo do mesmo jeito hehe

[@MrFyce]

can i jus retrieve directly from database without the clicking the button and show on the website? meaning to say i already pre import or pre insert data into my sql database before hand but I just want to show from the database and not from the clicking of button

[@PedroTechnologies]

Yes, you can use a useEffect hook and make the axios request from tjhere! I have some videos where I do this!

[@MrFyce]

@@PedroTechnologies could you provide the link? Do we use useEffect Hook to retrieve data from database straight away and display it in a table form?

[@MrFyce]

@@PedroTechnologies could you make a tutorial on this? :)

[@liondepierre]

Love how authentic you are in your tutorials man. Not cutting when you encounter errors or is in doubt. You're the best man.

[@pawekozowski6128]

those api requests dont seem to work anymore

[@Tycooo1-5]

To copy his code exactly, and to allow the SQL to authenticate using the password "password", you can run the two statements: ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; flush privileges; in an SQL query to reset your root user localhost password to "password." Additionally, if you are receiving the error "Field 'id' doesn't have a default value" as your error within your database query, run the SQL statement ALTER TABLE employeeSystem.employees MODIFY id int NOT NULL AUTO_INCREMENT; in order to set ID to auto-increment. I hope these tips are helpful! Happy coding.

[@varaprasad4163]

Hi Pedro! wr can I find remaining queries like put and delete? is there any 2nd part? by the way great content.

[@PedroTechnologies]

Yes! Here it is: kzbin.info/aero/PLpPqplz6dKxVr0nBKREgJadkAczkAqg5R

[@gedoumazoutsuki]

to refresh the employee list after adding an employee i simply pass the function in the promise like so .then(() => { getEmployees() } probably not that optimal but the advantage is you need to provide each entry a unique key in the div( that's how it is in react): in order to get that id we have to get it from the database, that why even tho it's not the perfect solution it works the same and adds the benefit of not having a warning in the console 😎😎

[@user-mk8he1ex3m]

Thank you. Very thorough and super-informative. Fav part was fixing the CORS and 500 errors live as this really helps devs know what to expect and how to overcome challenges. One of the best tutorial vids I've seen - top man. Subscribed! 👍

[@PedroTechnologies]

Great to hear!

[@btc_only]

Bro did you do the video that explain how to delete and update the stuff?

[@PedroTechnologies]

Yes! Here is the link for the playlist: kzbin.info/aero/PLpPqplz6dKxVr0nBKREgJadkAczkAqg5R

[@btc_only]

@@PedroTechnologies thank you dude!

[@Nicoytfr]

Thanks very much for your work, it really helped me, have a great day :)

[@PedroTechnologies]

Glad it helped!

[@mansilaad2062]

Really awesome 👍👍waiting for more projects

[@PedroTechnologies]

More to come!

[@RahulSharma-uu9xx]

Its tremendous I completed it in a single shot like a 10 minute video ...........good job buddy you will definitely get $800000 soon

[@PedroTechnologies]

Hahaha lets hope :)

[@saurabhtalele1537]

cool

[@imehusoro4222]

You're a star, thank you soo much. You've made full stack sooo easy!!!

[@coolshahan]

Thank you Pedro. I was following accurately but at the 59th minute I got stuck. My get request is not working. I'm following each of your codes but not working. Error complaining about the App.js file Axios.get method (const getEmployees method). It says Network error. When I go to the Network tab, it says CORS error. How to fix it. Please let me know.

[@PedroTechnologies]

Hey, can u paste ur code here?

[@coolshahan]

@@PedroTechnologies in the mean time I downloaded your full code from Github. Now it is working but still did not get why my code with follow along lecture was not working. Anyway thank you so much for the reply. I learned a lot from your lecture.

[@shubhammahajan2926]

Well Explained! Easy to understand... Thanks for sharing your knowledge with us.

[@PedroTechnologies]

Glad it was helpful!

[@kirayamato7875]

Bro, is it difernt betwen mongo db and mysql??? When i got project "M.E.R.N stack" i always got mongodb,express and bla bla bla but mysql, i nver got that project So is it diferent ?? Like router, schema, controller ?

[@PedroTechnologies]

MySQL and mongodb are very different. MySQL is a relational database management system and mongodb is a NoSQL database. MERN means mongodb

[@kirayamato7875]

@@PedroTechnologies no, i know the theory but i dont know about code... is it diferent ? making API in nodejs ???

[@badermuteb4552]

your are the best Pedro. can you make full CRUD application even if it's tiny without css ^_^? thanks for the tutorial

[@prospect8843]

am going to work with this video always, at 19 you were doing this great . thank you very much and upload more work brother

[@eatalotoffood1635]

In my chrome I am not able to debug like u, how do i make it possible to debug? I am using mac nad chrome

[@PedroTechnologies]

You should be able to debug with chrome! If you right click on a page and go to inspect element it should appear there!

[@mubeenabegum3140]

Amazing Dude, This really helped. Thanks.

[@PedroTechnologies]

Glad it helped! Thank you!

[@itgun]

love you bro, subscribed

[@pedroelton7040]

Cara, eu não fazia ideia que vc era Brasileiro... Mtoo bom!!!

[@sh44ko58]

Im getting the error: Data.map is not a function ??

[@deepbaaaaaag]

Really it's a great video for me thank you 👍🔥🎓

[@PedroTechnologies]

Thank you for the positive message!

[@deepbaaaaaag]

1. Can you please host this react project on live server like cpanel aws please create a video without build method. 2. How I can some changes and add features after react create build method

[@pjguitar15]

Which do you like using more? MySQL or MongoDB?

[@PedroTechnologies]

MySQL!

[@zenec_]

Your videos are amazing so feel free to make A LOT of them ;p

[@SteashEdits]

Your MySQL Workbench on MacOS is completely different from Windows so I'm quite confused how to follow that..

This is great but you spent way too much time for CSSing employee list. I am curious why you didn't use a table.

[@reamsel]

I really wished how you connected the MySQL Workbench to the node js server. Because it stopped there for me

[@AB-kq9xm]

I got stuck there but installing mysql using homebrew fixed it.

[@pawekozowski6128]

yeah this got me stuck too

[@adityajoshi6524]

the yes at 50:05 is a moment which every developer can relate...!!! Thanks for the content brother helped a lot..!

[@varunhari200]

Hi Pedro 👋 I'm getting error in the hard spot (sending the data's btw mysqlworkbench ) error like : client does not support authentication protocol requested by server . Can u please solve it .

[@PedroTechnologies]

Hey, did you get it fixed? It usually is fixed by changing the mysql password!

[@charming0420]

nice bro ! nice video help me a lot!!! from Taiwan's support haha

[@PedroTechnologies]

Glad to hear that!

[@elmerluis5705]

Thank you! I got my data entered in React JS saved in MySQL

[@PedroTechnologies]

Awesome!!!

[@iridianfernandez204]

Hi, I have some errors in server's console and I don't know how to fix it: Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

[@SleepingPickle]

Just leaving here a wonderful message because of how useful this guide. Godbless and Keep Coding

[@ebk_72]

i love your videos man. I like how you explain your code to the viewers. Wish I'd known your videos sooner. :)

[@PedroTechnologies]

Thank you! I really appreciate the support! I'm not going anywhere so any doubt you have u can ask me to make a video on it!

[@livewire9263]

I think you will make that 800,000.00/year. Great Job.

[@PedroTechnologies]

I don't lmaooo That would be awesome but very hard to achieve hahaha

[@thekingheard]

wow great video. You deserve more likes!!

[@PedroTechnologies]

Hahaha thank you! Glad you liked it!

[@angelsolorzano7001]

Creo que hablas espano. pero que genial forma de explicar pedro, sos un crack!!.

[@PedroTechnologies]

Gracias!

[@nathansantos4197]

In my personal project I'm trying to send multiples rows to insert in database, but unfortunately it just insert some rows and not all of them. I'm trying to insert multiples rows that contais students data, each row is one student information What can I do in react to solve this?

[@PedroTechnologies]

Hi, so you need to manually add many insert statements to make this work. I recommend inseting them in different queries.

[@asmarc1]

Great video. Super helpful! For anyone else looking to dig more specifically into the back end first, that starts at 21:55

[@PedroTechnologies]

Thank you!

[@israelabaho3978]

I'm getting this error in my terminal guys, any help? Node.js v18.14.2 [nodemon] app crashed - waiting for file changes before starting...

[@ahitch3681]

The project broke after installing cors. Going to retry tomorrow when I have some more time. But, do you have discord/slack for potential questions if I can't manage to debug this? Really want to get these requests working so I can continue on a personal project. I think there have been some conflicting updates since the upload date.

[@savivioo]

Hei bro, I strugle to ywo week learn express. but i see your vidios. i think we are in same age. your vidio are very clear and meaning full. i did my internal job work using your knowledge.

[@PedroTechnologies]

Glad you liked it!

[@mohamedessid1444]

in 45:22 there is a problem Module not found: Error: Cannot find file: 'index.js' does not match the corresponding name on disk: '. ode_modules\Axios\axios'.

[@PELOYCABAZOS]

Hi Your code {employeeList.map(val, key) => {... it doesn't work in my computer, i have been searching and i found out that the map() function shouldn't work with objects, only with arrays. how did you make it work in your code?

[@PedroTechnologies]

Hey, employeelist is a list not an object. When you get the data from the api it receives an array of objects. A lot of people are getting confused by this cause I think my font should have been bigger. when I define employee list i wrote it: const [employeeList, setEmployeeList] = useState([])

[@PELOYCABAZOS]

@@PedroTechnologies really???!!! haha. ok let me check your video a couple of times more. Thank you!

[@PedroTechnologies]

Hahaha no worries! Just think of it this way, each row in the database will be an object, and since you are receiving every row in the db, you will receive a list of objects!

[@PELOYCABAZOS]

@@PedroTechnologies Its funny how it doesn't accept an object in the first place but it actually accept a list of objects haha. Thanks a lot!

[@kcmikee]

Love your video, very educative but Please can you do a video on pagination for node, reacts and mysql

[@PedroTechnologies]

Thank you! I have a video on pagination!

[@kcmikee]

Really? I haven't seen but I'll check. Thanks.

[@shahirshaikh3605]

amazing explanation

[@vennishanaidoo2380]

Warning: Each child in a list should have a unique "key" prop. Check the render method of `App`... Has nobody gotten this error?

[@ts4life783]

Great video I was wondering what is a Bootstrap equivalent in React, which will allow datatables, modals, etc?

[@PedroTechnologies]

Thank you! What you want is either Material UI or React-Bootstrap. I recommend Material UI despite being a constant bootstrap user previous to learning react

[@justinwang989]

Can you do a video of how to add Authentication (Login) to a React Node MySQL app?

[@PedroTechnologies]

I'm planning on making another video similar to this, but I already have a 3 video series doing exactly this using React node and MySQL: kzbin.info/aero/PLpPqplz6dKxVC1RlVMH_LcZz2vUheC1-i

[@MrRamani]

Plz including if and else conditions to check data is empty and check data is not sam I can not define this checksum

[@PedroTechnologies]

I agree it is how you should do. I just didn't want to overcomplicate as it is more of a beginners video

[@MrRamani]

Ok... Need some help

[@Vini011]

I love it! i'm Brazilian, i'm learning english and JavaScript both, and i could understand 90% of you say, and i do the project. Thank you so much!

[@TheEmranemu]

'Client does not support authentication protocol requested by server; consider upgrading MySQL client' I can't solve the issue, please help

[@thomaswahahauw560]

I have a small task they use a lot of js frameworks. But im confused for what to use to build a front end crud application. Should i use angular and node js because angular has also a library for the UI part, helpe me 🥲

[@selahadinjemal7138]

at the end of the video you tried to show the added employee automatically. instead of writing array destructuring... you could just call getEmployees().

[@BrianShimkus]

sqlMessage: 'Client does not support authentication protocol requested by server; consider upgrading MySQL client'

[@d4cndev]

hi there pedro, could you please share how to install the Workbench version you have? I am trying to follow the tutorial I already know how to defend myself with react, but the MySql Workbench I dowloaded has a different ui I am not sure if i dowloaded the right one or now lmao Help please!

[@matthewharrison6718]

this

[@matthewharrison6718]

did you ever figure out?

[@d4cndev]

I did not. I just had to learn how to use the version I dowload it, took me a while but I did manage figure things out, If you could wait a little i could try to find the forums and docs I read, maybe that could help you too

[@matthewharrison6718]

@@d4cndev that would be much appreciated

[@gerganaarnaudska1748]

Hello, i have a question. What if i wanna click on one of the elements and to send in other page and in this page to return more information for the item, like to "select fhddgfds from sdgfhgdfd where ( id = fsgf) " like how do i get the id from the first page to other page ??? That's what i wanna know

[@binitrupakheti4246]

Network error with the front end react app. I've tried to debug it but can't seem to find the faulty part

[@israelabaho3978]

Hi Pedro thanks for the good work. Please help me on this. At this stamp 1:00:37 i'm not able to add a new data until i end the server and run it again. So whats happening if i want to add a new employee i need to start the server. I tried to run it as node index.js that failed to help, i installed nodemon and still its not working. Any advise regarding this?

[@evernolasco19]

I keep getting this error: Error: connect ECONNREFUSED 127.0.0.1:3306

[@tts3247]

Thank you! Very helpful!

[@ektapatel1208]

thank you so much .this video is very useful. thank you so much for all your 😇efforts

[@mehdicetinkaya7542]

keep getitng this error: App.js:14 Uncaught TypeError: axios__WEBPACK_IMPORTED_MODULE_7__.Axios.post is not a function

[@gpcubo4478]

thank you I had a bug because haven't included cors library in my project, cheers from Venezuela

[@matthewbrown4572]

I'm getting an error when after I click the Add Employees in my node terminal saying "PROTOCAL_ENQUEUE_AFTER_FATAL_ERROR'. I included cors and the app.use(express.json()) statement. I can't seem to figure out what the problem is. Any solutions?

[@PedroTechnologies]

Interesting, can you paste ur code here?

[@matthewbrown4572]

@@PedroTechnologies I was able to figure it out. MySQL was actually the problem. I had to reinstall it and change the username and password information

[@Niko_993]

can i implement sorting and searching in the format of your POST? I am stuck there. also form validation

[@harisvk2305]

Very good teaching ..Iam searching many tutorial but your video it's just wonder ful.

[@aymaneu3723]

i love your videos!! and i'm the like number 3,2k i whish you have triple the number. you deserve it

[@yadavkishan3778]

hi sir mysql node and express tow table join and api with images video and reac js node js simple shoping project collge submit

[@aymenbachiri-yh2hd]

THank you so much pedro

[@selahadinjemal7138]

it would really be helpful if you showed the end product first, just to know what we are going to build. thanks.

[@diegoruiz4544]

very good video pedro congratulations!! you have a good explination and you english is so clear.. this video helped me a lot cause i am new in react and i am finishing my study as software developer fullstack in denmark.. i am from colombia greetings!!

[@PedroTechnologies]

Thank you! I am glad I was able to help! I remember when I started and how hard it was, so being able to help makes me happy!