Understanding React: The First 6 Hours

Get lifetime access to the full 16.5 hour course here!: understandingreact.com (for a limited time use coupon code KZbin6 at checkout for a discount).
Section "useReducer (Part 2)" at 5:39:02 has no sound (the rest of the video does!). You can watch that section with sound here: dontimitateunderstand.com/cou...
PPP Request form: anthonyalicea.com/courses/und...
0:00 Introduction
2:52 Setup
4:43 A Basic React App
6:50 The React Source Code
8:56 SECTION: The DOM and Declarative Programming
9:17 HTML and Trees
11:17 HTML, The Browser, and the DOM
15:20 DOM Manipulation
21:53 Conceptual Aside: Imperative vs Declarative Programming
24:53 The DOM and Imperative Programming
28:05 The DOM and Declarative Programming
32:13 SECTION: React Elements
32:39 Conceptual Aside: Recursion
36:56 Conceptual Aside: POJOs
49:49 Creating React Elements
1:01:25 React Element Trees
1:06:50 Conceptual Aside: DOM Element References
1:08:22 React Elements and DOM Elements
1:14:23 React DOM Updates
1:26:37 Components
1:32:39 Components and Reusability
1:43:45 Conceptual Aside: Pure Functions
1:49:04 Props
2:01:28 Template Logic
2:15:40 Element Properties
2:22:58 SECTION: JSX
2:23:19 Conceptual Aside: Markup and Tree Creation Shorthand
2:25:13 Conceptual Aside: Transformation
2:27:02 React Elements and JSX
2:46:44 JSX and Thinking In Elements
2:58:43 Conceptual Aside: HTML Authoring
3:01:32 Fragment and HTML authoring
3:11:36 SECTION: Fiber and Reconciliation
3:12:18 Root Creation and render
3:21:15 Conceptual Aside: Trees and Linked Lists
3:25:36 Fiber, Fiber Nodes, and Fiber Trees
3:32:33 Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
3:36:18 Work-In-Progress Nodes
3:45:49 Reconciliation and Work
3:51:35 SECTION: Execution Contexts
3:51:56 Conceptual Aside: Execution Contexts and the Event Loop
3:55:39 Fiber and Custom Execution Contexts
3:59:54 Units of Work and The Work Loop
4:02:53 Conceptual Aside: Equality
4:06:27 Beginning, Completing, Bailing Out and Pausing Work
4:13:28 Lanes and Priority
4:16:04 SECTION: React DOM and Rendering
4:16:19 Committing Work and The Renderer
4:19:13 Mounting, Updating, and Unmounting
4:24:02 SECTION: Events
4:24:26 DOM Events
4:36:03 React Event Objects
4:43:54 Synthetic Event Properties and Methods
4:49:38 SECTION: State
4:49:55 Conceptual Aside: State Machines
4:56:32 Conceptual Aside: Pure Functions (again)
4:59:13 UI: A Function of State
5:01:59 Conceptual Aside: Reducers
5:08:31 Actions and State
5:17:26 SECTION: Hooks and State
5:17:51 Fibers, Hooks, and State
5:21:57 Conceptual Aside: Queues
5:25:50 Update Queues
5:28:37 State and Re-renders
5:31:15 useReducer (Part 1)
5:39:02 useReducer (Part 2)
5:45:08 useState (Part 1)
5:49:24 useState (Part 2)
6:00:10 Rules of Hooks
6:07:55 Enroll in the Full Course

[@TonyAlicea]

Sorry, section "useReducer (Part 2)" at 5:39:02 has no sound (the rest of the video does!). You can watch that section with sound here: dontimitateunderstand.com/courses/understanding-react/lectures/46000855 Enjoy!

[@NishanSingh-io4zh]

Hey Tony, you may wanna pin this info, so that it's on the top of comment section😀

[@TonyAlicea]

@@NishanSingh-io4zh Ah thought I had, thanks.

[@bhoboghureycompany]

Here comes the teacher we all need! 💙

[@zainsyed9811]

Your javascript course is the best I've ever done. I'm sure this will be just as great :)

[@rbereziuk]

Awesome work and approach to teaching. Huge thanks for sharing

[@vicnix787]

Tony, your way of teaching is truly second to none imho. I will absolutely be purchasing this course.

[@MBkingsoft]

