Build 25 React Projects - Tutorial

[@bravo1oh1]

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.

[@YizenOdyuo]

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

[@dystopian_1]

I am 33. And I feel old already

[@Diva-MB]

Thank you for advising we the young ones

[@edtechbymeera]

age has nothing to do with learning

[@animeclips4974]

@@dystopian_1I’m 27 and I feel old too

[@itsaayush7357]

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!

[@hitmanop4078]

how much time u took also do u know backend too ?

[@itsaayush7357]

@@hitmanop4078 about two three weeks. If you make 2 project everyday you will take 2 -3weeks approx

[@bhaveshchadha9900]

does he use typecript in it too?

[@MaximilianXXX]

This guy is a React beast. Love the quick, no-nonsense problem solving.

[@TheAncoln]

totally agreed

[@nguyenhuuhoang8131]

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 !!!!!!!!!!!!!!!!!!!!!!!!!!!

[@Aurora01001]

did you?

[@onyedikachiozoani]

Are you done?

[@Niraj_Kr29]

Did you succeed dude?

[@agx111]

its been 5 months

[@abhi4348]

Looks like bro gave up, or really skilled up so good that he has no time to check the comments and is grinding 😁

[@codemass]

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

[@AngelChoir-di5ez]

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!👍

[@codemass]

@@AngelChoir-di5ez happy to help :)

[@MittuRohith]

in cosole why we are seeing first 20 two times is it because of useeffect

[@adrian3750-d3g]

thanks, your answer help with the problem, now id like to understand why doesnt he had the same problem?

[@sumithocs]

thanks👍

[@Alvokedro]

Trust me guy at start i find it hard and i want to give up but then now after 15 project i find it very very very helpful

[@aerofred2002]

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.

[@ayushkhanvilkar]

I was facing the same issue. I do not know the root cause but switching from Brave to Chrome fixed this issue.

[@umezvictor]

I'm just about starting this tutorial. Thank you for providing this free tutorial. God bless you.

[@mihirphadnis2]

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]

Sent me on a 4hrs derail, but got it at the end XD

[@mihirphadnis2]

@@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.

[@user-dq5fx5rc3n]

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"

[@shriharsh2543]

The issue can also be solved disabling React.StrictMode from main.jsx. It's much more easier.

[@LordV8or]

Do you have a link to that video?

[@MrJack-yv6gl]

remove stricmode ok done

[@assilbenlagha8209]

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); }

[@ericdelmermillen]

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.

[@raknos13]

you summarized it perfectly!

[@RiteshKumar-dx8wj]

i got the projects names and simply googled it later

[@christophermyers6372]

Hitting it out of the park again guys

[@matwal420]

This is an excellent tutorial, it has a lot of great key concepts for the React application

[@frusen_sol]

*data && data.length > 0* can be simplified with just *data?.length > 0*

[@dusko8989]

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

[@raknos13]

I also noticed there are some bad practices used in this tutorial. Can you suggest any other tutorials to practice react?

[@manishasaini307]

Did you get guys???

[@strictlyunreal]

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!

[@zhm-ll7bp]

@@strictlyunreal Do you have a better tutorial to recommend?

[@razeft]

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

[@2teaspoon]

Thank you very much for such amazing course!

[@MahmoudMohamedHatimSuliman]

Great Work! Project 1 you shouldn't mutate the multi array it's considered a bad practice

[@uaplatformacomua]

I did all 25 projects for 2 weeks))) Good job is done) Thank you.

[@ayansiddiqui1180]

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.

[@bowenlin1481]

On the collapsable tree project, it is much better to store a true or false value for the displayCurrentChildren instead of an object.

[@switch3]

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.

[@notrushi]

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?

[@hiranmali371]

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 ?

[@kimnoveda8405]

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

[@misterFriend.]

The spokesperson's beard is looking extra fresh and clean today. Ok ok. I see ya brother.

[@hitmanop4078]

The tree view project is crazy stuff

[@marekbis3938]

why is everyone still showing the create-react-app instead of vite or any other?

[@hiranmali371]

Maybe because it's just a mini project

[@just-being-aryan]

I DONT GET IT AT All how are 4 cards so complex to make in react,js ? is something wrong with me ?

[@uaplatformacomua]

@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.

[@aerofred2002]

Nice refresher. I'm probably rusty on a few.

