React JS Full Course 2024

Code Repository: github.com/stuyy/react-tutorial-2024
Support the Channel:
Become a Member: www.youtube.com/@ansonthedev/join
Become a Patreon: patreon.com/stuyy
Buy me a Coffee: ko-fi.com/anson
Donate on PayPal: paypal.me/ansonfoong
Connect with me:
Twitter: ansonthedev
Discord: discord.gg/Gd5fAEJDQD
GitHub: github.com/stuyy
Twitch: twitch.tv/stuy
0:00 Intro
2:30 Why learn React?
3:01 Prerequisites
6:56 Setup React with Vite
8:00 Install NPM Dependencies
9:10 Project File Overview
18:58 Intro to Components
27:10 Creating a Component
38:35 createElement function
45:04 Component Props
52:30 Evaluating Props
58:28 Type Checking Props
1:10:40 Children Components
1:14:28 Fragments
1:21:00 Styling with CSS & SCSS
1:37:41 Dynamic Rendering Lists/Arrays
2:05:23 Conditional Rendering
2:25:00 Handling Events
2:29:56 Input Field onChange Event
2:43:05 Form onSubmit Event
2:51:30 Registering Window Events
2:54:38 State
2:59:18 useState Hook
3:06:25 Binding State to Input Fields
3:30:00 State with Arrays
3:52:00 Updating Element in State Array
4:01:50 Delete Element from State Array
4:09:31 Add Elements to State Array
4:20:57 useEffect Hook
4:30:10 useEffect Dependency Array
4:40:00 Fetching Data Example
5:01:12 AbortController
5:04:00 useEffect Cleanup Function
5:08:30 POST Request Example
5:24:05 Creating Custom Hooks
5:43:38 React Context
5:50:41 Creating a Context
5:53:53 Using Context Provider
5:55:29 Consuming Context
6:05:43 Using State with Context
6:12:24 Updating Values in Context
6:16:17 Custom Data Fetching Hook
6:41:16 Intro to React Router
6:43:20 createBrowserRouter
6:45:40 Setting up Routes
6:50:40 Nested/Child Routes
6:52:48 Outlet
6:56:00 Link Component
6:59:37 useNavigate Hook
7:03:08 Navigating Programmatically
7:05:16 Passing State to Route
7:14:42 Intro to Unit Testing with Vitest
7:17:00 Setting up Vitest & React Testing Library
7:17:41 Configuring vite.config.js for testing
7:19:14 Create setupTests.js file
7:22:16 Writing our First Test
7:26:40 Rendering Component Under Test
7:29:48 Snapshot Testing
7:36:18 Using Screen to Query Elements
7:37:25 getByText query
7:45:00 Understanding getBy vs queryBy queries
7:53:00 findBy queries
7:55:52 findByText example
8:04:38 More examples of Testing
8:21:00 Using getByRole to query Buttons
8:26:30 Firing User Events
8:27:23 Simulating Click Event
8:34:11 Querying for Input Elements
8:38:35 getByLabelText example
8:43:56 Testing Multiple Elements of Same Instances
8:46:22 Data Test IDs
8:49:02 getByTestId example
8:53:30 using within() to search elements inside an HTML Element
9:15:51 Simulating type event
9:21:00 Other queries
9:28:24 Testing Component with Context API
9:57:40 Using Mock Service Worker to Mock API Requests

[@ansonthedev]

Please be sure to like this video and leave a comment to help share and spread this video. That’s all I ask ❤ thanks!

[@melchizedek79]

Done!

[@birodhlungeli5199]

@@melchizedek79 we need more videos

[@Sreekanth-Dev]

I'm from India your the best in teaching react

[@AhadQasimi]

Ok boss, just followed the instructions😉 Thanks for your help buddy.

[@poohcat12gt76]

what theme did you use in this video?

[@letsgotosleep1988]

I'm 27 years old, working a dead-end call center job. It’s 5:08 AM, and I spend 4-6 hours of my 10.5-hour shift studying coding. I’m about 6 months into this journey, and I’m locked in-barely talk to people at work, not because I’m cool, but because I’m focused. I’m desperate for a better future and to break out of this rat race. I watch most of my colleagues complain about this job, but unfortunately, many aren’t doing much to change it. I’m not better than anyone-I’m just incredibly grateful that I’ve found something I love. I’ve become obsessed with learning and I’m thankful for this job because it gives me the time to study. My goal is to break into tech before I marry my beautiful fiancée! Let’s keep going!

[@marc1an4]