Finally! I have been dreaming of this day. Thank you sir! So excited 😊

[@jessiewang167]

Thank you a lot Tony, amazing course!

[@herver.munyurangeri7811]

Thank you so much Tony. I hope one day I will be able to buy some of your great courses!

[@keistaltee2722]

Best in-depth React course! Thank you so much for your wonderful teaching!

[@amypellegrini1732]

Fantastic stuff! Never too late for a refresher on how React works.

[@suga_tech9232]

Tony, you're the best teacher I've ever had. God bless you!

[@iqbali4u]

I really like the video overall and the fundamental concepts of how React is working under the hood, you explain very nicely. Thank you

[@anonymousmangalorean]

High quality content. It is difficult to grasp all at once. But sure I will check this video many times to understand react internals. Bring more react internal videos❤

[@aamiramin6112]

I have never seen such deep understanding with so much information with brilliant examples even though I'm currently working as a senior dev but I have learned so much from you. Thanks a lot for sharing.

[@roopashree3545]

6 hours of free course for such a quality content. Suddenly I felt myself so much blessed ❤. This is really boon for people who strive to understand something very deeply. And it's just not the content it's how you bring it to us. Your teaching skills are best in the world. I don't know how I thank you. I just pray God to bless you with lots of health and happiness. Thank you Tony Alicea.

[@peymanghaemi370]

where ever I play your videos (browser or video player), I can copy the text from it, its amazing that you pay attention to these aspects of your work.

[@herp100]

this is awesome. im saving some money to get the full course

[@atmospheric_b]

When its time to change job and go to interviews, i know it's time to watch again all Tony's courses. This one as always golden.Thank you Tony

[@kellystephen1785]

Since I listened to your JavaScript the weird part tutorial, I have been looking out for your other courses for years. It's good to have you back. Welcome back

[@TonyAlicea]

Thanks! I released courses on HTML/CSS as well as a sequel to my weird parts course as well. They’re both on Udemy.

[@thodang3395]

this is the best video I have ever seen in React. thank alot

[@bontertiustuyishimire7140]

I really loved your last course "Understanding weird part of JavaScript"... And i hope this one will give me a great beginning stand to start seriously with ReactJS... I really liked the way you explain ... You are unique ✌️✊

[@recursion.]

Tony you are such an amazing teacher. The way you teach the fundamentals ideas and and lead up the way makes so much easier to connect the dots.

[@recursion.]

Just a feedback: It would've been nicer if you had recorded in 2k resolution with browser and ide side by side.

[@TonyAlicea]

Tough for people watching on phones and small tablets.

[@netajibabusimhadati6745]

Bought the course, its incredible that you posted here for free. thanks a lot. Huge thanks for the coupon as well.

[@TonyAlicea]

Thanks so much!

[@pizzaitaliana9835]

it is an absolute pleasure to listen to you. Same her, I have been waiting for course like this one for a long time. Added to basket.

[@TonyAlicea]

Thanks so much, welcome to the course!

[@Bcpainter26]

I've been waiting for something like this. Tony is hands down the best teacher you will find online. I haven't found anyone who displays and teaches this level of understanding. I've been writing with React for a couple years now, and I'm 100% certain I will have a much better understanding of it after completing this course.

[@TonyAlicea]

Thanks so much!

[@reactivicky]

I'm here from reddit. I got my first job entirely due to Tony's Javascript course. I love his teaching style

[@TonyAlicea]

Thanks so much, glad to have been part of your journey!

[@vladrileynavilys]

This is great, thank you for putting that here. I did some of your "weird Javascript" course some time ago and got several lightbulb() moments from it.

[@TonyAlicea]

Thanks for being a student!

[@stefanoslalic2199]

One of the best React videos on YT. Thank you Tony

[@TonyAlicea]

Thanks so much!

[@majed1059]

You are doing an amazing work, the real work.

[@djibrilm__-]

Humm me who used to think I knew enough about react... find out that I'm not even a beginner just a frameworker, thank you for taking back that love and craving for learning 🙏🙏

[@oharawinter]

Wow! Thank you so much for putting this up!🤩 I have to agree… You're the ONLY teacher who teaches tech in a way that makes sense to me. So good. Thank you again!! 🎉

[@TonyAlicea]

