React deep dive: 6 things you didn't know - Joel Denning

[Music] okay before I jump in here is a link so if you're the kind of person who just likes reading some code to show what we're going to be talking about this links pretty good there's some interesting stuff in there but yeah let's jump in here's some open source that I maintain system j/s single spot bandicoot Kremmling openmrs can when he daughters who need this internal these are some of the open source projects I do go check them out sharing them with you just because I love them and would ya love to see you guys creating issues and contributing another random slide here so if if there were if there's one thing in the front-end world that I would say is gonna change how we do things in 2020 or 20 21 like one of the big things coming it is import Maps you can just go google them and look them up so I'm sharing this just as a here's something interesting you can look into okay so let's get into the talk so I'm going to be sharing six things about react as part of this talk and I have to confess before I start so i reimplemented react from scratch as part of this talk now not really like not fully but that's where we're gonna be drawing our six items from is how does react work is going to be part of it and then it also will show how does that apply to you as someone who would be using react so yeah that the link that I shared earlier it has my like a knockoff ripoff version of react in there it's not the kind of thing I'm not gonna even publish it as an open-source library I'm not interested in that at all but it shows some of the interesting principles of how does react work okay first thing about react you don't need create react app now you can use create react app and create react app is great but I'm going to show you how hard or easy it is to set up a reaction project it does not take a colossal effort to set up react so let me show you two ways to set up a react project really quick oh we lost this hold on yeah okay oh man that's gonna be hard here we go so you can go to code pen you put a div into the HTML you go to settings then you say in the JavaScript tab you say we need Babel react oops react and react dumb okay now we have react okay we have done it so yeah there's the button down there rendered by react so if you're wanting to play around with react there are lots of ways that you can this is the way that I do pretty regularly code pen gets it all set up for you let's show you let's say next level though like okay I'm actually like trying to build this for a company though I can't have a code pen be my company okay we have an empty project we're gonna go until we've got a react app so first I'm going to NPM and it's just hold enter until it's done this will create a project okay now I'm going to install react let me zoom in here a little bit I'm going to install react and react Dom okay now I'm going to install as dev dependencies web pack web pack CLI what pack dev server okay this is the most complicated part you can go look up how to do this and you installed out seven six or seven dependencies we need to create a file called babel RC the babble RC file is going to tell babble to use preset react okay we're going to need a web pack config file this is the kind of thing that you can go look up okay okay so this is the kind of thing that you can look up normally you don't write it from scratch [Applause] okay so I just created our main JavaScript file here now I'm going to create an HTML file okay that's our HTML file let's see if you're going to need okay we're gonna have a start script that runs web pack dev server and we're gonna have a build script that runs web pack let's see how we do okay so it did compile which is good there it is [Applause] my point in showing this is so I do consulting with companies and often they feel like this step is so hard that they're just not going to do it they're gonna form it out to create react app or something else yes it requires learning some of these things like babble and webpack but the point that I'm trying to show you here is you've got a company now you've got your web pack and Figg already finished configured he finished it isn't an overwhelming task they're like JavaScript fatigue tooling fatigue kind of thing you're not creating that many files and you're not doing it you don't have to go through a whole bunch of pain just to get a react app set up okay next thing okay so this one's very interesting react stole from the dawn and we all hate the dawn so the Dom is complicated the dawn is hard to work with and react got inspiration from how the Dom works when it designed its own API let me show you exactly what I mean so if we take if we take our file okay if we take our file and we compile it so on the left is our code on the right is the compiled code notice react dot create element so react dot create element is actually very similar to how the Dom works so how the Dom works is you do like var div equals document dot create element div and now we've got a div how react works is we do react dot create element div or react doc create element button and it goes further than this and so with react we've got props let's show some props let's okay so with react we put class name equals hi and it gets compiled down into an object that has a class name of hi on it this is actually just how the Dom works - let me show you we've got our div we can do div not class name equals high and now our div will have the class equals high on it so these are called JavaScript properties these here that can go on to Dom elements so what react is doing is it's taking your react props and it's putting them onto the Dom element as properties it doesn't mess with attributes almost ever only for Aria and for custom elements but it just plops all of your props what's a funny phrase on - I'm your Dom element so this is essentially what react is doing is you call react create element it calls document create element you give it an object of props it puts those props onto the Dom element that's the main thing that react is doing okay tidbit number three okay who here has heard of the term virtual Dom yeah everyone okay or mini okay so the virtual DOM is an interesting thing I think it's something that there's some misinformation about it's like mystical we've got the Dom we've got the shadow DOM and the virtual zone we've got lots of Dom's and so I'm going to show you what is the virtual Dom unlike a mechanical level we'll will see it in the browser console and then talk about how that like why do people talk about the virtual Dom why is that like a thing that matters for react okay so the virtual Dom is actually just all of your JSX that's what the virtual Dom is like so the simplest way of describing would be okay I bet you've never done this before so you can store your JSX in a variable that's one thing the other thing is the result of JSX is what's called react elements and react elements are the virtual Dom so let's look at what is this virtual Dom okay so the virtual DOM is an object and that's it so that's the main thing I want to say about this is that the virtual Dom is an object and so what react is doing is taking plain JavaScript objects it's not Dom it's not like fancy anything it is just an object and then it is turning this object into real dumb so a virtual Dom is an object representing what you want in the real Dom reacts job is to create what you want in the real Dom from your virtual Dom so there is one part of this that I want to call out which is the type so you can see here the type is buttoned Dom elements also have a type and so this is like a one-to-one correlation the props also it just puts all of your react props as properties on the Dom element when what I'm getting at here is that the virtual Dom is an object with all your HTML in it and then react creates real Dom from it and I just wanted to demystify that because I think there is there are misconceptions about what is the virtual Dom doing for me or what like that's I chose react because it's got the virtual Dom it's really just the internals of how react creates Dom they called it something fancy next thing is so who here has used hooks most okay so if you've used hooks you've probably used you state and that's maybe the most popular hook use state relies on the call order in order to in order to work and let me show you what I mean by that so we're going to switch over here so we're caught we have a reactor component now and we're calling you state twice the way that react knows that the first one is the count and the second one is the dog URL is the order in which you call them so if we were if we were from render to render to switch which order we called them with it wouldn't work I mean let me try to describe better what I mean so okay it's time to show what I was talking about earlier I created a fake version of react that implements most or much of of reacts API I called it Yoshi and here's the you state function so this isn't the react source code itself but it shows you how is it working so you get the index the index means how many times have they called you state so far is this the zeroeth time first time second time third time fourth time that's the index and then you just use that index to keep track of which one is which so for those of you who are familiar with the rules of hooks the rules of hooks are what they do is they ensure that this works this only works if you follow the rules of hooks if you don't know what the rules of hooks are go look them up because if you break them your code won't work but yeah I wanted to show this for both you state and for use effect the order in which you call you state and use effect really matters okay last one or notice is the second last one number five so okay we're gonna define the term reconciler that's the big term on this slide so a reconciler is a function that is given virtual Dom and produces real Dom so we now know what virtual Dom is it's an object and it needs to produce real Dom let me show you what a reconciler could look like so that function at the top that says reconcile I don't want you guys to look at like the actual code itself might be interesting if you want to go above and beyond but I all that I want you to look at is line 12 at the very top so reconcile has given a react element or virtual Dom it has given a container Dom element to put itself into an index so it's job is to take that virtual Dom and then turn it into real Dom we'll see so here we call document dot create element and stuff like that this is the kind of thing if you're interested you can go look on the github repo for more detail but the point is the reconciler is the thing that takes the virtual Dom and turns it into actual Dom and what I post what I had in the slide was that this is what we like about react and this is what makes writing you eyes easy is that we don't have to worry about updating the Dom so most of us most of us don't deal with the Dom directly very often and there's there are good reasons why it can get complicated and so the main thing that react is doing for us is dealing with the Dom on our behalf taking these virtual Dom nodes and turning them into real Dom nodes okay last thing here so this is one this is one that I've heard for a while is how many people know what pre-act is okay so pre-act versus react react is a knockoff version of react and the reason why pre-act is appealing is because the react source code is about a hundred 50 kilobytes of JavaScript code and the pre-act source code is about five so the idea is well if your users don't have to download 150 kilobytes if they can download just five kilobytes that's faster the problem is is that that sort of is an incomplete way of looking at the performance so what I wanted to go at here is a react is a very fast framework very very fast and there are sort of two things to look at when talking about performance the first one is initial load and then the second one is everything after that and so app react is good or pre act is better at initial load but react is better after that concurrent mode for example with react is not duplicated and pre-act and makes your application significantly faster so like pre act is not definitively more performant than react and react is not necessarily more performant or less performant than pre act it's a little bit more nuanced than that but I yeah I just wanted to call this out that um when you choose to use react when you choose to use react or pre act you're not necessarily like saving bytes or say like you're not saving performance in a real way depending on how you choose most of the time you go look at benchmarks they're about the same for for a lot of things okay so yeah time to wrap up here I did want to just post a couple links here here's my Twitter and my github I do I do consulting related to react and other things and yeah I won one very last thing I wanted to share is I do I do run a non-profit it's called just Utah coders we build software for the government here in Utah and for other nonprofits specifically within the criminal justice reform area and so if that's something that's interesting to you helping out at either as a volunteer or financially or something else yeah message me on Twitter or come talk to me we've got some very exciting things going on with with the nonprofit and could use a lot of help so thank you very much [Applause]

Channel: UtahJS

Views: 7,599

Rating: 4.881041 out of 5

Keywords: JavaScript

Id: BXTU4NmMu8A

Length: 26min 32sec (1592 seconds)

Published: Sun Jan 05 2020