How React ACTUALLY works (DEEP DIVE 2023)

Ғылым және технология

Are you already working with the JavaScript framework React? Or do you want to learn it? No matter how much experience you have, this video will teach you how React work in detail! Some of the topics include, what is React, how can it be used in existing projects, how does reactivity work, how does React keep the UI in sync with the data and more.
If you found this video helpful,
please give it a like 👍 and subscribe 📨 for more.
🐦 Follow me on Twitter
/ 0xandriy
⏰ Timestamps
0:00 Intro - What is React and what is it not?
0:50 How to add React to (most basic way)
2:24 React in combination with other tools
3:21 What is JSX?
5:17 Downside of JSX
6:00 How React updates the DOM
6:10 Updating the DOM - 1. Trigger
8:33 Updating the DOM - 2. Render
9:11 Updating the DOM - 3. Commit
9:35 Why do we need the Virtual DOM?
10:31 React diffing algorithm
12:18 State persistence
📎 Helpful links
React Docs: react.dev/
🎵 Where I get my music from
Epidemic Sound: www.epidemicsound.com/referra...
🤝 Services I use
NordVPN - go.nordvpn.net/SH4vc
🎥 My gear
Monitor - Dell S3423DWC 34
amzn.to/3XcAXuR
Headphones - AKG K240 Studio
amzn.to/3J7vAZJ
Earbuds - Jabra Elite 4 Active
amzn.to/3Hm4k8M
Mic - HyperX SoloCast
amzn.to/3QLS6tg
Keyboard - Apple Magic Keyboard
amzn.to/3GDz9UO
Trackpad - Apple Magic Trackpad
amzn.to/3CQAq9P
Camera - Sony a6400
amzn.to/3w4d7Wf
Lens 1 - Sony 16-50mm f/3.5-5.6
amzn.to/3iDSk99
Lens 2 - Sony - FE 50mm F1.8 Standard Lens
amzn.to/3GHFheU
Lens 3 - Samyang SY12M-E-BK 12mm F2.0
amzn.to/3WclDgM
📬 Inquiries (Collabs, Sponsorships etc.)
frontstartdev@gmail.com

