Full Stack web application using Spring Boot and React | REST API | MySQL | React Hooks
HTML-код
- Опубликовано: 5 июл 2024
- Create Full stack web application using Spring Boot and React. In this video we will use Spring Boot ( MVC, JPA, Hibernate) and Mysql Database to create the Backend application (Restful web service API) with and use React.js to create the frontend application with Material UI and React Hooks( useState, useEffect) with functional components. We will build simple full stack project with RESTful Web services API and also use fetch (you can use axios) for consuming REST API.
Install Java : • Install intellij in wi...
Install Intellij : • Install intellij in wi...
Change Java versions : • How to switch between ...
Install Node.js (Windows) : • How to install Node.js...
Install Node.js (Linux) : • Install Nodejs and npm...
Github Link : github.com/youtube-arjun-codes
Source Code Backend : github.com/youtube-arjun-code...
Source Code Frontend : github.com/youtube-arjun-code...
Spring Boot CRUD : • Spring Boot RESTful CR...
Timestamps :
00:00 - Intro / Demo
00:50 - Prerequisites
01:42 - Backend folder structure
06:39 - Model
09:43 - Spring Boot configuration for Connecting with Mysql
12:53 - PostMapping (Saving Data into Database)
18:33 - GetMapping (Getting Data from Database)
21:10 - Create React App
24:56 - Adding Appbar
28:20 - Adding Controlled form for Adding Student
36:10 - Send Data into database
42:55 - Get Data from database to react app
48:17 - Full stack Spring Boot React Project Completed
➡️:React Playlist ArjunCodes :
• React Router | Router,...
-----------------------------------------------------------------------------------------------------------------------
➡️:SpringBoot Playlist ArjunCodes :
• Spring Boot
-----------------------------------------------------------------------------------------------------------------------
➡️:Github Playlist ArjunCodes :
• Github
-----------------------------------------------------------------------------------------------------------------------
➡️ Subscribe : / codewitharjun
Stay Connected :
➡️ LinkedIn : / arjungautam1
➡️ Github : github.com/arjungautam1
Join Community :
➡️Discord : / discord
Follow me on :
➡️ Medium: / codewitharjun
➡️ Dev.to : dev.to/codewitharjun
➡️ Spring Boot FB : / 4242697249086041
➡️Telegram : t.me/arjuncodes
➡️Discord : / discord
➡️Subscribe : / arjuncodes
#FullStack #SpringBoot #React #programming #arjuncodes #CodeWithArjun
Great video! what front-end(JS) framework do you think is easier to learn first? React,Angular,vue? i used jquery(ajax), people said that Angular is easier for java developers to learn... Cheers!
Thanks. React is easier to start with. Angular is not easier for java developer to learn but since both java and angular are used in enterprise level so angular is used by Java developers.
Guys we use React because when we change some component then we dont need to refresh page . So if you put [students] parameter which is the end of the useEffect() function , you will see when you add a student and click the submit button, students list automatically refresh without all page refresh. (sorry for bad english :))
Thats awesome. It worked. Im a beginner btw. May I ask why this happens?
@@justmonika6529 when you put [student] in the end of the useEffect(), here you say to useEffect() to execute the block of code that it contains, whenever the student array changes... Read more about useEffetc Dependencies.
Thank you bro
Even though very basic, Its the perfect intro for amateurish coders, dint know much Spring or React but had some knowledge of Java, Java Script, so this was so nice!
Glad you liked it!
Man! I love you for making this! I have been trying to find a basic tutorial on how to use react with spring boot!
Glad I could help!
Very concise, straight to the point, beginner friendly. Thank you sir.
I've looked from youtube to udemy for a good Spring Boot and React tutorial for begineer and this is the best video there is. Simple yet so informative. Lots of thanks to this channel
Glad it was helpful! Keep coding.
hands down the best right into the point, full stack tutorial, amazing job.
Glad it helped! Be sure to subscribe.
super good and easy to follow content. Great starting point for backend developers to understand how to communicate with frontend.
Hats Off Sir !!!! Best Video Learned All the concepts in one Video Thank you very much. Wish you a great journey ahead ...
Thanks a ton
This is amazing man . Thank you so much for this video.
This lesson is a very basic standard, but it will give a fantastic feedback to rookies, I love it!
Glad you like it!
By far I have completed the backend part, so I just have to say THANKS for your explanation, is so brief that's is pretty enough to understand. Let's see how the frontend with React goes. For future content would be nice a tutorial about how to implement Native Query and also Criteria Query.
That’s good to hear.
you are a lifesaver thank you others couldn't teach this in 3 hours and u did that in 48 min 🙌🙌
Glad it helped!
Hey I really appreaciated the fact, that there was an error with the missing @Service parameter in the StudentServiceImplementation. So you explained what was wrong and didnt cut it out or something. Its good to see mistakes being made and how one resolves them.
Dont always show perfect code examples. --> My opinion
Thank you for this great tutorial. Better than my professors and Uni course. Wish you health, happiness and personal and financial success 👍
Happy to help.
too smooth, loved it
Gut gemacht danke.
Thank for this great toturial🙌
i like to add one thing just add students in [] braceses of useEffect so you dont have to refresh to show submited data
const [students, setStudents] = useState([])
useEffect(() => {
},[students])
awesome explanation in such simple words... great job man ...please keep up the work!
Thanks and welcome
Thanks for the video Arjun. It have given me a complete overview of web app development with Java.
Happiest to help. Keep coding
Phewx! thank you very much for your commitment to share knowledge. God bless you.
Glad it was helpful!
I learned a lot thank you!
Do you have any particular reason for Maven over Gradle? I am still new to this but would you expect any issues following along if I choose Gradle as it's the current default on spring initializr?
Great explanation , This channel is going to be more popular soon.
Thank you for your kind words. Keep supporting.❤️❤️
Thank you! This was really helpful! :)
Glad it was helpful!
Great video. Thank you so much
thanks super fast but at the same time super clear
Glad it helped! Be sure to subscribe.
Thank you. Your video was really helpful. Everything is really simple and step by step.
Glad to hear that!
thats great man i like it
Great Video. Keep up the work
Perfect tutorial from the UK
Glad i could help. Be sure to subscribe.
@@CodeWithArjun I’m subscribed
Can you do a video, on how to submit values and check if it’s correct in the database
Then give response
a very good and strong video to learn, I'm working for a big tech company and we are using the same as explained in this video.
Glad it was helpful! Be sure to subscribe.
This was great. I learned a lot. Thank You.
Happy to help
amazing tutorial! thanks a lot
Very nice... Congrats from Brazil...
Thank you very much!
you should use lombok in model class to reduce boiler plate code for getters and setters,toString(),hashcode,default constructor and parameterized constructor
Great content! 10/10!!!
Glad you think so!
Thanks, you are greatest teacher!!
You are welcome! Be sure to subscribe.
What versions of node, npx and mui are you using?
I'm having trouble using node v18.16.0 and npx version 9.6.4 with this tutorial.
Please help.
Thank you very much for your help
Awesome tutorial
This course it's amazing thank you very much
Glad to help. Checkout new course.
Thank you very much this was a perfect video
Glad it helped
Thank you, Dada. Sending love from Bangladesh 🌈🟩🔴🟩. Please give us more live projects like this.
Thanks brother. I have got new series on fullstack on my channel check out that as well. Best wishes from Nepal 🇳🇵
@@CodeWithArjun Dada i will see that Video series. My humble request to you if possible give us live a project about e-commerce web app by Spring boot and reactjs.
@@tamimiqbalpython4849 Sure i will plan soon on making a project.
First Id like to say thank you for posting this it was very helpful. I do have one question though, when i do my post through postman the connection is successful but not all of the data I entered is being inserted into the table. Do you know why this could be happening?
Awesome tutorial!
Thank you! Cheers!
It helps me a lot. Thanks for sharing.
Glad to hear it!
Thank you! Really good course
Glad you like it! Check out the new course for CRUD operation using Spring Boot and React.
Thank You So Much ..Very Very Helpful
Glad it was helpful! Be sure to subscribe.
Great work! Thx.
Glad you liked it! Be sure to subscribe.
Hey when i use text field component its showing code inside should i put container outside it or inside it ?
Great tutorial for beginners!
Glad it was helpful! Be sure to subscribe.
Thank you so much!
amazing tutorial! the best sure!!!
Thanks a lot!
Thank you, it helps very well 👍
Glad to hear that!
Great tutorial, appreciate it !
Glad it was helpful! Check out the new course on CRUD application.
@@CodeWithArjun already added it to watch later, cheers.
very informative video, great quality content bro
Glad you liked it
Awesome bro...thank you
Thanks. If you get any problem please let me know. Don't forget to subscribe.
great thanks!
Thank you for yours great video!
Glad you liked it! Be sure to subscribe.
Why did you refresh the app in the end to show Ram-India? You should show it when you submit it.
Isn’t it better to get all the results as a response when we save a new entry?
Excellent !
Thank you! Cheers!
Thank you so much grate video sir wa 😊
So nice of you
Hi
while testing api on postman by POST method
I m getting 400 errors not able to parse json object
This helped a lot thank you
Happiest to help. Be sure to subscribe.
Thanks bro, great video
Glad you liked it
Just Wow!!! Sir please create a blog using Spring Boot and React with login functions!
Thanks for the idea! Surely. Don't forget checkout the new series of full stack CRUD app.
@@CodeWithArjun Yes I will... Thank you so much again sir.
can we create frontend backend combined windows executable file which will run whole application at once.
Thanks you, nice video good explanation
Glad it was helpful!
subscribed, you teach so well
Glad it was helpful. Thanks for your words.
legendary tutorial
Glad you liked it. I have got new series on full stack CRUD check out on channel.
thanks Arjun did you ever code something similar in non Java language or frameworks ? if so what did you use and how did you find it compared to Springboot and java ?
I haven’t used any other frameworks but you can use node js if you want to learn
Fantastic 👍
Very simple and crisp
Glad you liked it. Be sure to subscribe
Hi arjun sir i am getting 401 as unauthorised to access error i am using jwt security in my application i am confused about xhamp how to use that? Please help..
best video ever! now jsut gotta figure how to deploy online
Thank you so much. Glad you liked it. Be sure to subscribe.
My next video will be on that how to deploy Spring boot app and react app on Heroku. If you want to deploy using netlify for just react app i have got one video you can check on my channel.
@@CodeWithArjun I am looking forward to the next one, btw your videos are awesome
@@thegabriel475 I have published for front end with backend i haven't i hope i can soon.
hi! thank you for the video! I got the following error when I accomplished the very first part and run the application. Do you know how to solve it?
java.lang.NullPointerException: Cannot invoke "org.hibernate.engine.jdbc.spi.SqlExceptionHelper.convert(java.sql.SQLException, String)" because the return value of "org.hibernate.resource.transaction.backend.jdbc.internal.JdbcIsolationDelegate.sqlExceptionHelper()" is null
Sabe me informa se no Windows tenho que usar é este comendo: .\mvnw.cmd spring-boot:run
Cant we just html,css,js for frontend and postgrace database?
Thank you very much. ❤
You are so welcome. Be sure to subscribe.
Good work...keep going
Glad it was helpful, Be sure to subscribe.
Hi, I don’t get how the ract app connects to the back end (springboot )
What a great tutorial. Just one question. I'm getting empty Id when I call getAll. Name and Address is displayed, but Id not. In DB all Id's are visible. Any ideas?
Sir, hello, how do i export both frontend and backend, for it to work in different pc's
Thanks a lot bro :)
Glad to help
Amazing tutorial, helped so much, thank you a lot! :D
Glad it helped! Don't forget to subscribe.
@@CodeWithArjun now when i watched the 2nd part of the video i have a question: now you have 2 different apps on different ports: studentsystem and studentfrontend, but how do you make Spring Boot deliver React from same port. Do you also have a tutorial for this?
got it, maven-resources-plugin ;)
Thank you!
You're welcome!
helped a lot
Be sure to subscribe.
can you make a video on how to deploy this backend and database in render and react app in vercel
THANK YOU!!!!
glad it was helpful
I was having the error "java.sql.SQLException: Access denied for user Victor@localhost (using password: NO)" in the 12:24 of the video trying to run the application. I fixed it by creating an user with this name in the admin panel
we need to use the not video material ui we need to use the lastest one
Hola amigo, sabes como puedo agregar imagen a cada usuario? o tienes algún video explicándolo, gracias
thank you so much
You're welcome!
thanks
great Can you make a video of how to create a login page
Awesome tutorial, keep up the good work
Glad it helped! Be sure to subscribe.
Can you pls let me know what are the combination of techstacks are adapted by most enterprises(Java with Angular or Java with React), bcoz am preparing for Java with react
I would learn Java with react, python, gitlab, github, spring boot, docker, kubernetes,sql.
Thanks so much for the video. This is really helpful
Glad it was helpful! Be sure to subscribe.
I'm sorry it was a bit confusing! I promise that if you take your ti over the next few days and weeks, tNice tutorials stuff will make sense. Most
How can we make this kind of application live for users to access since the backend and the sever is on the local machine?
cloud hosting