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!

-
Please leave a comment on what topic you guys want me to cover next!
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- CRUD
- MySQL
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[serhiitarasenko]

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.
- <hr/> 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. :)

[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.

[TheKEEEEEeK]

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

[brNoMundo]

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😍🥰🤓

[awin]

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

[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();
});

[mkheexm]

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! 👍

[thelife]

Seriously, this video is very helpful. I watch almost 2-3 videos to learn about this topic, but I waste my one day. This video finally helped me to understand the topic and finally I again start working on my project.

[asmarc]

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

[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

[szuchenshen]

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

[Vini]

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!

[manupareek]

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

[JenniferStewart]

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.

[JulesChavent]

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 !

[guatemalaboy]

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

[RahulSharma-uuxx]

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

[sweend]

Goated tutorial brother. Only tutorial I found with no 2002 music playing in the background, with clear instructions and insights on everything you do. I want to make videos like this very inspirying keep it up

[prospect]

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

[elmerluis]

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