I tried React and it Ruined My Life

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 1,1 тис.

  • @east_wood
    @east_wood Рік тому +749

    As a react dev in a previous life, my interpretation of the web development world is that there are so many abstractions and tools, that the ecosystem encourages learning top down, "just do it this way" and then peel back the layers. This is the opposite of developers whom are used to learning bottom up, starting simple (i.e C, memory models) and adding abstractions later.

    • @captainlennyjapan27
      @captainlennyjapan27 Рік тому +61

      This sums up really nicely!!! One reason why comp sci students get confused so often when they first get into modern web dev.

    • @eazypeazy8559
      @eazypeazy8559 Рік тому +56

      this is not even top-down approach really. because via usual quick react tutorials you don't start from next.js AND finish with really bottom thing. you see only top part. but it is what it is

    • @grishka212
      @grishka212 Рік тому

      The problem with this approach is that it allows people to get real IT jobs without ever getting around to actually peeling those layers back. You already get results, why bother going deep into how it works, right?
      I once made a backend for a guy who just learned React but somehow didn't know JS itself or the basics of how the web actually works. I had to explain him what an XmlHTTPRequest is and what I meant by "pass me a parameter". It's my own anecdote but it does show a glimpse of how bad this whole idea really is.

    • @astkh4381
      @astkh4381 Рік тому

      So what are doing now after front end ?

    • @austindayton-ogle8695
      @austindayton-ogle8695 Рік тому +19

      ​@eazypeazy8559 yeah it's more like learning top-sideways

  • @DamjanDimitrioski
    @DamjanDimitrioski Рік тому +467

    If you think React doesn't explain anything, wait til you see Android development, 100 Gradle tasks with who knows what is compiling and preparing.

    • @ninox14
      @ninox14 Рік тому +161

      and add a bitt of react native on top and we have a delicious hot steaming pile of shit!

    • @inrmh
      @inrmh Рік тому +4

      😂😂😂

    • @bendertherobot910
      @bendertherobot910 Рік тому +27

      Hahahaha! I really hate Gradle!

    • @Microphunktv-jb3kj
      @Microphunktv-jb3kj Рік тому

      @@ninox14 dunno im using vue and nuxt... and have no problems understanding what's going on... their docs are also very good a lot of effort put into it...
      remove the abstracxtion, it's also just render functions of virtual dom nodes, patching and merging with real dom , ; )

    • @programmerjowo
      @programmerjowo Рік тому +24

      Gradle will ruin mental health

  • @catsouls4714
    @catsouls4714 Рік тому +491

    In biblical times Babel was literally the collapse of a single easy to understand language into thousands of languages. It resulted in confusion and mass-hysteria.

    • @Adiounys
      @Adiounys 9 місяців тому +3

      No, it was a building.

    • @8followsonik
      @8followsonik 8 місяців тому +5

      the best commentary i've ever seen on youtube for 26 years.. 💜

    • @fennecbesixdouze1794
      @fennecbesixdouze1794 8 місяців тому +15

      @@Adiounys No, it was a metropolis, in which they built a building, called the Tower of Babel.

    • @alst4817
      @alst4817 3 місяці тому

      You know it’s not real right?😂

    • @someoneelse5505
      @someoneelse5505 2 місяці тому

      ​@@alst4817 i saw it with my own eyes

  • @pagenotfound_code_404
    @pagenotfound_code_404 Рік тому +360

    Unironically this is the best react tutorial i've seen

    • @vnshngpnt
      @vnshngpnt Рік тому +4

      Dan Abramov could never!

    • @ukrmapper
      @ukrmapper 7 місяців тому +1

      Exactly

  • @ryanleemartin7758
    @ryanleemartin7758 Рік тому +258

    React: "added 1459 packages".
    Tsoding: .....
    React: "Happy Hacking!"
    Tsoding: "What the Fck just happened?"
    Love this guy!

    • @dixztube
      @dixztube 7 місяців тому

      😂

    • @nonefvnfvnjnjnjevjenjvonej3384
      @nonefvnfvnjnjnjevjenjvonej3384 6 місяців тому +9

      that is really an obscene number of packages...

    • @jamesp1389
      @jamesp1389 5 місяців тому

      HAHAHAHA was classic

    • @Zircuitz
      @Zircuitz 5 місяців тому +9

      And we wonder why web-browsers are memory hogs, and the webpages are sluggish...

    • @spht9ng
      @spht9ng 4 місяці тому +6

      @@Zircuitz This is also just Create-React-App being bloated and slow. It hasn't even been the recommended way to start a react project for over a year at this point. That's why it wasn't recommended in the docs when Tsoding looked at them. But Vite should have been the most obvious react beginner friendly choice, not the huge metaframeworks like Next or Remix.

  • @m.Gladislaw
    @m.Gladislaw Рік тому +528

    I use react, I use it because there's a market for it so I don't feel at all personally attacked by any of this.
    I think it's cool that you're trying to learn how everything works from the ground up and I wish that there was more content that tried to do this in the React world.
    I don't know why people feel so attacked by this stuff. Weird.

    • @FullGardenStudent
      @FullGardenStudent Рік тому +29

      If you are a web dev and nothing but a web dev only, then you'll never understand why people feel so attacked.

    • @sulaimangari2745
      @sulaimangari2745 Рік тому +67

      Web development is just cesspool of fast and instant thing after all. They feel attacked when someone actually peek into their shallow understanding of their thing lol.

    • @wsak5991
      @wsak5991 Рік тому +39

      No its because shitting on react or webdev is just a weird trend, usually from people who never actually worked in this sphere

    • @m.Gladislaw
      @m.Gladislaw Рік тому +7

      How does that work? Is this some sort of vague insult 😂@@FullGardenStudent

    • @m.Gladislaw
      @m.Gladislaw Рік тому

      Regardless I think people need to distance themselves a little. Being upset because people attack the framework you use at work is laughable to me. But maybe that's because I don't create my entire personality off of being a developer.@@wsak5991

  • @asdqwe4427
    @asdqwe4427 Рік тому +307

    As a react dev who doesn’t make the library his personality, I find this to be entertaining and I even agree to some extent. These frameworks are crazy.

    • @monad_tcp
      @monad_tcp Рік тому +23

      My condolences.
      React isn't that bad, what's bad is the entire bullshit of nodemodules and webpack and shite.
      By the way, I use Fable, and the Elmish architecture, so after that shit, everything is just F#
      I don't know why don't I use and HTMX instead.
      But oh well. I hate my life.
      The next WebApp I made will be in C++ and will only use the its going to be literally easier to manually program shite in OpenGL.

    • @grenadier4702
      @grenadier4702 Рік тому

      ​@@monad_tcp What would you use if not webpack? How would you assemble your application wiithout pain and split it into nice chunks? Ofc, you could write your own solution but then again: why not just stick to webpack which covers all your needs?
      What soulution would you bring up , not using all those modules? It is impossible. You have to have modules otherwise you must write your own one giant module which covers all possible use-cases. And also note that he used "create-react-app" that has many unnecessary things. You can configure your project on your own and have like 10-12 small-to-medium packages.

    • @lostsauce0
      @lostsauce0 Рік тому +3

      These people who make react their life are so in denial of what the actual experience is like

    • @grenadier4702
      @grenadier4702 Рік тому

      @@lostsauce0 Actual experience is what you see on React jobs, and nobody uses React like he did

    • @juggles5474
      @juggles5474 Рік тому +1

      @@lostsauce0yeah react is bullshit 😂

  • @wildwestrom
    @wildwestrom Рік тому +166

    49:47 The reason React DOM is separate is because React just creates a tree and tracks updates. In truth you can use react to render to anything, not only the HTML DOM, but iOS widgets, Android widgets, or even receipt printers over UART.

    • @SpeedingFlare
      @SpeedingFlare Рік тому

      Yeah the virtual DOM is there for a reason. It's made to scale. Gretcha.js reloading everything every time something changes will eventually be slower than React for a large enough app. If Tsoding were to keep extending Gretcha.js, he'd end up with a virtual DOM. I challenge him to prove me wrong.

    • @SpeedingFlare
      @SpeedingFlare Рік тому +4

      It is weird that it's a separate package tho

    • @jh0ker
      @jh0ker Рік тому +58

      @@SpeedingFlare Why is it weird? Like OP said, you can use the underlying React model for many different things besides the browser DOM. React Native will have a dependency on React, for example. It would be weird if you had Browser DOM code in your React Native app. It just makes sense to separate React from React (for) DOM.

    • @SpeedingFlare
      @SpeedingFlare Рік тому +6

      @@jh0ker After I said it I had a moment of doubt where I wondered if uses an interface that allows alternatives to be dropped in. Makes sense

    • @jh0ker
      @jh0ker Рік тому

      @@SpeedingFlare Theo made a video about different React frontends that shows some cool applications of this ua-cam.com/video/Y12sGu8-qFE/v-deo.html

  • @thyagobrod
    @thyagobrod 11 місяців тому +38

    As a backend, this is the best React tutorial I've ever seen.

    • @AkhilxNair
      @AkhilxNair 25 днів тому

      This is garbage, do not follow it

  • @HatsuSixty
    @HatsuSixty Рік тому +170

    I think people are mad because they're thinking "oh no he's using react the wrong way, how painful!". When in reality he's not using react, he's trying to understand it by piecing everything together from the ground up, and consequently, understanding how everything works.

    • @CyberDork34
      @CyberDork34 Рік тому +68

      The fact that it is impossible to tell how your react project actually works because it's obfuscated behind 1400 mandatory dependencies that take two minutes to install by default is probably part of the issue

    • @HatsuSixty
      @HatsuSixty Рік тому +1

      @@CyberDork34 yeah, it's not impossible (tsoding just proved it to be possible), but it's definitely way more complicated than it should. I've never done any serious UI development, but if I were to do webdev, I would definitely just use vanilla JS, but "me + webdev" is probably not happening anytime soon.

    • @monad_tcp
      @monad_tcp Рік тому +3

      he's literally using React. Also 1:00:07 welcome to the desert of real world Mr Anderson

    • @JawsoneJason
      @JawsoneJason Рік тому +3

      ​@@monad_tcpyeah he literally just recreated react lol

    • @BeefIngot
      @BeefIngot Рік тому +4

      @@CyberDork34 Its why I just dont want to learn or use react. It feels like an amorphous blob of mulch. It just feels super heavy because there so many dependencies. So many single person projects the world depends on. So many cpu cycles wasted doing absolutely nothing of worth.

  • @MrOboema
    @MrOboema Рік тому +130

    @5:06, when you haven't even had time to break out your editor to write the obligatory "Hello, world!": installed 1459 packages.
    I feel your pain. We're all in a world of hurt.

    • @bertacchius
      @bertacchius Рік тому +31

      And webshitters will cope that downloading 1.5K packages to a "learn yourmom" application is suitable.

    • @eetumaenpaa594
      @eetumaenpaa594 Рік тому

      @@bertacchius No one says that and no one uses create-react-app for that exact reason.

    • @kumerolier11111
      @kumerolier11111 Рік тому

      3 days ago I literally just wanted to create simplest possible hello world in the react. I used create-react-app, I saw 60k files in repo and I uninstalled it in shock immediately and went with plain vanilla JS

    • @andrewferguson6901
      @andrewferguson6901 5 місяців тому +1

      ​@@bertacchius I only need 1 package to learn yourmom

  • @coldtech06
    @coldtech06 Рік тому +88

    Oh no, run! twitter JS devs are coming for your soul!

  • @_gut11
    @_gut11 Рік тому +193

    I think people are saying that it's painful to watch, not because you are exploring and trying to create a functional React project from scratch (that is actually pretty cool, and I think every web developer who wants to really understand React should do this at least once), but because a lot of times when you say in the video that things are bullshit, they aren't bullshit (not always, sometimes it really is bullshit). It's just that you are literally learning and seeing the packages and tools for the first time, and you didn't understood what is the need for them to exist. React and ReactDOM being separated packages, for example, makes all the sense in the world because React is not only used in the browser. So it makes sense to have another package that handles browser-specific functionality, while React can focus only on creating component trees that can be rendered anywhere.

    • @vitfirringur
      @vitfirringur Рік тому +16

      Amen.

    • @emmanuelandre2807
      @emmanuelandre2807 Рік тому +17

      He should be taken with a bit of sarcasm gut

    • @johanrg70
      @johanrg70 Рік тому +16

      I just think it's fun when he goes through exactly the same emotions and reactions as I did when I started with React. I did it more or less the same way.

    • @pokute6318
      @pokute6318 Рік тому +46

      A fine example is tsoding knows that he needs a ReactContext to render React. So he opens up the documentation of ReactContext with "how does it work" and skips the first sentence which describes what it's used for and instead looks at the code on how it's used.

    • @silltho
      @silltho Рік тому +8

      I 100% agree with your take. IMO the video should be titled "I tried web development and ruined my life" there is very little react happening.

  • @sergeyrogatin9682
    @sergeyrogatin9682 Рік тому +124

    At its core, React does the same thing as your grecha.js, but instead of recreating the page on every change, it does a tree diff to only update the nodes that changed. That is all about optimisation, and that is all the stuff that you hear about, like "virtual DOM". I also think right now it can also do partial updates to stay within 60fps budget if an update takes longer than a frame.
    It also does some spooky stuff with "hooks" to save state inside the tree instead of global variables, so you can create multiple counter components, each with its own state.
    Also, someone did make an alternative framework called Preact, which does all the same stuff and is 10 times smaller

    • @khuntasaurus88
      @khuntasaurus88 Рік тому +27

      Do you know how long it took me initially to find this information when I actually needed to know it a few years ago? 😂 Very good explanation!

    • @coldtech06
      @coldtech06 Рік тому +13

      Im not much a fan of the virtual dom explanation.. Like why are we selling react on stuff like performance because of internal implementation details you dont even get to interact with? In the end react "apps" are slow as hell, spend too much time processing re-rendering of components and effects.
      I think we should sell it on its actual strengths like reactivity and declarativity, but its like selling functional programming to people, they only get it when they are deep in the weeds.

    • @wsak5991
      @wsak5991 Рік тому +6

      The speed of coding and building stuff is more important than the performance in the Browser, which, unless you do something horribly wrong, is already so fast, that the user wont notice any loading. The only bottleneck is the data fetching from the backend.

    • @ivanjermakov
      @ivanjermakov Рік тому

      @@coldtech06 React's selling point is DX and ease of use. This attracts a ton of beginner developers lacking fundamentals. They write inefficient software. Business rarely cares about performance on the web.
      It is absolutely possible to create fast and responsive websites with React, but unfortunately it's rarely the goal.

    • @doktoracula7017
      @doktoracula7017 Рік тому

      @@wsak5991 From my experience if you prioritise speed of building too much you get to a point where everything is unmaintainable and you need 10x more devs to still work on it. Which creates even more issues.
      And react is created by Facebook and their browser application is so painfully slow it's barely usable, no wonder they moved to native apps on mobile

  • @achiyazigi3869
    @achiyazigi3869 Рік тому +87

    tsoding, a big fan here.
    I agree with you about understanding from the ground up.
    I don't agree with the approach of not giving the article a chance.
    Most of the video you had the answers in a scrolling distance but you just got frustrated and returned to the familiar emacs screen.
    Also, react is not only for recursive elements but most of it is designed to render parts of the Dom that changed their state, but cache the rendering of the trees that didn't.
    Thus, react enables a convenient way to run heavy stuff on the client side.

    • @moritzschuessler
      @moritzschuessler Рік тому +17

      Also the expectation from him that the docs should start directly with a deep dive how everything works under the hood, is "weird". Like how many developers gonna build stuff from the ground up. Its just a bad learning strategy for most. (not saying that looking under the is bad). The docs like you say pretty much explains alot how the stuff works without the need of explaining how to build it - what an edge case that a dozen of people will do

    • @secretzpt176
      @secretzpt176 10 місяців тому +11

      ​@@moritzschuessler The issue presents itself when a new developer gets told to learn react and they have no idea how anything actually works. They might be able to create a website, however they don't understand much about JS, just about react. Whenever they try to move onto something else, it will be a much greater challenge, this starts with the mentality that the base understanding of your tools should be ignored for instant results, even if that means you will bear the consequences later.

    • @MrSofazocker
      @MrSofazocker 10 місяців тому +17

      ​@@moritzschuessler That's not what he is criticizing. If the docs literally just "picks up" devs where they "normally" left, aka writing html and css and how react gets hooked creates the root etc. and how react virtual dom interacts and renders the actual dom. And how "react" is actually build out of, list the packages, modules and give an overview.
      That would be better than starting off with,
      "here's a magic jsx file, write "Button" that returns react elements and watch it work magically!"
      That's the gripe he's having.
      Thats the gripe many people have.
      Noone has anything against what react is trying to do.

    • @astrixx
      @astrixx 6 місяців тому +1

      Why do you even need a shadow DOM? Because HTML wasn't built to do shit like this and isn't performant otherwise for complicated UIs. It's just a solution to a self-created problem.

    • @lardshank
      @lardshank 6 місяців тому +1

      ​@@astrixxvirtual dom and shadow dom are completely different things. and if you insist on rendering everything e.g. in a canvas rather than html, you lose the semantics which allow screen readers etc. to work.
      literally noone thinks this is GOOD, it is just how history has played out.

  • @luke-v8c
    @luke-v8c Рік тому +256

    If all web devs understood the fundamentals of the tools they use, they would definitely create better software for web.

    • @nefrace
      @nefrace Рік тому +90

      I think if all web devs understood the fundamentals, React wouldn't exist in the first place

    • @ivanjermakov
      @ivanjermakov Рік тому +29

      @@nefrace core principle of React was good: declarative UI and state. But a lot of stuff went south since then...

    • @MrLoquito12345
      @MrLoquito12345 Рік тому +82

      If webdevs understood the fundamentals, they wouldn't be doing webdev

    • @nefrace
      @nefrace Рік тому

      @@MrLoquito12345 well... Someone need to make websites ¯⁠\⁠_⁠(⁠ツ⁠)⁠_⁠/⁠¯
      Not like it's happening now but doesn't matter

    • @sub-harmonik
      @sub-harmonik Рік тому

      javascript engines are pretty mercurial and unpredictable though

  • @shahzadakhtar1186
    @shahzadakhtar1186 Рік тому +142

    Most fun vod I've ever watched, you should create a series trying all these huge ass /frameworks that people don't understand in depth, it might as well be a good learning point for them.

    • @xcy7
      @xcy7 Рік тому +13

      React developers are React users, they are not developers of React. I fail to see why it would be valuable in any way for them. Do Java devs understand JVM? Do C devs understand LLVM? The whole point of documentation is that you are not supposed to understand how a library works, let alone the tools needed to build something. I understand that some people are frustrated with not understanding the underlying mechanics due to a lack of documentation but stop kidding, most developers do not understand how underlying tools work simply because they don't need to

    • @vdchnsk
      @vdchnsk Рік тому +28

      @@xcy7 dude....

    • @xcy7
      @xcy7 Рік тому +5

      @@vdchnsk Yeah? Care to elaborate? In my opinion I didn't say anything that was so stupid that a condescending "dude..." is warranted.

    • @Goodwarrior12345
      @Goodwarrior12345 Рік тому +42

      ​@@xcy7I don't understand everything about the JVM but I understand the principles of how it works (JIT + the intermediate machine code-like language that the JVM then executes). I don't understand LLVM but I understand assembly and I understand what my code eventually turns into, at least pre-optimization. In fact, understanding this is crucial for C/C++ devs, as knowing it will let you make your code easier for the CPU to cache and execute it faster, and even without digging into that stuff, pretty much any C/C++ developer knows the performance costs of working with heap-allocated memory and jumping around pointers all the time. You generally need to understand at least somewhat wtf is going on under the hood to make your application not run like total garbage, but unfortunately most web devs (and web users) simply don't care about performance all that much

    • @foxwhite25
      @foxwhite25 Рік тому +11

      ​@@xcy7 This is not even something you need to develop React, but just a "compiler" toolchain, which is like saying you're learning c and instead of learning how gcc works, you go straight to makefiles cmake and all that shit. You're not a software developer, you're just a baboon putting the puzzle pieces together.

  • @benjie_wh
    @benjie_wh Рік тому +379

    Dude, run away, go back to C, it's much safer there, this is a genuine advice from a react dev

    • @eboubaker3722
      @eboubaker3722 Рік тому +35

      bro react is not Israel there is nothing to be worried about, let him learn.

    • @rockytom5889
      @rockytom5889 Рік тому +16

      ​@@eboubaker3722
      You're right.
      It's like Satan, it's way smarter and worse 😂.

    • @JawsoneJason
      @JawsoneJason Рік тому +19

      React was a mistake

    • @oleksiistri8429
      @oleksiistri8429 Рік тому +9

      I hope HTMX will remove that react-abomination from existence

    • @bravefastrabbit770
      @bravefastrabbit770 Рік тому

      @@rockytom5889B-but Israhell is run by satan(ic k!kes)

  • @coldtech06
    @coldtech06 Рік тому +104

    React and React DOM are separate packages because React is just a reactive/declarative runtime that creates a tree. React DOM will use the result of that tree to render HTML, but you could use the reactive/declarative system for other stuff like rendering stuff on the GPU, or making terminal GUIs with a lib React Terminal.
    Basically React is just something like the lib S.js with JSX syntax and stuff like contexts. (very good lib btw you should look it up, basically react without the bs, maybe you can break it appart and create your own react competitor (again))
    And React DOM can take a react tree (just a bunch of objects) and render HTML with it.

    • @coldtech06
      @coldtech06 Рік тому +9

      I mean, it literally doesnt get simpler than this:
      const greeting = S.data("Hello");
      const name = S.data("world");
      S(() => document.body.textContent = `${greeting()}, ${name()}!`);
      name("reactivity");
      With a single dependency, S.js itself

    • @nomadvagabond1263
      @nomadvagabond1263 Рік тому +5

      It also make it simpler for react native right? Dividing such things is useful

    • @lame_lexem
      @lame_lexem Рік тому +4

      ​@@coldtech06so you have bagilion of those and also some of them are accessing the server and some are generated at the server and some share state but in different modules and styling must not affect other components and other things 😕

    • @wsak5991
      @wsak5991 Рік тому +2

      ​​@@coldtech06 dude the code you wrote is already more verbose and complicated than react with jsx

    • @itsmeagain1415
      @itsmeagain1415 Рік тому

      @@wsak5991verbose ok but compliwhat????

  • @ivanjermakov
    @ivanjermakov Рік тому +41

    58:41 JSX is not limited to React, so "onclick" JSX attribute is transpiled as-is into "onclick" property for createElement funciton. And then it is React code that tries to find onClick but finds onclick and yells at you. Considering that Facebook created JSX specifically for React it is surprisingly stupid that static analisys is so weak. I guess it's a JS mindset, where failing at runtime is a norm.

    • @sub-harmonik
      @sub-harmonik Рік тому +6

      it looked like the babel transcompilation was targeting react.createElement or whatever though..

    • @leonardorodrigues6766
      @leonardorodrigues6766 Рік тому +1

      @@sub-harmonik that's the impression I had too, it seems tightly coupled

    • @maryjonzezulon3092
      @maryjonzezulon3092 Рік тому

      I would never imagine FB dev will create something better (framework) than facebook shite ;)

    • @phoneywheeze
      @phoneywheeze Рік тому

      i think it thinks that onclick could just be another HTML attribute and not the actual button handler

  • @mehdi7586
    @mehdi7586 Рік тому +38

    46:28 the NextJS tutorial actually goes through this from the ground up. they have a section called "from Javascript to ReactJS" where they explain this.

    • @rebane2001
      @rebane2001 Рік тому +2

      Just checked it out and it seems like a really good tutorial for beginners who actually want to understand the why and how

    • @Pavel-wj7gy
      @Pavel-wj7gy Рік тому

      Why ready docs when you could be just shіtting on tech to farm views?

    • @aakarshanraj1176
      @aakarshanraj1176 Рік тому +5

      link to tutorial?

  • @CertifiedDynamite
    @CertifiedDynamite Рік тому +11

    3:37 How to install about 1.3M LOC worth of dependencies to render Hello World in the browser window!

  • @Endrit719
    @Endrit719 Рік тому +101

    I am a react dev, this video was
    1. Hilarious
    2. Educative
    3. Insulting
    4. Realistic
    5. Amazing.
    I see that your way of doing things is way way beyond what a normal dev does, and the fact that people were frustrated that you digged so deep is funny lol.
    When I started learning react I started it like this but guess what, There were billions of dependencies that if I started trying to understand everything at this level I found out that I would never have the time to create stuff, it's too much but this was amazing and thank you. Would love to see something else related to web development

    • @wsak5991
      @wsak5991 Рік тому +14

      If you want to build a window, do you have to know how glass is made? That part was already taken care of by someone else, same with react. Only in coding people are so obsessed with building everything from ground up.

    • @Endrit719
      @Endrit719 Рік тому

      @@wsak5991 its not about building, it's about understanding, thats why we are all dependent on stackoverflow ( or chatgpt now ) because we don't understand how everything is working, which is normal but to try and understand everything it's amazing, only people who truly love programming do that

    • @amilkyboi
      @amilkyboi Рік тому

      @@wsak5991 Until you build something from the ground up, you do not fully understand how it works. This is universal.

    • @macchiato_1881
      @macchiato_1881 Рік тому

      @@wsak5991 maybe you want to know how the glass you are using in your window is made if you want to create a certain type of window? Maybe this kind of glass is better for large windows? Maybe there's something about a certain thickness of glass or the way they manufacture it that makes it bad for creating a certain kind of window? Knowing how something is made from the ground up is crucial for mastery of a discipline.
      Unless you're some fucking amoeba brain who can only glue together parts of a project like a braindead robot. You do you I guess.

    • @Stroopwafe1
      @Stroopwafe1 Рік тому

      @@wsak5991 If you want to use concrete, you have to mix it on the spot... You have to know how the concrete is made. Yes, no single person is going to bake the specific sand that you need at extreme heats to make windows because it's simply a lot cheaper to have it made in bulk at a factory, but the people in that factory still need to know how glass is made in order to make the window.
      Somewhere down the line there is someone who needs to know how something is made, things don't just appear out of thin air. The personal question is just; "Do you want to be the person using the products, or the person inventing the products?"

  • @hazeion
    @hazeion Рік тому +20

    Look, I am a beginner dev. when I was told "oh you should learn react" and I started doing tutorials, I would say the samethings "why JSX" "When does this get converted to JS?" "What is doing it?" "How is React managing the state?" And NOTHING answered those questions. fumbled around forever just messing with react. but I don't really have the skills or intuition to know where to look. SO this video was insanely helpful and thoughtful. Not only did it help me understand whatis going on under the hood. It gave me ideas on how I can piece apart new technology and how to mentally reason about it.
    I want to know: when SOMETHING goes wrong, or when I see some behavior that is really odd and stupid, I want to be able to reason about it. Just remember, the people that understand React at this level are the same people that are answering your stack overflow questions when you dont know what the hell is going on with your web app.

    • @kahnfatman
      @kahnfatman Рік тому

      That generated product of JSX is big blob of 1 function. What you write in JSX maps to a function. That's why React elements could be either function or string.

    • @mornwind318
      @mornwind318 10 місяців тому +1

      Back in 2016/2017 there have been multiple presentations around "building React from the ground up" so that you can get all the points you make. It's unfortunate that it's been lost to time.

  • @ErikBongers
    @ErikBongers 4 місяці тому +4

    I love the "Make a counter" request. In no time Tsoding realised his framework didn't support state change.
    The next request could be "make a page with 1000 buttons and counters".
    In no time he'd realise that refreshing the whole page when one of the buttons get clicked is overkill and will result in performance problems and/or unexpected ui behaviour like jumping back to the top of the page. He'd have to make his framework selectively reactive.

    • @lloydbonds9268
      @lloydbonds9268 4 місяці тому

      look what they have to do to mimic a fraction of reacts power

    • @stefanalecu9532
      @stefanalecu9532 3 місяці тому

      ​@@lloydbonds9268 you mean HTMX

  • @StickySticker
    @StickySticker Місяць тому +3

    After an entire hour later he realizes what this thing called React, as in reacting... probably has something to do with state, and umm like updating it and stuff, does. Starts trying to implement same kind of behaviour on own library whilst struggling to realize hes trying to assign a variable inside function parameters. Claims he planned to do the library with functions all along. Continues to implement updating a single variable by dumping the whole state of the dom whilly nilly to the ether and building it up again from scratch, on each increment. every. single. node.
    If you google "why garbage collection is a thing" you will find this video in the results.
    We need PART 2 where he obliviously scrolls through examples where hooks are used, updates hes library and figures out that these functions that he planned don't hold state... well without hacks...

  • @hovhadovah
    @hovhadovah Рік тому +5

    I've been a React dev for about four years now and your observation is spot on: The problem is that these Getting Started tutorials are written with an absurd number of guardrails in place. They're intentionally dumbed down to give people instant gratification from running magic bootstrapping commands and then seeing an app on their screen; their goal is not to explain how the framework works under the hood. Then those devs walk away feeling like they learned something when in fact they didn't. I feel like this is an attempt to cater to non-CS folks or people transitioning from other career paths to web dev, so the framework is trying its best to not overwhelm them.

    • @ferinzz
      @ferinzz 6 місяців тому

      I got crushed by one such tutorial.
      install the thing
      copy the code
      look magic you're a react dev now!
      uh, no, you didn't explain how any of this did what it did. I understand nothing.

  • @sinasalahshour
    @sinasalahshour Рік тому +12

    56:30 but with react, we can isolate states using components. each component can have its related states and re render based on its own states. so the flow is a lot more predictable and easier to debug. in my opinion frameworks like svelte and solid are easier to understand ( the magic that's done by the framework ), but even react has this benefits over vanilla js. it's also harder to handle conditional renders and cleanups in vanilla js, react already provides apis that makes it easier to handle them.

    • @norliegh
      @norliegh Рік тому +23

      "easier to debug" has to be the greatest react joke ever.

    • @sinasalahshour
      @sinasalahshour Рік тому

      @@norliegh yeah i can't imagine debugging a larg scale frontend project without a particular framework or an isolated structure

    • @lucasayabe
      @lucasayabe 9 місяців тому

      @@norliegh well, its easier than debugging imperative programming with global mutable variables

  • @uvuuvu-f1z
    @uvuuvu-f1z Рік тому +16

    I think its a difference in goals.
    If you want to learn react to make websites or for job security then you do not need to understand what happens under the hood. React is the means to the end (the end result being the product or react dev job you get).
    If the end goal is to learn react as a library, how its implemented then of course you are going to look into the underlying layers. Maybe you do this for your own curiosity, or to learn design practices and expand your knowledge of techniques and design philosophies libraries use. In the end it all depends on what you want out of it.
    It just so happens many of us aren't that interested in that, we just want to make a cool website or get a job, thus we arnt bothered with technical details under the abstractions.
    Whether this makes us seem worse or better than those that do look into the details lies entirely up to your values. If you value those skills then sure, we seem inferior, similar to how on the other side, they may view looking into the details as a waste of time.
    Because of this, i wouldnt say either side is "inferior" or "wrong", just that we have different goals.

    • @MasterGxt
      @MasterGxt Рік тому

      Well put.

    • @sharkpyro93
      @sharkpyro93 11 місяців тому

      theres also the fact that most web devs are either self-taught or comes from bootcamps, i don't blame them for not knowing how things actually works but for the others theres no excuses imho

    • @secretzpt176
      @secretzpt176 10 місяців тому +2

      I understand the sentiment, and I agree that practicality may outweigh deeper knowledge in same cases, but it's not "we seem inferior", it's quite literally that you (not you in specific) don't have any idea how the library you use works. If you're using React professionally, it is almost unbelievable to me that you would neglect to be proficient in JS to the point that, at the very least, you can set up react without needing automated tools.

  • @trampoline60
    @trampoline60 11 місяців тому +20

    If you're a React developer and got offended by this video, please watch any of his other videos. His approach to learning things aligns with how a lot of software developers go about learning new things. This is exactly the reason why it's so frustrating to start off with modern web development. So much weird stuff going on without any explanation, and the documents kind of just seem to ignore it and stick to copy-pasting basic commands.

  • @MrChester114
    @MrChester114 Рік тому +10

    It always surprises me that people don't want to explore how stuff works. Most of the programmers I've met care only about the end result. It other words the program they write. I always want to explore how my program actually works. Whether it's exploring the internals of some framework or learning assembly because I want to know how computer executes my program. Maybe I'm the weird one though.

    • @pokute6318
      @pokute6318 Рік тому +2

      I want to know how stuff works. What I've realized after a lot of pain is that I don't need to know how stuff works to use it. I'm very bad at black-box mentality since I feel the need to know how the internals works to use a tool, which is bullshit. Neural networks was the eye-opener for me. I was severely hampered by looking at hours of video lectures about neural networks and learning how the math symbols are used. So I slowly learned how they work, but I got no actual programs using them done. A sandwich approach from both ends, slowly learning from the basics while also using existing tools and examples to get practical experience is a better approach.
      The people who figured out how to effectively use backpropagation for training certainly weren't able to figure it out from theory alone - they had tons and tons of experience in neural networks too that aided them. For NN especially, trying to learn and write stuff from scratch is super painful since the NN code has to be pretty damn good and written with a lot of knowledge to get good results for any larger or more interesting datasets. The libraries are written by experts and it would be silly to evaluate their work without at least moderate understanding of the field. I've done that mistake enough times already.

  • @Cypekeh
    @Cypekeh 9 місяців тому +3

    I enjoy that you made this video learning from bottom up, but sometimes you criticize wrong things.
    For example 58:23, onclick is a JavaScript attribute, and onClick is a React attribute. So the transpiler didn't catch it, because it's a valid JavaScript attribute.
    Or some other things like why do we need React if you can just use document.createElement... But that's basically what React is, but more robust. It's more convenient to write code that looks like HTML and then compiles to functions that create them, than write those functions. Maybe it's bigger than it could've been, but it's still the most robust.

  • @lulube11e111
    @lulube11e111 Рік тому +15

    This stream fullfiled my every expetation.

  • @gameofpj3286
    @gameofpj3286 Рік тому +11

    I really love seeing him dig into things like this, because I don't have the understanding to do it myself yet

  • @arryaxx263
    @arryaxx263 Рік тому +4

    The problem is the gap between programming as a craft and programming as a job. Most people get the job without really learning the craft. The moment you've come to rely on a framework to make things easier as your starting point is the moment you cease to be able to function as anything but a cog in a corporate machine. Programming is programming, no matter if it's high level or low level, but if you're working at a high level, you have to understand what's underneath if you want to write good code. If you can do that, then the framework you use is irrelevant. If you can't, then you are dependent on the framework's environment, and are subject to all its problems.

  • @RaZoRxan
    @RaZoRxan Рік тому +18

    1. Every single real web developer knows very well how al this high level stuff works, because this is how we used to do things back in the days. (react is a 10 years old library)
    2. Imho, The fact that you tried to learn react from the ground up is a good thing.
    3. react (the library) is a library to create web and native interfaces. ReactDom is just the way to go to render a react app inside an html application. There are even tools to "render" react components in cli applications. (a good idea for a video?)
    4. React is capable, at each render cycle, of updating only those portions of the DOM that have actually changed (diffing).
    5. Your grecha.js stuff is just a meme at implementing counters (it rerenders the entire shit at every button click).
    6. document.createElement is not a valid alternative to react components. Native web components (maybe) are.
    69. Love you

    • @PP-ss3zf
      @PP-ss3zf Рік тому

      hi, does your point 6. apply to other frameworks too? is there anywhere I can learn more about that document.createElement is not a valid alternative? Thanks

    • @thehelldesk5463
      @thehelldesk5463 Рік тому +1

      For me the problem with react is the shitty rerender stuff. You have toons of optimizations to do with child components. When you refresh the parent it will rerender everything which is bad in many cases. The useEffect is a problem too when it rerender twice for litteraly nothing. Most of the time it's not a problem but React is not that good for performance because only few devs are aware of this or do not take the time to optimize their app properly. Time and budget are often the problem and this part is skipped...
      I tried Web Components once and i think the industry is not ready. There is a lack of ressources or projects based on it. Stencil for exemple is a piece of shit. If someone ask you if you could start agnostic stuff with it run for your life !

  • @bkatsevych
    @bkatsevych Рік тому +53

    Funny to see how the guy who has never scratched the surface of react turns out to know more about react and web development than 99% of so called "senior react developers"
    upd: Tsoding man, cudos to you

  • @clodomirvianna6350
    @clodomirvianna6350 Рік тому +6

    I'm really glad for your work of unraveling its mechanics. Until now, I was frustrated by not undestanding how React really works, and nobody seemed to care about this. I was only encountering those "copy and paste those lines of code" tutorials. It is sad the lack of a concise documentation on what exactly it is and how it works.

    • @recursiv
      @recursiv Рік тому +1

      I got so frustrated trying to get details from the docs that I went on a deep dive just reading the source code for a few weeks. It was painful, but it worked. I don't know everything, but I basically understand fibers, and have a loose understanding of reconciliation. Now, hopefully I never have to write any react code in the real world.

    • @drygordspellweaver8761
      @drygordspellweaver8761 Рік тому

      There are no tutorials because literally no one knows how it works. Including the thousands of women and indians at facebook who wrote it.

  • @Endrit719
    @Endrit719 Рік тому +4

    56:41 the reason why we need react is because it stores all elements in memory and when it's time to rerender to compare which element have changed it uses the react reconciliation strategy so that it doesn't traverse all the dom

    • @youtubeviewer7077
      @youtubeviewer7077 Рік тому +5

      The DOM is already in memory, you don't need a virtual DOM and fancy diffing algorithms if you just change the elements that need to be changed. This is why other frameworks (ex. Svelte) don't need a vdom and are faster than React.

    • @evergreen-
      @evergreen- Рік тому +1

      @@youtubeviewer7077, is that true though? I’ve always been told that changing the actual DOM is costly. Glad to be mistaken, if that’s not the case

    • @lucasayabe
      @lucasayabe 9 місяців тому

      @@youtubeviewer7077 yeah, but in the way he did, you get messy with state management once the code gets more complex, React isn't Svelte or Solid, but still better than this

  • @JohnSmith-ni4cs
    @JohnSmith-ni4cs Рік тому +12

    FYI: react-dom is a different package because react (the core library) is designed to be platform-agnostic. You could therefore use react with react-dom and target the browser or you could use it with react-native and create android and ios apps.

    • @cameonn
      @cameonn Рік тому +1

      Thank you kind sir.

  • @Verrisin
    @Verrisin 11 місяців тому +4

    dude, you are too self assured - why is ReactDOM a separate package? Because normal React is generic, and can work outside browser with a DOM context.
    - I don't know if anyone is using it for something else, but probably ... it can be used to "drive" arbitrary expensive tree by applying the diffs ...

    • @Verrisin
      @Verrisin 11 місяців тому

      it definitely SHOULD be a separate thing, and I like they made it reasonably.
      - It comes from the fact that JS has no GOOD dependency tree shaking, so you have to not include things like this.

  • @MonkeeSage
    @MonkeeSage Рік тому +31

    Nobody gives a shit he is trying to understand how stuff works, they get mad when he skips the docs and just starts pasting random code and thinks it should work. But pasting random code from the internet without reading docs is advanced webdev, so Tsoding might be senior webdev after all.

    • @baglad
      @baglad 21 день тому +1

      There was nothing in the docs describing what he was trying to do. That's the whole point.

  • @mindasb
    @mindasb Рік тому +26

    More please. I love the way you learn and obviously your learning process is great. Obviously the learning mindset is not the productivity mindset and people who were unhappy in the chat probably dont have the learning mindset.

  • @bbq1423
    @bbq1423 Рік тому +15

    Maybe you could abstract the refresh part into a function, something like useState which takes a value and returns a getter and setter and the setter calls refresh. 🤔

    • @thehelldesk5463
      @thehelldesk5463 Рік тому +2

      It doesn't returns a getter and a setter. It returns a VALUE and a setter. The thing you describe here are Signals. A getter is a a function that return a value AND the ref of this value. But in React we do not have a "useSignal" hook yet which is sad... Because of that, instead of declaring just a signal we have a bunch of hook to use if we want to achive the same (useState + useEffect + useMemo). Angular is better on this point

  • @eetumaenpaa594
    @eetumaenpaa594 Рік тому +24

    This was actually kinda eye opening as a react dev I just use pre defined functions and methods of react and other npm packages and I have never even looked at the implementation code of any of those packages

    • @TheSaintsVEVO
      @TheSaintsVEVO Рік тому +5

      You don’t have to honestly, unless you’re contributing to React itself. It’s not realistic to understand every framework down to the machine code before you use it. You’re meant to use the API that react provides to make applications, not modify the react source code itself.
      However if you do want to learn how it works, you could Google “how react works” and that’s a starting point. Then look at the source code and it’ll make sense. Instead of doing what this guy is doing - barely even reading the user guides and complaining.

  • @mooncorizer290
    @mooncorizer290 11 місяців тому +3

    I used to develop using react, and after some time of developing apps in react i was realized than much faster and optimized apps with same functionality can be done with vanilla js and also with much lower filesize than react apps and also you can control every symbol in your code and every byte of optimization

  • @marcelokj954
    @marcelokj954 Рік тому +6

    what people are missing from this video:
    > tutorial installs 1500 dependencies
    > then the guy manage to gather react, react-dom and babel for running everything
    I checked out the dependencies of react and react-dom which are just 2 in total: loose-envify and scheduler. Nothing more. I'm not a react dev myself so I cant say what are they offering within all those dependencies but it is worth to put things into perspective and question: is it really doing anything better or easy? In the video we can see that babel dont even check for correct html attributes during the jsx parsing.

    • @lucasayabe
      @lucasayabe 9 місяців тому

      majority is for other thing that you need like dev dependencies to setup hot reload e etc, styling dependencies, or things like TS

  • @giorgos-4515
    @giorgos-4515 Рік тому +4

    There is a good reason that react and react-dom are different packages(also when using tools they are always both included). They are different things. React has the diffing algorithm related details and hooks etc. etc. React-DOM is just the rendering side of it on the browser, that's how react can be used in different contexts like mobile development

  • @ShadoFXPerino
    @ShadoFXPerino Рік тому +13

    1:16:20 Destroy goalposts for 10 years straight and you'll have 1k NPM imports too.

  • @Endrit719
    @Endrit719 Рік тому +2

    49:36. Why there is a separate package for rendering is because react is used also for mobile development (react native) so rendering in web and mobile is different, to have it possible to use the same logic for creating apps they needed to separate the core react features with rendering part that's why they are separate packages

    • @andrew.lp.mcneill
      @andrew.lp.mcneill Рік тому

      And in fact the React pattern can be used for far more, like CLI applications.

    • @secretzpt176
      @secretzpt176 10 місяців тому

      @@andrew.lp.mcneill Out of curiosity, what are the use cases for react in CLI applications? Or was that just a throwaway example?

  • @Muskar2
    @Muskar2 Рік тому +5

    This is exactly the kind of tutorial I would have wanted back when my former workplace told me to learn React

  • @404-undefined9
    @404-undefined9 Рік тому +7

    he is talking about the abstract levels. Most frontend developers have no idea how their frameworks or libraries work, they might know something in theory but if you would ask them write their own jsx based framework they wouldn't be able to do it. They feel pretty comfortable on their level of abstract and there is no need to go deeper. That's why I am not considering them as the engineers they are just developers, not even programmers

    • @anon_y_mousse
      @anon_y_mousse Рік тому +2

      I consider developer and engineer to be more catch-all terms. I'd describe them as point and clickers. They point and click to put stuff together that other people wrote.

  • @dardosordi
    @dardosordi Рік тому +24

    ** literally scrolls past it without even trying to read **
    - the don't show you literally how to instantiate it!
    (not defending react though, modern web dev is an abomination)

  • @RemotHuman
    @RemotHuman Рік тому +1

    49:52 I'm just guessing but I think its a separate package because its dependency abstraction/decoupling: I'm guessing the normal react package can be used with something other than react-dom to make mobile apps with react native for example, its just a common usage to use react to build websites but that's not the only thing it can be used for. But the react logic doesn't rely on the browser dom it relies on a virtual dom and react-dom is an adapter to the browser dom. I'm guessing

  • @ecosta
    @ecosta Рік тому +6

    Got at the end. 100% agree with Tsoding. My complimentary notes on React. First, the "real tutorial" is called "React Internals" (this is where they talk about React.createElement, etc). Second, all of that crap is bloated and obscure because "modern devs" adds an entire abstraction layer on top of a simple problem: React abstracts an UI component graph; ReactDOM abstracts using React on DOM trees (i.e. update HTML pages); JSX abstracts away "React.createElement"; Babel abstracts transformation of JSX into JS; Redux abstracts the state (i.e. global constants); NPX abstracts the setup of all of that shite... And thy Lord shall have mercy of anyone spreading some blasphemy like simplifying things or asking normal devs to understand anything beyond what's written in the tutorial...

  • @szymusu
    @szymusu Рік тому +2

    Duuude, I never felt more relatable watchig programming content.
    I thought I was just stupid for not understanding and not appreciating 100 layers of abstraction.

  • @janhorak5363
    @janhorak5363 Рік тому +20

    This is gold. Seeing this god programmer struggle to navigate web frameworks, gives me reasurance that I am not that dumb feeling lost when dealing with frameworks.

  • @forinda
    @forinda Рік тому +2

    Abstraction is the greatest form of complexity. Many devs don't care about the underlying functionality. Sometimes before I install a plugin I read through the code. I just ship and adjust it as a util rather than have npm module. Curious people build consumable plugins but most consumers don't like checking on the underlying details. The more you can offload the better.

  • @DEVDerr
    @DEVDerr Рік тому +5

    "Why do we need React?"
    I would ask "Why do we need reactive frameworks?". And we need them, because with old way of writing websites (using JQuery) was extremely painful to scale up web apps that are automatically updating data onchange.
    Frameworks are tracking data by themselves and they update the DOM automatically when data changes.
    Also frameworks allow to create separate components (kinda like old twig/blade templates in PHP) which gives you the ability to reuse some views

  • @sirdavidcao
    @sirdavidcao Рік тому +5

    I’ve been watching this guy for a while and have been just learning react recently. This man is crazy haha 😂

  • @LucasFerronato
    @LucasFerronato Рік тому +4

    Man! i'm senior dev - React mainly. And I need to say, I love this video!! especially your criticisms

  • @EliSoli-pb6fp
    @EliSoli-pb6fp 3 місяці тому +2

    Where's ebx, rax, rdi bro?!? What are those arrow stuff and hooks

  • @re_detach
    @re_detach Рік тому +6

    This is super interesting, informative, and hilarious all at once! Who knew you just need to include 2 files to start writing React! Thank you for showing this as always.

  • @lolwingding
    @lolwingding Рік тому +2

    But for interactivity we already have events and eventListeners right? So why not use that instead of reinventing kind of a event loop.

  • @ar_xiv
    @ar_xiv Рік тому +16

    The video title made me laugh out loud thanks it’s too real web dev is so ruined

  • @monad_tcp
    @monad_tcp Рік тому +1

    24:55 having studied how webpack works out of spite, I know its a plugin system, that jsx thing goes inside babel, because freaking no one tells how it works

  • @markbauermeister5449
    @markbauermeister5449 Рік тому +5

    Getting stuck in an unclean state with an Angular project (Angular is much worse than React, btw) as well as having to deal with an insane build system that took forever (not even kidding. Before I optimized it myself, it took longer to compile said Angular website than it took to compile a Linux kernel on the same machine) inspired me to work on my own framework written in Go. WASM is a godsend for those of us who strive for more than resource hogging webdev.

    • @MasterGxt
      @MasterGxt Рік тому

      I'm sorry, you just glossed over creating your own framework there,
      also do you just decide to compile the Kernel on your free time ?

    • @markbauermeister5449
      @markbauermeister5449 Рік тому

      @@MasterGxt It's Linux. Many people compile the kernel themselves, for better performance.

    • @MasterGxt
      @MasterGxt Рік тому

      @@markbauermeister5449 You're using Gentoo aren't you ?

  • @Cmanorange
    @Cmanorange Рік тому +3

    i am a software dev and i agree with a lot of tsodings frustration here. i love using rust (hoping unsafe rust becomes more stable soon for more fun) but i dont like how core features are left to separate community packages. i understand that there are benefits but it leaves a fragmented documentation quality experience. it's incredibly frustrating to not understand how a function works just to read empty docs with no examples. the standard library book is so good but when developers rely on community docs the quality drops significantly

    • @Cmanorange
      @Cmanorange Рік тому +2

      for a scare, read the syn documentation. it is a recommended community package for developing proedural macros, a core rust feature. you'll find lots of empty pages and links to entirely underdocumented libraries that it uses. everything is abstracted away to the point of confusion with a thin interface over it

    • @anon_y_mousse
      @anon_y_mousse Рік тому +1

      @@Cmanorange This is one of my chief arguments against Rust. At least C tells the truth that the standard library is basically empty. If I'm going to use a different language, it needs to provide nearly everything I've got in my own libraries. If I have to depend on a rando third party who may or may not be a good developer then I'm going to have to write it myself to have any trust in it, and I don't want to take the time to rewrite my own libraries.

    • @Muskar2
      @Muskar2 Рік тому

      Have you tried Odin-lang?

    • @secretzpt176
      @secretzpt176 10 місяців тому

      ​@@anon_y_mousse I mean rust has a lot of libraries available, of course granted that it hasn't been around for that long so it won't be as big as some others. However, I'm pretty sure that they explicitly state that it's meant to have a small standard library because it's meant to be extremely lightweight. The main attraction to rust is the compiler, which actually reduces risks associated with third party libraries.

  • @inriinriinriinriinri
    @inriinriinriinriinri Рік тому +2

    8:03 when you realize you forgot to uncheck advertisements checkboxes while installing some shit from torrent and now you are looking at AMIGO and other malware stuff installing

  • @LotsOfFunyoutubechannel
    @LotsOfFunyoutubechannel Рік тому +13

    Not an expert but most stuff tend to have sort of abstraction layer on top of it. Like you dont need to know about how processors or ram works to use computer, sure would be good to know but most probably dont need. Then if you know about processors and stuff, you can dig deeper with transistors and diodes and how voltage is regulated. I doubt many think about the movement of electrons and em waves while using internet. One can always dig deeper but for most people its not necessary for them to make some simple web app

    • @aspectreishauntingeurope
      @aspectreishauntingeurope Рік тому +14

      the thing is react is not an abstraction, it's a bloated monster. Yes you do not need to know how transistors work in order to program, but you also don't need to buy an industrial lumbermill to chop up a plank of wood for a fire.

    • @LotsOfFunyoutubechannel
      @LotsOfFunyoutubechannel Рік тому +3

      @@aspectreishauntingeurope Cant deny that lol

    • @wsak5991
      @wsak5991 Рік тому

      ​@@alt-artOk, have fun then building a bigger website with pure JS

    • @wsak5991
      @wsak5991 Рік тому

      ​@@_orangutanyeah sure, then just write your websites in binary, I bet a lot of companies would want to hire you

    • @ritchielrez1680
      @ritchielrez1680 Рік тому

      No one needs to know how to write binary, that is not what he said@@wsak5991

  • @Alireza-kw6fj
    @Alireza-kw6fj 3 місяці тому

    Bro
    Keep going
    I came from a meme of you in Instagram and now I love your work style

  • @pwbandwidth
    @pwbandwidth Рік тому +5

    this video made me want to develop a deeper understanding of my tools when doing web development, thank you.

  • @yoz0__
    @yoz0__ Рік тому +1

    It has section in legacy docs on setting up react project with just cdn scripts, new docs mostly target new audience

  • @nefrace
    @nefrace Рік тому +9

    It's really interesting to see the attempt to _understand_ the mechanics of web framework. Wish I had the same mindset.
    But I'm just trying not to use frameworks.

    • @vitfirringur
      @vitfirringur Рік тому +12

      But he doesn't attempt to understanding anything. He looks at the generated javascript(the calls to React.createElement), exclaims "but there is document.createElement, dont you know????" and then assumes he understands everything about react.

    • @moritzschuessler
      @moritzschuessler Рік тому +2

      He isnt really tying to understand react. He is just trying to bundle everything from scratch - what will him not make learning the concepts and problems of the framework. Needing to know how to bundle JSX/React to make workable code with his approach wont be necessary for many. Its a edge case that a few persons will do. And there are actually good content explaining exactly that.
      Saying that react is shit because the first page in docs isnt "ok lets take 2 days to explain how create-react-app bundles stuff and how stuff works under the hood. Then we will show first code" isnt important. Its more important to explain the concepts of a framework and spinkle in the how its does things under the hood.
      Have you ever read a classic old backend doc? they literally throw some compiler output at you. nobody will learn with it.

  • @leon_meka
    @leon_meka 10 місяців тому

    I love how you‘re really exposing how everything works under the hood.
    Wish the entire space would approach teaching fundamentals as raw as you do here! This gave me a lot more insight into the tools I‘m using everyday

  • @sinasalahshour
    @sinasalahshour Рік тому +7

    49:35 because we have different renderers for different use cases, like browser dom, mobile, threejs scene, console and etc. react-dom provides a renderer for rendering in browser.

    • @youtubeviewer7077
      @youtubeviewer7077 Рік тому

      All of those things already have renderers though...

    • @Muskar2
      @Muskar2 Рік тому

      @@youtubeviewer7077 You need renderers for your renderers so you have renderers when you use your renderers

  • @keenoogodlike
    @keenoogodlike Рік тому +10

    The best React feature is that is can produce money.

    • @victorbitencourt9481
      @victorbitencourt9481 4 місяці тому +1

      still waiting for the money part, for now it's just a lot of frustration xD

    • @ronny584
      @ronny584 4 місяці тому

      damn Bill Gates, how rich are you?

    • @luckybairagi7294
      @luckybairagi7294 3 місяці тому +1

      learning react for a year. Applied everywhere for react jobs. create many projects in React for portfolio. But still can't get Job.
      It is that how u make money?

  • @Trucidare
    @Trucidare Рік тому +1

    Just to add a bit of context here:
    Q: Why do I need to install react-dom? Why shouldn't it be part of the react lib?
    A: Because react is platform-agnostic. The core lib implements a tree of nodes (VDOM) that can dynamically update when the state changes. react-dom translates these instructions to render to the DOM, but there are other targets that don't target web, like react-native which renders to native iOS/Android elements, react-pdf (PDF renderer), Remotion (video editor which uses ffmpeg), etc.

  • @dimeterious_fox
    @dimeterious_fox Рік тому +7

    Bruh, literally ended up trying to recreate React by hands and calling it Grecha. Maybe understanding why React was created and what problems it solves should be a part of the "exploring approach" too, should it? Also, understanding how it updates the DOM under the hood could be included in the research. Tinkering with a babel is not quite React.
    Watching the video was fun, though.

  • @thelostvorg7805
    @thelostvorg7805 Рік тому +1

    this is the main reason why I feel like a shell of a developer , yes I can make reactive ui and fetch some data from the back end but when it comes to understanding how things actually work behind the abstraction wall I am clueless...

  • @sinasalahshour
    @sinasalahshour Рік тому +6

    isn't create-react-app package dead?
    create-vite has better config support and dx

    • @recursiv
      @recursiv Рік тому

      Wouldn't have made a difference in this case.

  • @dkd0m23
    @dkd0m23 3 місяці тому

    Very interesting video.
    Really like the way you setup react in this 'relatively' barebones way

  • @brod515
    @brod515 Рік тому +3

    @23:45 honestly the reason this is like this is because they have to reach the biggest audience with there.
    "You are treating me like an idiot" that's because you have all the relevant experience.
    you are 1% of the people that go to that documentation.
    the other 99% are very beginner younger likely just getting started programming.
    these beginners don't want to know or care what babel is,
    or what size or how many packages it's adding packages, or how slow ( especially if they don't know what is really happening when installing those packages.json )
    the kind of questions you are asking (who is calling this, why is this this, where does this execute from, ) are the ones none of these beginners are asking or care about.
    in fact they will push back on that information if you try to give it to them to early.

    • @Muskar2
      @Muskar2 Рік тому +1

      I wouldn't say it's beginner friendly. It's easy to get very confusing error messages. And if you (like Tsoding) don't try the download button on the code snippets, then you will not realize that it includes the React components needed to get that snippet working (plus the example doesn't have any feedback to show you that it's actually doing anything). That's not good UX. Plus they have the comment "This setup is not suitable for production." in their hello world example, which should really tell you that this is about to get really complicated.

  • @angelcaru
    @angelcaru 10 місяців тому +1

    "I wanna see all of that dirt, even if it makes you uncomfortable" - Tsoding

  • @Fry981
    @Fry981 Рік тому +31

    The frustrating thing about this stream is that you are indeed asking really good insightful questions but doing it in an incredibly negative and dismissive way. Like asking why "react-dom" is a separate package from "react". That, in and of itself, is a GREAT question to ask. But then you just have to follow it up by saying that you think it's stupid and it shouldn't be that way, even though you know nothing about the architecture of React. Or you go on a rant about how your chat is frustrated just because the entire stack is shit and you're just exposing it. Umm... maybe save your judgement for after you've learned how React works? Probably would've lead to a much more calm and productive conversation with your chat and you might've even got the answers you were looking for from them. I think it's more than clear that this was sadly not a good faith exploration of React.

    • @FlamencoDeniz
      @FlamencoDeniz Рік тому +1

      What exactly was frustrating about it? also a "calm and productive" outcome might be less desirable than a truthful answer to the question whether or not this stack chaotic. (obviously the video is a literal proof of that and hence the value of this video in the first place to be uploaded to yt)

    • @idiotsinwhips
      @idiotsinwhips Рік тому

      Sounds like you are coping finding out your stack is shit

    • @alexandrohdez3982
      @alexandrohdez3982 Рік тому +5

      It s a joke for him, he is a low level developer, he doesnt care about front-end cause his channel is about true diffcult things and this is what I am here.

    • @elihap7
      @elihap7 11 місяців тому

      Copium

    • @thgilretfa
      @thgilretfa 3 місяці тому

      ​@@alexandrohdez3982 such a huge ego for such a small brain
      please solve P vs NP problem, if you here for true "true difficult things"

  • @mirastyle
    @mirastyle 2 місяці тому

    That is precisely the type of React tutorial I was missing! Thanks a ton

  • @LeoHQx
    @LeoHQx Рік тому +28

    If you want to do freelancing Im sure you will find a more juicy marked with the skills you already have such as C, Rust and all that stuff. Those skills are much more difficult to find.
    In today's job-market you lift a stone and under it come out react developers from below like cockroaches hahaha.
    I really enjoy your videos!

    • @b_delta9725
      @b_delta9725 Рік тому +2

      as a freelancer you can do whatever the hell you want basically. i do webdev with my own astro build and it gives me great performance very easily

    • @joshuadonahue5871
      @joshuadonahue5871 Рік тому

      @@b_delta9725 I'm interested in looking into doing some freelance work, where do you find jobs for that?

    • @beefbox
      @beefbox Рік тому +2

      Rust jobs? Where? There are a lot of people learning react because there are a lot of jobs.

    • @purpasmart_4831
      @purpasmart_4831 3 місяці тому

      What site or method would be best for doing freelance? I wanna try out freelancing since I can't get a job with my degree in this market.

  • @EvilTim1911
    @EvilTim1911 6 місяців тому

    4:15 I wouldn't be surprised if Google does use React somewhere in their huge pile of codebases, but I would expect Angular to be more prevalent given they created it

  • @dwightk.schrute8696
    @dwightk.schrute8696 Рік тому +15

    That's kinda like expecting C tutorials to first go over C's EBNF grammar and then jump into compiler IR semantics before showing how to do "Hello world" lol

    • @youtubeviewer7077
      @youtubeviewer7077 Рік тому +8

      The canonical beginners C book (K&R) that you can read through in a weekend or two covers such stuff as writing a memory allocator, the language grammar, and stdlib reference. You can learn the entire C langauage front-to-back in less time than it takes to understand what actually happens in a "hello world" react program. It does start with hello world though :)

    • @dwightk.schrute8696
      @dwightk.schrute8696 Рік тому

      @@youtubeviewer7077 I think there is a big gap between reading and comprehending - otherwise we all would have been Einsteins already :)
      But I think I get what you mean, React devs should definitely do a better job at cross-referencing their documentation, e.g. when they mention JSX it should directly link to more information about JSX so that you're always just a couple of pages away from finding the level of detail you desire.

    • @JuvStudios
      @JuvStudios Рік тому +1

      The problem is here you are not aware of what the tooling works, what the different packages do etc...
      When you write a basic C programme, you just invoke the compiler and then the linker. There is no hidden configuration or step unless you choose to use an IDE and or a build system, which only makes sense for complex projects.

    • @dwightk.schrute8696
      @dwightk.schrute8696 Рік тому +2

      @@JuvStudios React is a framework, not a language. You want to compare React to something like GLib, which has both complex ecosystem and complex build system - good luck understanding all that in 30 minutes without yelling at clouds.

  • @KiLVaiDeN
    @KiLVaiDeN Рік тому

    You are the man ! Adding in real time support for counter, this was amazing, gj 😎

  • @jsh3288
    @jsh3288 Рік тому +4

    The reason to use react is more for the state management. You were basically just looking at the component part of react but you never actually looked at react hooks/contexts/state or any of the REAL reasons to use react

    • @recursiv
      @recursiv Рік тому

      @@TurtleKwitty I missed where he claimed to be an expert. What's the timestamp?

    • @recursiv
      @recursiv Рік тому +1

      @@TurtleKwitty Found it. 59:12 "Did I master React? I think I did." Yeah, that's BS.

  • @Endrit719
    @Endrit719 Рік тому

    24:32 Babel is a transpiler for javascript, it uses plugins and there is a jsx plugin that babel uses to transpile jsx

  • @leekuncoins6347
    @leekuncoins6347 Рік тому +4

    I do both web, backend and application dev, I love your work, made me brainstorm little bit. That why I tried to run away from web dev, and python dev. Involving into web/ python dev, It was like let thread panic for pleasure

    • @Vancha112
      @Vancha112 Рік тому

      Macro.... Expansion....

  • @mouseroot8053
    @mouseroot8053 10 місяців тому +1

    Your initial reaction to the size is EXACTLY how i felt...WTF am I downloading....almost 700mb...for a web framework...like thats the size of a standard CD...how the hell did this happen and how the fuck is anyone willingly downloading this monstrosity...just to render a button in a different way...

  • @JohnPywtorak
    @JohnPywtorak Рік тому +5

    Deno and Bun have JSX support, no need to install anything. You could do a react app in the way you are trying to do with no dependencies. Yes the react docs don't direct a person in such a way and imply nodejs, but that is a doc flaw, not JSX or Frontend people.

    • @baboomka
      @baboomka 3 місяці тому

      Is there a guide somewhere on how to do that?

  • @PP-ss3zf
    @PP-ss3zf Рік тому +2

    im a web dev and i fucking love this video. the ecosystem is dogshit, the language is a hack - it doesnt mean its bad, its just how it is. anyone wanting to learn react should actually watch this video first before even looking at any tutorial!

  • @MachineYearning
    @MachineYearning Рік тому +2

    Not sure if you ever got this far into it, but the difference between React and React-DOM is totally separate concerns. React is a library for abstractly describing user interfaces with reactive data bindings. React-DOM is the tool that renders those UI descriptions as DOM for your browser. Alternatively there's, for a boring example, React Native, which will render React specs as "native" components for a smartphone application. A weirder example would be the Remotion library, which can render React-based UI descriptions as MP4 video.

  • @nahuellescano
    @nahuellescano Рік тому +1

    I think the problem is people like me are new in this, and don't even ask this kind of questions yet. But for me, all that work you did it just awesome

  • @elliotphoenix
    @elliotphoenix Рік тому +4

    In react docs scroll down installation page, there is a DEEP DIVE section that explain step by step what you had struggle to find out the whole stream :)

    • @recursiv
      @recursiv Рік тому +2

      It should be the default, not a hidden "deep dive".

  • @sudhirchaudhary6512
    @sudhirchaudhary6512 6 днів тому

    i have used react but never understood how it works under the hood, this stream actually help me understand some things. Highly Appreciated.