congrats!! I was also in a call center job months ago, but almost every page was blocked in there. I couldn't do anything but play the snake game or solitarie haha. you're lucky in that aspect. Keep going and good luck!

[@abdulrafaykhan5252]

@@marc1an4 May you have greatness here and afterlife as well

[@marc1an4]

@@abdulrafaykhan5252 thank you! ☺️ I wish you greatness as well

[@boratsagdiyev522]

We share similar stories

[@phyothiha5612]

4:53:00 For those who wondered why the catch block didn't work, fetch only rejects when a network error occurs. Since responses aren't network errors, there is nothing to catch. You have to check the "ok" property in the response object and need to throw an error yourself with throw new Error("Meaningful Message").

[@farazk9729]

Thank you; very useful

[@suupershihab]

I know React already but just here to support Anson. I know it'll be a good watch and refresher. Keep up the good work, bro!

[@ansonthedev]

I appreciate that!!!!

[@EuniceGodson]

Hi

[@EuniceGodson]

I need help in API Integration

[@godwinoyale3550]

1hr into the course and all I can say is that you are one of the best teachers on this app

[@ansonthedev]

Thank you very much!

[@HWK_venom]

​@@ansonthedevHey I love the way you explain can you make a tutorial on e commerce websites with backend and admin panel in react and explain everything that you're doing?

[@tarekmohamedwfa7354]

Great content! Can't wait for your NextJS course

[@christophermawela3318]

Have already crossed 7 hr mark, this is a great tutorial and looking forward to your React projects. Thank you Anson...

[@Joe-gy6ld]

been searching for a while to get the course that first explains why and where you'd use the code your getting taught and finally found it. I appreciate you Anson. Thanks!

[@Sanatan_shiksha1]

Learning on KZbin feels like we are studying in abroad 😅

[@kesirbekrobby]

what bruh

[@Sanatan_shiksha1]

​@@kesirbekrobby Without any expensive fee and without travelling anywhere we are getting top notch content

[@mdsafikulislam9113]

Salute

[@AvidAfrican]

KZbin should have a university section....

[@FaroukHamisu]

😂😂😂😂

[@mykun8737]

Anson, you're my idol, my guiding spirit. Could you teach a full video course on HTML, CSS, and JavaScript for backend devs? I've been assigned some frontend tasks, but unfortunately, I only have prior knowledge of backend development. HTML, CSS, and JavaScript are completely new to me; I'm at ground zero. Your help would be greatly appreciated.

[@ajalajessica3601]

just started this tutorial, hope to learn new and exciting things about react

[@MrPSolver]

Great tutorial, I appreciate how thorough you were with each concept! Thanks man :)

[@JourneyGoesOn1]

Your Start Up is Amazing.

[@Bad4Good2]

Excellent tutorial man, thanks for doing this for us.

[@JayaramRaju-7799]

Just I watched 1hr of video and it is completely different from others. Everything is explained clearly while compared to others.Thanks sir

[@viridianite]

Thanks a lot, dude! You're not only explaining syntax but also concepts, patterns, practices, and motivations. That's what makes a good programming tutorial. 4:53:00 From the fetch docs, "A fetch() promise only rejects when the request fails, for example, because of a badly-formed request URL or a network error. A fetch() promise does not reject if the server responds with HTTP status codes that indicate errors (404, 504, etc.)." After you changed the API endpoint to a non-existent one, you got a 404 error from the server which resolves and that explains why you couldn't catch it.

[@shadowgamer_-yl4kt]

Thank you so much for this course. Tbh i was just going to learn React and I got this video in my subscription feed ❤.

[@ansonthedev]

You are welcome. Perfect timing!

[@shadowgamer_-yl4kt]

❤❤

[@vxnny20.00]

Guy, I'm really love of your teaching man because your explanation is so clearly. Much appreciate man and Keep it up!

[@jopadjr]

3.1k... Thanks Anson. This is a great video. I have just started the video and need to find out about other frameworks as well.

[@hassansyed6087]

10 hours of concentrated React content -- for free? You're a real one. Thanks for this.

[@amapro163]

Hey Anson, just wanna say I really appreciate for publishing these free courses for us to learn and practice. I enjoyed your Express.js course as I myself had a full-stack project at that period, and I was having a hard time understanding with other tutorials and sometimes the docs, but with your tutorials, it immensely helped me out in the process as I myself have easily grasped into the concepts of the framework now. Currently working on transitioning to TS. Thank you so much again.

[@ansonthedev]

No problem. You are welcome!

[@vuxuanhuy9079]

