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!
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
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!
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!
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!
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!
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.
In db.json file I correctly entered id as number but in json server id is entered as string because of that I couldn't able use delete, patch and update. How should I solve this issue.
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!
Wow, this is already out of date. Your whole routing section no longer works. Not a knock against you, this is a super clean tutorial. But very obnoxious barrier for entry.
Link in the description and several comments for the updated React Router v6 portion. React 18 now changes things a bit, too. Tech progress keeps moving.
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.
Hi @DaveGrayTeachesCode, I really like your way of teaching and i have followed this tutorial in the past but could not complete it, I want to start learning again but I have doubts that this tut is almost 2 yrs old now, and currently we have react 18 so could you please tell me if this is still relevant and give any tips on how to bridge the gap if I learn the basics from this. I really hope you reply to this as there might be few others also with the same doubt.
The basics have not changed. You could see other comments here that have asked the same. When you get to the React Router section, note that I have linked an update in the description.
@@DaveGrayTeachesCode Thanks a lot sir, this doubt was the only thing obstructing my learning process and your reply made me very confident, I'll be starting out with this series, and hope to become a full stack developer soon, Lastly i would again like to thank you for all this awesome and informative content, just keep putting it out here for us. We really appreciate your efforts ❤️
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!
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 🙏👍
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.
In chapter 17 , React router version 5.2 doesn't work with react version 18. When we click url changes but component view doesn't update. To make it work we can interchange React.Strictamode and Router tags
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.
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?
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!
Hello there, i need a help or guidance and i hope you sir answer this question. Are there any essential concept or fundamental of JS i need to know 1st before learning react? Thanks..., Love from Indonesia
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!!!
colorValue={colorValue} setColorValue={setColorValue} setHexValue={setHexValue} isDarkText={isDarkText} setIsDarkText={setIsDarkText} sounds like 1=1 2=2 3=3 4=4 5=5 very confusing. I think it should have diffrent names like x={y}
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.
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 !
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 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.
I have a question regarding the Chapter 17. useEffect sets the searchResults with filteredResults which includes the value of Search Posts input text box. The Home component receives the searchResults and shows all the posts. Why when the Search Posts input text box is empty, the posts are all shown instead of empty posts?
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😇
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!!
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.
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
React and Node.js first. Afterwards, it is your choice. Next.js is a full stack React framework. MERN is a full stack featuring MongoDB, Express, React and Node.js
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 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.
This is a excellent course ... Well appreciated. I was trying to clone the code from the GIT but I can find only the ReadMe file. Am I missing something?
Hozefa, you are correct, and I address this in the near future as you continue. I had made a change in my preparation and no longer needed the IIFE, but forgot and left it in. It doesn't hurt anything, but it is not necessary.
Can you please do the video on crud operations using mysql database using reactjs. Because I was faced the problem to create the crud operations using mysql database so please do the video on that topic it will helped me.it's my request.
This video is great! I'm working on chapter 10 right now and I was wondering how you could make it so that if you started to delete the name of the color the color would disappear. Right now if you enter red and then delete the d it still shows the color red. I'm trying to get rid of this part of the functionality.
4:47:30 For anyone that got here, React Router got an update that changes how you use it. Dave actually made a video about the breaking changes React Router DOM v6 brought. He makes a refactor of this class, so if you were lost, you can watch it here: ruclips.net/video/XBRLVRjZ3CQ/видео.html If you don't know how to go with it, you can either install the older version of RRD and then refactor watching the previously linked video, or kind of watch both at the same time, following the class and whenever something don't work, watch the linked video.
I have and posted an updated tutorial for RRv6 in the resources and linked to it in the description as well as in several of the comment threads. I'll continue by sharing here: ruclips.net/video/XBRLVRjZ3CQ/видео.html Thanks for your helpful comment, too.
Wait you can proceed with this course although you only know the basics of HTML, CSS & JS ? Sorry I sucked at designing and I love JS more than the two markup language.
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☺
What is the sense writing down the element that doesn't exist yet. You should create it first, export and after that auto import would work. Isn't it obvious?
Hi Dave, great course so far, thanks for the awesome content. But I just spent half hour trying to figure out why I'm getting an error around 4:27:30 of the video. When mapping through the items, it works the first time and renders in the ListItem component. However, if I refresh I get "items.map is not a function" - why is this? I've console logged item and it logs perfectly fine, again, until I refresh and I get the same error message in the console and "The above error occurred in the component" (where the map is happening). I've googled trying to find a suitable solution and I am really struggling, could you please tell me why this is happening?
It sounds like you have deleted all of the items in your list and there is nothing to map. I cover the solution for this in (I think) the lesson right after the one you are on. You just need an empty array if no items exist. You'll set your initial state to either the stored items or an empty array using the || operator.
@@DaveGrayTeachesCode Turns out I set the initial state to an empty string instead of an empty array! Always something tiny that breaks the whole thing. Wonder why it would still render once though before breaking on refresh?
Dave, why is it that in chapter 7 working with lists and keys, the anonymous function of "items.map()" you used a bracket "()" instead of a curly bracket"{}" like all other functions....
Thanks for the timestamp. I see what I did. You can use either. There is a more in-depth discussion here on Stackoverflow: stackoverflow.com/questions/39629962/arrow-function-without-curly-braces
Thank you! If you need ideas, you'll get many by Googling "React Projects" or "React Projects 2021". Here is a recent article with ideas: hackr.io/blog/react-projects
i like your tutorial but i wish you wouldnt use typescript in next.js i really want to leanr it but there is typescript in the video which get me confuse everytime
Sorry im from vuejs and Im still wondering...wich one should i use, class or functional style. Also i interest to use with Typescript. I mean wich most used by professional react developer
No need to apologize, VueJS is good, too. Modern React uses functional components. Class components can be used but it is the older way of doing things. Typescript is also good to learn, but it is not mandatory for a React or Vue job. Of course, these are just my opinions. Thanks for asking! 🚀
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
The best react tutorial. Thank you! I need help about chapter 6. I cannot understand the logic of console.log('You clicked it') and also , for rendering the name change as a result of clicking the button. Double click on the p does not change the name. "You clicked it" is not rendering on the page. But without then the code does not work.
It has been too long for me to remember the exact example. You do understand that "You clicked it" will show in the developer console window and not render on the page? If not, stop on React for now and go to my JavaScript for Beginners course.
At a minimum, you should know the fundamentals of Javascript that I teach in this Javascript full course for beginners: ruclips.net/video/EfAl9bwzVZk/видео.html 🚀
@@Krenil. yes, RUclips.com/DaveGrayTeachesCode to subscribe and list of all playlists. Advanced JS Concept playlist: ruclips.net/p/PL0Zuz27SZ-6N3bG4YZhkrCL3ZmDcLTuGd
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:
Please Update for react 2024 Sir
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😍
Awesome tutorial (10/10). Very clear explanations. Always a fun experience to learn something new from Dave. Thank you.
Glad you liked it!
Hii Dave what should be the way forward to learn React Native ... plz answer
Learning React is a good starting point.
Thank you!! logical next step would be.. React-Typescript full course! 🙏
Thanks for the request! 💯
Thanks man💯 I finally understand React
Right on! 🚀
idk if this will help anyone else but In react-router-dom v6 useHistory is replaced with useNavigate
Thank you very much! There is no such video on russian youtube! Like, share and subscribe!
You're welcome! 🙏
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 🙏💯
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! 🚀
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?
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!
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!
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!
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!
In db.json file I correctly entered id as number but in json server id is entered as string because of that I couldn't able use delete, patch and update. How should I solve this issue.
Ctrl + B, B for Boy, hides the file tree. This shortcut was given more importance than the whole react tutorial 😅😂. Jokes aside, great tutorial 👍
So are hooks just a fancy name for functions with state in React? Damnit. Let's see what this context is about. Something equally simple?
You're getting it! They can have more than state. They can also use other hooks when you create custom hooks. It gets good 🚀
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!
Hi Dave is React 17.0.1 still compatible now that react 18 is out?
It is ok to learn these fundamentals of React. This tutorial has lessons that still apply today.
You have some fire contents on this channel 🔥
Keep going man!
Thank you Tomi! 💯🙏 Your channel is 🔥🔥 for Python my friend! Keep it up!
learning Javascript right now.. next goal to learn React.. thanks 😊
That's the perfect path! 💯
Same
Same
JS kahase kiyi..
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! 🙏🙏
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.
Wow, this is already out of date. Your whole routing section no longer works. Not a knock against you, this is a super clean tutorial. But very obnoxious barrier for entry.
Link in the description and several comments for the updated React Router v6 portion. React 18 now changes things a bit, too. Tech progress keeps moving.
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! 🙏🙏
Hi @DaveGrayTeachesCode, I really like your way of teaching and i have followed this tutorial in the past but could not complete it, I want to start learning again but I have doubts that this tut is almost 2 yrs old now, and currently we have react 18 so could you please tell me if this is still relevant and give any tips on how to bridge the gap if I learn the basics from this.
I really hope you reply to this as there might be few others also with the same doubt.
The basics have not changed. You could see other comments here that have asked the same. When you get to the React Router section, note that I have linked an update in the description.
@@DaveGrayTeachesCode
Thanks a lot sir, this doubt was the only thing obstructing my learning process and your reply made me very confident,
I'll be starting out with this series, and hope to become a full stack developer soon,
Lastly i would again like to thank you for all this awesome and informative content, just keep putting it out here for us. We really appreciate your efforts ❤️
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
Can you tell us every vscode extensions you use?
If any of you know please reply to my comment.
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
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. 💯🚀
Thanks for you so match , this series has helped me greatly🌹🌼
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!
In chapter 17 , React router version 5.2 doesn't work with react version 18.
When we click url changes but component view doesn't update.
To make it work we can interchange React.Strictamode and Router tags
Yes, and link in description for updating this project to RRv6.
This has been INCREDIBLY useful, thank you so much!
You're welcome!
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.
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 😊
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!
Hello there, i need a help or guidance and i hope you sir answer this question. Are there any essential concept or fundamental of JS i need to know 1st before learning react? Thanks..., Love from Indonesia
Yes, you must learn JavaScript to at least understand React because React is a JS library. Hope that answered you.
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.
colorValue={colorValue}
setColorValue={setColorValue}
setHexValue={setHexValue}
isDarkText={isDarkText}
setIsDarkText={setIsDarkText}
sounds like
1=1
2=2
3=3
4=4
5=5
very confusing.
I think it should have diffrent names like x={y}
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! 💯
Learned AngularJs, moving on to ReactJS
you are a great teacher, very easy to follow and understand! Looking forward to learning more from you!
Thank you, Otto! 🙏🙏
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 !
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".
at 3:18:30
npx json-server data/db.json --port 3500
this is what worked for me. What's give in the tutorial gives me an error.
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.
You are one of the best Explainers. Can we please get a react native full tutorial next :)
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
I have a question regarding the Chapter 17. useEffect sets the searchResults with filteredResults which includes the value of Search Posts input text box. The Home component receives the searchResults and shows all the posts. Why when the Search Posts input text box is empty, the posts are all shown instead of empty posts?
No filtering so all are shown. 😀
@@DaveGrayTeachesCode thank you 🙏
@@DaveGrayTeachesCode I did some googling and found out that includes() empty string will always return true.
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!
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😇
Thanks for the course, I was really in need of this...❤️❤️
You are so welcome! 💯🚀
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!!
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 😊
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.
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 am now a beginner but I really do enjoy it
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 am unable to understand what should i learn MERN or just next js😢
React and Node.js first. Afterwards, it is your choice. Next.js is a full stack React framework. MERN is a full stack featuring MongoDB, Express, React and Node.js
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!! 💯🚀
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!
Thanks Dave!
Thousand Big Thanks!
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! 🙏💯
You have a great style Dave. It makes it very easy to understand and move along with. Thanks
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. 💯🙏
This is a excellent course ... Well appreciated. I was trying to clone the code from the GIT but I can find only the ReadMe file. Am I missing something?
At 3:29:53 , why did we use an IIFE for calling fetchItems(). Why could we not use return fetchItems() instead of the IIFE
Hozefa, you are correct, and I address this in the near future as you continue. I had made a change in my preparation and no longer needed the IIFE, but forgot and left it in. It doesn't hurt anything, but it is not necessary.
You are injecting the concepts like a slow poison ! You are a killer @Dave !
I think this is good? Haha - thanks Mu Ven! 💯
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 🙏💯
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
Why react js is developed?, your coding style of reuse component is proved why it is developed.
Thanks
I haven't found the link for the recursion tutorial that is mentioned on the second challenge.
EDIT: nvm, i've already found it.
Can you please do the video on crud operations using mysql database using reactjs. Because I was faced the problem to create the crud operations using mysql database so please do the video on that topic it will helped me.it's my request.
This video is great! I'm working on chapter 10 right now and I was wondering how you could make it so that if you started to delete the name of the color the color would disappear. Right now if you enter red and then delete the d it still shows the color red. I'm trying to get rid of this part of the functionality.
Hi Stella, you could do that. That makes another great challenge to learn from! I'm sure you will get it! 🚀
4:47:30 For anyone that got here, React Router got an update that changes how you use it. Dave actually made a video about the breaking changes React Router DOM v6 brought. He makes a refactor of this class, so if you were lost, you can watch it here:
ruclips.net/video/XBRLVRjZ3CQ/видео.html
If you don't know how to go with it, you can either install the older version of RRD and then refactor watching the previously linked video, or kind of watch both at the same time, following the class and whenever something don't work, watch the linked video.
I have and posted an updated tutorial for RRv6 in the resources and linked to it in the description as well as in several of the comment threads. I'll continue by sharing here: ruclips.net/video/XBRLVRjZ3CQ/видео.html Thanks for your helpful comment, too.
Wait you can proceed with this course although you only know the basics of HTML, CSS & JS ? Sorry I sucked at designing and I love JS more than the two markup language.
Yes, if you know the JS basics, you are ready to proceed.
Anybody knows why we get 6 vulnerabilities when we install react-icons package ?
my vscode did not show the .git folder? im running macbook OS
It's a VS code setting. Look for show hidden files.
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! 💯
What is the sense writing down the element that doesn't exist yet. You should create it first, export and after that auto import would work. Isn't it obvious?
Can anyone help me understand why 'setEditTitle' and 'setEditBody' are added as dependencies for the useEffect hook at 6:29:00?
Hi Dave, great course so far, thanks for the awesome content. But I just spent half hour trying to figure out why I'm getting an error around 4:27:30 of the video. When mapping through the items, it works the first time and renders in the ListItem component. However, if I refresh I get "items.map is not a function" - why is this? I've console logged item and it logs perfectly fine, again, until I refresh and I get the same error message in the console and "The above error occurred in the component" (where the map is happening).
I've googled trying to find a suitable solution and I am really struggling, could you please tell me why this is happening?
It sounds like you have deleted all of the items in your list and there is nothing to map. I cover the solution for this in (I think) the lesson right after the one you are on. You just need an empty array if no items exist. You'll set your initial state to either the stored items or an empty array using the || operator.
@@DaveGrayTeachesCode Turns out I set the initial state to an empty string instead of an empty array! Always something tiny that breaks the whole thing. Wonder why it would still render once though before breaking on refresh?
Dave, why is it that in chapter 7 working with lists and keys, the anonymous function of "items.map()" you used a bracket "()" instead of a curly bracket"{}" like all other functions....
If you provide a timestamp to that spot in the video, I'll take a quick look.
@@DaveGrayTeachesCode 1:07:30
Thanks for the timestamp. I see what I did. You can use either. There is a more in-depth discussion here on Stackoverflow: stackoverflow.com/questions/39629962/arrow-function-without-curly-braces
@@DaveGrayTeachesCode thank you Dave, i appreciate this
Hey David, just wanted to know how is my channel, I am new and I want to post free tutorials like you...
Mr. Dave Gray ... Can you list some websites to find the project ideas???? Thanks in advance. By the way your tutorial is good
Thank you! If you need ideas, you'll get many by Googling "React Projects" or "React Projects 2021". Here is a recent article with ideas: hackr.io/blog/react-projects
i like your tutorial but i wish you wouldnt use typescript
in next.js i really want to leanr it but there is typescript in the video which get me confuse everytime
Sorry im from vuejs and Im still wondering...wich one should i use, class or functional style. Also i interest to use with Typescript. I mean wich most used by professional react developer
No need to apologize, VueJS is good, too. Modern React uses functional components. Class components can be used but it is the older way of doing things. Typescript is also good to learn, but it is not mandatory for a React or Vue job. Of course, these are just my opinions. Thanks for asking! 🚀
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
The best react tutorial. Thank you! I need help about chapter 6. I cannot understand the logic of console.log('You clicked it') and also , for rendering the name change as a result of clicking the button. Double click on the p does not change the name. "You clicked it" is not rendering on the page. But without then the code does not work.
It has been too long for me to remember the exact example. You do understand that "You clicked it" will show in the developer console window and not render on the page? If not, stop on React for now and go to my JavaScript for Beginners course.
@@DaveGrayTeachesCode I do understand. But what is the purpose of it? I miss the logic.
the best way, using class to do it? now all are using function async
This course uses modern react with functional components not classes.
Can you tell me how much java script should i know before learning react.
At a minimum, you should know the fundamentals of Javascript that I teach in this Javascript full course for beginners: ruclips.net/video/EfAl9bwzVZk/видео.html 🚀
@@DaveGrayTeachesCode I know all this concept so I think I must start learning react or go deep in js
@@Krenil. good plan! I do have an advanced JavaScript concepts playlist. Or you can just start in on React 💯🚀
Can you give me the link of the playlist
@@Krenil. yes, RUclips.com/DaveGrayTeachesCode to subscribe and list of all playlists. Advanced JS Concept playlist: ruclips.net/p/PL0Zuz27SZ-6N3bG4YZhkrCL3ZmDcLTuGd
So in depth, learned a ton. Thanks for the tutorial
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! 🙏💯
I understand stand please do more vedioes for graduation students
Perez David Lewis Sandra Lopez Shirley