React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
This React JS Full Course for Beginners is an all-in-one beginner tutorial and complete course full of nearly 9 hours of React JS code and instruction to level up your programming skills. This course teaches modern React with functional components and hooks. Think of this React full course tutorial as a React JS video textbook with 23 clearly defined chapters.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: bit.ly/FAANGInterview
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 Please note: If you are just starting out with Javascript, I recommend completing my 8 hour Javascript full course for beginners tutorial before you try to learn React: • JavaScript Full Course...
❗ During the tutorial I mention several resources to be provided "in the description below" including links to source code for the various chapters. I have put all of these resource links in one GitHub repository.
🔗 All Resources & Source Code: github.com/gitdagray/react_re...
📬 Course Updates ➜ courses.davegray.codes/
React Full Course for Beginners:
(0:00:00) Intro
(0:00:48) Chapter 1: Start Here
(0:13:56) Chapter 2: App & JSX
(0:25:28) Chapter 3: Functional Components
(0:36:01) Chapter 4: Applying CSS Styles
(0:43:11) Chapter 5: Click Events
(0:51:55) Chapter 6: useState Hook
(1:03:23) Chapter 7: Lists & Keys
(1:35:50) Chapter 8: Props & Prop Drilling
(2:01:19) Chapter 9: Controlled Component Inputs
(2:38:25) Chapter 10: Project Challenge
(3:03:44) Chapter 11: useEffect Hook
(3:15:08) Chapter 12: JSON Server
(3:21:23) Chapter 13: Fetch API Data
(3:44:37) Chapter 14: CRUD Operations
(4:04:33) Chapter 15: Fetch Data Challenge
(4:43:10) Chapter 16: React Router
(5:02:58) Chapter 17: Router Hooks & Links
(5:51:28) Chapter 18: Flexbox Components
(6:02:34) Chapter 19: Axios API Requests
(6:40:47) Chapter 20: Custom Hooks
(7:17:04) Chapter 21: Context API & useContext Hook
(7:56:10) Chapter 22: Easy Peasy Redux
(8:33:39) Chapter 23: Build & Deploy Your React Apps
➡️UPDATE: Chapter 16 & 17 Part 2:
Refactor to React Router v6: • React Router v6 in 20 ...
👀 Visual Studio Code: code.visualstudio.com/
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
☕ Buy Me A Coffee: www.buymeacoffee.com/davegray
Was this React JS full course with 9 hours of instruction helpful? If so, please share. Let me know your thoughts in the comments.
#react #full #course - วิทยาศาสตร์และเทคโนโลยี
![[ไฮไลต์] แบดมินตันหญิง ไท่ ซือ หยิง vs เมย์ รัชนก อินทนนท์ รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/LUCG0H5qkpQ/mqdefault.jpg)
A 45 second intro followed by nearly 9 hours of code and instruction for React JS to help you start from scratch and level up. I bookmarked all 23 chapters in the description. If you complete one lesson per day, you'll complete the full course in less than one month. Post questions in the comments below. ⬇⬇⬇ If you are new to Javascript, you should start with my full 8 hour Javascript course tutorial here: th-cam.com/video/EfAl9bwzVZk/w-d-xo.html
This is a great tutorial! Thanks for putting a lot of time into the project!
@@abrahamngetich1415 you're welcome! 🙏💯
@@BondJFK that's great!
@Dave Gray I'm new sub, look forward to learning from your channel. I have a issue with moderate severity vulnerabilities. After I create react app and run it it shows and not sure what this mens and what to do?
Is it good idea to do npm audit fix --force?
163 packages are looking for funding
run `npm fund` for details
6 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
When i run the audit, it shows me this.
npm ERR! code ENOLOCK
npm ERR! audit This command requires an existing lockfile.
npm ERR! audit Try creating one first with: npm i --package-lock-only
npm ERR! audit Original error: loadVirtual requires existing shrinkwrap file
npm ERR! A complete log of this run can be found in:
I appreciate you putting in the effort for a 9 hour tutorial and then making it free for everyone. Definitely earned a like and subscribe.
I appreciate it!
Hi Dave, being the 4th React instructor I have attempted, you are the only one who has finally given me a clarity and sequence in understanding the concepts. I did the color box challenge and I was blown away that I was able to do it! Thanks for all that you do! I think you are one of the best at teaching this!
Thank you for the kind words 🙏💯
Now that's a tutorial! I love how thoroughly you dive into React concepts and the fact that you offer students the chance to apply what they've learned! Thank you so much!
Glad it was helpful!
Dave Gray is definitely good at explaining concepts. This course will surely help beginners and other levels in need of a refresher. Thanks a million, Dave, your course has really helped me!
I'm so glad to hear it! And thank you for the kind words. 🙏💯🚀
@@DaveGrayTeachesCode No problem, Dave!
Coming from PHP, I decided to learn the MERN stack for the one reason of being full stack, I must say you are very good at explaining and you have also chosen the classes in each of your JavaScript, ReactJS, NodeJS and the MERN stack carefully to ensure we get the best all in one place. You are well appreciated sir. Thank you for this gift!
Glad to help!
This was a great tutorial , I got so lost trying other videos but this video set me on straight . I will continue to learn from your videos . Thank you so much
Glad I could help, Darren! 🚀
Thank you so much! With thousands of React tutorials available on TH-cam, yours are the ones that actually keep me motivated to follow along (not a small feat by any means). If I may offer a suggestion: a course dedicated to a more complex and realistic React project could be really neat for learning about code organization best practices, since React seems to be very permissive in this regard. Thanks again and keep up the great work!
This is one of the best REACT courses out there. It guides you through the thought process, the pacing is great, and the challenges help you reinforce what you have learned.
Thank you for the kind words! 🙏🙏
Spent a few days trying to find a clear tutorial for react that gets to content quickly and presents the content logically. Thank you for the time and effort you put into this course.
You're welcome! 💯
You have a great style Dave. It makes it very easy to understand and move along with. Thanks
I've not watched this full nearly 9 hours video as I worked my with through the 23 individual ones. Just liking and leaving a comment for the YT algorithms, but if anyone is interested in learning react I highly recommend either this 9 hour vid, or each of the 23 individual ones. Great series, and an excellent teacher.
Thanks Dave for all the hard work on these. Much appreciate.
Thank you for the kind words!
I just completed the entire course, finally!! This is definitely one of the best React courses I've taken, if not the best. Your style and explanations are so clear and easy to understand. Thank you so much for putting this out there for others to learn from. Looking forward to watching all your other videos!!!
Great to hear! Thank you, Ajené! 🙏💯
Could you please share what was the best one.
5:39:40
In the date-fns package, the "pp" token stands for the meridiem (AM/PM) representation of the hour in a 12-hour format.
By including the "pp" token in the format string, the resulting formatted date will include the AM/PM representation of the hour. For example, if the current time is 2:30 PM, the formatted date would be something like "June 15, 2023 2:30 PM".
Brilliant and in-depth tutorial, Dave. Masterful work with easy-to-follow explanations (that I sometimes needed to watch twice). Two weeks ago, React was just another framework to me; after a week, I am currently 75% thru the React video and now have a solid understanding of the basics. I have your NextJS tutorial ready to follow-up this one.
Am currently attempting to modify the Grocery List tutorial to include a 'quantity' input field (I think need to review Hooks).
Highly recommended tutorial! One of the best I found here in YT!
Thank you and I will check your other courses related to MERN stack! Cheers Dave
Priceless tutorial. Finally someone who takes the time to explain, and design. Thank you Dave, very very thankful for this work!
You're welcome, Kevin! 🙏💯
@@DaveGrayTeachesCode Have an amazing Sat my friend!
As a Computer Science student that was greatly displeased with what I am / was learning at University, your content is a breath of fresh air. Finished the NodeJS 7 hours tutorial, currently working on this one and I will keep pushing until I get to the MERN Stack one. Outstanding explanations!
Glad to help!
Sad to think that all the money paid to the University could be spent somewhere else, or not spent at all. More and more jobs are looking to confirm you know what you're doing and can be taught their way rather than having a degree. This tutorial is already 3 years old and some parts of it are a bit outdated. Foundationally, it's great, but tech changes so fast, and the degree is 4 years so what you learn freshman year could be completely useless by the time a person finishes.
@@jarodmorris4408it doesnt matter i guess?
Yeah technology grows fast, but if you learn from the fundamental of some computer language and understand some of the syntax
You can still keep learning, and keep up with up to date information
Like some web/games/mobile app
If you understand the fundamental rule or code language of it, you can still compete with those new fresh students.
In the end of the day, all of it depends on how much effort you can do to learn from the basics and mastering all of it.
Yeah university learning system is bad, but you cant just learn from 1 source then you can master 1 topic yeah? You have study from any source, thats why some of college teacher always remind some of their student to study by themself how to solve this, how to solve that.
Its bassically how to train your mindset (positively) from college, schools
For information details that you need to learn, you have to search them yourself
You can learn for free from any web, videos, even scholarship class events that some of company make.
So dont give up on learning!
The way you speak and explain things is incredible. I am really grateful that I found your tutorial, the tips & tricks you share in between is very helpful. Thanks a ton for this video.
So in depth, learned a ton. Thanks for the tutorial
I guess commenting here would be the least I can do to show my graditude for the time and effort you put to make this amazing tutorials all for free. Thanks Dave, Thanks Teacher!
You're welcome and thank you for the note!
you are a great teacher, very easy to follow and understand! Looking forward to learning more from you!
Thank you, Otto! 🙏🙏
Thank you, Dave, for this tutorial and for updates for react router 6. You are doing great work! What was missing was a more detailed explanation of how to structure the project into directories more gracefully.
you dont know man how much you help me .. i learn axios and react basic from this video and with that tiny skills of mine i just made youtube clone.. thank you so so much . if any point of my life if start a job in this sector all credit goes to you. once again thank you so much
Hey Dave! you have a gift for teaching, it is a pleasure to learn from you, thank you very much and keep it up!
Thank you so much, Nazareno! 🙏🙏
This has been INCREDIBLY useful, thank you so much!
You're welcome!
FInally! Something much more intuitive for beginners like me. Thank you so much for this Dave! I really appreciate how well structured and how the lessons are well explained.
This is an Amazing course, by far the best I have viewed until now. I completed the entire course. Being a developer in Reactjs and switching to useState looked so overwhelming. Your tutorial is just what any beginner or even an experienced developer needs to code well. Thanks a ton! Keep posting videos!
Glad it was helpful!
Starting this course now in the hopes of becoming a better programmer! My education took me in a direction I was not interested in, so it's up to me to get where I want to be. This video looks so helpful! I'm only on chapter four, but I already feel so much more motivated than school ever made me feel!
Glad to hear that!
Dave, I’m finally done with the react tutorial, building projects of my own now. Thanks a lot ❤️
Nice work! 💯 I'll keep adding more React content to help out, too.
Can't thank you enough for this, I've had difficulties learning react from the website but you have broken things down for me
I've had a lot of great tutorials, but I am sincerely grateful that you took out the time to explain the files in this tutorial even if they won't be used. Thanks a lot Dave
You're welcome!
Finally I've fully watched the video. Amazing content as always. Despite the fact it's perfectly explained, I need to recheck some content to get more familiar with it. Thanks for sharing your knowledge 🙏👍
You're welcome Jose! I'm glad it helped. 💯🚀
Thank you for this amazing full length tutorial!! This inspired me to write a full fledged React application! The only thing that sucks however is how fast the language/framework changes its own standards without any warning! Referring to the Router section that I just started, React 6 now only supports Route under Routes and the component attribute doesn't work anymore, it has to be element that must contain the well formed tag of the component that we want to include. But I couldn't even have been this far without this tutorial :) so thanks again for this amazing tutorial and all your efforts! :)
Edit: I removed react-router-dom version 6 and installed version 5.2.0 and it worked perfectly with the code as per the tutorial :)
Edit 2: And just now when scrolled down on the Git repo to fetch Chapter 17 css, I found you already have a tutorial for react-router-dom v6 out 😂😂Thanks again!
Thank you! You can also update this tutorial with the RRv6 update video: th-cam.com/video/XBRLVRjZ3CQ/w-d-xo.html
Wonderful. Very comprehensive, thorough, and up to date. Thank you very much. I will follow your tutorials always.
Thank you! 🙏🙏
I’m so grateful for your help. It was a challenging time but you made it easier!❤
Glad it helped!
progress: day 1: upto 1hr mark
day 2: upto 2 hr mark,
day 3,4 : nill.
day 6: upto ch 15 done
Day 11: upto 8hr mark
Day 12: completed
where is 5 tho?
You have some fire contents on this channel 🔥
Keep going man!
Thank you Tomi! 💯🙏 Your channel is 🔥🔥 for Python my friend! Keep it up!
Great man! really I filled the blanks a lot - I love your teaching and how you drill down the logic for the specific business or technical need.
Thank you, Haider! 🙏
I hope your channel gets more traction than what you have right now, your concepts are really clear and concise and has truly helped up understand concepts I've been confused at.
Glad to hear that and thank you!
Thanks for the course, I was really in need of this...❤️❤️
You are so welcome! 💯🚀
I have completed 3 hours of this course and understood everything till now. Thank you Dave 🙏🙏 for the best react tutorial on internet.
You're very welcome!
I learnt html and CSS from your videos too 😊
Liked and subscribed right away! Best tutorial on youtube if you ask me! Thank you for providing us free stuff to learn!!
Welcome aboard! 💯🚀
I believe this is one of the best react course out there for beginners. You definitely deserve more subscribers. Thank you for this Dave.
I appreciate that! 🙏💯
Chapter 16 React Router 4:43:10
Chapter 15 Fetch Data Challenge 4:04:34
Chapter 14 CRUD Operations 3:44:38
Chapter 13 Fetch API Data 3:21:23
Chapter 12 JSON Server 3:15:09
Chapter 11 useEffect Hook 3:03:45
Chapter 10 Project Challenge 2:38:26
Chapter 9 Controlled Inputs 2:01:19
Chapter 8 Prop and Prop Drilling 1:35:51
Chapter 7 Lists and Keys 1:03:23
Chapter 6 useState Hook 51:55
Chapter 5 Click Events 43:11
Chapter 4 Applying CSS Styles 36:01
Chapter 3 Functional Components 25:28
Chapter 2 App & JSX 13:56
Chapter 1 Start Here 0:50
Intro 0:05
Splash 0:01
Just in case, for chapter 16 (React Routes) there have been some changes regarding react-router-dom. Instead of Switch and useHistory in the imports, you now have to use Routes and useNavigate respectively. And in the main.js file the import should be:
{ BrowserRouter as Router, Routes, Route }
And below that it should be:
,
Note that the attribute component is not used anymore, and instead it should be element={< />}
Yes, there is a link to my RRv6 update video in the description, too. 🚀
Thanks man i was struggling on this for hours
You can Actually just use the BroswerRouter on this one. At least for me, doing it like taht, prevents the code from working, i don't know exatcly why, but i think it's because the two (From the Main.js and inside the App.js) are conflicting. So for me what works is:
(Router being the imported name of BrowserRouter)
by doing that i already wrap everything inside the in and can use the , inside it.
This should be fixed at the top. Thank you!
Thanks man!
Your voice is so good to listen and the way you explain is synchronize , easy and clear all confusion.
Keep doing your best work .
Thank you so much for the kind words 🙏💯
I've been your student since one year since now, I've learned so much from you all for free. What a good teacher and person are you. Even free code camp didn't choose the right React course to upload, I watched one hour of their 11 houre course it's was really bad done bcz of the way of tutoring the creat did stick to. i guess i will never find any teacher like you Mr Dave, thx and may god protect this brilliant mind.
Great way to explain! You do not show how to do things, but you explain also the underlying concepts! This makes a huge difference and enables to transfer it to other projects.
That's the idea! I'm glad you like my approach. I try to teach students so they can solve their own projects and solve problems going forward. 💯🙏
Such a great series 👍
Really appreciate your effort.
Can you also cover a series similary for angular 😀
Thank you 🙏 for the request and kind words. No immediate plans for Angular, but much more to come for React. 💯
I want to say you are a great instructor.
Thank you
Thank you Dave gray this is the best react course and I personally thank you for taking 9 good hours out of your time to teach for free
Finally done…after one month😅…a lot of back and forth and struggles but I’m glad I’m through…thank you so much for this course…I feel a lot more confident approaching react projects now!.Thank you
Looking forward to more react projects from you
Great job!! 💯🚀
learning Javascript right now.. next goal to learn React.. thanks 😊
That's the perfect path! 💯
Same
Same
JS kahase kiyi..
I've watched some react tutorials and this is defiantly my favorite, don't usually leave comments on videos but had to leave this one to thank you, hope you make it big on YT
I appreciate that! Thank you! 🙏💯
The best tutorial I've ever watched.
You're a king!
Thanks!
Thank you for the kind words, Alex! 🙏💯
Just found this gem of a channel! Please continue doing api / react series. Your way of teaching is better than most udemy teachers.
Thank you Gabriel! 🙏
may be we are the most luckiest people in this world that we met him. i bought literally every course on udemy but this is something that grills and gears going on.....one request can you please do it data structures and algorithm on js deeper dive one.we dont care whether 8 hr or 20 hr we need that please
THANK YOU DAVE GRAY
@@sohailwork2800 you are welcome 🙏 and thank you for the request 🚀💯
I just started watching ur tutorial and stopped to thank u and appreciate ur style of teaching. Great explanation so far. Far better than the highest rated react course on Udemy. Do u also have a react react course on Udemy that I can purchase?
Thank you for asking and for the kind words. I do not have courses available for purchase yet. I do plan to start working on one within the year. 💯
@@DaveGrayTeachesCode Thanks would appreciate that. Looking forward to it 😊
Dave, thank you so much. You are a great talanted teacher. Your explanation is super understandable.
Awesome tutorial! Thanks so much.
I can't thank you enough. Learning from is really another experience. You make it so easy. Thank you very much.
Thank you for the kind words! 🙏💯
Ctrl + B, B for Boy, hides the file tree. This shortcut was given more importance than the whole react tutorial 😅😂. Jokes aside, great tutorial 👍
Maestro this is by far the best React tutorial ever! Many thanks, I've learned a lot!🙌
Thank you and I'm glad to hear it helped! 💯
Yo da one! The best react course. Planned, well-explained, consistent teaching. Thanks a lot.
I appreciate that!
Coming back to React, if found your awesome tutorial! Great job with all your tutorials. Looking forward to your 'Routing' v6 tutorial :)
And that RRv6 tutorial is coming very soon! Thanks Jeff!
Please Update for react 2024 Sir
Hi Dave, thanks a lot for this tutorial. I have gone through a few by others but you explain things really well and are a great instructor.
Thank you for the kind words!
Thanks for you so match , this series has helped me greatly🌹🌼
I made it to the last second of this 8 hour course and was wondering do you have a mern stack series where you build a simple project and upload it to netlify?
Glad you asked! Look at the Node.js series on my channel. Just finishing it up. Covers the rest of the MERN stack. After that will be a project using the stack.
Dave is great. "It's Dave man, I got the stuff" - Cheech and Chong
🤣🤣🤣 You keep on knockin but you can't come in - Cheech
Thanks Dave!
Thousand Big Thanks!
You truly are an Incredible teacher!! I have watched your other videos and you really explain everything really well. Thank YOU for this Brilliant video, much appreciated!
You're very welcome! 🙏💯
The best tutorial ever! Thank you!😁
Your courses are fantastic! Thanks so much for all the work you do.
You're very welcome!
I appreciate your pace and descriptive nature to help the concepts stick.
Thank you, Jeffrey! 🙏💯
Awesome content. Well explained. It took a little over a week but I got through it. Let's keep it moving!
Great to hear!
every tutorial of yours is the best of the best
Awesome tutorial (10/10). Very clear explanations. Always a fun experience to learn something new from Dave. Thank you.
Glad you liked it!
Sir Dave, your tutorials really help me a lot. God Bless to you Sir...
Hey Dave, excellent tutorial, the way in which you reconfigure the application in the end with Context API to make the code cleaner was amazing and answered the question bugging me through out the tutorial beautifully, I am currently looking for a job as an entry level SDE, I was wondering if you could share your thoughts on how the advent of AI developers like Devin would affect my chances, and what I can do to combat this shift in the industry.
How do you not have hundreds of thousands of views?! Hands down the BEST instructor on TH-cam. I'm sharing to my groups to get you views. Please keep making videos.
Thanks Steve! I'll keep going. I appreciate you sharing! 💯
9 hours OMG! Seems like I'm going to a journey . Thanks a lot Dave!
You're welcome, Roman! 🚀
Thank you Dave Gray for your awesome tutorials. This one and Nodejs trained me to master lever. Keep on the good work. God bless u
You're welcome! 🙏💯
This is an amazing tutorial.... so easy to follow yet so informative!
Thank you! 🙏
Amazing course. Packed with great content. Would love to see a NextJs course as well.
Thank you! Yes, NextJS is on my list for sure! 💯
best tutorial in the world. you are one of a kind.god bless🙏
You are injecting the concepts like a slow poison ! You are a killer @Dave !
I think this is good? Haha - thanks Mu Ven! 💯
successfully completed the 9 hours course🥳🥳. Thank you so much🙌
Thank you, Dave! 💯💯
Congrats for the great classes, you kept it all clear, thanks for this 😁💛🤝
Glad it was helpful!
Absolutely great tutorial 100% love it ❤
Thank you so much....DAVE😍❤
You're very welcome, Saikiran! 💯🙏
Gray this is very great resource. Keep it up!
Thank you! 🙏🚀
Thank you very much for this amazing tutorial. I learned a lot from your amazing tutorial! God bless you man!
Glad it helped!
Amazing course !! Thank you Dave 🙌
You're welcome!
I'm just in the first 30 mins and you're making life easy for me.... I hope to get more from this....... And i want to encourage people to hit the like and subscribe button so this could go a long way
Thank you, Eric! 💯
Thank you so much for your hard work!
Always a fan of your tutorials. Great content as always!
Thank you, Emmanuel 🙏💯
@@DaveGrayTeachesCode you welcome
WooHoo! If this's a gift from you for 7000, I prefer not to think what will come with 70000 ;-). I still have 2 videos to watch from the previous 'mini' tutorial but thanks to your help I was able to contribute to open source projects, convert class components into functional ones and ease state drilling with context API.
Thank you for amazing content and tremendous work you are doing.
This is amazing feedback! Thank you so much! 🙏🙏💯🚀
Thank you Dave for this great Content!
Honestly speaking, you just made me enjoyed learning react with deeper understanding. Thanks so much.
I'm glad I could help, Okiroro! 🙏💯