I tried React and it Ruined My Life

  Рет қаралды 110,497

Tsoding Daily

Tsoding Daily

Күн бұрын

Chapters:
- 0:00:00 - Q: Have I ever tried to learn React?
- 0:00:33 - Looking for React Tutorials
- 0:01:28 - npm project
- 0:02:13 - react package
- 0:03:01 - Looking for Better React Tutorials
- 0:03:37 - create-react-app
- 0:05:37 - looking around the CRA template
- 0:06:51 - starting the server
- 0:07:37 - checking CRA dependencies
- 0:09:35 - got gnoffed
- 0:11:22 - just screwing around
- 0:14:08 - index.html
- 0:18:14 - React is just a single file
- 0:18:43 - TODO: what else do we have in here
- 0:19:11 - MyApp
- 0:22:33 - On Framework Tutorials
- 0:23:52 - babel
- 0:27:52 - installing babel
- 0:28:48 - somebody left the stream
- 0:32:17 - babel cli
- 0:35:27 - babel config
- 0:40:00 - Idealogical difference between me and webdevs
- 0:42:20 - babel plugins
- 0:45:11 - am I trolling
- 0:47:15 - Discovering react-dom
- 0:50:55 - Creating React DOM Root
- 0:52:07 - This is React, right?
- 0:53:12 - First React Message on the Screen
- 0:53:27 - Do we really need babel?
- 0:53:41 - Button
- 0:54:14 - I think React devs just like to cry
- 0:54:46 - Handling the click
- 0:56:06 - Why do you need React exactly?
- 0:56:51 - My own Framework
- 0:58:18 - babel doesn't even check basic things
- 0:59:10 - Did I master React?
- 1:00:31 - Use grecha.js
- 1:02:25 - Can grecha.js do counters?
- 1:03:20 - Adding support for counters to grecha.js
- 1:13:25 - Dabbing on the haters
- 1:14:05 - Fixing animation
- 1:15:25 - Is this a Reactive App that just uses Global Variables???!!!!
- 1:16:04 - STOP MOVING GOALPOSTS
- 1:16:51 - Committing
- 1:18:25 - Outro
References:
- Tsoding - grecha.js - github.com/tsoding/grecha.js