Thanks so much, and you’re welcome! Glad it’s helpful.

[@BlurryBit]

Wow, this is a gem of a course!

[@exe.m1dn1ght]

I'm at 12:55 and I already know this will be an exceptional tutorial just based on 12 minutes of explanation from you

[@TonyAlicea]

Thanks so much!

[@mikeba3809]

5:08:31 Actions and State 5:17:26 SECTION: Hooks and State 5:17:51 Fibers, Hooks, and State 5:21:57 Conceptual Aside: Queues 5:25:50 Update Queues 5:28:37 State and Re-renders 5:31:15 useReducer (Part 1) 5:39:02 useReducer (Part 2) 5:45:08 useState (Part 1) 5:49:24 useState (Part 2) 6:00:10 Rules of Hooks 6:07:55 Enroll in the Full Course

[@rohitchandak2482]

I took your course on udemy: "Javascript understanding the weird parts"! It was very deep, covering topics to help us reason and understand javascript really well !!! Thank you for that course.

[@nullzero9224]

Tony is one of the best and top programming instructors I have seen ever. His stress to build a mental model for the tech and concepts we are learning is extremely valuable and important. I love how dedicated he is to going deep to make complex ideas/concepts easy to understand from the top. There are hundreds of instructors out there, but there is only 1 *Tony Alicea*, especially in the Javascript and web dev world.

[@HominisLupis]

You a King tony, a propa G!!

[@NimanthaNadeeraka]

masterpiece 🚀

[@HuseyinTurkmenoglu]

Tony thanks. I always liked the way you explained it 🚀

[@TonyAlicea]

Thanks!

[@uysalherif]

You are great!

[@WhiteBlue50]

Waiting for the full course! do you have an estimation when it will be complete?

[@creativeshots7681]

Waiting for this

[@hardikganatra2453]

Man you are a super amazing Teacher , god bless you man. This content is GOLD !!! React team should hire you man.Super amazing stuff given for free to community. You make everything so dam logical , thats a skill not every one has. Again God bless you man

[@TonyAlicea]

Thanks so much!

[@A_ray_of_sunshine113]

Great work.....Valuable content

[@TonyAlicea]

Thanks!

[@kaushal.mp4]

*Thanks for Beautiful Efforts! I Value It So Much!!*

[@TonyAlicea]

You’re welcome!

[@MxSmack]

Tony is the hero we need.

[@OmPrakash-sl4if]

Happy Teacher's day Tony ,t best teacher 🎉❤

[@Krzych092]

Great deep dive course (as all of your courses Tony :) i wish you had more of them)! A little feedback: i noticed the section "5:39:02 useReducer (Part 2)" has no sound.

[@TonyAlicea]

