And here I am, at 9:27:36 Complete all projects. If anyone who is checking comments and are about to see whether these projects are worth or not so I will suggest must go for it. NOTE-> PLS KEEP PATIENCE! Things will take time. just seeing what he is doing and ask gpt what he is doing. after some projects u ll see a pattern, and then there you will go easily. I started it and was very frustrated at 2 project accordian one..but I tried, I learned. So just remember, you will learn that, trust me you will understand everything, just keep faith!
Anyone who is young. Take the time and do these. I'm old now and life makes it harder to learn. It's impossible to sit down. For more than 1 or 2 hours and study. Too much obligations.
I'm always in a hurry to learn things as fast as I can and in the process I forget the things I learned. Will take up your advice and take things slow from now on
This video is not for beginners but rather for those who know basics of react. First learn basics then following this will get you interview ready. Btw i m 45 n learning python, react, and aws. Wish me luck
Wow, your comment really motivated me! I'm almost 29 and considering a career switch from ECC Engineering to software development. I’ve been feeling tense about how to start fresh and compete in this new field.
i am 22 year old and staying at 2:09:00,everything here is too difficult for me but i will complete it to the end, never give up !!!!!!!!!!!!!!!!!!!!!!!!!!!
at 1:35:20 if anyone facing any problems ( which you will ) instead of writing setProducts like what he wrote in the video . type it this way setProducts(() => [...products, ...result.products]); , because when you pass a parameter to the call back function and you spread it then render result.products , its like rendering the same result.products twice , and that is why you see the warning below of two identical Id or why you see items rendered twice ... but when we set it like this setProducts(() => [...products, ...result.products]); it means that we will spread the prev products from the state which in the initial state is set to [ ] so it means if there is no products then there will be no previos products to be spread and no error will appear
Your method fixed the problem instantly, I had narrowed it down to that particular line of code, but never considered changing prevData to products. Thank you!👍
Great tutorial, thank you so much for this! (one simple note: in the image-slider component the handleNext -slide- function doesnt work correctly, when you reach the last slide it continues looping without returning to the first image in the array, here is a corrected version for anyone who needs it: function handleNext() { setCurrentSlide(currentSlide === images.length - 1 ? 0 : currentSlide + 1); }
On the 'Star Rating" project, if you had trouble changing colors on the "hover' and 'mouseover' states, another way to do it is to have two sets of stars you can toggle between. For example, if a user clicks, or their mouse leaves, you show a black star; if they come back, you show a yellow star.
2:57:20 You really could've used HTML element, it is way better to use for modal purposes, doesn't let you focus on background elements using TAB button
@@NARUHINO09 glad to help. If you want logic behind it, You create state variable that will open and close createPortal(). This should open the with . Inside the create a reference (ref) variable to run the modal.open() function for element. To close the dialog, in return statement, close dialog with dialogRef.close() and change the previous createPortal state variable to false.
in data load more section, if you are using react 18, you may encounter the error says same id for 2 element, this happens due to the new react feature called re-usable state, it basically when you mounts(render) components at the very first, this new feature automatically unmounts it to gain its previous state and remounts again. this cause hook to fire twice and consequently it assign same id to two different elements. To solve this issue, create cont boolean variable using "useRef" and set it to false, then assign true inside if statement of useEffect function. youtuber called Olli explain it well in his video called "UseEffect called twice in React 18"
Thank you for the inspirational tutorial. But in some cases, even for me, as a beginner, it's quite obvious that some of the approaches are not optimal. Let's say in Load More Data project, the fetching should only happen once in useEffect upon render, but all the next times it's not an effect, but an action - when a user clicks Load More Button.
NEXTjs isnt really a framework, its a addon to create react apps just like vite if you ever used it. You probably know that by now though since this was a couple of months ago.
Hi Sangammukherjee, First of all, thank you very much for this video. I learned a lot from you - your clarity, speed, real-time solutions, and seamless presentation are incredible. Secondly, I have two issues. Firstly, the link to the shopping page repository isn't working; it redirects to the food recipe repository. And secondly, I want to integrate my shopping cart with the MercadoPago API. Can you help me with this?
@sangammukherjee Thank you a lot for this Apps, you explain all very clear and without errors! Amazing course. Better then a lot of paid ones on Udemy. Thank you.
I think that a lot of this projects can be done in much easier way and that this is overly complex without need and because of that it is not very good for beginners I would even say that there is a lot of bad practice
Yeah, the guy seems to have a lot of experience with interview challenges, and the bad practices and unintuitive, confusing way he's doing stuff might be an indication why, because clearly he does the same thing when he's the interviewee. I wouldn't want to work after him!
Good projects but poorly taught. I gave up at the 4 hour 30 mins mark after he rendered the 9 boxes from the TicTacToe grid via 3 rows mapping through three objects of 3 length with the values all being set manually. In the projects where he uses real apis it's a good challenge but when he mocked up a js file with a function that returns an object rather than just putting the json data directly in that file I got super confused. The projects are great and well selected for their level of difficulty but the naming of components, variables and functions is odd (the use of get in variable names in particular). The presenter seems knowledgable but the way he presents makes me wonder if he's dumbing things down for some hidden reason or if he just has a lot of weird habits that he never gives you the backstory on.
Great video, but tell somebody to the instructor about optional chaining (result?.product?.length) insted (result && result.product && result.product.length) as example.
It's horrible, just like Smilga's videos, just trying to bump up the number of projects and spamming code instead of learning, 25 projects in one video is pure insanity ( and horrible practice )
@@hellokevin_133 do you think it is better to work on one project and contribute on that to increase different type of features? is that your point or something else ?
Thanks for this. But I feel a lot of the times the code could be simplified. Case in point, the tree-view tutorial; using an object to track the opening and closing of menus, spreading previous keys and dynamically updating the key's value. All these are unnecessary and can be accomplished with a simple Boolean.
is it me or yall facing this too? in the first project itself when you toggle enable multiple selection - click on all the questions - click on enable multiple selection again - the state of setMultiple doesn't clear itself and the answers are still shown and basically project stops working at this point idk how to resolve this bug?
I appreciate all the hard work but a single note off destroys the symphony.. you installed cord instead of cors in the last project the MERN stack. Please double check youre scripts
Typescript is for people that have already dived into the ocean of web development. If the course was in typescript, it wouldn't be easily understandable by beginners
@@MP-eq8fx john smilga i guess , best way to learn how to think using react js , what is the component mentality , he is explain clearly. , you check it out jhon smilga accordion project in john smilga 15 react project and check it accordion in this video , you understand what we say
It's because it's not a react course. It's a course for cracking interview rounds of a company. If you don't know html, css , javascript, and react, then it's not for you.
its not a first problem bro , first problem is react mentality component mentality . You can check the accordion you understand what i say , every accordion item should be component and maybe we can use items component and inside this we can mapping this items and every items can be one component , you understand ? In this this accordion project you can check it out all codes in one components , this is not a react clean code mentality , we can use more component as possible as we can @@rayyanabdulwajid7681
Among group of 4 all over the World, There is a fckuin genius indian guy to make things simple with his dead english language that originated from England , reached apex in America and died in India.
The star-rating component works the same if we don't make the hover | | rating comparison. Instead just having hover compared with the index value. Why still do we compare hover with rating first? Thanks
This video is perfect for those who know the basics and needs hands on practice with some basic projects. I recommend you going through react official docs to clear the basics and come back here.
I find it difficult to memorize everything. Is it normal to feel this way? I was thinking it might be a good idea to review the code whenever I have an interview and encounter the same questions. Is this a good approach, or am I expected to have everything memorized?
Hi can I ask what extensions you are using in vs code? I see that react import statements are auto importing for you where as I was having to manually enter them and wondering why my code wasn't working while following along. Thanks in advance and thank you for this tutorial!
And here I am, at 9:27:36
Complete all projects.
If anyone who is checking comments and are about to see whether these projects are worth or not so I will suggest must go for it.
NOTE-> PLS KEEP PATIENCE! Things will take time. just seeing what he is doing and ask gpt what he is doing. after some projects u ll see a pattern, and then there you will go easily. I started it and was very frustrated at 2 project accordian one..but I tried, I learned. So just remember, you will learn that, trust me you will understand everything, just keep faith!
how much time u took
also do u know backend too ?
@@hitmanop4078 about two three weeks. If you make 2 project everyday you will take 2 -3weeks approx
does he use typecript in it too?
Anyone who is young. Take the time and do these. I'm old now and life makes it harder to learn. It's impossible to sit down. For more than 1 or 2 hours and study. Too much obligations.
I'm always in a hurry to learn things as fast as I can and in the process I forget the things I learned. Will take up your advice and take things slow from now on
I am 33. And I feel old already
Thank you for advising we the young ones
age has nothing to do with learning
@@dystopian_1I’m 27 and I feel old too
This video is not for beginners but rather for those who know basics of react. First learn basics then following this will get you interview ready.
Btw i m 45 n learning python, react, and aws. Wish me luck
woa, you are 45 years old, i'm really admire
Wow, your comment really motivated me! I'm almost 29 and considering a career switch from ECC Engineering to software development. I’ve been feeling tense about how to start fresh and compete in this new field.
@@AkashJadhav-z7ugood luck
i am 22 year old and staying at 2:09:00,everything here is too difficult for me but i will complete it to the end, never give up !!!!!!!!!!!!!!!!!!!!!!!!!!!
did you?
Are you done?
Did you succeed dude?
its been 5 months
Looks like bro gave up, or really skilled up so good that he has no time to check the comments and is grinding 😁
I did all 25 projects for 2 weeks))) Good job is done) Thank you.
at 1:35:20 if anyone facing any problems ( which you will ) instead of writing setProducts like what he wrote in the video . type it this way setProducts(() => [...products, ...result.products]); , because when you pass a parameter to the call back function and you spread it then render result.products , its like rendering the same result.products twice , and that is why you see the warning below of two identical Id or why you see items rendered twice ... but when we set it like this setProducts(() => [...products, ...result.products]); it means that we will spread the prev products from the state which in the initial state is set to [ ] so it means if there is no products then there will be no previos products to be spread and no error will appear
Your method fixed the problem instantly, I had narrowed it down to that particular line of code, but never considered changing prevData to products. Thank you!👍
@@AngelChoir-di5ez happy to help :)
in cosole why we are seeing first 20 two times is it because of useeffect
thanks, your answer help with the problem, now id like to understand why doesnt he had the same problem?
thanks👍
Great tutorial, thank you so much for this!
(one simple note: in the image-slider component the handleNext -slide- function doesnt work correctly, when you reach the last slide it continues looping without returning to the first image in the array, here is a corrected version for anyone who needs it:
function handleNext() {
setCurrentSlide(currentSlide === images.length - 1 ? 0 : currentSlide + 1);
}
On the 'Star Rating" project, if you had trouble changing colors on the "hover' and 'mouseover' states, another way to do it is to have two sets of stars you can toggle between. For example, if a user clicks, or their mouse leaves, you show a black star; if they come back, you show a yellow star.
I was facing the same issue. I do not know the root cause but switching from Brave to Chrome fixed this issue.
I'm just about starting this tutorial. Thank you for providing this free tutorial. God bless you.
2:57:20 You really could've used HTML element, it is way better to use for modal purposes, doesn't let you focus on background elements using TAB button
Sent me on a 4hrs derail, but got it at the end XD
@@NARUHINO09 glad to help. If you want logic behind it,
You create state variable that will open and close createPortal(). This should open the with .
Inside the create a reference (ref) variable to run the modal.open() function for element.
To close the dialog, in return statement, close dialog with dialogRef.close() and change the previous createPortal state variable to false.
Hitting it out of the park again guys
i am currently 21 years old i get stuck at everything but i am gonna do reactjs with my utmost dedication
in data load more section, if you are using react 18, you may encounter the error says same id
for 2 element, this happens
due to the new react feature called re-usable state, it basically when you mounts(render) components at the very first, this new feature automatically unmounts it to gain its previous state and remounts again. this cause hook to fire twice and consequently it assign same id to two different elements. To solve this issue, create cont boolean variable using "useRef" and set it to false, then assign true inside if statement of useEffect function. youtuber called Olli explain it well in his video called "UseEffect called twice in React 18"
The issue can also be solved disabling React.StrictMode from main.jsx. It's much more easier.
Do you have a link to that video?
remove stricmode ok done
Thank you very much for such amazing course!
i like this projects, i decide to do only the recipe one and use vite instead of create-react-app but it's a good video
This is an excellent tutorial, it has a lot of great key concepts for the React application
Great Work! Project 1 you shouldn't mutate the multi array it's considered a bad practice
On the collapsable tree project, it is much better to store a true or false value for the displayCurrentChildren instead of an object.
Thank you for the inspirational tutorial. But in some cases, even for me, as a beginner, it's quite obvious that some of the approaches are not optimal. Let's say in Load More Data project, the fetching should only happen once in useEffect upon render, but all the next times it's not an effect, but an action - when a user clicks Load More Button.
Nice refresher. I'm probably rusty on a few.
use oil paint
3.1k+...Thanks !!! Great tutorial !!! May I know why you did not use NEXTJs or other frameworks ?
NEXTjs isnt really a framework, its a addon to create react apps just like vite if you ever used it. You probably know that by now though since this was a couple of months ago.
Hi Sangammukherjee,
First of all, thank you very much for this video. I learned a lot from you - your clarity, speed, real-time solutions, and seamless presentation are incredible.
Secondly, I have two issues. Firstly, the link to the shopping page repository isn't working; it redirects to the food recipe repository. And secondly, I want to integrate my shopping cart with the MercadoPago API. Can you help me with this?
The tree view project is crazy stuff
*data && data.length > 0* can be simplified with just *data?.length > 0*
@sangammukherjee Thank you a lot for this Apps, you explain all very clear and without errors! Amazing course. Better then a lot of paid ones on Udemy. Thank you.
I think that a lot of this projects can be done in much easier way and that this is overly complex without need and because of that it is not very good for beginners
I would even say that there is a lot of bad practice
I also noticed there are some bad practices used in this tutorial. Can you suggest any other tutorials to practice react?
Did you get guys???
Yeah, the guy seems to have a lot of experience with interview challenges, and the bad practices and unintuitive, confusing way he's doing stuff might be an indication why, because clearly he does the same thing when he's the interviewee. I wouldn't want to work after him!
@@strictlyunreal Do you have a better tutorial to recommend?
The spokesperson's beard is looking extra fresh and clean today. Ok ok. I see ya brother.
Good projects but poorly taught. I gave up at the 4 hour 30 mins mark after he rendered the 9 boxes from the TicTacToe grid via 3 rows mapping through three objects of 3 length with the values all being set manually.
In the projects where he uses real apis it's a good challenge but when he mocked up a js file with a function that returns an object rather than just putting the json data directly in that file I got super confused.
The projects are great and well selected for their level of difficulty but the naming of components, variables and functions is odd (the use of get in variable names in particular).
The presenter seems knowledgable but the way he presents makes me wonder if he's dumbing things down for some hidden reason or if he just has a lot of weird habits that he never gives you the backstory on.
you summarized it perfectly!
i got the projects names and simply googled it later
A really good resource to learn react concepts... Thanks for this!!
Onek onek dhonnobad, dada ❤❤❤❤
Man it's wonderful ❤❤thank uhh
Great video, but tell somebody to the instructor about optional chaining (result?.product?.length) insted (result && result.product && result.product.length) as example.
Optional chaining bloats the code if you have to support es5. It's also prone to unexpected side effects if not used correctly.
Yo this is stacked!!!
It's horrible, just like Smilga's videos, just trying to bump up the number of projects and spamming code instead of learning, 25 projects in one video is pure insanity ( and horrible practice )
@@hellokevin_133 do you think it is better to work on one project and contribute on that to increase different type of features? is that your point or something else ?
Bro is saving my life
Amazing explaination of everything♥♥
Thanks for this. But I feel a lot of the times the code could be simplified. Case in point, the tree-view tutorial; using an object to track the opening and closing of menus, spreading previous keys and dynamically updating the key's value. All these are unnecessary and can be accomplished with a simple Boolean.
Thank you! Very helpful!
is it me or yall facing this too? in the first project itself when you toggle enable multiple selection - click on all the questions - click on enable multiple selection again - the state of setMultiple doesn't clear itself and the answers are still shown and basically project stops working at this point idk how to resolve this bug?
Thank you for your efforts but your projects are very easy. It is good for beginners I think
In the Accordian Project there is a bug which only allows you to close the "content" if you opened it in the same "selection" state.
amazing! thank u so much! XP
Thank you free code camp !
Thanks for the tutorial. It was really helpful.
This is what i was searching for !
It was much needed video. Thank you, FCC
lets goooooo. am stocked
You are great sir. Very thanks 👍 full for us for all videos
Thank you for making this video to clear all concepts!😊
I appreciate all the hard work but a single note off destroys the symphony.. you installed cord instead of cors in the last project the MERN stack. Please double check youre scripts
Can't wait
the explanation of the code was lacking because the focus was primarily on project building.
The Video is of 9 Hours, and It got like 888 in 49 minutes
People are watching in 100x ?☠☠
@@The_Night_Knight probably his Indian friends liking the video on request
Thank you guys.
Awesome, but it is a pity that at least some of projects arent in typescript
Typescript is for people that have already dived into the ocean of web development. If the course was in typescript, it wouldn't be easily understandable by beginners
After learning from this course, I'll be porting all JS apps to TS
thank you so much
Thanks for this ❤❤
Thank you so much!! 😊
I love this guy! "I hope you are getting.."
Hell Yeah, Time to get a Job
i watched but this course before not explain react js true way
Yes. Can’t see any best practices in developing apps
Any other suggestions?
@@MP-eq8fx john smilga i guess , best way to learn how to think using react js , what is the component mentality , he is explain clearly. , you check it out jhon smilga accordion project in john smilga 15 react project and check it accordion in this video , you understand what we say
It's because it's not a react course. It's a course for cracking interview rounds of a company. If you don't know html, css , javascript, and react, then it's not for you.
its not a first problem bro , first problem is react mentality component mentality . You can check the accordion you understand what i say , every accordion item should be component and maybe we can use items component and inside this we can mapping this items and every items can be one component , you understand ? In this this accordion project you can check it out all codes in one components , this is not a react clean code mentality , we can use more component as possible as we can @@rayyanabdulwajid7681
Among group of 4 all over the World, There is a fckuin genius indian guy to make things simple with his dead english language that originated from England , reached apex in America and died in India.
This is perfect for me!
I was just looking for this thanks sir your are awesome thanks a lot
Great ❤❤
Awesome !!🥳🥳 Thank You for this amazing training opportunity 🦾
Very good. Thanks.
Perfect✌
Wow ❤
The star-rating component works the same if we don't make the hover | | rating comparison. Instead just having hover compared with the index value. Why still do we compare hover with rating first?
Thanks
Bro where are you from Mumbai or Delhi?❤❤
Lets go !!
Thanks for the video
Thank you!!
Thanks 👍
Legit ❤
Can I start from here if I know nothing about HTML,CSS & JS ?
will not be good , give one week for html css and basic js then dive into it
I DONT GET IT AT All how are 4 cards so complex to make in react,js ? is something wrong with me ?
I'm new to react. When I try to do the first program, I felt so confused to follow since the tutor didn't explain why he code like that.
This video is perfect for those who know the basics and needs hands on practice with some basic projects. I recommend you going through react official docs to clear the basics and come back here.
why is everyone still showing the create-react-app instead of vite or any other?
Maybe because it's just a mini project
The random-color one is unnecessarily complicated.
will i be a good react developer after learning this tutorial
no
If I can make these on my own, can I consider myself interview ready?
Can u upload backend projects also please...
What is the best way to learn from this tutorial
should i upload these projects to github?
Amazing
Guys i am facing the issue in STAR PROJECT where i go backwards but color of star is not changing back to black. Why is the case ?
Have you got your answer? I got the same issue, I initially interchange the position of hover and rating in the array className "className={index
am left with two projects.can i now look for a job
THANK YOU ,,,,,,,
On the Accordion is there a way to make the opening be smooth not just show and hide? Like animated?
This is great!
This is what I'm looking for .....
thank you
I find it difficult to memorize everything. Is it normal to feel this way? I was thinking it might be a good idea to review the code whenever I have an interview and encounter the same questions. Is this a good approach, or am I expected to have everything memorized?
Hi can I ask what extensions you are using in vs code? I see that react import statements are auto importing for you where as I was having to manually enter them and wondering why my code wasn't working while following along. Thanks in advance and thank you for this tutorial!
For anyone else wondering the same thing I found and installed "Auto Import" and it's doing the job nicely :)
@@michaelgibbs-eb1ed thank you
If you are slower and sometimes difficult to understand, this is not for us
Let's go
1:21:10 - Doubt: How to stop page refresh in the 'Load More' button section?
e.preventdefault()
Thank you
Niiice