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: ruclips.net/video/EfAl9bwzVZk/видео.html
@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:
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!
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!
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!
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!
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'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.
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
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!
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.
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.
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!!!
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".
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!
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={< />}
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.
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.
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!
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!
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.
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
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 🙏👍
he deserves more views and subscribers. he is nice and slow. he explained everything clearly and repetitively which is a good sign of a good teacher. some content creater assume you know everything and don't bother to repeat.
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
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 so much! With thousands of React tutorials available on RUclips, 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!
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.
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
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.
Hi Dave, the tutorial was amazing! I understood many concepts that I didn't understand from the previous tutorials I've watched on RUclips. But idk how by the end of the tutorials, I didn't quite understand much. This started happening from chapter 20 around when contextAPI was introduced. However I will try to understand it more myself. Thanks a lot for the tutorial!!
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
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.
Hi, Dave. I don't know if you've found this out but you can use those React snippets without pressing Ctrl+Alt+R. What I mean is just write "rafce" as though your writing normal code and the snippet will show up. Press Enter or Tab to expand it. I think you probably know this but just wanted to point this out because you were pressing Ctrl+Alt+R everytime.
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!
How do you not have hundreds of thousands of views?! Hands down the BEST instructor on RUclips. I'm sharing to my groups to get you views. Please keep making videos.
Usually I never comment on any RUclips videos, but i have to admit one fact that Dave sir is one of the best teacher of web development that i have came across😇
After following your TS course, I picked this one up, used TS and man, what a journey. It's being 2 weeks, and learned a lot and I'm so grateful for this information and knowledge being free. For everything, I used TS and with this video it helped me understand it a lot better (React + TS, w/o googling or chatgpt or anything else). Thank you for helping me sort some doubts I had, and again, for sharing your knowledge with us (little tips and advice costing $0) 👏
I am now going to get hired as a front end developer just by taking the courses of Dave gray and referring to documentations . He is by far the best teacher for HTML, CSS , JS and Now react . He really is a gift from God☺
As an Asian, i clearly catch what you say. Your clear voice and teaching method helps me to get react. I subscribe this channel. This content is priceless. Thank you. Love you from Bangladesh
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
@5:20:39 if you want to reuse the 25 by using a const, you can use a IIFE inside the curly braces: (() => { const maxLength = 25; return (post.body).length
43:20 1:35:50 2:38:25 - challenge time Results: Done in 30 minutes, tho I tried to use canvas, it didn't work, it was the only way I knew how to make a square and I think it would have worked if I tried in vanilla js since I have some prior experience with it from uni. Anyhow, I think giving a hint like: "btw use section element to make the square" would have been useful, since I had to give up and watch how you did it to see what I had to change. Immediately after changing from canvas to section and giving it a size and border in css it was working flawlessly. 3:09:10
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.
Great videos! please correct me if I'm wrong: at 2:24:43 you showed how to access the localStorage, but in the case of an empty localStorage, the getItem will return a null and cause the parser to fail with a parse(null). it worked with a conditional check of the storage before the state assignment const storedItems = JSON.parse(localStorage.getItem('shoppinglist')) || [ ]; const [items, setItems] = useState(storedItems); Thanks again
Hello dave! very clear instructions and i am really enjoying learning react from you. just wanted to point something out that the code you use for adding new posts or shopping items in the lists, which is const id = posts.length ? posts[posts.length - 1].id + 1 : 1; appends '1' add the end of the last id instead of incrementing it. we can use the following instead const id = posts.length ? parseInt(posts[posts.length - 1].id) + 1 : 1; again really appreciate your efforts. keep up the good work.
I ran into a similar problem with my code. My update and delete functions only work when the id is a string value, not a number. When I change the type to numbers, I get a 404 error when trying to check or delete an item
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.
I’m from Nigeria and I’m following your project, I’m now in chapter 11 and I just want to tell you thank you for this opportunity, I really do appreciate it 🙏🏾
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).
HI Dave, Learning React by following your Tuts - Nice - Pls I have one question: which extension should we use .JS or .JSX which is the recommended way of React? TIA.
hi, Dave Gray I think you missed these points during the last video. so I added these devDependencies and scripts by this I avoided the error with fetch API "devDependencies": { "concurrently": "^8.2.2", "json-server": "^0.17.4" } "scripts": { "start": "concurrently \"npm:json-server\" \"npm:react-start\"", "json-server": "json-server -p 3500 -w data/db.json", "react-start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
I just stopped the tutorial to say thank you. I've been stuck at installing react for the last 1 month. I almost gave up on react. Am now a happy react.js newbie. Tank you Dave❤❤❤
Thank a lot for your React tutorial! I feel like i learned a lot throughout this tutorial. I would have a question regarding chapter 19 where you use useEffect(() => { if (post) { setEditTitle(post.title); setEditBody(post.body); } }, [post, setEditTitle, setEditBody]); Why are the functions setEditTitle and setEditBody used as dependencies and when would they trigger the useEffect? Because I thought that the state should change but i don't understand how a function would change its state
I am glad you posted this question. I am confused here too. I was thinking this could potentially be an infinite loop if it's truly triggered when setEditTitle and setEditBody functions are called (state change?). This cannot be the case because this is working as it is now. Hmm???
I will take a stab at explaining what I understand why Dave added setEditTitle and setEditBody functions is useEffect() dependency array in EditPage component. When the App component renders, it creates the functions (NEW references) in useState() to these two functions. Therefore, we want 'editTitle' and 'editBody' variables to be populated, if 'posts' are also populated, hence the dependency in useEffect() in Edit Page. Hope this helps.
Just completed JS and created a few projects. So excited to start React! I've been looking forward to this for MONTHS! Let's see how long I take. Start Date: 29th July 2023 Will come back to add the end date soon. Forgot to add the end date. It was 29th or 30th August, I believe. Also finished the TailwindCSS course in 2 days. Currently in the process of creating frontend projects. I'm also going to create a portfolio website to showcase them This might take a couple of months because my exams are coming up.
Just finished NODE! and build projects with it now, REACT 3/2/2024 13:57 36:04 51:57 1:03:23 1:48:34 2:01:19 2:24:00 2:38:23 3:15:08 3:44:38 3:47:17 // AFTER 6 MONTHS I CONTINUED, I'VE MET A GIRL, THE RELATIONSHIP LASTED FOR 3 MONTHS AND NOW WE BROKE UP. IM BACK HERE. 4:04:32
i'm just watching 10 min and it seems beginner friendly i watched another tutoriels and they never talk about node installation and react extensions thank u so much
Excellent tutorial. Did you refactor the code 3 times to be able to perform a CRUD? I say this because you used 'easy-peasy', context and others. Which is the most recommended?
Hi Dave! Is it a wise decision to learn React & Node at the same time ? I've learnt a good amount of Html, Css and vanilla Javascript and can't wait to jump into MERN.
finally i completed this react and i also comlpleted first your node js, i had done mern stack from udemy but i could not understand much, i dont know if this course is too good or since im learning second time i understood better and why things are happening, this is definitely a good course which covers important topics which was not covered in udemy 70hours course of mern satck and in functional programming or declarative approach, i have learnt lot from this course with help of chatgpt otherwise this is not possible to understand everything what you speak for absolute beginner, now i feel i can make full stack projects because im getting ideas, this is the best free course i found , im very thankful to you, other educator can make this 9 hour course to more than 18hours if they present in slides what you are speaking, this is the cons and pro both of this course
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.
Yea the video is mostly relevant except for the React Router part where there are some significant changes, you can refer the link which goes over all the changes for better understanding !, other than that its an excellant video !
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: ruclips.net/video/EfAl9bwzVZk/видео.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:
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 🙏💯
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!
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!
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!
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
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!
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!
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! 🚀
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!
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?
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! 💯
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".
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.
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!
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!
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 😊
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!
learning Javascript right now.. next goal to learn React.. thanks 😊
That's the perfect path! 💯
Same
Same
JS kahase kiyi..
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.
You have some fire contents on this channel 🔥
Keep going man!
Thank you Tomi! 💯🙏 Your channel is 🔥🔥 for Python my friend! Keep it up!
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!
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: ruclips.net/video/XBRLVRjZ3CQ/видео.html
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.
Please Update for react 2024 Sir
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! 🙏🙏
So in depth, learned a ton. Thanks for the tutorial
This has been INCREDIBLY useful, thank you so much!
You're welcome!
You are injecting the concepts like a slow poison ! You are a killer @Dave !
I think this is good? Haha - thanks Mu Ven! 💯
Ctrl + B, B for Boy, hides the file tree. This shortcut was given more importance than the whole react tutorial 😅😂. Jokes aside, great tutorial 👍
You have a great style Dave. It makes it very easy to understand and move along with. Thanks
you are a great teacher, very easy to follow and understand! Looking forward to learning more from you!
Thank you, Otto! 🙏🙏
I'm not even learning react right now, but you teaching style is incredible and your voice is soothing
Thank you for the kind words! 🙏💯
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. 💯🚀
he deserves more views and subscribers. he is nice and slow. he explained everything clearly and repetitively which is a good sign of a good teacher. some content creater assume you know everything and don't bother to repeat.
Thank you! I appreciate the kind words! 🙏
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 😊
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 🙏💯
Thanks for the course, I was really in need of this...❤️❤️
You are so welcome! 💯🚀
Thank you so much! With thousands of React tutorials available on RUclips, 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!
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. 💯🙏
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!
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.
Hi Dave, the tutorial was amazing! I understood many concepts that I didn't understand from the previous tutorials I've watched on RUclips. But idk how by the end of the tutorials, I didn't quite understand much. This started happening from chapter 20 around when contextAPI was introduced. However I will try to understand it more myself.
Thanks a lot for the tutorial!!
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!! 💯🚀
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!
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 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! 🙏💯
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!
Hi, Dave. I don't know if you've found this out but you can use those React snippets without pressing Ctrl+Alt+R. What I mean is just write "rafce" as though your writing normal code and the snippet will show up. Press Enter or Tab to expand it. I think you probably know this but just wanted to point this out because you were pressing Ctrl+Alt+R everytime.
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! 🙏💯
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!
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
How do you not have hundreds of thousands of views?! Hands down the BEST instructor on RUclips. I'm sharing to my groups to get you views. Please keep making videos.
Thanks Steve! I'll keep going. I appreciate you sharing! 💯
Can't thank you enough for this, I've had difficulties learning react from the website but you have broken things down for me
hi dave i'm from india i have learnt across from many tutorial about react but you're the best teacher ever that i've seen before😍
Usually I never comment on any RUclips videos, but i have to admit one fact that Dave sir is one of the best teacher of web development that i have came across😇
the way you explained the state management.. great job tbh. thank you.
You're welcome! 🙏
After following your TS course, I picked this one up, used TS and man, what a journey. It's being 2 weeks, and learned a lot and I'm so grateful for this information and knowledge being free. For everything, I used TS and with this video it helped me understand it a lot better (React + TS, w/o googling or chatgpt or anything else). Thank you for helping me sort some doubts I had, and again, for sharing your knowledge with us (little tips and advice costing $0) 👏
Nice work!
If there were awards for the best RUclips teacher, I would definitely vote for you!
I am now going to get hired as a front end developer just by taking the courses of Dave gray and referring to documentations . He is by far the best teacher for HTML, CSS , JS and Now react . He really is a gift from God☺
Good job! 💯
As an Asian, i clearly catch what you say. Your clear voice and teaching method helps me to get react. I subscribe this channel. This content is priceless.
Thank you.
Love you from Bangladesh
Thank you, Mohammad! 🙏
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! 🙏💯
@5:20:39 if you want to reuse the 25 by using a const, you can use a IIFE inside the curly braces:
(() => {
const maxLength = 25;
return (post.body).length
43:20
1:35:50
2:38:25 - challenge time
Results: Done in 30 minutes, tho I tried to use canvas, it didn't work, it was the only way I knew how to make a square and I think it would have worked if I tried in vanilla js since I have some prior experience with it from uni. Anyhow, I think giving a hint like: "btw use section element to make the square" would have been useful, since I had to give up and watch how you did it to see what I had to change. Immediately after changing from canvas to section and giving it a size and border in css it was working flawlessly.
3:09:10
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.
Great videos!
please correct me if I'm wrong: at 2:24:43 you showed how to access the localStorage, but in the case of an empty localStorage, the getItem will return a null and cause the parser to fail with a parse(null). it worked with a conditional check of the storage before the state assignment
const storedItems = JSON.parse(localStorage.getItem('shoppinglist')) || [ ];
const [items, setItems] = useState(storedItems);
Thanks again
Thanks Dave!
Thousand Big Thanks!
Great tutorial! Have you considered making a similar video for Angular? It would be awesome
Hello dave! very clear instructions and i am really enjoying learning react from you.
just wanted to point something out that the code you use for adding new posts or shopping items in the lists, which is
const id = posts.length ? posts[posts.length - 1].id + 1 : 1;
appends '1' add the end of the last id instead of incrementing it. we can use the following instead
const id = posts.length ? parseInt(posts[posts.length - 1].id) + 1 : 1;
again really appreciate your efforts. keep up the good work.
It should be adding 1. Sounds like you have a string value instead of a number. If so, then yes, it would append.
I ran into a similar problem with my code. My update and delete functions only work when the id is a string value, not a number. When I change the type to numbers, I get a 404 error when trying to check or delete an item
@@jordanr2m Its because in updated json-server ids can only be strings.
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.
I’m from Nigeria and I’m following your project, I’m now in chapter 11 and I just want to tell you thank you for this opportunity, I really do appreciate it 🙏🏾
Great job! And you're welcome! 🙏🚀
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).
I want to say you are a great instructor.
Thank you
The best tutorial I've ever watched.
You're a king!
Thanks!
Thank you for the kind words, Alex! 🙏💯
HI Dave, Learning React by following your Tuts - Nice - Pls I have one question: which extension should we use .JS or .JSX which is the recommended way of React? TIA.
hi, Dave Gray I think you missed these points during the last video.
so I added these devDependencies and scripts by this I avoided the error with fetch API
"devDependencies": {
"concurrently": "^8.2.2",
"json-server": "^0.17.4"
}
"scripts": {
"start": "concurrently \"npm:json-server\" \"npm:react-start\"",
"json-server": "json-server -p 3500 -w data/db.json",
"react-start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I just stopped the tutorial to say thank you. I've been stuck at installing react for the last 1 month. I almost gave up on react. Am now a happy react.js newbie. Tank you Dave❤❤❤
Glad it helped!
@@DaveGrayTeachesCode ❤❤ Thanks
Awesome tutorial (10/10). Very clear explanations. Always a fun experience to learn something new from Dave. Thank you.
Glad you liked it!
Thank a lot for your React tutorial! I feel like i learned a lot throughout this tutorial. I would have a question regarding chapter 19 where you use
useEffect(() => {
if (post) {
setEditTitle(post.title);
setEditBody(post.body);
}
}, [post, setEditTitle, setEditBody]);
Why are the functions setEditTitle and setEditBody used as dependencies and when would they trigger the useEffect? Because I thought that the state should change but i don't understand how a function would change its state
I am glad you posted this question. I am confused here too. I was thinking this could potentially be an infinite loop if it's truly triggered when setEditTitle and setEditBody functions are called (state change?). This cannot be the case because this is working as it is now. Hmm???
I will take a stab at explaining what I understand why Dave added setEditTitle and setEditBody functions is useEffect() dependency array in EditPage component. When the App component renders, it creates the functions (NEW references) in useState() to these two functions. Therefore, we want 'editTitle' and 'editBody' variables to be populated, if 'posts' are also populated, hence the dependency in useEffect() in Edit Page. Hope this helps.
dave back it again carrying aspiring full stack web developers
You truly deserve two mugs of coffee, As soon as I land a job, that's the first thing I'll do, keep up the good work sir.
Thank you for the kind words, Alfred! 💯 Keep making progress and I know you will get that job! 🚀
Just completed JS and created a few projects. So excited to start React! I've been looking forward to this for MONTHS! Let's see how long I take.
Start Date: 29th July 2023
Will come back to add the end date soon.
Forgot to add the end date. It was 29th or 30th August, I believe. Also finished the TailwindCSS course in 2 days.
Currently in the process of creating frontend projects. I'm also going to create a portfolio website to showcase them
This might take a couple of months because my exams are coming up.
successfully completed the 9 hours course🥳🥳. Thank you so much🙌
Wonderful. Very comprehensive, thorough, and up to date. Thank you very much. I will follow your tutorials always.
Thank you! 🙏🙏
Just finished NODE!
and build projects with it now,
REACT 3/2/2024
13:57
36:04
51:57
1:03:23
1:48:34
2:01:19
2:24:00
2:38:23
3:15:08
3:44:38
3:47:17 // AFTER 6 MONTHS I CONTINUED, I'VE MET A GIRL, THE RELATIONSHIP LASTED FOR 3 MONTHS AND NOW WE BROKE UP. IM BACK HERE.
4:04:32
i'm just watching 10 min and it seems beginner friendly i watched another tutoriels and they never talk about node installation and react extensions thank u so much
You're welcome! 💯
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
You are one of the best Explainers. Can we please get a react native full tutorial next :)
Thanks for you so match , this series has helped me greatly🌹🌼
Excellent tutorial. Did you refactor the code 3 times to be able to perform a CRUD? I say this because you used 'easy-peasy', context and others.
Which is the most recommended?
Yes, it is good to learn several ways to manage state. It is all preference. I use context for small projects. Learn several and use what you like. 💯
Hi Dave! Is it a wise decision to learn React & Node at the same time ? I've learnt a good amount of Html, Css and vanilla Javascript and can't wait to jump into MERN.
I like to focus on one thing at a time. Not that it can't be done, but it seems like it would split your focus.
>>> -------
Your courses are fantastic! Thanks so much for all the work you do.
You're very welcome!
finally i completed this react and i also comlpleted first your node js, i had done mern stack from udemy but i could not understand much, i dont know if this course is too good or since im learning second time i understood better and why things are happening, this is definitely a good course which covers important topics which was not covered in udemy 70hours course of mern satck and in functional programming or declarative approach, i have learnt lot from this course with help of chatgpt otherwise this is not possible to understand everything what you speak for absolute beginner, now i feel i can make full stack projects because im getting ideas, this is the best free course i found , im very thankful to you, other educator can make this 9 hour course to more than 18hours if they present in slides what you are speaking, this is the cons and pro both of this course
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.
Hello, is material still relevant? Or is there any significant changes in new React versions?
Yea the video is mostly relevant except for the React Router part where there are some significant changes, you can refer the link which goes over all the changes for better understanding !, other than that its an excellant video !
@@crystalhexagon8498 which link are u talking about here?