Oh no, looks like a processing problem. :( Let me see what I can do, at the least I can put a link to that video with sound.

[@TonyAlicea]

You can watch it here with sound: dontimitateunderstand.com/courses/understanding-react/lectures/46000855

[@jorgeperalta1973]

He did it onve again!!! 💯🔥🔥🔥

[@slappy_chimp]

Thank you for posting free content like this.. I was like is it worth it to pay all that for a react course.. one hour in and I'd say definitely worth it. I'd buy it with the next discount as the Eid expenses kinda had me dry haha

[@TonyAlicea]

Thanks, glad you see the value!

[@maymoonaal-balushi4157]

@@TonyAlicea will it be fine if you release the free part of this course on Udemy .. just the free part.. dunno might get more traction and visibility on the gem you've worked on

[@benwyse]

I really love this React course. I already know React. But this course is connecting a lot of dots. I should have used my debugger to get deep into the code.

[@TonyAlicea]

Thanks! I always encourage not just stepping over, but stepping in to code. You can learn a lot.

[@valp_co]

I admire the way you explain things, there are very capable developers, very intelligent, but when it comes to teaching their knowledge, they can't find the idea way to share it. The way you get to the bottom of the tool, to analyze it, understand it and master it, is an absolute feat. Thanks Tony, we owe you a lot brother.

[@TonyAlicea]

Thanks so much!

[@aniruzzaman_anir]

I used to search is there any content going to the source code of react for understanding internals of it. I couldn't find any potential any over the time. But now, thanks to you. @Tony Alicea

[@anmolsharma4049]

Just 15min into course and can say It's hard to find such good quality courses

[@kellystephen1785]

Please consider doing something on "Python, the weird part" if you can. I like the way you bring in understanding in your tutorial videos

[@vladrileynavilys]

Could you point to resources to research about the debugging you mention in the Events section? Using the "sources " tab in the browser, you also add a line "debugger" in the react-dom-development file etc.. Or what to google to get stuff about it? Is it "react debugging" or testing?

[@sonnyl2915]

I am newbie in js, however tried to go all the way 6hrs just for absorbing the under the hood of React! 😅

[@ganeshkhirwadkar4127]

Insightful ! Any example Where we might need to access DOM ?

[@TonyAlicea]

We will look at that in the full course.

[@abahiduh3246]

The difference is that TONY OPERATES at a HIGHER level, obviously at the level of those who built react... PLEASE TONY.... we need to understand THE JAVASCRIPT PROGRAMMING and LOGIC 1. How to use functions, conditionals, loops to traverse the data structure of the DOM 2. How to understand the Browser data and algorithms. THANK YOU VERY MUCH TONY... You taught me the core concepts of JAVASCRIPT UNDER THE HOOD

[@parassharma7041]

Just bought your javascript course on udemy it's awesome

[@TonyAlicea]

Thanks, welcome to the course!

[@kranthi.pamulapati]

Bought the course. Thanks for the coupon. Any plan to include a lecture on react native in this course?

[@TonyAlicea]

We will touch on it, but not a deep or full explanation. And welcome to the course!

[@kranthi.pamulapati]

@@TonyAlicea I hope you do a full course on react native some day.

[@96ptg]

Does anyone know if there's any similar content for react native? I've read many blog posts, recordings of react native conferences, but still many things aren't clear to me.

[@alimranali4921]

I can't believe..... It has happened first time to me.... Today I saw your course.. thinking that if i had that course...on KZbin... because I have not so much money because of being a student....God help me...I can't believe....😮

[@TonyAlicea]

This is the first 6 hours, but the full course has a lot more coming. You can fill out a request for a PPP coupon here: anthonyalicea.com/courses/understanding-react-ppp/

[@cannotthinkofanybetterhandle]

Tony The GOAT!

[@TonyAlicea]

Ha, thanks!

[@amritanshurai4428]

Tony, I still haven't received any discount on this course due to PPP difference. I have filled the form couple of times now

[@Vape55]

Great lesson thank you. I just want to ask you a little question. in 3:38:10 , when there is a re-render , the whole react element tree will be rendered but only the component instances that are changed(and its children) will go to the work-in-progress branch? I am right?

[@TonyAlicea]

Hi, yes that's correct!

[@conspirisi]

Looks good, are you going to cover Next JS, considering it seems part and parcel of the React ecosystem now?

[@TonyAlicea]

NextJS is definitely a big player, as it gets early access to new React features. However Remix, for example, does some great things that I like better in some ways, and who knows what else will come along. That said there will be some discussion of React frameworks overall, but the core of the course is about purely React itself.

[@rodrigorb2630]

​@@TonyAliceaI agree, and also there are too many courses on nextjs already. A deep dive on Remix would be way more interesting

[@cyeg12c]

at (36:56 Conceptual Aside: POJOs) I blow my mind

[@TonyAlicea]

Hope it helped! :)

[@NeenaTikoo]

Hi, thanks great explanation. I couldn't find this course in Udemy have you posted there also?

[@TonyAlicea]

Hi thanks! No, it's a premium course on Teachable.

[@NishanSingh-io4zh]

At 25:50, wouldn't it be better to add type="button" to the button for better semantic choice?

[@TonyAlicea]

The default type for "button" is "submit", which I'm fine with in this case.

[@NishanSingh-io4zh]

Thanks for replying back. I just learned these things from your Course "Understanding HTML und CSS". It's a great Course, btw.

[@TonyAlicea]

@@NishanSingh-io4zh Thanks!

[@expresscoding3525]

If you don't mind, I've something to say, as you've much more enrollment in the course of Javascript on Udemy (near about 200K), updating such course will make you more valuable, resulting in one of the best javascript course creator teacher on Udemy forever. Also, putting such course on Udemy is that, people can find your course easily as not everyone navigates to KZbin to get course link.

[@AftabAlam-vu1bv]

