How a React App Works Under the Hood

Поделиться
HTML-код
  • Опубликовано: 6 дек 2019
  • All of the things you need to understand about how React works in one video.
    #React2020 #JavaScript2020 #LearnToCode
    ⭐ Beginner React Tutorial: • Beginner React Tutoria...
    ⭐ Create A Real-World App With React: • Coding A Simple Accoun...
    👀 Follow Me:
    Twitter ➔ home
    Instagram ➔ / port.exe
    GitHub ➔ github.com/Zackazt
    Facebook ➔ / portexe-2123922254496260
    Website ➔ www.portexe.com/
    GAMING ➔ / portexe

Комментарии • 132

  • @testowastestowy2498
    @testowastestowy2498 2 года назад +26

    I am self-taught programmer. I work now as a professional software developer in international corporation, but to those days I'm amazed how most of tutorial and article creators start they explanation from "How" not "Why". That's why videos like that literally make my day. Thank you for your work in the name of community.

  • @PhalgunRangaraju
    @PhalgunRangaraju 3 года назад +6

    Huge thank you. As someone who's coming back to frontend after a break this is a helpful video.

  • @iancuvlad7368
    @iancuvlad7368 3 года назад +12

    Extremely comprehensive explanation for webpack, you helped me a lot.

  • @itsankk
    @itsankk 3 года назад +1

    The best video I found after searching for 'How React works'. Very clear and simple to understand explanation. Thanks.

  • @nayeemahmed5169
    @nayeemahmed5169 3 года назад +4

    This is so nice demonstration. This helped me a lot to understand the whole thing. Thank you so much.

  • @waseemmehmood5685
    @waseemmehmood5685 2 года назад +7

    The explanation was so simple and straight 🙌 well done man 🔥

  • @JoeyLutes
    @JoeyLutes 3 года назад +2

    been writing JS all year and this helped solidify my mental model of this stack, particularly how React uses Babel to parse JSX

    • @PortEXE
      @PortEXE  3 года назад +4

      Making the video helped me solidify my understanding as well

  • @philmyglass877
    @philmyglass877 4 года назад +2

    Great vid and good explanation for something that is quite complicated for a newbie to understand!

  • @bertramjaylangruto1465
    @bertramjaylangruto1465 2 года назад

    The best explanation about react I've ever watch. Thank you for this!

  • @bushbuddyplatypus
    @bushbuddyplatypus 11 месяцев назад

    Very welcome info less that an hour before my job interview. Pitched just right and I feel I know a lot more more now. Thanks

  • @richardwilliamsmusic
    @richardwilliamsmusic 20 дней назад

    Phenomenal overview of so many of the complications with React! But I got confused when you also jumped around with Node

  • @vatsee
    @vatsee 2 года назад

    Thanks for the work and for the explaining how it all ties together. Appreciate it!

  • @vishalsrane
    @vishalsrane 3 года назад

    Most knowledgeable video I have ever seen on react. You are the best!!

  • @romans7319
    @romans7319 3 месяца назад

    Thanks a lot, man. Clearly explained everything. Exactly what I searched for.

  • @omarlyadini9765
    @omarlyadini9765 2 года назад

    insane explanation, you are doing an amazing work, love it thank you

  • @simple8810
    @simple8810 2 года назад

    This is very helpful video ,I am working on react from last 3 month but had no idea of how react work under the hood,
    So I learned here babel, webpack , node module, virtual DOM and browser DOM
    Thanks a lot man

  • @israfilhossen7639
    @israfilhossen7639 2 года назад

    Thanks for the awesome video. I think it will help me to win the fear of interview for my upcoming job.

  • @svetozarstanev
    @svetozarstanev 2 года назад

    Amazing video, really helps understand the technology as whole.

  • @user-ce4hd1du8g
    @user-ce4hd1du8g 10 месяцев назад

    working in react a lot finally i understood that how react works thanks to port EXE

  • @namankeshari7332
    @namankeshari7332 11 месяцев назад

    Thanks a ton man for this one!

  • @kirankandula2779
    @kirankandula2779 3 года назад +1

    Thanks for the insights and explanation.

  • @coreyamccoy
    @coreyamccoy Год назад

    This is by far the best explanation of how React works from both a technical and application standpoint...👏🏼...👏🏼...👏🏼 (well deserved slow clap)

  • @_____AjCoder______
    @_____AjCoder______ Месяц назад

    It couldn't be explained any better !! thanks bro 👏👏👏

    • @Maxim9575
      @Maxim9575 29 дней назад

      it's nothing, there were no any words about fiber core of react, trash

  • @randomdamian
    @randomdamian 2 года назад

    Finally some real content, thanks for explaining love this!!! More pls 🥺😚

  • @21scottgibson
    @21scottgibson 3 года назад

    Awesome video, just what I was looking for

  • @HariPrasad-qe3hd
    @HariPrasad-qe3hd Год назад

    This is perfect for beginners ! Thanks man !

  • @SachinKumar-ss2zx
    @SachinKumar-ss2zx 4 года назад

    Great video man! Thanks for the efforts :)

  • @FreedomForKashmir
    @FreedomForKashmir 3 года назад

    It was exactly what I was looking for.
    Thanks

  • @verywellrounded
    @verywellrounded 4 года назад

    This was awesome. Thanks 🙏🏾

  • @wufei523
    @wufei523 Год назад

    Very good explanation in a way that makes sense to beginners

  • @Ashkuvita
    @Ashkuvita 3 года назад

    very informative thank you so much

  • @stephenmooney7468
    @stephenmooney7468 4 года назад

    very good! easy to understand thank you

  • @alanhunt3772
    @alanhunt3772 4 года назад +3

    Thank you for covering so many different technologies, it certainly was eye opening as I start looking into learning React.

    • @PortEXE
      @PortEXE  4 года назад +1

      Glad I could help!

  • @krishaengineer9754
    @krishaengineer9754 3 года назад

    Very helpful! Thank you!!

  • @joelspinelli3701
    @joelspinelli3701 Год назад

    Excellent explanation. Thanks!

  • @al-gassimsharafaddin7289
    @al-gassimsharafaddin7289 2 года назад

    Thank you so much!

  • @axelgrind
    @axelgrind 4 года назад

    Helpful video, thanks!

  • @prathameshmali3888
    @prathameshmali3888 4 года назад

    Very well explained. Thanks

  • @narendrachowdary6894
    @narendrachowdary6894 3 года назад

    Clear cut explanation , Namaste 🙏

  • @scabbage
    @scabbage 4 года назад +4

    Complete new to the frontend world. This intro really helps.

  • @Mikevets
    @Mikevets 4 года назад +1

    This video needs to be seen by more people.

    • @PortEXE
      @PortEXE  4 года назад +1

      I hope it does!

  • @faycourtney
    @faycourtney 4 года назад

    Love this video - also just curious how you got into making video tutorials, and would love it if you made a video on that

    • @thehaptiK
      @thehaptiK 4 года назад +1

      then make a video of the making of video tutorials

  • @aqibsaeed3229
    @aqibsaeed3229 3 года назад

    Great explanation. Thanks

  • @sourav6645
    @sourav6645 3 года назад

    That was some awesome explanation

  • @wulfert93
    @wulfert93 3 года назад

    very helpful! Many thanks

  • @diwangaamasith86
    @diwangaamasith86 4 года назад

    Wow that is nice explanation. Thank you...

  • @pitbul67204
    @pitbul67204 4 года назад +1

    Great Explanation

  • @SarbjeetJohal
    @SarbjeetJohal 2 года назад

    Great explanations!

  • @caioargentino5307
    @caioargentino5307 3 года назад

    what a helpful video, thanks!

  • @gauravgailakoti
    @gauravgailakoti 2 года назад

    excellent explanation !

  • @PazShaviv
    @PazShaviv 3 года назад

    Excellent explanation!!

  • @ibrahimkhurshid4339
    @ibrahimkhurshid4339 Год назад

    Thanks Pal !!!

  • @kaypakaipa8559
    @kaypakaipa8559 Год назад

    fantastic tutorial

  • @ljudiurobi
    @ljudiurobi 3 года назад

    That's great content!

  • @GGg-jq5uv
    @GGg-jq5uv 6 месяцев назад

    insightful 🔥

  • @chamith2285
    @chamith2285 3 года назад

    Great explanation

  • @aidThompsin
    @aidThompsin 3 года назад +1

    Dude out here with a mesh mic on his face looking like Bane from Batman x

  • @shafwong1159
    @shafwong1159 7 месяцев назад

    clear explanation.

  • @cjjb
    @cjjb 4 года назад

    Excellent content 👌

  • @abdullahsoomro6238
    @abdullahsoomro6238 Год назад

    Thank you

  • @jashanpreet832
    @jashanpreet832 3 года назад

    Great content

  • @inspiredbymichansenpai2393
    @inspiredbymichansenpai2393 2 года назад

    Thanks

  • @muhammadsiddiqui2244
    @muhammadsiddiqui2244 3 года назад

    Amazing stuff

  • @dani3l898
    @dani3l898 Год назад +1

    It's the 12th of September, 2022 and am watching this on my phone hoping one day I will get my first job as a React Developer.

  • @musa94
    @musa94 3 года назад

    Wow you have a flair for explanations!

  • @redori
    @redori 4 года назад

    Really great video man. I think video could be a bit better if mic isn’t covering your face, idk why but it seemed odd to me

  • @marcspataru
    @marcspataru 3 года назад +1

    Hey tomorrow morning I have an interview where I find out if I was accepted or rejected from a front end role at a really nice company. I don’t know why I am watching this at 5AM but this video was just crazy good. Good job!

    • @marcspataru
      @marcspataru 3 года назад +3

      Update: I got the job

    • @aaronalquiza9680
      @aaronalquiza9680 3 года назад +1

      @@marcspataru congrats! i'm an advanced angular developer and also having Fullstack React interview next friday (May7) and I'm scared shitless as I haven't done interviews in 5 years. lol

  • @erhnml
    @erhnml 3 года назад

    Thanks man, I understand React.js better now.

  • @hardikpoudel3011
    @hardikpoudel3011 3 года назад

    this is really a next level introduction and those who have unlike the video is definitely going to hell

  • @kingsleymagnuseweka5966
    @kingsleymagnuseweka5966 3 года назад

    absolutley amazing crystal clear explanation, React 100% downloaded into Brain..."Now I know kungfu!" - Neo, The Matrix!

  • @yanfengliu
    @yanfengliu 3 года назад

    Nice video! Could you please remove the vignetting effect though? It makes part of the code really hard to see

  • @owenmurphy2022
    @owenmurphy2022 10 месяцев назад

    This video is great for beginners but I was looking for something that explains react as its core and the design followed, and the component lifecycle. It seems you talked mostly about Javascript and the tools that react uses as the most basic level which occupied most of the video.

  • @liamconverse8950
    @liamconverse8950 2 года назад

    I was basically just wondering if the react hooks syntax was valid JavaScript or if that's just like JSX that has to get transpiled

    • @artahir123
      @artahir123 4 месяца назад

      what explanation do you got ?
      i am also wondering about it
      and where should i know how exactly react works under the hood ?

  • @romaroma7514
    @romaroma7514 Год назад

    wonderful

  • @mirtauhidulislam7493
    @mirtauhidulislam7493 3 года назад

    Great!

  • @ArchyWhite
    @ArchyWhite 3 года назад +1

    I have a question? Will you be able to show us on how to react a regular website. I created a website. Now, I would like to create a react website version of it. Thanks for the explanation.

    • @PortEXE
      @PortEXE  3 года назад +1

      Hey that’s an interesting idea! I may do that.

  • @JakeJJKs
    @JakeJJKs 2 года назад

    If you look closely in this video, you can see that there's actually a person behind the microphone. This person is likely the narrator in this tutorial.

  • @tatyanatarasova6480
    @tatyanatarasova6480 2 года назад

    Thank you! would be much better if you put more pictures, diagrams, texts of what you are talking about. thank you agian.

  • @arunvishwakarma2779
    @arunvishwakarma2779 3 года назад

    I literally loved the video, got most of my doubts cleared. However, I have one doubt, when I tried Babel in their official website, and tried to use Arrow function which is basically ES6, on the right hand side exact thing was there. I thought Babel converts to ES5 so I thought Arrow function will be converted to normal function

    • @cocolasticot9027
      @cocolasticot9027 2 года назад

      I think that's because our latest builds/versions support es6 already.
      You can remove everything in the "targets" field, it will be converted to es5.

    • @simple8810
      @simple8810 2 года назад

      I tested the same, it gives me the same function
      and I had read that babel will convert the arrow functions to regular function as in es5

  • @vivekkumar36732
    @vivekkumar36732 4 года назад

    Fantastic 😍😍

  • @hardikpoudel3011
    @hardikpoudel3011 2 года назад

    what is the difference between transpiled and compiled

    • @PortEXE
      @PortEXE  2 года назад +1

      Transpilation basically converts one language into another. Compilation converts your code into a lower level machine-like code. These terms can be different depending on who you're asking too.

  • @uguryl
    @uguryl 4 года назад +2

    👍💯

  • @akashshrestha01
    @akashshrestha01 3 года назад

    great

  • @aaronalquiza9680
    @aaronalquiza9680 3 года назад +4

    as a web developer for 7 years, i already understood how most of it works, and was expecting explanations on the Diffing algorithm itself. but this is very good content for web developers just getting into React.

    • @commondev2595
      @commondev2595 3 года назад

      Same i am looking for how Diffing actually works. Did u find a good place to read/watch ?

    • @fbiindia9661
      @fbiindia9661 Год назад

      Let us know if you find that

  • @LukeryaPereprygova
    @LukeryaPereprygova 4 года назад +1

    Visual aspect note - it's kind of weird to see half of your face blocked by the mic and pop filter all the time. Maybe consider choosing a different angle

    • @PortEXE
      @PortEXE  4 года назад +1

      I’m just going to get a massive pop filter so that all you can see is the pop filter 🤣

    • @LukeryaPereprygova
      @LukeryaPereprygova 4 года назад

      @@PortEXE PopEXE

  • @HunterAshner
    @HunterAshner 2 года назад

    MF Doom poster A+

  • @cypher9000
    @cypher9000 4 года назад +2

    What's with the crazy vignette all over the place? Is it to make the code look artistic?

    • @PortEXE
      @PortEXE  4 года назад +1

      It was an accident 😅

  • @danielromeo99
    @danielromeo99 3 года назад

    y dark screen???
    but great video

  • @abdelaesus6678
    @abdelaesus6678 3 года назад

    I really don't understand how React can be anything other than a framework. It makes you think and organize your code in a specific way. If someone could explain to me, I'd be interested.

    • @PortEXE
      @PortEXE  3 года назад +1

      The React ecosystem as a whole could be thought of as a framework, however React itself is simply a JavaScript library that you import and use as you please.

    • @abdelaesus6678
      @abdelaesus6678 3 года назад

      @@PortEXE Ok, I understand. Because what people refer to as React is actually React + react-dom. So react is a library, but coupled with React-dom or React-native, it becomes as framework. Is that it?

    • @PortEXE
      @PortEXE  3 года назад +1

      Well react-dom is also just a library, it’s when you start to think of React as React/ReactDOM, Babel, Webpack, React Scripts JSX, etc that it looks more like a framework. But in reality these are all completely different tools that exist separately from each other.

    • @abdelaesus6678
      @abdelaesus6678 3 года назад

      @@PortEXE ok, I see. I thought JSX was a feature from the React library

  • @bakarandguladze
    @bakarandguladze 2 года назад

    12:43 Diffing algorithm

  • @ikurbano
    @ikurbano 2 года назад

    Thank you! but, please loose the background music, it doesn't help with focusing on the material, which is great, btw, content-wise and delivery-wise.

  • @DanKaschel
    @DanKaschel 3 года назад

    I was hoping for less about tooling and a deeper dive into the mechanics of react, such that I could build an intuition about how react will behave.

  • @baskaal
    @baskaal 2 года назад

    "The rest is empty with no brain but the clever nerd"

  • @vishalsaraganachari1604
    @vishalsaraganachari1604 2 года назад

    Nice content 👍 but dude you have to go little slower , it's very beneficial for non native English speakers.

  • @ClarkHathaway3238
    @ClarkHathaway3238 Год назад

    JSX is not HTML. It is a subset of XML.

  • @xanthirudha
    @xanthirudha 4 года назад

    MF DOOM

  • @maelstrom57
    @maelstrom57 Год назад

    2:46 setLoggedIn(isAuthenticated());

  • @Andrew-hl7xq
    @Andrew-hl7xq 3 года назад

    Great vid, less vignette m8. ;)

  • @Meeshalkumar
    @Meeshalkumar 3 года назад

    Too small text

  • @Xiler6969
    @Xiler6969 4 года назад +1

    Really underrated video and channel. Your core is there, just need a bit better editing, need to shave your stash and you need better thumbnails. I wouldn't be surprised if you start getting 10-30k views soon.

    • @PortEXE
      @PortEXE  4 года назад +1

      The stache is going nowhere

    • @Xiler6969
      @Xiler6969 4 года назад

      @@PortEXE Don't let pride inhibit your potential.