Hey pro, Are you play discord? Can I study with you?

[@roadMapLearner]

I am a beginner learning react.I never understood useState concepts. But your video is super explanatory and i understood it clearly now. I dont think i found any udemy courses explaining this concept clearly

[@Bl1tzs]

Great tutorial, I like that your actually explaining- so im not overwhelmed

[@Website_TV_1]

This React JS Full Course is awesome, I have learnt a lots, thank you!

[@OlanrewajuBadejo-cg8zj]

Amazing tutorial. Really love your tutorials Anson.

[@ansonthedev]

Thank you!

[@lanazoolander4165]

Thank you for this. I learned React using the class methods and this helped very much to switching to using hooks.

[@stefgrino13013]

Really instructive ! (and thanks for that huge amount of work)

[@devdeclan]

Keep Going - Great Content - Valid points 🚀

[@marthinus.x]

Your approach is so intuitive. I just want to take a moment and thank you for this. You don't just explain how, but why, and that makes a world of difference. Keep up the great work!

[@bonchan4404]

hello anson came here to just comment and support your video . im still on your nest js videos ! . thank you !

[@christ-adams7771]

Great tutorial. I learnt a lot from this. Keep up the good work.

[@bhagyawijenayake]

I'm at 04:11:22. This is the best React course I have found.

[@amandacaecilia]

Wow, beautiful content Anson. Thank you so much and waiting for your projs💌 Anson, can you create a full course for DSA in Python please... That'd be so helpful Thank ya!

[@VATHITHYARAMAA-z5c]

Yes Anson!! Please do create a full length tutorial for DSA in Python!! We all want it so badly!

[@LoveCupid-lr8tb]

Yeaa Anson, do create a complete hands on tutorial like this for DSA in Python.

[@EmmaLovesCoding]

wow brother , this is amazing . please i wil be waiting for your unit testing too! like you promised

[@ansonthedev]

It’s at the end of the tutorial. Check timestamps.

[@Koncentrator-cu2xg]

0:58:28 2:05:23 3:06:25 4:01:50 4:20:57

[@derekstevens164]

I've been meaning to do like a React Flask/Django fullstack at some point. Thanks for the great video.

[@ansonthedev]

You’re welcome!

[@KuchOriemi]

This guy is great and explains so well, great content thank you 👍

[@marc1an4]

I've taken three hours of the course so far and I think it is great, I've seen other courses before but this is the one that I have understood the most

[@mariakaravazaki4608]

great content and crystal clear explanation, thank you!

[@ansonthedev]

Thank you!

[@kareembamidele4804]

Anson, your style of teaching is topnotch. Every concept with different perspectives and examples is the deal for me. I found all your content really helpful and may God bless you for doing this for us all for free. With love from Nigeria ❤🎉

[@mxnnydev]

just what i was looking for !

[@sriramvenkatesh]

Nice tutorial. Very useful. Thanks

[@ashutoshkumaarr]

Is this enough for learning all the important React concepts, or is there any topic you left out that I should definitely learn after this video? Thank you, Anson. You're a wonderful teacher, and I have already completed your ExpressJS course 🥳🥳

[@zohebansari6429]

Bro same doubt plz tell me topic I have to learn after vedio??

[@designordu159]

this has been one big-time informative course, worth a lot but it's on here free.. bless up man for this course, thanks a lot. more height 💪💪

[@sakthikumaran8076]

This is what I'm waiting for... Thanks Anson!

[@ansonthedev]

You’re welcome. :)

[@sauravghosh7487]

Best contents to learn anything from very basic level to intermediate. Execellent for begineers with zero knowledge about react. I am building Fullstack foundation only from this channel. Already learned Express for backend and now the frontend. Will be waiting for more related contens in this field.

[@farazk9729]

Hi, I am a noob. Is there a lot more to React that I have to learn after I finish this video? You said it's good up to intermediate, so it means it doesn't cover everything, does it? Thanks,

[@andreassklizovic]

excellent tutorial, very thorough and concise explanation.Many, many thanks.😀

[@nwanosiketochukwu8942]

Yet to watch the video, I just went through the course content. All I could say is kudos 🎉❤

[@MeilyChhon]

I am so glad to found your channel, sir. I hope this course gonna blow up like your express course too. Once I learn react, I will be able to move on to Next.js :) Love you man, love you so much!!!!!

[@ansonthedev]

Thank you. Stay tuned for my nextjs course.

[@MeilyChhon]

@@ansonthedev you are godlike developer / teacher now man!! youtube should push your content more, you deserved more views on your content, man!!!!

