I tried React and it Ruined My Life

have you ever tried to learn react I think I tried uh because I was thinking maybe I need to take like a job for react like I used to do like um what was it called freelancing and I was considering taking like a maybe frontend react job but they didn't know react and I want to learn it and I open it up and I just like I don't want to learn this and I just decided not to maybe the time has come to learn react I kind of know how it works though I kind of know how it works so maybe we should learn react so let's actually go ahead and learn react um so learn um how to create so yeah okay so you create leaton you create leaton uh all right and then you use leaton in your application okay so and uh cool so that doesn't tell you how to start your application this is very bad tutorial by the way right uh so maybe the we have to start with the installation right how to start a new react project so um so nextjs but I don't want to do nextjs I know that nextjs is a thing on top of the uh of the stuff uh let's go ahead and prob uh make deer react uh yeah let's do react um there we go can I just do npm in nit right so we're going to just do but I mean I already call it react so I probably have to do react hello uh world right uh npm init right so let's just initialize this entire uh okay react hello world uh version one uh I don't want to do anything in here okay test command get repository keywords alter MIT and yes there you go so npm uh right install react can you just install react maybe I should have actually saved this entire thing let's do uh save right so that will add that to uh you know package Json right so we have a package Jason thingy so there you go uh so do we have react in here so and maybe in here we also have not modules so there is a react uh and everything in here I have no idea how you're supposed to use that you're supposed to I guess you're supposed to just include this index thingy in there right to use react and stuff like that so you probably have to like bundle this entire right so you probably have to bundle this entire so I didn't think uh I don't think how it works so yes yes yes describing the ey thinking in react so maybe a reference I want an oldfashioned react right I want an old fashion react without this next GS like I don't don't really want that uh react H world so it's actually search for that uh create a react Hello World app so for people who are asking like how to learn a new thing you just around you just around and then you find out uh then you find out so you have like a create react app hello world maybe this is what should have done okay so let's actually try to do that then so it will probably create a new folder but we'll see so uh need to install the F in package okay so yes there we go we probably need to I probably need to change the title by the way uh like learning react to get job at Google so that's basically what I'm doing because Google uses react right so Google uses react I think uh I think it does so it's what is it downloading this like um why does it take so much time is downloading the entire universe holy so the the snake in the loading is agonizing that's how bad it is it's agonizing typescript it's downloading typescript why why the is downloading at typ script like why do like what the just happened what the is this holy is this normal for react people say yes okay um okay I'm going to bring you here so because this is hilarious um okay so we're going to go inside of hello world uh let's take a look at the size of the okay um so I I think I lost the instructions okay so we can do npm start uh and and npm run build npn run eject okay um so let me take a look so we have SRC uh so I I didn't want to do that I want to actually take a look at JS uh and there we go finally something familiar finally I can see something familiar um report web vitals okaya so and then you have an app right so basically have an app and I suppose app is uh located somewhere here so here is app so we have a header uh image logo edit code ISC and save to reload uh learn react and let's replace it uh with your mom right so we want to do npm start right what was that start right so I remember there was start so development server right so we want to do start um yes yesu yesu and uh did it already start uh it's it's probably trying to start and it opens my browser uh right so we're trying to open the Local Host one of the dependencies is importing the Babel import blah blah blah it's not even loading bro uh okay um learn your yay we did it we did it so yeah so that's basically react isn't that a pogers isn't that a warus I think it's pretty freaking pogers um so let me see in terms of like a dependencies so this is basically everything that we need uh when I do so just do react testing libraries why this is part of the testing like this is so weird why it is not using like a ficial react is it some did they get hacked or something I think I got hacked so react testing so oh it's like the latest one right isn't it uh I don't understand mate I don't understand this is so so bizarre so what's interesting is that uh react is just a library right right so it's just Li we can try to take a look inside and like um uh this thing and see how it all works it's supposed to I think uh just yeah so it's a single bundle right so it's a simply single bundle you know what I like to have can I have react like you know just just like a regular bundle that I can put in script myself right and use that would have been cool I think I think that would have been cool and this is roughly what I was doing in here I suppose I think right so because I just did package Json right uh and one of the dependencies here is react right so this is just react um but is that the right react because I want a s more simple example so and is that a correct react because it's who's this it's a Facebook react repository but the author that submitted it in here is completely bogus like who the is that gnof is that normal in npm uh this is real react is this really real react who's gnov though right so yeah it's it's so weird so did I really install the correct thing uh so popularity uh because this one is a correct match I it's so scary to use this kind of thing right so oh you you can actually um yes you installed the correct thing somebody says uh maybe and you never know it's it's so bizarre how you like kind of never know uh all right because if you take a look at R me is a japt for creating using user interfaces um and that's probably why I decided not not to learn react because that I guess right that so I'm not really sure and maybe I got hacked by installing all of these modules in here so I heard that there's a huge problem with like you know supply chain attacks in npm so yeah mhm lose and and and F whatever the that is so what is that though F and lose selective process environment replacer using JS tokens okay so that's very interesting and JS tokens o this one is interesting so JS tokens rejects that tokenizes JavaScript so this is probably what they use for the um for the GSX maybe right so this is probably what to use for jsx right so there's also CJs uh react de okay so there's different bundles here I suppose GSX runtime development okay so this one is interesting you can't really see what I'm doing here but yeah um so yeah so this is the runtime and it's like th it's not even that big of a library apparently so CJs uh so there's a GSX run time so the what is index JS uh uhhuh module expert it's I depending on the production okay so this one is kind of interesting what if I run one of these things so node modules uh react index JS so it didn't do anything at all right it didn't do anything at all maybe because you're not supposed to run it from the nodejs maybe from the browser reacted dutes for some reason pushing pre-exist in Frameworks that use react rather than maintain a basic blank create thing yeah that's what I noticed right so I remember react being a very simple library that people would just use some time ago uh right so and now it turned into this really really weird Abomination uh so it's just like what the is wrong with react uh okay so there is like a UMD thingy uhhuh so there pretty cool uh and the question is like there is a GSX GSX runtime so maybe one of the things we can do is we can do not uhu react GSX runtime JS can I use this thing I can't even use it yeah because it uses like a run time or something like that uh so yeah that like I would like to understand this thing on a very basic level on how to just like use it right so maybe we should start by creating like an index HTML right so let's create an index HTML uh I can't really make it bigger so let me maybe then start emx um so where am I it's a react hello world prob react hello world world so index HTML we're going to start with that HTML uh head right head because I really want to start from from the ground up you know what I'm talking about uh I want to start with the ground up uh so this is a head you have to do that in the title right so this is going to be title M so this is the title and this is going to be the body uh and uh in here in here I suppose I just want to put I want to just refer to this script uh right so but what kind of scripts can we refer to so depending so this is stuff from nodejs this is stuff from njs so we probably don't want that um so what we want is a GSX uhhuh so react development react production so probably want this thing right I may try to just run that in a browser just to see how it's going to uh react right so to speak uh all right so so this is going to be development and let's see what's going to happen uh I wonder if it's going to work at all so you see it's it's referring to the process right it's referring to the process so so it needs no GS um so and the process is not really a thing but like what's the thing that I have to put in the browser right so what's the thing I have to put in the browser okay so this is probably the thing I have to put in the browser right there's no process in here yeah okay so that's the thing I have to put in the browser all right um so but I can start with the development and just see how it's going to fail within the browser right so how is it going to fail within the browser uh and by the way maybe theoretically I can even do it like that maybe theoretically so let's take a look at uh the console and how miserably it fails okay so as you can see process is not defined because it wants to be run from within node right it wants to be run from within node and this is not a thing that we're going to have uh right so let's actually do production then right so this is the production uh right so do we have anything in consoler um okay so it says that there is no such thing so okay uh node modules um react uh CGS react prod production mean okay that makes sense um expert is not defined okay so that means you can't really run just that uh and one of the things you probably can run is UMD modules so I suppose UMD modules you can just like run them in here uh right so do you have process in yeah I think that's what we need in here I think that's what we need to try to include in the index HTML and so that's going to be the thing uhhuh right so this is going to be UMD I remember that UMD is sort of like a format of the of the modules right it's sort of like a format of the modules and it would be nice to do development right it would be nice to do development because that way maybe we have some sort of like perks and everything thing it loaded up it just loaded up as you can see without any problems right so do we have a re okay so react is just a single file did you guys know that it's it's a single file that you can just include here and people say that it's a hard mode react where the is it hard mode it's a single file like okay so uh all right so what else do we have in here so we have profiling and stuff like that can I start writing react uh so uh Yu Yu Yu react [Music] uhuh uh so for example what if I want to have my own application so the question would be how do I exactly start this application uh so here I'm going to have a script all right so here I have a script so this is just that and I have a feeling that it's not going to work the way I expect it to work right so because it's using jsx uh right so it's using jsx uh let's not have any button in here um but maybe just because I included react in here maybe it is going to try to preprocess whatever it has in scripts in here to have GSX and stuff like that so does it refer to GSX anywhere in here okay did you accident exp GSX liter instead of component uh consider using GSX uh right it's referring something to jsx but not too much it not too much okay so maybe one of the things we can have in here so there's a jsx run time development uh but all of that is sort of like a minified uh right so is there's also experts and stuff like that but none of that is you MD uh none of that is UMD uh so GSX run time so it's using this thing um so can I just use this thing just X different time so this is just react this is not what I want just that different time I want to try to run node jsx runtime JS uh it's literally doing nothing but what if I try to give it something what if I try to give it something so what if we had this thing in my app jsx like so um right but let's actually get rid of this X for default because it's sort of like a fancy JavaScript that requires some sort of a transpiler uh I'm going to try to assume that maybe I can just run GSX R time like this right so no GS this is like a wild uh assumption super wild assumption but maybe it's going to work uh GSX runtime and my app GSX and it didn't really do anything so does anybody know how exactly react uh transpiles GSX so people suggesting to look at the create element we can try to do that right so create element uh right so and it accepts type but there's not that explanation that much explanation with Babel B is just a additional thing on top of react so I actually doubt that it works like this GSX is pre process before the code hits the browser this is what I figured this is what I figured um so uh react GSX so the worst part about this modern Frameworks and especially tutorials they do not explain you how this Works they literally don't explain you they just give you okay run this bunch of commands in here and don't think about it look you have a button on the screen don't think about it you're too dumb for that don't think about that uh right so and it's kind of feels offensive honestly right so the way these tutorials explain how this thing work is really offensive like I mean like you're treating me like an idiot like explain me how this thing actually works like none of that just explain me how and they're not going to explain you because you're too dumb dummy dum dum like come on so dumb it's like right it's like straight up in like insulting uh why GSX and um okay uh but how do I process that uh okay so they say that you have to do that with Babel but I mean Babel is a separate project so Babel is using using something right so Babel is using something but what is it using um is it's running something uh GSX transpiler uh GSX transpiler is there something like transpiler that is separate its own thing um so it's part of the Babel but I thought Babel has nothing to do with the react and jsx is just something that it plugs in into Babel right it's just something that plugs into the the question what plugs into that what Babel uses to do the GSX transpiler because I know uh right it's a separate thing and it's like it's part of the infrastructure so what is it using what is it using so that's the real question in here right it's just a JavaScript compiler but it's using something uh you know what I'm talking about I know that a lot of people are so caught up in the level of instructions they don't see the the difference but I'm looking for the for the actual answer so for example here's the Babel okay so GSX it's probably like a Babel uh all right so let talk about B compil jsx down to uh okay mhh so down to create elements yeah I see what's going on in here okay B GSX uh transform react GSX yes so how does it do that who it calls to who does it call to so that's the the real question it's probably calling to somebody it's calling to it must be calling to somebody who are you calling to VJs but why is it part of the vuejs isn't isn't view a separate framework or something what the is going on web people what people are you okay I'm it's a plin for bab it's just like oh my God like how are you how you how am I supposed to take this seriously like how you calling yourself real software developers with this kind of like I don't understand uh how is this real like this is so bad okay so show me does it refer to GSX okay so it does refer to GSX and um there is this plugin but show me the the source code GSX closing element so it's literally part okay okay so this is interesting so this is literally part of of Babel right so it's literally part of Babel and it's okay that is already something interesting closing [Music] element huh generators wait okay so this is a generator and is that the whole gener well I mean it's just generators there should be some sort of process I suppose so there's a printer it's a separate package B generator um holy plugin syntax GSX okay can I just install Babel then right so it's all instead of Babel right it's all inside of babo uh all right so can I just do npm npm install B and I hope I'm installing the right thing okay so it's installed something uh I should have actually you know saved uh right so I should have actually saved it in here uh all right so there's a bab in here and uh it's probably doesn't have right so there is a this kind of thing uh right there move to B core so it's kind of uh interesting I want to be able to just run it somebody left the stream somebody left the stream so people don't understand that I'm not trying to achieve the end result right I'm trying to understand how mechanically uh this entire thing work right so it's kind of interesting I suppose people expect me to just follow the tutorial and get satisfied how I see the the logo of react or something like that but I already did that it was horrible it was just the worst tutorial I've ever seen that doesn't explain anything about react it literally doesn't explain anything about react so the closer I got to understanding is by just including UMD module in here uh and doing like react create uh like element or something like that so this is the closest to understanding what the is going on I got and this is actually pretty good right so now I have this uh you know understanding go to dopamine kick from CRE the button yeah most react tutorials are dude trust me LM yeah exactly and what's funny is that people get frustrated when they just don't buy into this they get really frustrated and leave the stream but maybe that's a good thing maybe we don't want this kind of people in here right here I want to understand right so and if we have GSX which is preprocessed which is preprocessed by Babel right so there should be a way to call that Babel like manually mechanically I know that you're supposed to have some sort of a bunder some sort of a magical thing that you just like call one thing it downloads thousand of dependencies and blah blah blah you got a damine heat I understand that I understand that that you all web developers are dopamine junkies like that I understand that but I like to understand how this thing work like mechanically so you know what I what I'm talking about the whole point is making developers able to create nice websites without need to know all of this you're getting it wrong say like how are we getting like proud of not understanding things like I am wrong listen listen they call me wrong for trying to understand things are they being ironic I hope you're being ironic right so they are claiming I am wrong for trying to understand thing where this is the state we're currently in it has to be like it must be a joke right so it it must you're joking right you you're just trolling you you're being ironic like it it is a joke right so it is a joke I I'm wrong for trying to to understand things it's not like the the whole thing is bad it's bad on purpose and if you do not accept that you are the one who's wrong all right anyway so uh we're going to ignore those people right so uh let me let me see so uh how do I do that Babel GSX right so show me how to do that so this is a react transform so maybe this is the thing I have to install uh right so they don't really explain you how to install this thing though right so they just show you this and that's about it um right so maybe GSX syntax plugin compiler what is bable um right so there's a Babel stand alone right so there's a bable stand alone uh we not use Standalone when you're using production you should normally not use Standalone uh oh you can even use this thing like that that's pretty interesting that's pretty so there's a bable CLI uh comes with buil-in cell can be used to compile farm from com line holy this is what I wanted uh this is what I wanted I I know that I'm wrong for trying to like understand things mechanically but I mean I just want to do that uh row all right so I I forgot to save it I'm sorry uh okay so let me see what we got in here holy anyway uh so so all right so there's a Babel uhu uh so there's another one in here so here is the CLI so this is a Babel CLI so you have a bin uh and you have a Babel Okay so so that's cool uh I'm fine with all of that uh I'm fine with all of that so node modules uh b c be B so it is JS all right so compilation requires a file or Okay so let's provide you can't see sh in this Miss maybe I should actually put this kind of stuff like up there like I should put myself up there and uh now let's provide uh this thing I wonder if uh so do we have it's a my app uh okay so let me see what it is complaining about GSX currently um support for experimental syntax GSA isn't currently enabled uh all right how can I enable GSX so if you want to leave it as it is ADD uh B syntax to the plugin section uh to be enable bu all right so let's take a look uhuh so at least it is explaining how to uhhuh so this is probably what we want so it's a saved I should have actually save the B as a dependency as a as a Dev dependency right so all right okay so even though we installed this thing it still doesn't work um so that means I suppose the B should have a config remember that the B had config B config all right configure B uh okay so here's the pl plugins and stuff like that can it generate uh config um you want to compile not modules uh so this is for you all right okay so so I I was hoping that maybe it's going um oh okay you can actually put this thing in a in a package thingy uh by the way I as as far as I know I I can do all of that from the package config right so um so this is a bable but it's probably don't need this thing right and can I move this entire thing here yeah I think I think I can so and then uh I can basically do stuff like this so I'm not sure if PR presets are important so I'm going to make them uh like this and the plugins is going to be GSX right so I suppose in script uh I can do Babel so maybe maybe something like let's call it build right so let's call it essentially build and this is going to be B uh GSX and we're going to build specifically my app GSX right so and see how it's going to go so and as far as it can and uh here we're going to do run maybe we can just do build uh right command run build all right so what do we have in here so there's some problem with the Json data probably because of this thing um so unexpected string in Json at position um react hello world I forgot to put this thing in here uh it's still where do I still have okay freaking Jason I swear to God [Music] um um so can I know uh line hand what at the position [Music] 51 line n Jesus bro finally BJs is not found which is rather interesting so I would expect this thing to be so yeah that's kind of weird so I would expect it to be in sort of like in beIN because I know that oh it's just bable without GS okay so that's cool uh so I can just do it like that uh let's do it like this and all right that's cool so could not find package B Gs experted from blah blah blah blah uh all right so that's weird that's a bit weird I don't really know why um even though here's the plugin syntax GS x uh so resolve virtual so maybe I have to do npm install one more time just in case I freak know so that's that's fine so that is fine that is fine M FR so what's up with that um so it doesn't want to enable the plugin is syntax GSX okay so this is probably what we have to do uh all right so run Guild okay so that cannot find package uhhuh uh configure GSX okay so let me close this entire it's too much open things uh and and uh B jsx plugin right so didn't like I don't know why it doesn't understand that right so syntax GSX and just GSX doesn't work uh plugin transform uh GSX is that what I have to install so what's the difference between plug-in syntax GSX and plug-in transform react GS like what um that is so weird so to be fair this is not the state of things but the state of things 5 years ago yes because I want to understand that from the ground up like again guys I do understand that you just want me to follow this high level tutorial with next GS or something like that and download hundreds of dependencies I understand that but all of that is built on top of other things and I want to understand from the ground up it's it's an insane thing to do like I do understand that but that's how I operate I don't I do understand that you're not supposed to understand the but I want to like and maybe that's the fundamental sort of ideological difference between me and web developers um somehow that I'm doing that I'm wrong right like it's kind of weird maybe like I have a hypothesis why why web devs don't like what I'm doing right now I have a hypothesis because since I'm going from the ground up and actually trying to understand the things it exposes how all of that is and it makes people feel uncomfortable and that's why they have an urge to say that it's me who's wrong because we're starting from a ground up we're trying to understand and you starting to see all of that dirt of that field going up it's just like it doesn't make S we can see how crappy it all is under the hood and it makes them feel uncomfortable and they're frustrated they don't like what they see and they really want to say that oh it's you it's not that the actual technology bad like it's it's you who's wrong it's you you you this is my feeling when I see these comments in the chat am I wrong or oh my like like why am not am I not supposed to understand that you know like why am I not supposed to understand I think I'm supposed to understand that I supposed to I want to see all of that dirt and all of that field even if it makes you feel uncomfortable I want to see all of that I want to see all of your dirty secrets and if that feels you makes you feel uncomfortable I'm really sorry I'm that kind of person all right so uh okay let's actually try to uh to understand uh right even though some people don't don't like that uh Babel jsx so uh there was the documentation right so Babel jsx um why did it go with there Su let's go so uh oh right so somebody was actually suggesting pretty interesting thing uh somebody was suggesting pretty interesting thing uh so just put like a plugin thingy uh I I I think I missed it I missed the comment uh so there was like a plugin yeah yeah this one this is actually a very good one but isn't that how putting plugin in here works but but I can do that I can try to do that anyway so that's a that's actually a good idea so that might actually work uh right so that might actually work so let's get rid of this thing uh let's get rid of this thing uh and it worked okay so that's pretty cool um so what do we have in here uh so it yeah that is bizarre so it just returned that but it didn't do anything um it literally didn't do anything huh that's it's kind of funny it doesn't do anything it just understands GS syntax oh H okay so we probably want to have this transform plugin plugin then right so we want to have this transform plugging uh okay let's try to maybe install this thing uh and just save Dev uh right mhm uh and can we can we do the same thing for the for the transform react GS GSX right so there we go and uh can I just do run build all right now we're talking look at that look at freaking that so we've got this thing right so we got this thing and um yeah now we can just try to to use that we can even do the following thing chat chat chat we can try to redirect that to my app uh JS to my appjs right and we got my appjs all right so the question is how can we instantiate the react uh application right so and of course no not the single tutorial is going to tell us how to do that of course because you're not supposed to do that you're not supposed to understand right and if you're trying to understand that you're dumb you're wrong you this is frustrating I don't want to watch that you you're not supposed to some you so I do understand that right so but uh like why are you guys saying it's trolling this is not trolling this is literally how I explore new technology like I'm not even trolling like this is like my legit like reaction to react like why do you guys think I'm trolling like this is how I explore things I explore them from the ground up like what right so this is like yeah this is my genuine reaction this is how we do that without the stream if I would to to learn this kind of stuff um so yeah you have to do create root and Ro render okay so here's the question why not a single react tutorial shows you this thing right why is it always some weird sort of special tool that has thousands of dependencies and some like weird why they don't just don't show you this kind of thing like yeah I would prefer something like that so and once you understand this Basics like how it works under the hood then you can use additional tools that that help you automate all of that because I do understand that it's kind of tedious to do it like that right um so I don't know you know what I'm talking about right you know what I'm talking about so uh here is the HTML here's the react development here is this kind of thing and uh so people say I supposed to create a roote right so let's actually start this enti thing um right so uh we've got everything so we also have my app right so if I try to run it uh so we got probably react components right so we got react component I can do react create root uh there's no such thing as create root so there is only create context right so is there a root um right so maybe there is a create context so react create context so uh maybe because if you go that far you're good enough to use vanilla JS and something that actually decent to be fair yeah if I were to make a web application for myself I would just use vanilla JS but uh here we're learning react so people say react doome uh react doome there's no such thing as react do so okay let's actually see what the is context um so you have a react component uh so react create context okay so you you create some sort of a context and so what do you do with this context though um uh so and it's really weird like how do you instantiate a react application it's for the State Management okay don't don't scream at me please don't scream at me do not scream at me [Music] mhm yeah they they literally don't show you how to instantiate that it's just like yeah don't think about it bro BR don't think about it uh why do we need a separate package I don't understand people say you need some sort of a separate package I don't not understand that so people say react Dome or something oh try react Dome react no there's no such thing react D okay that provides Dome and server renderers for react why is that a separate what's the point of the react package if there's like a separate react I don't why why react okay so there is a react Dome uh okay create root ah oh okay but why is that a separate package like I would expect react just to have like everything you need to just like why why why are they separate like what this is so bizarre holy like why U okay so we can install this thing um all right so when I suppose this is another thing that we'll have to include uh in a final thing okay so the react doome uh all right so and of course there is a UMD okay and this okay we're going to go with these things there's also a server I I'm sure if I care about the server so I'm not going to bring it uh there uh right so this is the react I I don't understand why it is a separate thing honestly I don't think it should be separate thing uh but I mean I'm dumb uh react Dom okay so we got this um download the react def tools for better development you don't tell me what to do uh right so um you're supposed to create root and you okay so I I see what is going on here I see what is going on so we have to have like a Dev and ID is going to be app right so ID is going to be app like so so this is the app and um essentially what we do in here we're going to have sort of like an entry point uh in here so this is going to be an entry point uh and um react Dom create root and I suppose document get element by ID and this is app so we created the root uh all right so and then so this is going to be const root of course uh so it's painful to watch why are you saying that this is painful and frustrating like I don't understand this is react this is how react works right I mean this is react and I'm not even joking like because like yeah I download it react and I'm just like using it so this is react I really don't understand you guys um are you uncomfortable just because I'm exposing the underlying mechanisms of react and you don't feel comfortable seeing what is actually under the hood I feel I feel like that's the problem right so people are just afraid of what what's behind all of these abstractions I don't understand I don't understand you guys so I suppose this is how you you you do that right okay so uh all right so this is react this is react right um and what's fun is that we probably don't need Babel right so we probably don't need Babel uh we could have just like used that but I mean with BBL it's a little bit easier like that right so it's it's just a little bit easier um so we can create maybe some sort of like a function button uh right so this is going to be the button so we probably want to return uh this entire thing uh right so this is going to be button and uh we can say something like click me and I suppose the way you use react if I'm not mistaken you just do something like this but you want to rebuild the entire thing right so and you've got a button you've got a button that you say click me uh right so I really don't understand what the with all of this I this is so frustrating follow this stupid tutorial that downloads thousand of things on think about it don't look like here here's the reactor so uh this is react right so here's your component here's your nested component this is react I swear to God people I swear to God my friend react uh okay so now we can take a look at the actual tutorials and um right so uh remember how we looked at these tutorials and the kind of assumed that we already have everything set up uh well now we do now we do and how can we uh handle the click of the Buton uh I'm a button okay so how can we handle the click uh do we do shed on clicks or something so here's the image well there's nothing conditional rendering there is like this kind of stuff I'm not sure uh rendering so do you have like an onclick on click okay so there is an click and you have a function handle click okay so what can we say on click um right uh handle click and this is the function handle click alert alert your [Music] mom let's build this sh and let's take a look at what it generated there uh what it generated there so here's the question why the do you need to react can't you just create like components like you know you can do document uh document create element this is basically document create elements it's just like why the do you need to react exactly I don't understand it's just like good what what and look at how much stuff we had to do like we had to Extra have extra transpiler so many dependencies but this is basically just document create remember how I created like a framework Greta Js do you guys remember this is basically react but without the right it it even doesn't require any uh transpiler any preprocessor look at this this is how it looks like look at that so you have a router and different sort of routes and on different routes you have a different sort of Dom and Dom is just a function like this so we have div H1 and stuff like that right and this is just a single file without any bable or anything like that it's just a single file and it's not even 100 lines of code look at that so this framework this library that can rival react is less than 100 lines of code think about it just just look at that like why the do you need to react like I I don't understand honestly look at that this is better than react I don't know okay so uhu okay so something on click did you mean okay uh you know what's funny this kind was not caught at the level of transpiler right it was caught at run time why why the do you need a extra compiler step if you can't catch this kind of at extra compilation step like I swear to God introducing the extra step and not just providing extra convenience for them it's it's embarrassing it's embarrassing your mom your mom your mom so do did I must react did I must react I think I did I think I did and in fact by going through this frustration in pain I now know more about react than an average senior react developer how about does your average senior react developer even know how jsx jsx looks like when it compiled down to JavaScript have they ever seen any of that they probably see all of that and they start crying like where is my convenience this is the real JavaScript this is the reality this is the Realties the web developers don't want to face so yeah uh so somebody should create like a real react tutorial where they just throw away all of that libraries right like command line things that set up project for you and they just show you this they just show you how to do the thing that I just did on the stream or better use graer JS gr JS is actually awesome I I swear to God so this is like the whole application and uh look how it works right I think did I even uh I didn't think I I think I didn't uh deploy it on GitHub pages so let me quickly just put it like that git clone uh let's just clone this super quick uh so here's gch address here's an example yet again so you just like create some images and stuff like that you create an entry you just append some stuff and if you open uh this entire thing uh this is how it looks like so this is the application uh right and it has several Pages this is HTML has several Pages you switch between the pages it has the router it reacts to different things and this framework uh this framework is less than 100 lines of code this is less than it's 69 lines of code it's literally 69 lines of code and the whole application is literally this like it's so intuitive it's better than react like look at this like just compare that to this stiny react that requires some sort of transpirer preprocessor it has so many pares this thing 69 lines of code you can do this kind of you can make uh Gretch a shake you can make it unshake you have a couple of pages you can go home you can go here it all works who need reacts who needs react brh brh just use graa JS react that stupid Library I'm telling you uh make a counter in Greta so what's going to be the counter is the thing that counts things I don't know so it's actually a good question so let me see um so G on click so what we're doing in here we're just doing it like that so this is going to be count + one uh and how we're going to be updating the counter um right so we're going to have Dev uh and then so let's actually put Dev in here but this is going to be count so and the problem here is that it's not going to update okay I you got me you got me all right you won you won uh so I'll have to this is probably something interesting to uh you know explore and how can you extend the spef shut up shut up uh explore how we can even do that uh so can I just do H H2 maybe um right so I don't remember can I do like a count right like so yeah so but that's interesting like how would you uh update this entire thing we can ask it to update itself right so we can ask it to uh maybe in in a level of the router in the level of the router to refresh so essentially so what if we save the router somewhere here and maybe the router the router is going to um something like like refresh is that a good idea actually so and essentially it would just take the current route and render the whole thing right just simply rerender the whole thing but what's funny is that um this counter gets baked into the diff right so it gets baked into the diff so that means if you even if you reender the whole thing if you reender the whole thing uh it's not going to change so you probably want to actually put it as some sort of a like a function right as some sort of a function so that's very interesting uh that is very interesting so let me take a look at how exactly uh this entire thing works so it's going to Great JS uh so if I have a uh div right so what's the What's the diff function I didn't see the D function oh we actually yeah okay so it's a really funny way we're creating those things uh okay so here's the children and we're looking at the children and depending on what okay so this is actually kind of cool so the children that we could have are strings and other things so there are strings and other things so we should take a look at the situation when it is a function right so when you should take a look at the situation when it is a function so type um of type of what is the type of this thing so it is a function so maybe we have to do it like that else if type of child uh function and if it is a function we have to probably store it slightly uh differently right so we have to store it slightly differently so it appends the child um so if I just call the child like that so I can always append the child and just say document create text node uh document create text node and just child it again breaks the whole thing it again breaks the whole thing so I suppose uh I suppose this kind this entire stuff has to become a function okay so I see what's going on so the easiest way to do it like that would be to turn this into a function to turn this into a function uh okay so fair enough fair enough uh well I kind of started to have a Deja Vu I'm starting to have a de Vu um I think I was even planning to do it like that I'm yeah so there's even a sync holy there's a sync hash and everything this is so funny okay uh all right so the this is the router so this is the result and everything so and this is the result that we return uhhuh all right so we append some Childs and we just return this entire thing so routes uh are some of these things and and we probably want to turn them into functions right so essentially yeah we do it like that so we just do it like this and we call it as a function and because of that we probably want to do it uh like this so each of them each of those things become a separate function each of these things become a separate function cool uh so and we want to be able to maybe sync hash right so location uhhuh so it's just recalls this entire thing when it synchronizes uh I don't remember where we okay so here's where we remove the child yeah we want to be able to call the sync hash from the router right we want to be able to do that we want to be able to do that so that means we need to make the this thing part of the div how do we Okay so we can just assign additional thing in there uh we can just assign it like that so can I just say result sync hash equal that sync hash I think I should be able to do that uh right I think we should be able to do that okay so that's basically it right so essentially we can even call it refresh I think refresh is a better name for this kind of stuff uh right it is better name mhm so and when do we trigger this entire thing when do we trigger um when it comes to a do we do anything special I just realized that I don't quite remember how exactly this thing works uh how exactly this thing works oh hash changed okay so we assign sync hash on okay so that makes sense all right all right okay there there's a way to destroy an instance there's oh there's no way probably to destroy in okay so I'm slowly recovering how this enti thing works okay so I'm super happy so there's a syntax error at the example 13 so ahuh so this is that uhhuh all right so that probably means that we want to h m so this is weird Okay so there's that so it doesn't really have to be like this by the way it doesn't have to be like this so this is just a count uhhuh so I'm just thinking I'm just looking whether I did not make any Wy because it says that there's unclosed thing in here which is not true right so which is definitely not true uhhuh so this is a pent child M so we can now move that outside hopefully I didn't remove uh too much in here so this is that M got okay so let me move it to a proper JavaScript file because this is painful this is painful okay so GS mode all right so now finally okay I can finally select everything I want okay so that's cool ah all right so this is going to be just the router right so this is the router and in here let's let's put it like this uhhuh uh so this is the router semicolon so that should kind of work maybe I should put it into a separate thing but I mean it's an example it has to be there right it has to be like that so that's that's fine [Music] um so let's put it like this uh so let me okay aend child uh gr gs8 uh what is that uhhuh so what did you like a fail to execute on not paramit is not a type of node um it's coming from here uh show me example 17 aha so because it's not a string okay that is understandable so that's fine we can probably fix that we can probably fix that so uh let's put it like this counter uh and is this how we do that uh right is this how we do that I think I think this is how we do that but I mean we can always do something like this it doesn't matter I think it's going to be recognized as uh string anyway right so so that's fine okay counter uh all right so that seems to be working but I mean it complains now so let's go to the console uh so syn hash is not a function okay syn cash because it now refresh it's called refresh all right so let me see that's how chat developers solve problem their framework doesn't support counters they just add them in real time that's simple react Buck react uh so uh there's some problem in here so this thing all right uh but but suppose okay so this doesn't um you know switch between uh Kasha hard and Kasha not hard but I suppose we can have something like hard which is false by default right so this thing probably could be const and what we can say is essentially if uh so where is kasha uh okay so this is a diff Kasha and we can say if maybe hard Kasha hard right so this is uh so this is hard otherwise just kha uh and in here we can just remove this entire and here hard not hard so as you can see uh the you know the famous State Management the famous State Management you know the hardest problem in web development two variables the entire state right so in depending on these two variables we just like render this entire thing differently so it's either hard or uh you know heart so let's see if it's going to work now uh is that a single page reactive application that uses Global variables at the State Management holy what the and it's as simple as that like look at that you have this variable and it's just like in inside of like a dome like to be fair this is heav stop moving goal posts stop moving goalposts right so it was first can you do counter okay you can do counters but it's I can move your I can destroy all of your goal posts and just proven that you are in a denial your reacted you know that you just fall into denial stop putting go posts I'm going to destroy them all I'm going to destroy them all with vanilla JavaScript anyway so um I think when need to do a commit um so I think because because this is a very useful feature right so um uh I think I think this is a good idea actually so um like this boom uh but that will require also updating rme yeah yeah so this rme is outdated so I'll probably have to probably have to copy paste this oh yeah so this is like the entirety I I just put the entire example in there right so that's that's how it basically Works uh that's how it basically works so what did we do in here uh it look how many changes we had to make into the that's how many changes it required to add to the entire framework to add support for the um you know for the refresh for the for the counter and stuff like that right but that now means that this is not 6 this is not 69 anymore okay so let's actually try to fix that uh yeah so it's 7 uh 170 now it is still 69 so this is very important this is very important all right so Implement counter Implement counter so it's very important to keep the size of the framework to 69 right so so it is very important it is very important chat so yeah uh can your react do that well I mean it can but with a ton of dependencies right this thing is just 69 line of code it's just 69 line of code react developers are fuming react developers are literally fuming uh but yeah it is as simple as that okay so beam stream for quite some time so yeah I hope you like today's stream thanks everyone who's watching right now I really appreciate that have a good one and I see you all on the next recreational programming session with Ain I love you all

Channel: Tsoding Daily

Views: 118,948

Keywords:

Id: XAGCULPO_DE

Length: 79min 9sec (4749 seconds)

Published: Tue Nov 14 2023