[@arkansavalder]

use oil paint

[@iuliiasiriakivska2209]

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.

[@nikolasaureriy1408]

Great video, but tell somebody to the instructor about optional chaining (result?.product?.length) insted (result && result.product && result.product.length) as example.

[@trappedcat3615]

Optional chaining bloats the code if you have to support es5. It's also prone to unexpected side effects if not used correctly.

[@2ameridiem]

Can someone please explain why are they using try catch block at 2:14:52 ? what possible error could emerge from trying to get an item from localStorage? I have tried to access the value of a nonexisting key from localStorage and it just gives NULL. But it doesn't throw any error... thank you for your time!

[@WakingWay]

The reason behind using trycatch block to access local storage is, when sometimes the browser is in incognito mode, it throws security error while trying to access the localStorage.. Hope it helped mate

[@ivanemenya8391]

Can I start from here if I know nothing about HTML,CSS & JS ?

[@abhi4348]

will not be good , give one week for html css and basic js then dive into it

[@sravan8643]

A really good resource to learn react concepts... Thanks for this!!

[@debdipmukherjee3138]

Onek onek dhonnobad, dada ❤❤❤❤

[@rohitxess1955]

Thanks for the tutorial. It was really helpful.

[@jahongirbektemirov6516]

Thank you for your efforts but your projects are very easy. It is good for beginners I think

[@Scrittyrow]

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

[@simaykazc1508]

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

[@python-developer521]

python database connectivity-mysql kzbin.info/www/bejne/e5S3mXSPfZZmh5o complete basic python in 90 mins kzbin.info/www/bejne/kJ-kgImceLZ0adU

[@SorinM-ho6rj]

I get this error on the weather app "Uncaught TypeError: Cannot read properties of undefined (reading 'temp')". Sometimes i don't get it and it's working...what could be the problem?

[@lonleybeer]

Bro is saving my life

[@thanzeerhussain469]

1:21:10 - Doubt: How to stop page refresh in the 'Load More' button section?

[@anaselhilali9235]

e.preventdefault()

[@jopadjr]

3.1k+...Thanks !!! Great tutorial !!! May I know why you did not use NEXTJs or other frameworks ?

[@Bl1tzs]

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.

[@doruktekel3438]

i watched but this course before not explain react js true way

[@juj1988]

Yes. Can’t see any best practices in developing apps

[@MP-eq8fx]

Any other suggestions?

[@doruktekel3438]

@@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

[@rayyanabdulwajid7681]

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.

[@doruktekel3438]

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

[@sreesen3159]

If I can make these on my own, can I consider myself interview ready?

[@chinodanxd]

Thank you! Very helpful!

[@ashwanikumarkaushik2531]

Can anyone please explain? In light-dark-mode . Why do we make a custom hook? Can't we do it by using a useState Hook in index file to set the theme? Why are we using local storage here?

[@javierrivasseau8956]

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?

[@oanshee2462]

Is it beginner friendly tutorial? I have started to learn React a few days ago at a bit sick of boring tutorials. So will I learn all the main concepts though out the video?

[@TimTheDeveloper]

Yo this is stacked!!!

[@hellokevin_133]

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 )

[@lann1sterroy]

@@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 ?

[@aroobs]

the explanation of the code was lacking because the focus was primarily on project building.

[@chinmayanath627]

Man it's wonderful ❤❤thank uhh

[@jayrahane910]

Thank you for making this video to clear all concepts!😊

[@podcast341]

i am getting a error in the shopping cart app when i use the useSelector hook it says Selector unknown returned the root state when called. This can lead to unnecessary rerenders, please anyone help me if you know why this is happening

[@techedzee]

lets goooooo. am stocked

[@Space_Tech.06]

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.

[@logicweaver7152]

The random-color one is unnecessarily complicated.

[@sayedmobashir7803]

You are great sir. Very thanks 👍 full for us for all videos

[@webstartergurus4463]

the end-point (download_url l) for each of these image from this "picsum.photos/v2/list?page=1&limit=10" didn't fetch the image and display can some help

[@Kayman5x5]

Awesome, but it is a pity that at least some of projects arent in typescript

[@rayyanabdulwajid7681]

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

[@iamkartiknayak]

After learning from this course, I'll be porting all JS apps to TS

[@pictermillanmurillo3882]

Thank you free code camp !

[@tetrapact3608]