[@eziagorsylvester5911]

Appreciate your efforts Anson.

[@ansonthedev]

Thank you very much!

[@promiseduke7508]

You are a true legend sir, I will be waiting for your Nextjs course

[@m1di797]

hello anson, i just wanna say i love your content and what you do! in this tutorial/video not only did you teach us basics of react but along with it im learning about react routers and other extensions or parts of react, thank you for your help. and its crazy that you teach these things for free!

[@ansonthedev]

You’re welcome and comments like these are the reason I do what I do!

[@m1di797]

@@ansonthedev ❤

[@dreamsachiever212]

thanks you for such a comprehensive tutorial

[@ansonthedev]

You’re welcome!

[@amorr228]

thank u so much, best full react course on youtube

[@Ssmb-qj4df]

Dude your express course was excellent now you came with React. Thank you chad

[@ansonthedev]

You're welcome!

[@noelkitonga]

I have to coast to coast this one. Thank you so much for this one

[@andrejkling3886]

Excellent course...🔥💯 thank you Anson

[@ansonthedev]

Glad you like it!

[@andrejkling3886]

@@ansonthedev exactly …🔥🔥🔥 coool. Is it possible some project Nest - React ?

[@mohitsirohi99]

you have created an amazing tutorial. You got new subscriber.

[@PhamPhuongAnhNguyen-i2s]

I have a quick question: which shortcut do you use to create a new line for each argument in an input field, such as 3:44:17? Thank you!

[@rishabhsinha7033]

You are entirely of a different league!! Great tutorial .

[@ansonthedev]

Thank you!

[@freecodeprojects]

Best React Course So Far!

[@DiaguLoL]

Hey! I'm starting learning React! Great video, you are explaining everything carefully, thank you! Btw! Could you make a video, or share your VSC extensions? For example, if you use a component without importing it, it is importing itself automatically

[@angeloserenuela4065]

THANK YOU SO MUCHH IM READY TO LEARN REACT !

[@spacey6960]

3:28:00 does the element do anything at that point? You could technically remove it right?

[@yougetonthathorseyougottar6126]

i fucking love you Anson, and a fucking love React. Thanks!!!

[@murali-krishnan]

Thx for the top-notch updated react course, Anson. It was a great refresher for me to fill in the missing puzzle in my React Basics. I'm eagerly looking for your Intermediate and Advanced React stuff Like Suspense, Portal, Other leftover hooks(useReducer, useCallback, useMemo etc...), State Management with Redux-Toolkit, and Advanced Data fetching using react-query.

[@abhishekc3556]

Hey would this be a good tutorial for someone that's entirely new to react?

[@murali-krishnan]

@@abhishekc3556 For sure, I've seen lots of videos I mean a lot. But, Anson explains everything clearly this is the best React course for beginner in 2024. Go for it man

[@NOLYHERRERO]

Thanks you. Keep up the good work!

[@eric.en_]

Hi Anson! I'm wondering the difference between using callback function to update the state ("setCount(count => count + 1)") and without callback ("setCount(count + 1)"). Really appreciating your course btw

[@ansonthedev]

If you just pass in the state variable, e.g: setCount(count + 1), you are not precisely referencing the current state of Count. In cases where you have multiple calls to setCount, you will run into unexpected behaviors of the state because you end up having a race condition. In practice, you always want to use the callback in order to safely reference the current state while being able to manipulate it and update the state to its newest version.

[@mekhron]

Thanks man. You are amazing. You know how to explain complex things in simple ways. 👍👍👍

[@ansonthedev]

Thank you very much!

[@SaberZ-yz6ez]

It's my fourth day into react. This course is the place i would suggest any of my peers. ❤

[@ansonthedev]

Thank you!

[@abhishekc3556]

Thanks for this.

[@monarchgam3r]

10 hours...thats huge...nice work

[@ansonthedev]

Thank you!

[@gcskinsgc]

I love your content Anson, i am an aspiring and upandcoming web developer so your videos are helping me a ton!

[@andrewkos]

Thanks. Very clear.

[@vickygalih5571]

DAMN, 10 hours of tutorial takes almost forever to finish i am currently at 10:29:01 almost at the end of the course, at this point... i may remember your voice in my entire life bro i hope i can grow further after doing some projects after finished this hella course Thank you Anson

[@vickygalih5571]

it is finally done, i am actually in the test week in my university, so i can't take a break. i will just rest for the rest of this night (it is 10:40 pm when i write this) Once again, Thank you anson.