Пікірлер: 992
@east_wood
@east_wood 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
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 5 ай бұрын
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 5 ай бұрын
So what are doing now after front end ?
@austindayton-ogle8695
@austindayton-ogle8695 5 ай бұрын
​@eazypeazy8559 yeah it's more like learning top-sideways
@ryanleemartin7758
@ryanleemartin7758 5 ай бұрын
React: "added 1459 packages". Tsoding: ..... React: "Happy Hacking!" Tsoding: "What the Fck just happened?" Love this guy!
@DamjanDimitrioski
@DamjanDimitrioski 6 ай бұрын
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 6 ай бұрын
and add a bitt of react native on top and we have a delicious hot steaming pile of shit!
@inrmh
@inrmh 6 ай бұрын
😂😂😂
@bendertherobot910
@bendertherobot910 6 ай бұрын
Hahahaha! I really hate Gradle!
@kristofs8893
@kristofs8893 6 ай бұрын
I was gonna comment about Android. He needs to see that 😂😂😂.
@Microphunktv-jb3kj
@Microphunktv-jb3kj 6 ай бұрын
@@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 , ; )
@ade5324
@ade5324 6 ай бұрын
Unironically this is the best react tutorial i've seen
@vnshngpnt
@vnshngpnt 6 ай бұрын
Dan Abramov could never!
@ukrmapper
@ukrmapper 6 күн бұрын
Exactly
@m.Gladislaw
@m.Gladislaw 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
How does that work? Is this some sort of vague insult 😂@@FullGardenStudent
@m.Gladislaw
@m.Gladislaw 6 ай бұрын
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
@catsouls4714
@catsouls4714 6 ай бұрын
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 2 ай бұрын
No, it was a building.
@8followsonik
@8followsonik Ай бұрын
the best commentary i've ever seen on youtube for 26 years.. 💜
@fennecbesixdouze1794
@fennecbesixdouze1794 Ай бұрын
@@Adiounys No, it was a metropolis, in which they built a building, called the Tower of Babel.
@asdqwe4427
@asdqwe4427 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
​@@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.
@ryanshea5221
@ryanshea5221 6 ай бұрын
These people who make react their life are so in denial of what the actual experience is like
@grenadier4702
@grenadier4702 6 ай бұрын
@@ryanshea5221 Actual experience is what you see on React jobs, and nobody uses React like he did
@juggles5474
@juggles5474 6 ай бұрын
@@ryanshea5221yeah react is bullshit 😂
@achiyazigi3869
@achiyazigi3869 6 ай бұрын
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 5 ай бұрын
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 3 ай бұрын
​@@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 2 ай бұрын
​@@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.
@cold_ultra
@cold_ultra 6 ай бұрын
Oh no, run! twitter JS devs are coming for your soul!
@benjie_wh
@benjie_wh 6 ай бұрын
Dude, run away, go back to C, it's much safer there, this is a genuine advice from a react dev
@eboubaker3722
@eboubaker3722 6 ай бұрын
bro react is not Israel there is nothing to be worried about, let him learn.
@rockytom5889
@rockytom5889 6 ай бұрын
​@@eboubaker3722 You're right. It's like Satan, it's way smarter and worse 😂.
@JawsoneJason
@JawsoneJason 6 ай бұрын
React was a mistake
@oleksiistri8429
@oleksiistri8429 6 ай бұрын
I hope HTMX will remove that react-abomination from existence
@bravefastrabbit770
@bravefastrabbit770 6 ай бұрын
@@rockytom5889B-but Israhell is run by satan(ic k!kes)
@wildwestrom
@wildwestrom 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
It is weird that it's a separate package tho
@jh0ker
@jh0ker 6 ай бұрын
@@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 6 ай бұрын
@@SpeedingFlare Theo made a video about different React frontends that shows some cool applications of this kzfaq.info/get/bejne/j5dipqqmnZPVdnk.html
@HatsuSixty
@HatsuSixty 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
@@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 6 ай бұрын
he's literally using React. Also 1:00:07 welcome to the desert of real world Mr Anderson
@JawsoneJason
@JawsoneJason 6 ай бұрын
​@@monad_tcpyeah he literally just recreated react lol
@BeefIngot
@BeefIngot 6 ай бұрын
@@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 6 ай бұрын
@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 6 ай бұрын
And webshitters will cope that downloading 1.5K packages to a "learn yourmom" application is suitable.
@eetumaenpaa594
@eetumaenpaa594 6 ай бұрын
@@bertacchius No one says that and no one uses create-react-app for that exact reason.
@kumerolier11111
@kumerolier11111 6 ай бұрын
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
@_gut11
@_gut11 6 ай бұрын
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 6 ай бұрын
Amen.
@emmanuelandre2807
@emmanuelandre2807 6 ай бұрын
He should be taken with a bit of sarcasm gut
@johanrg70
@johanrg70 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
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.
@shahzadakhtar1186
@shahzadakhtar1186 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
@@xcy7 dude....
@xcy7
@xcy7 6 ай бұрын
@@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 6 ай бұрын
​@@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 6 ай бұрын
​@@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.
@thyagobrod
@thyagobrod 3 ай бұрын
As a backend, this is the best React tutorial I've ever seen.
@Endrit719
@Endrit719 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
@@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
@xking21
@xking21 6 ай бұрын
​@@wsak5991 Building things from the ground up happens in all disciplines? what is your actual argument lmao.
@amilkyboi
@amilkyboi 6 ай бұрын
@@wsak5991 Until you build something from the ground up, you do not fully understand how it works. This is universal.
@macchiato_1881
@macchiato_1881 6 ай бұрын
@@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.
@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.
@ev3rybodygets177
@ev3rybodygets177 6 ай бұрын
dude asked one question and cursed Tsoding for the next hour... Thats true evil
@sergeyrogatin9682
@sergeyrogatin9682 6 ай бұрын
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 6 ай бұрын
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!
@cold_ultra
@cold_ultra 6 ай бұрын
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 6 ай бұрын
@@cold_ultra 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 6 ай бұрын
@@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
@dardosordi
@dardosordi 5 ай бұрын
** 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)
@cold_ultra
@cold_ultra 6 ай бұрын
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.
@cold_ultra
@cold_ultra 6 ай бұрын
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 6 ай бұрын
It also make it simpler for react native right? Dividing such things is useful
@lame_lexem
@lame_lexem 6 ай бұрын
​@@cold_ultraso 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 6 ай бұрын
​​@@cold_ultra dude the code you wrote is already more verbose and complicated than react with jsx
@itsmeagain1415
@itsmeagain1415 6 ай бұрын
@@wsak5991verbose ok but compliwhat????
@user-ke7yn6ru5e
@user-ke7yn6ru5e 6 ай бұрын
If all web devs understood the fundamentals of the tools they use, they would definitely create better software for web.
@nefrace
@nefrace 6 ай бұрын
I think if all web devs understood the fundamentals, React wouldn't exist in the first place
@ivanjermakov
@ivanjermakov 6 ай бұрын
@@nefrace core principle of React was good: declarative UI and state. But a lot of stuff went south since then...
@MrLoquito12345
@MrLoquito12345 6 ай бұрын
If webdevs understood the fundamentals, they wouldn't be doing webdev
@nefrace
@nefrace 6 ай бұрын
@@MrLoquito12345 well... Someone need to make websites ¯⁠\⁠_⁠(⁠ツ⁠)⁠_⁠/⁠¯ Not like it's happening now but doesn't matter
@MurderByProxy
@MurderByProxy 6 ай бұрын
@@MrLoquito12345 hahahhaa indeed
@xxgunnery
@xxgunnery 6 ай бұрын
This is awesome thank you for diving into what is going on behind the scenes!
@mindasb
@mindasb 6 ай бұрын
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.
@hazeion
@hazeion 6 ай бұрын
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 6 ай бұрын
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 2 ай бұрын
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.
@adrianzinko7133
@adrianzinko7133 6 ай бұрын
Oh man, you're such a brilliant person. I have a lot of joy watching you! Keep up with the web stuff 💪
@marcelokj954
@marcelokj954 5 ай бұрын
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 2 ай бұрын
majority is for other thing that you need like dev dependencies to setup hot reload e etc, styling dependencies, or things like TS
@dimeterious_fox
@dimeterious_fox 6 ай бұрын
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.
@trampoline60
@trampoline60 3 ай бұрын
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.
@MrLT-vf3wr
@MrLT-vf3wr 6 ай бұрын
I loved this video so much! From someone who was introduced to computers in 1983 via a Commodore Vic-20, a BASIC language syntax book and Bruce Smith's Machine code book, I had no choice but to "learn" by understanding low-level concepts in order to develop high level abstractions. To me it seems frontend developers are more likely to find the inner workings boring whereas a backend engineer thrives on the knowledge of how everything is working down to it's basic cycles. Great content. Thank you very much.
@sirdavidcao
@sirdavidcao 6 ай бұрын
I’ve been watching this guy for a while and have been just learning react recently. This man is crazy haha 😂
@gameofpj3286
@gameofpj3286 6 ай бұрын
I really love seeing him dig into things like this, because I don't have the understanding to do it myself yet
@MasterGxt
@MasterGxt 5 ай бұрын
Same here.
@RaZoRxan
@RaZoRxan 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
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 !
@KiLVaiDeN
@KiLVaiDeN 5 ай бұрын
You are the man ! Adding in real time support for counter, this was amazing, gj 😎
@lulube11e111
@lulube11e111 6 ай бұрын
This stream fullfiled my every expetation.
@LucasFerronato
@LucasFerronato 6 ай бұрын
Man! i'm senior dev - React mainly. And I need to say, I love this video!! especially your criticisms
@eetumaenpaa594
@eetumaenpaa594 6 ай бұрын
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.
@afonsorafael2728
@afonsorafael2728 6 ай бұрын
I am really glad you did this video... every time someone asks me what I think about react I am going to sent them the link to this video
@clodomirvianna6350
@clodomirvianna6350 5 ай бұрын
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 5 ай бұрын
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 4 ай бұрын
There are no tutorials because literally no one knows how it works. Including the thousands of women and indians at facebook who wrote it.
@MonkeeSage
@MonkeeSage 6 ай бұрын
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.
@user-lh7ed6ex4o
@user-lh7ed6ex4o 6 ай бұрын
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 5 ай бұрын
Well put.
@sharkpyro93
@sharkpyro93 4 ай бұрын
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 3 ай бұрын
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.
@offroaders123
@offroaders123 6 ай бұрын
This video is excellent haha. I am only just now trying to get into React, this is exactly my issue that I've had with learning it up until now. I don't like how things just magically work.
@mateusvasconcelos1833
@mateusvasconcelos1833 5 ай бұрын
Recently I trying to get this conception asking to myself: How this works? And dude, programming turns so much interesting. I love it how do you dissected the react and how this works behind. I use react for like 2~3 years and I never get this attitude. I really didn't understand why the people was hating, for me is so much interesting to see. Great video!
@leonardoquiroga6850
@leonardoquiroga6850 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
@@b_delta9725 I'm interested in looking into doing some freelance work, where do you find jobs for that?
@beefbox
@beefbox 6 ай бұрын
Rust jobs? Where? There are a lot of people learning react because there are a lot of jobs.
@ivanjermakov
@ivanjermakov 6 ай бұрын
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 6 ай бұрын
@@sub-harmonik that's the impression I had too, it seems tightly coupled
@maryjonzezulon3092
@maryjonzezulon3092 6 ай бұрын
I would never imagine FB dev will create something better (framework) than facebook shite ;)
@phoneywheeze9959
@phoneywheeze9959 5 ай бұрын
i think it thinks that onclick could just be another HTML attribute and not the actual button handler
@dalunzhang96
@dalunzhang96 6 ай бұрын
I an loving the way you exploring the new technology, new framework. This is amazing. I learned a lot
@hovhadovah
@hovhadovah 6 ай бұрын
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.
@pwbandwidth
@pwbandwidth 6 ай бұрын
this video made me want to develop a deeper understanding of my tools when doing web development, thank you.
@mehdi7586
@mehdi7586 6 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
Why ready docs when you could be just shіtting on tech to farm views?
@aakarshanraj1176
@aakarshanraj1176 5 ай бұрын
link to tutorial?
@leon_meka
@leon_meka 2 ай бұрын
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 6 ай бұрын
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 6 ай бұрын
"easier to debug" has to be the greatest react joke ever.
@sinasalahshour
@sinasalahshour 5 ай бұрын
@@norliegh yeah i can't imagine debugging a larg scale frontend project without a particular framework or an isolated structure
@lucasayabe
@lucasayabe 2 ай бұрын
@@norliegh well, its easier than debugging imperative programming with global mutable variables
@keenoogodlike
@keenoogodlike 6 ай бұрын
The best React feature is that is can produce money.
@lrdass
@lrdass 6 ай бұрын
I struggled a lot learning React because of this "top-down" approach. After read `build-your-own-react` from Rodrigo Pombo I've finnally understood. Even those quirkies of separated packages react, react-dom. But I've loved every single second of this video and I couldn't agree more with the current state of react. And it looks like it is going even deeper with RSC.
@decb.7959
@decb.7959 5 ай бұрын
1. I've never touched web development before, but this video inspired me to try it out! After a couple of days I feel like I have a decent grasp on the basics of npm and a few frameworks. I basically worked my way from vanilla js with preact (no npm) up to a "proper" framework project with jsx and a bundler. 2. Solidjs seems like a more polished / fully-featured (although also more abstracted) version of the grecha.js modifications shown in this video. grecha.js could also be pretty easily modified to support jsx. 3. By far the best tool I found for doing js frameworks the "intended" way is esbuild, it has 0 dependencies, handles typescript and jsx transpilation, and it's written in go rather than js. 4. Although I don't love every part of this video, it was super helpful at somewhat demystifying js frameworks. The grecha.js counter issue also does a good job at demonstrating why people use these frameworks in the first place.
@kokizzu
@kokizzu 4 ай бұрын
Svelte
@bkatsevych
@bkatsevych 6 ай бұрын
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
@leekuncoins6347
@leekuncoins6347 6 ай бұрын
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 6 ай бұрын
Macro.... Expansion....
@chiperror2441
@chiperror2441 6 ай бұрын
This is the greatest thing I've seen. I will never forget the create-react-app times with npm. It's a wild journery LOL
@XDBjoernXD
@XDBjoernXD 6 ай бұрын
I am grateful of your insight into react. We all should learn more from each other, rather than judging. :)
@giorgos-4515
@giorgos-4515 6 ай бұрын
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 6 ай бұрын
1:16:20 Destroy goalposts for 10 years straight and you'll have 1k NPM imports too.
@bahgah
@bahgah 5 ай бұрын
This is the best react vid I’ve seen and I’ve seen lots of vids trying to learn about how react works in the past 2 years.
@RichardSmithers
@RichardSmithers 6 ай бұрын
I agree with you wanting to understand exactly what is happening. Using the frameworks and just accepting what 'magic' happens is fine to just start banging out code, but it is nice to understand exactly how it all works. That is what I don't like about most frameworks - so much is hidden, and there are so many dependancies, that you never really know what is happening, just what is supposed to happen. And when it breaks, it can be that much more difficult to debug.
@arryaxx263
@arryaxx263 6 ай бұрын
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.
@ar_xiv
@ar_xiv 6 ай бұрын
The video title made me laugh out loud thanks it’s too real web dev is so ruined
@andrijaoreskovic386
@andrijaoreskovic386 6 ай бұрын
I also use react at work and I really enjoyed this video, keep it going!
@szymusu
@szymusu 5 ай бұрын
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.
@nefrace
@nefrace 6 ай бұрын
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 6 ай бұрын
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 5 ай бұрын
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.
@Muskar2
@Muskar2 6 ай бұрын
This is exactly the kind of tutorial I would have wanted back when my former workplace told me to learn React
@bardhokajvazi2726
@bardhokajvazi2726 3 ай бұрын
I like the way you try to understand how things works. Web devs try to implicitly learn a thing without knowing how really react works the hard way. You can learn so much more by doing this way. I see few video explaining how it works but i see always the same content on youtube about how to use hooks, how can you use components, state management, bla bla bla. Some poeple will hate me but i’ll say it, i hate React but i like to use it because it gets the job done when you try to build something modular and quickly. If i got more time on deadlines to build something, i will go with plain js because you have more control on it. Btw props to you for not adding ads to your video.
@im-anomalies
@im-anomalies 6 ай бұрын
I'm a react dev and I love this video I was hoping that you was going to see how useState, useEffect and so on works.. but anyway it help me better understand the jsx things
@404-undefined9
@404-undefined9 6 ай бұрын
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 6 ай бұрын
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.
@MrChester114
@MrChester114 6 ай бұрын
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 6 ай бұрын
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.
@mooncorizer290
@mooncorizer290 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
@forinda
@forinda 6 ай бұрын
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.
@CertifiedDynamite
@CertifiedDynamite 6 ай бұрын
3:37 How to install about 1.3M LOC worth of dependencies to render Hello World in the browser window!
@evergreen-
@evergreen- 6 ай бұрын
What a time to be alive!
@lhpl
@lhpl 6 ай бұрын
Nice react-reaction. Frequent F-word usage was what I would expect. I have been tinkering with Internet stuff since before WWW, the first webserver I set up was the original CERN httpd, and I've read the standards RFCs since HTTP draft (version 0.9), which was really just a slight extension of what people were already doing ad hoc with various fingerd implementations, IIRC. (And finger/fingerd is probably the classic TCP/IP programming equivalent of "Hello World".) The whole WWW weirdness has since evolved into what I can only describe as complete insanity. Arguably this is just a corrollary of the more general statement about IT in general, of course. With the hyping of Generative LM "AI", and whatever other forms of socalled "AI" shAIte people are developing, I foresee that we soon will learn what happens when machine learning models are fed machine generated input in large quantities. It will cause feed back loops that just have to go completely bananas - but people will at that point believe anything. News at 11: Breaking - End of the world as we know it. The complete downfall of civilisation winthin the next 8 years.
@Trucidare
@Trucidare 6 ай бұрын
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.
@axelandru9346
@axelandru9346 2 ай бұрын
You are my hope during my journey. The best development channel in KZfaq. No doubt about it !
@JohnPywtorak
@JohnPywtorak 6 ай бұрын
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.
@bbq1423
@bbq1423 6 ай бұрын
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 6 ай бұрын
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
@tanozori
@tanozori 6 ай бұрын
I definitely like your approach to understand how things really work, I'm watching the entire video
@Lovefun558
@Lovefun558 6 ай бұрын
This was great, break things down to first principles and then reason from there perfectly showcased.
@Supershreeko
@Supershreeko 6 ай бұрын
I would like to make a request: add the transformer architecture to nn.h so you can use georgi gerganov's gguf files. I think this would be very fun. thank you for the best videos 🙏
@janhorak5363
@janhorak5363 6 ай бұрын
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.
@nahuellescano
@nahuellescano 6 ай бұрын
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
@FilthyAnimal893
@FilthyAnimal893 6 ай бұрын
It might make sense to start from the top here just once, just to know what the point of everything is, so you.can gain some insight before digging into all the lower level functionality. like driving a car even once before learning mechanics. not necessary, but probably helpful.
@JohnSmith-ni4cs
@JohnSmith-ni4cs 6 ай бұрын
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 5 ай бұрын
Thank you kind sir.
@DEVDerr
@DEVDerr 6 ай бұрын
"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
@france976
@france976 5 ай бұрын
Your mouse wheel is savage! 😅
@user-nf8zb4qp6j
@user-nf8zb4qp6j 6 ай бұрын
Best react tutorial starter on the whole youtube unironically
@whybother1478
@whybother1478 5 ай бұрын
I too dislike React, but bro you were seriously malding for 1 hour straight and scrolling through hundreds of pages without actually reading any word of explanation saying wtf over and over again. This was not "learning" from the ground up, you've gone straight into foreign technologies with the expectation that it's all done the right (a.k.a. your) way. Humility isn't your strong side, is it? A quick 5-minute look at the React documentation gave me all the information you were looking for all this time, but you dismissed the whole docs based on the idea of the quick start "making you dumb". Wake up megalomaniac, not everyone is a senior dev, not everybody cares about the insides, a quick start/first tutorial is written for a broad variety of people. I also doubt learning React.createElement makes you a React master lmao
@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...
@gge6021
@gge6021 6 ай бұрын
i would really enjoy watching you continue grecha development ngl
@andremichelle
@andremichelle 5 ай бұрын
Thanks for that. I really needed it after one week of learning React. I felt like I am the only one totally convinced that React is not only overhyped but probably also responsible for a lot of bad code, because most coders don't even care about the 'why' and fall into every pitfall React lays down for them. And you haven't even scratched the surface of all these ludicrous hooks they sell you as great solutions for problems one can solve with a few lines plain old Vanilla JS.
@markbauermeister5449
@markbauermeister5449 6 ай бұрын
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 5 ай бұрын
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 5 ай бұрын
@@MasterGxt It's Linux. Many people compile the kernel themselves, for better performance.
@MasterGxt
@MasterGxt 5 ай бұрын
@@markbauermeister5449 You're using Gentoo aren't you ?
@Endrit719
@Endrit719 6 ай бұрын
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 5 ай бұрын
And in fact the React pattern can be used for far more, like CLI applications.
@secretzpt176
@secretzpt176 3 ай бұрын
@@andrew.lp.mcneill Out of curiosity, what are the use cases for react in CLI applications? Or was that just a throwaway example?
@Milky____
@Milky____ 5 ай бұрын
Weird ppl these days, I enjoy getting into the nitty gritty of things it's how I started learning how to code. Love the video
@chriswinslow
@chriswinslow 4 ай бұрын
I think one of the reasons why such overly bloated web frameworks/libraries exists is to allow web devs to excessively charge clients for unnecessarily complex setups and maintenance of sites. But respect for wanting to get under the hood of react, I don’t know why people were mad at him for that.
@Endrit719
@Endrit719 6 ай бұрын
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 6 ай бұрын
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- 6 ай бұрын
@@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 2 ай бұрын
@@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
I regret doing this...
1:20:07
Tsoding Daily
Рет қаралды 60 М.
When Your Game Is Bad But Your Optimisation Is Genius
8:52
Vercidium
Рет қаралды 1,3 МЛН
Normal vs Smokers !! 😱😱😱
00:12
Tibo InShape
Рет қаралды 92 МЛН
FOOTBALL WITH PLAY BUTTONS ▶️ #roadto100m
00:29
Celine Dept
Рет қаралды 33 МЛН
Hash Table in C
2:11:31
Tsoding Daily
Рет қаралды 55 М.
Writing a Compiler and Interpreter in Rust - Part 1
39:39
Will Ada Replace C/C++?
44:57
Tsoding
Рет қаралды 72 М.
So You Think You Know Git - FOSDEM 2024
47:00
GitButler
Рет қаралды 930 М.
Is John Carmack Right about UI?!
1:52:02
Tsoding Daily
Рет қаралды 30 М.
JavaScript Framework Tier List
40:57
Theo - t3․gg
Рет қаралды 278 М.
What does larger scale software development look like?
24:15
Web Dev Cody
Рет қаралды 1,2 МЛН
ChatGPT Can Now Talk Like a Human [Latest Updates]
22:21
ColdFusion
Рет қаралды 332 М.
Async Engine in C
3:12:16
Tsoding Daily
Рет қаралды 33 М.
Fiber kablo
0:15
Elektrik-Elektronik
Рет қаралды 6 МЛН
Vortex Cannon vs Drone
20:44
Mark Rober
Рет қаралды 14 МЛН
НЕ ПОКУПАЙ iPad Pro
13:46
itpedia
Рет қаралды 382 М.