When are you planning to release this full course on udemy ?

[@TonyAlicea]

It will not be released on Udemy. It's a premium course on Teachable.

[@ivangechev4243]

@@TonyAlicea Sad

[@HydeJekyl-gb1cb]

Great course. Can we have discount price pleaseeeee ?

[@TonyAlicea]

I'll be posting a video soon with a sale to celebrate the course fully releasing.

[@benwyse]

Please do one on Angular 2!

[@TonyAlicea]

Nothing planned currently, but maybe in the future!

[@denniszenanywhere]

Can you also do Understanding for Svelte?

[@TonyAlicea]

Not currently planned, but you never know!

[@denniszenanywhere]

@@TonyAlicea I wish you had at least a short video or writeup of what you think about Svelte. Would love to know your opinion about it.

[@nafreenuddin6833]

I would like to avail the rest for the course from your own platform, but the a,oumt discount is mot received as it was mentioned. I am from india and i would like to have a discount coupons pleae that would be appreciated.

[@melpacheco9288]

I already bought the course, how long is the rest of it?

[@TonyAlicea]

Can't say exactly yet. Much more than the length of this video.

[@nemanjavukovic2355]

Hey @TonyAlicea, First of all thanks a lot for creation of such an amazing course! :) I bought a course today. Since I watched the first six hours on KZbin I wanted to continue because I thought that there are additional sections included after purchase. Unfortunately I am only seeing that the only new video on the platform is useState part 3. So, when can we expect new lectures to be uploaded? Thanks

[@TonyAlicea]

Early next week!

[@shashankbg26]

Can I watch upcoming videos when I purchase now?

[@mosesmuchemi7221]

please provide a similar coupon code to the one you provided for your other Udemy courses. I'd like to purchase the weird parts course too.

[@TonyAlicea]

This course is a premium course and is currently priced at its lowest (early release pricing). Depending on the country you’re from you may qualify for PPP pricing, which can be requested here: anthonyalicea.com/courses/understanding-react-ppp/

[@mosesmuchemi7221]

@@TonyAlicea Hey Tony.. I'm talking about the JS Course on Udemy ☺️

[@TonyAlicea]

www.udemy.com/course/understand-javascript/?couponCode=1E5F1F90C051DDDCF678

[@liorlsa9]

Hey Tony! Are you going to upload this course to your Udemy courses?

[@TonyAlicea]

Hi there! No, it will remain a premium course on dontimitateunderstand.com

[@Michael-mk2gu]

You are the best. Please, do you have plans to put it on Udemy? I am your student on Udemy

[@TonyAlicea]

Hi, thanks, and no this won't be on Udemy. It is a premium course on Teachable. I have sales at times, and there is a PPP request form here, depending on your country's economic situation: anthonyalicea.com/courses/understanding-react-ppp/

[@iqbali4u]

useReducer Part 2 sound is not there. Anyways I visually tried to understand what you trying to teach.

[@michaelibinola4679]

Do Angular please 😢 and is your Angular course on Udemy still relevant ? Looking for resources to understand how Angular works underneath the hood, the same way with your JS and React course

[@TonyAlicea]

My Angular course is the previous version, AngularJS, so doesn’t apply to modern Angular. I may do an Angular course in the future, but waiting for things to settle as Angular is changing a lot right now (Signals, etc).

[@michaelibinola4679]

@@TonyAlicea thank you so much 🙏🏾 can’t wait

[@jhuniepi]

Where did you publish this course? I can't find it on Udemy. Thanks.

[@TonyAlicea]

It's a premium course on Teachable. You can find it if you go to understandingreact.com. There's also a coupon this week: dontimitateunderstand.com/p/understanding-react?coupon_code=REACTSUMMIT&product_id=4876170

[@faizansheikh3382]

Can someone tell me, why this course is not on udemy

[@cwgabel]

Only Tony can answer that but I suspect that he, like many other above average content creators that have content on LinkedIn, Safari and Udemy just want to exert control over their content and pricing with additional revenue streams. Tony's unique style may look easy, it is not. It takes time (with no guarantee of monetary return) to make quality videos such as this one.

[@michaelkeaton3848]

This is Gold! Thank you

[@alessandrofalchi295]

Hi, what's the total length of the course?

[@TonyAlicea]