[@subash-b]

Is this cover all concepts to master react? Does it cover authentication and redux part?

[@vickygalih5571]

@@subash-b short answer no. but for me, i'm a person that is "too textbook", so yeah it helps me when jumping to further concepts in react. i think learning redux will be faster after this course. if you don't have much time, search another course that covers real projects. it will be more worth it to spend time into. my personal conclusion about this video, it doesn't cover real project but it does cover component that might be applied to any project

[@iancarr3923]

Just started but what I have seen so far is excellent. One complaint... "more faster". I look forward to working thru the rest of the course.

[@RMG-ng1dx]

Thanks for an incredible course, one of if not the best. Well done. Only one suggestion, the useContext portion was very hard to follow, kind of jumps around. Question that I have and a few others, hoping you could share, maybe it's silly but, what theme are you using in VS Code? Is it your own custom or is it available open source?

[@Shoaib_Khan9272]

Thanks Brp for such wonderful tutorial❤

[@ansonthedev]

You're welcome!!! :)

[@andriyabu]

Awesome. Thanks for efford to created this amazing video.

[@ansonthedev]

You are welcome! :)

[@rowlandoka]

Great and awesome Anson, Thanks. I really love your theme, please what share.

[@1234zaptor]

Hi Anson, do we have a new tutorial for nextjs ^13 ? We appreciate if you have since the last nextjs tutorial was two years ago. We love your tutorials and helps us a lot by reviewing and learning new skills as web developers. Thank you so much!

[@rishabhsinha7033]

Can you have a playlist of advanced React courses. Like really in-depth

[@sasquatch_devs]

Thanks for this awesome resource!

[@ansonthedev]

You're very welcome!

[@khanfaizan05]

Wonderful..❤. Btw which fonts and theme are you using in vscode?

[@moshoodolawale3591]

Trust me, you are a good great teacher. You simplify complexity with simplicity. As a request, do you mind a project-based course targeted at early mid-level developers?

[@frankillumate]

Anson I so much like your Vscode theme, mind sharing the theme name? I'm super in love with it!

[@anhvin007]

Thank you Anson! Do I need to read the React documentation while studying with your videos

[@ansonthedev]

@@anhvin007 You should reference both

[@davutdurmaz1190]

Hey Anson, first of all, i appreciate your effort you create really quality content here in this channel. I only say this if you have time, you know i like your content and really helpful for me, it could be great to create more side projects that includes advanced and widely used techs and tools with increasing complexity. Lastly, i want to say thank you, i appreciate your effort.

[@ansonthedev]

I have plans to create side projects during live streams so it's more interactive for everyone.

[@aliffashraff4452]

Hi Anson! Thanks for the great content and very useful video. I just want to ask about the hooks, how about other popular hooks like useRef, useMemo, useReducer and useCallback? Are they really important? Bcs i see you did not include them in this video.

[@wanjeeric4885]

This is great, I'm so excited

[@abdirahmanabdullahi1966]

Thanks man, you got my subs and like.

[@truthteachers]

Hi Anson, in props validation will you be showing us how to catch the exception so that we can handle it programmatically?

[@brajagopalmukherjee1588]

Thanks anson love u man from India will do revision...please make nextjs also everywhere nextjs whatever project coming...Can u suggest something how to improve styling and all for website i stuck a lot.?

[@favanzzo]

YES, THANKS ANSON!!!!!!!!!!!!!!

[@ansonthedev]

You're welcome! :)

[@codewithsajid]

awesome content bro!

[@AnNX.0816]

I am not good at English, but I want to watch your video to learn. One difficulty is that KZbin's automatic subtitles are not complete or accurate enough for me to fully understand. I hope that, if possible, you can add accurate subtitles to the video so that people like me can watch it more easily. Thank you

[@kalye-gech27]

Great work! can you upload about node.js

[@elatedtalha7136]

Dude amazing job! 👏 This video came up at the perfect time as I was just looking for a React tutorial for revision. I hope you make a Next JS tutorial as well!

[@ansonthedev]

Yes nextjs will be coming soon!

[@elatedtalha7136]

@@ansonthedev oh great!

[@martonyoutube]

Thanks! Helps a lot.

[@ansonthedev]

You are welcome :)

[@FA-nt2ig]

what kind of projects do you recommend us to do after your tutorial, pls it will be helpful if you reply 🙏🙏

[@ansonthedev]

Build whatever comes to your mind, at a scale that you can handle.

[@FA-nt2ig]

@@ansonthedev thankyou