Hell Yeah, Time to get a Job

[@namandeep4332]

Amazing explaination of everything♥♥

[@RageGamerJay]

On the Accordion is there a way to make the opening be smooth not just show and hide? Like animated?

[@saurabhsunilsingh]

This is what i was searching for !

[@christiansid333]

Hey coders, can anyone explain why he used a useEffect in the custom hook that he made for the theme changer (light to dark) though it can be done without it. And I really dont see any reason to use it there. And even without the useEffect its working fine.

[@raknos13]

yes same question. Can anyone explain?

[@taiyc3]

amazing! thank u so much! XP

[@CLEOCHAN183]

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.

[@tejasmore133]

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.

[@kooroky]

Perfect✌

[@mohammad_saud_humayun]

Shopping cart API is not working properly as it's not displaying the images. Is anyone facing the same problem ?

[@madhushraba]

thank you so much

[@KunalKumar-xr7ws]

What is the use onChange in Tabs project my logic work without onChange

[@2ameridiem]

What about the 'children' props accepted by the GlobalState i.e GlobalState({children}) 6:08:00? Don't we have to pass any props to the GlobalSate? (Perhaps something like ... < GlobalState children={} > )

[@cs_iitian]

The Video is of 9 Hours, and It got like 888 in 49 minutes People are watching in 100x ?☠☠

[@prabhakaranjeyamohan4579]

@@The_Night_Knight probably his Indian friends liking the video on request

[@UnthinkableFairytales]

Thank you guys.

[@owaisahmadshah6744]

I was just looking for this thanks sir your are awesome thanks a lot

[@nedlee1644]

I love this guy! "I hope you are getting.."

[@user-tt4ql6hg1p]

Great ❤❤

[@sandaru11]

Thank you so much!! 😊

[@michaelgibbs-eb1ed]

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!

[@michaelgibbs-eb1ed]

For anyone else wondering the same thing I found and installed "Auto Import" and it's doing the job nicely :)

[@SatSTAR0]

@@michaelgibbs-eb1ed thank you

[@ivanemenya8391]

Can I start from this video if I know nothing about HTML,CSS & JS?

[@shubhijain2679]

No. Html,css and js are needed to understand react.

[@Gareebboy-r1s]

Bro where are you from Mumbai or Delhi?❤❤

[@icebones3075]

is it useful to do all these project just by copying someone's code ? seems I don't learn anything from tutorials

[@br3ak_]

This is not a tutorial, it's a misleading title. It's only useful as a reference guide for intermediate devs that have good algorithmic thinking and problem solving skills and a theoretical understanding of React concepts, because you can first watch / code along and then code all these things by yourself to solidify the concepts learned. This video is great way to prepare for junior and even mid level React interviews but the prerequisites are high.

[@msj1970]

Could you attach the data file (data.js) mentioned in the first project? I could not find it anywhere. Thanks.

[@nedlee1644]

the github repo has all the 'dummy data' for each of the individual projects in their respective folders.

[@msj1970]

Thanks!@@nedlee1644

[@tusharkutre6378]

It was much needed video. Thank you, FCC

[@angithkrishna2939]

At 1:41:27 ,Here is the data.js file for the tree menu export const sidemenu =[ { label:"Home", to:"/", }, { label:"Profile", to:"/profile", children:[ { label:"Details", to:"details", children:[ { label:"Location", to:"location", }, ], }, ], }, { label:"Settings", to:"/settings", children:[ { label:"Account", to:"account", }, { label:"Security", to:"security", children:[ { label:"login", to:"login", }, { label:"Register", to: "register", }, ], }, ], }, ]; Happy coding y all

[@neglasuleiman2355]

Please can we have similar project for Vue js

[@Mayanksingh-18]

This is what I'm looking for .....

[@bakashadow0]

should i upload these projects to github?

[@abc-ym4zs]

how was the course can anyone give feedback

[@Kabraxiz]

Awesome !!🥳🥳 Thank You for this amazing training opportunity 🦾

[@VVigneshwaranMSEC]

If you are slower and sometimes difficult to understand, this is not for us

[@The_Developer_]

Thanks for this ❤❤

[@valenciawalker6498]

Thank you!!

[@khawamessa5794]

Thanks 👍

[@eleah2665]

Very good. Thanks.

[@Carlos_9770]

This is perfect for me!