All the modules haven't released yet, but I'm anticipating around 12 hours. Could end up longer.

[@alessandrofalchi295]

@@TonyAlicea ok thank you

[@sanathkumar1698]

Hey Tony, is there any price parity for Indians?

[@TonyAlicea]

Yes. Request form is linked in the description of the video. It’s here: anthonyalicea.com/courses/understanding-react-ppp/

[@sanathkumar1698]

@@TonyAlicea thank you!

[@marcinkondo8193]

there is no sound during useReducer part 2 :(

[@TonyAlicea]

Yes, I have this message pinned in the comments and the description, but here you go: Sorry, section "useReducer (Part 2)" at 5:39:02 has no sound (the rest of the video does!). You can watch that section with sound here: dontimitateunderstand.com/courses/understanding-react/lectures/46000855

[@marcinkondo8193]

Thank you!

[@johnnychen5787]

Is this course for begginers?

[@TonyAlicea]

It's designed for both beginners and experienced devs with React. It is not designed for beginners in JavaScript. If you have some JS knowledge, then you can dive right in.

[@54peace]

I REALLY WANT to buy the course but I'm too broke. 😢

[@TonyAlicea]

Fill out a PPP request: anthonyalicea.com/courses/understanding-react-ppp/

[@54peace]

​@@TonyAlicea Thank you 🙏❤❤❤

[@54peace]

​@@TonyAlicea I have sent the request and want to say "Thank you", It's okay even If I'm not considered but still thank you for your kindness and generousity, Here's what I filled in the comment box - I FELL IN LOVE with your amazing teaching in "Understanding React" and really wanted to learn more about, I'm currently in "Fiber, Reconcilliation" section, I watch the video about 20~40 mins everyday, I really want to buy the course But I am not employed for now, Please consider me for PPP. I will use the opportunity for better, I will buy the course again when I'm hired. ❤

[@qoiiwwe]

佛心來的!

[@siyaram2855]

Tony, The whole dev community sticks to Mac, I see you using Windows. Any reason for that? I am a windows fanboy, btw.

[@TonyAlicea]

That’s not true though. Most devs are on Windows. This year’s stack overflow dev survey shows that for example: survey.stackoverflow.co/2023/#section-most-popular-technologies-operating-system

[@siyaram2855]

I meant in tutorial community

[@mutasimahmed8975]

I have been writing PPP email since 5 months

[@TonyAlicea]

Check your spam. Otherwise email support at tonyalicea dot dev.

[@mutasimahmed8975]

Got it , thanks

[@quoccuong1733]

bruh

[@tkdevlop]

udemy pls I get free from my company

[@TonyAlicea]

This course won’t be released on Udemy. It’s a premium course on Teachable.

[@korkut31]

it is not a good thing that u sold this with money at this age. it is community, share, open source age. u better upload full course tony.

[@TonyAlicea]

All frameworks are open source these days. Are you saying that you will not be charging your client or employer for your dev work if you use open source? I doubt it.

[@k4qdex]

legendary.

[@siyaram2855]

Tony, please be honest. When you were making the videos, Did it came to you: what a dumb piece of tech this library is? Isn't it obvious React unnecessarily complicate simple things? When you look at the source code of React you will find the class components is actually buggy, and mutates the value unintentionally. I am shocked, they were using it for years before making the shift to Hooks. Hooks also make simple things complicted. It is a shame the the whole industry just got on the bandwagon and the hype created by React. There are so many better option out there. Somnath put it very well in his article *Now that React is Dead*, He said: React only useful feature is that it can pay the bills. I would suggest everyone to read the the article: *Now that React is Dead* (Just Google It)

[@TonyAlicea]

I’ve made my criticisms of React quite clear on social media. That said, React’s ecosystem is phenomenal and in my opinion what has kept it #1. For example you cannot find accessible component libraries anywhere near as good as what you find with React. (Plus lots of devs love JSX, so other new frameworks have adopted it, etc). React isn’t dead or dying because of the ecosystem. I will say of all the frameworks React is the one which is most necessary to deeply understand in order to use it well. That is a criticism, but also why I made this course. To help gain a strong mental model and use it well.

[@thewild123]

@@TonyAlicea Would love to see your criticisms of React

[@siyaram2855]

@@TonyAlicea Thank you so much Tony for your response.