Пікірлер: 124

  • @frontstartdev
    @frontstartdev Жыл бұрын

    Found this helpful? You can buy me a coffee ☕ bmc.link/frontstart

  • @Dev-cc3ni

    @Dev-cc3ni

    Жыл бұрын

    Well done content. Keep it up!

  • @frontstartdev

    @frontstartdev

    Жыл бұрын

    @@Dev-cc3niThanks!

  • @prashanthkumar0

    @prashanthkumar0

    Жыл бұрын

    ​@@Dev-cc3ni part 2

  • @markzuckerbread1865

    @markzuckerbread1865

    Жыл бұрын

    Amazing video, I've been using react for a while but now I feel like I understand it a lot better, subbed and looking forward for the next vid!

  • @frontstartdev

    @frontstartdev

    Жыл бұрын

    @@markzuckerbread1865 Glad to hear that!

  • @user-kc7kj6vr1u
    @user-kc7kj6vr1u Жыл бұрын

    This was amazing! WE NEED THAT PART 2 (Context, error boundaries, etc) !!!! Thanks so much for spreading your knowledge

  • @MyBrainForYou
    @MyBrainForYou Жыл бұрын

    We need part 2 pleaassss

  • @tomasburian6550

    @tomasburian6550

    7 ай бұрын

    Massively

  • @anotherone2398
    @anotherone2398 Жыл бұрын

    wow , this is quality content right here , in my experience learning react, diving deep into details , you discover bad practices and stop them

  • @abuna002
    @abuna0028 ай бұрын

    Excellent overview. Thank you. I would definitely enjoy a part 2.

  • @reynali
    @reynali Жыл бұрын

    This was something I've been wondering about for a bit and really useful knowledge, thank you!

  • @rahuls331
    @rahuls33111 ай бұрын

    Quality content man! Really loved the entire video. Looking forward for more content from you.

  • @TheRobBrennanLive
    @TheRobBrennanLive10 ай бұрын

    This was awesome! What a fun way to convey fundamental React concepts. Nicely done, m'man

  • @Bruno_Corso
    @Bruno_Corso9 ай бұрын

    Fantastic video dude! The key part is so didatic! Now makes much more sense why VsCode asks always for insert key on the list! Thanks a lot 🤘🏻

  • @klmovchan
    @klmovchan10 ай бұрын

    Such a cool video. The best one I saw for particular topic, ty

  • @witchmorrow
    @witchmorrow6 ай бұрын

    This was such a useful and clear explanation, thank you!

  • @lukas.webdev
    @lukas.webdev Жыл бұрын

    Great video, very helpful! Thanks for sharing. Keep it up! 😉🔥

  • @CrusaderMen
    @CrusaderMen11 ай бұрын

    Thank you this is awesome! I'm looking forward for part 2

  • @paperC_CSGO
    @paperC_CSGO Жыл бұрын

    Instant subscriber. Please make more in depth (but short) videos like these! Webpack, Vite would be nice, and browser stuff

  • @user-wo8hq4eq3b
    @user-wo8hq4eq3b Жыл бұрын

    Excellent video! I'd love to see a part 2.

  • @rjtutz
    @rjtutz Жыл бұрын

    This is genuinely quality content! Thank you so much!

  • @osamahaldoaiss
    @osamahaldoaiss Жыл бұрын

    Great video, will send it to my junior devs. Understanding these concepts helps with the most common runtime bugs when using React. Well done 🎉

  • @lostempire12
    @lostempire128 ай бұрын

    Really great video man need more like this 👍

  • @maxharano940
    @maxharano94022 күн бұрын

    Literally saved my life, best video for interview prep

  • @kashmeu
    @kashmeu Жыл бұрын

    Such a concise video yet simple video covering some core and complex topics.

  • @developer_01
    @developer_0110 ай бұрын

    Please make part 2.... this is just sooo good

  • @bilalmajeed2834
    @bilalmajeed28342 ай бұрын

    Best Explanation i found about React till date. Thanks Man ❤❤

  • @nextleveltech267
    @nextleveltech2673 ай бұрын

    Really informative video. Everything explained nicely. Thanks a lot...

  • @developingNerd
    @developingNerd Жыл бұрын

    I came from your reddit post and my god you have absolutely nailed the core concepts of react. I say, for react learners, this video is a must watch. And yes, make a part 2!

  • @frontstartdev

    @frontstartdev

    Жыл бұрын

    Thanks! Part 2 is coming soon so stayed tuned.

  • @MyBrainForYou

    @MyBrainForYou

    2 ай бұрын

    @@frontstartdev I came back again to check if part 2 has come or not 😢

  • @rotemmia
    @rotemmia3 ай бұрын

    great video! waiting for part 2

  • @deepawali
    @deepawali Жыл бұрын

    Great in depth video bro🤯

  • @MedAmin944
    @MedAmin9449 ай бұрын

    Great video my friend , hope there will be a PART2

  • @typehint
    @typehintАй бұрын

    Fantastic tutorial - thank you!

  • @bwprado
    @bwprado4 ай бұрын

    Very good, we need a part 2.

  • @sachintharuka6154
    @sachintharuka61546 ай бұрын

    I found ur channel when I was searching for Material Ui, and then found this video, great content ❤

  • @filipedavila4366
    @filipedavila4366 Жыл бұрын

    Great video! Part 2, please!

  • @uscjake868
    @uscjake868 Жыл бұрын

    Awesome dude. Please continue. I like the visual explanations as that is what I needed. For newer programmers who are just scratching the surface of how JS destructuring works, react looks like absolute spagetti.

  • @Riuk08

    @Riuk08

    3 ай бұрын

    Agreed... Even after watching it twice I feel dumb that I didn't get *all* of it

  • @abdelazizlaissaoui9079
    @abdelazizlaissaoui90797 ай бұрын

    well this is a great video thanks maan keep it up

  • @mohammedothman8292
    @mohammedothman82925 ай бұрын

    Great! Thanks a lot for your effort.

  • @youssefhassan9002
    @youssefhassan9002 Жыл бұрын

    Thank you this was helpful! ❤

  • @ludanjubara
    @ludanjubara Жыл бұрын

    Great explanation. Part 2 please 🙏

  • @user-bb9nl5ch6s
    @user-bb9nl5ch6s3 ай бұрын

    Great Video!

  • @tomasburian6550
    @tomasburian65507 ай бұрын

    This is such a fantastic video that I watched it several times in the row. You can use React without it but it helps massively with debugging and writing good code.

  • @54peace
    @54peace3 ай бұрын

    The Goat of react concepts explained videos!! 10/10

  • @faizanahmed9304
    @faizanahmed9304 Жыл бұрын

    Part 2 please, great explanation

  • @josemoreno1209
    @josemoreno12096 ай бұрын

    Great video man!! Saludos desde chile :)

  • @cameronblackwoodcode
    @cameronblackwoodcode Жыл бұрын

    Excellent content here - perfect balance between great information and remaining concise - whilst I'm already an experienced front end developer, this was still a super helpful video. Looking forward to checking out more of your videos.

  • @frontstartdev

    @frontstartdev

    Жыл бұрын

    Thanks! Glad to hear that!

  • @blissofkundaliniyoga
    @blissofkundaliniyoga16 күн бұрын

    Part 2 highly appreciated

  • @lairespereira5163
    @lairespereira5163 Жыл бұрын

    Amazing 🙌🏼

  • @rutvikjr8251
    @rutvikjr82519 ай бұрын

    Hi, It was really helpful. Realized many mistakes that I was making while developing. Sorry not able to buy you a coffee right now but surely will do it in the future. Thanks. Waiting for part 2.

  • @frontstartdev

    @frontstartdev

    9 ай бұрын

    Glad you found it helpful 😁

  • @danielfirebanks4973
    @danielfirebanks4973 Жыл бұрын

    Damn, rooting for a part 2!

  • @cscs6587
    @cscs65874 ай бұрын

    That's amazing man just Continue

  • @chinzorigyou
    @chinzorigyou Жыл бұрын

    Awesome video. Could you please make part2?

  • @ismasoc5
    @ismasoc55 ай бұрын

    why are explanations about React made so difficult to understand?

  • @codation
    @codation Жыл бұрын

    Excellent video! Good brush up for experienced React programmers and a must for junior devs. Helps to understand how React works under the hood. Pls make a Part 2 covering Hooks, RSC, Suspense, Actions, etc.

  • @frankdearr2772
    @frankdearr2772Ай бұрын

    great topic, thanks

  • @gregkavanagh1094
    @gregkavanagh1094 Жыл бұрын

    Part 2 please. Thanks for part 1

  • @curiosabouttech
    @curiosabouttech7 ай бұрын

    Great explanation thanks

  • @aakashbiswas3942
    @aakashbiswas3942 Жыл бұрын

    a much needed refresher material In a world of tutorial hell

  • @patrickren7395
    @patrickren7395 Жыл бұрын

    Great video. One topic I'd appreciate you to touch on is where state is actually stored in a FC. Every state change causes the whole component function to re-run, I'm wondering why the second time the `useState` func runs, the state won't be initialized again. My guesss is the state is stored in a store managed by react & `useState` somehow `hooks` the FC with the actual state.

  • @yohannestakata6021

    @yohannestakata6021

    Жыл бұрын

    usestate has closure over state variable

  • @yabuking84
    @yabuking8419 күн бұрын

    Great explaination! still like Vue hehe. But Im doing React right now.

  • @nayem6386
    @nayem63864 ай бұрын

    Good One 👌

  • @AmeerHamza-fz1ve
    @AmeerHamza-fz1ve Жыл бұрын

    Excellent video

  • @yousfhamad70
    @yousfhamad70 Жыл бұрын

    Great content

  • @jorimsoika9115
    @jorimsoika91158 ай бұрын

    Top erklärt! Wo hast du dir diesen Deep-Dive angeeignet? Kannst du Bücher/docs oder sonstiges empfehlen?

  • @frontstartdev

    @frontstartdev

    8 ай бұрын

    Danke! Ich habe hauptsächlich die offiziellen React docs benutzt. Kann ich nur empfehlen!

  • @Ramesh-js
    @Ramesh-js7 ай бұрын

    Part 2 Waiting Bro !

  • @user-pd2ic5pd3z
    @user-pd2ic5pd3z Жыл бұрын

    Yes, I wanna see part 2

  • @gizemavcs8599
    @gizemavcs85994 ай бұрын

    Perfect video!!!!!

  • @kkjj8509
    @kkjj85097 ай бұрын

    Part 2 please ❤

  • @akshatkhandelwal5591
    @akshatkhandelwal55914 ай бұрын

    part 2 needed pls

  • @vinoths5753
    @vinoths57533 ай бұрын

    We need those topics also

  • @ra6160
    @ra61606 ай бұрын

    We need part 2😁😁

  • @mohamedhesham9192
    @mohamedhesham91924 ай бұрын

    great video

  • @aj.arunkumar
    @aj.arunkumar10 ай бұрын

    very good one..

  • @maximkatik
    @maximkatik7 ай бұрын

    Great video, but I believe even React team refuses Virtual DOM term and use React Element tree. Plus would be great to hear about Fiber Trees (Current and WorkInProgress) as well.

  • @minor12828
    @minor128285 ай бұрын

    What if you are using all libraries together ? Is it a framework, then ?

  • @AWaterKnight
    @AWaterKnight8 ай бұрын

    4:45 you can also return an array.

  • @mitotv6376
    @mitotv63769 ай бұрын

    Nice vid

  • @youdontknowme2508
    @youdontknowme2508 Жыл бұрын

    This video counts for a sub ofcourse. Make more such content. Awesome quality content

  • @gopalg8239
    @gopalg82399 ай бұрын

    Good one part 2 please

  • @chennasreenu4723
    @chennasreenu47235 ай бұрын

    We need Part 2.

  • @arunjoseph8466
    @arunjoseph8466 Жыл бұрын

    please make that part 2

  • @harshithpatte7169
    @harshithpatte7169 Жыл бұрын

    We need part 2

  • @thuannguyenlehoa9711
    @thuannguyenlehoa97116 ай бұрын

    In short, behind the scence the way ReactJS works is just 3 steps: trigger -> render -> commit, right?

  • @Franco24024
    @Franco240244 ай бұрын

    Holy shit this is so good

  • @nhatlinhpham4235
    @nhatlinhpham4235 Жыл бұрын

    Part 2 plz

  • @muhafizahmed9964
    @muhafizahmed9964 Жыл бұрын

    Part 2 please

  • @Wakkyguy
    @Wakkyguy2 ай бұрын

    Is the reconciler a part of React or ReactDOM?

  • @NiKo-lh2nq
    @NiKo-lh2nq2 ай бұрын

    thank you

  • @theghost9362
    @theghost93626 ай бұрын

    Brilliant

  • @uchennaofoma4624
    @uchennaofoma46242 ай бұрын

    Just seeing this amazing video now. I really loved how you brole down the vonvepts syarting from showing us react and babel from a CDN to actually using thr tools we currently employ (vitr amd the likes). It really makes me appreciate the work they do under the hood

  • @miladsade96
    @miladsade966 ай бұрын

    Please record its part two

  • @7Budyn7
    @7Budyn76 ай бұрын

    It's 2023 so I think it's important: how does it connect with fiber? ;)

  • @yolololo6120
    @yolololo61202 ай бұрын

    part 2 please

  • @muhammedashkar692
    @muhammedashkar692Ай бұрын

    bro, where you inspired by fireship style?😄

  • @stilltrippin4687
    @stilltrippin46878 ай бұрын

    You are the goat

  • @el_andrius
    @el_andriusАй бұрын

    Why is the complexity n^3?

  • @devgurjar3728
    @devgurjar37289 ай бұрын

    PART 2 !!!!!!!!!!

  • @ashish_prajapati_tr
    @ashish_prajapati_tr Жыл бұрын

    Helping you to break KZread algorithm.

  • @sarasverma7951
    @sarasverma79513 ай бұрын

    great

  • @UniParse
    @UniParse11 ай бұрын

    I give you 5 starts🌟🌟🌟🌟🌟, next video please!!

  • @md.abuabdullah2446
    @md.abuabdullah24462 ай бұрын

    4:19 was that intentional?

  • @anujbhagat2105
    @anujbhagat21058 ай бұрын

    9:43 what da mouse doin?????

  • @2xdialloo
    @2xdialloo Жыл бұрын

    👌

  • @hmls3579
    @hmls3579 Жыл бұрын

    5:42 wtf

Келесі