Reactivity with JSX

[00:00:00]
>> Writing all this code is a lot. So what we generally do is we go, wouldn't it be a bit better if we could just, use a syntax word? And you start understanding why I really like JSX, and not some of the other templates DSLs. Because, actually, let's do this.

[00:00:18]
Because JSX is great, it's like JavaScript. You can literally just be like, click me. And maybe, what else do we wanna do? We want to add a click handler, and that click handler could look something like this, I'm just gonna steal this. And if I kind of comment out all of this code we were doing before, maybe I'll delete it in a minute.

[00:00:48]
If we had a compiler that could just turn this button into something that looks like this. We'd have something pretty powerful that can just literally, it's still a DOM element. And similarly, it'd be pretty great if we could just take this h1 and this effect, and just kinda go, okay, well, I have an h1 and what is it?

[00:01:22]
The count is {count ()} and if the compiler could see that there was a function call, or property access. Cuz it always has to be a function call or a property access cuz we always think that, then we know it's reactive. So, if it could just generate some DOM and maybe whenever it sees that throws its own effect in.

[00:01:44]
If we could just do that, and it could compile to something like this, then that would be pretty powerful as well. And that's exactly what Solid does. If we take, simple vanilla JavaScript compiled from the JSX, and this one little text node here, the ones count. That's the only thing that needs to update, because we just wrapped one effect around it, right.

[00:02:13]
It's actually very simple compilation. And, of course, no one writes code like this, right? So, if I make a counter, let's encapsulate this, let's grab this and kind of put it in. Maybe we can make this kind of look like a, put in a function, we can format it a bit.

[00:02:38]
And let's return an array, maybe of our h1 and our button, and then we could just call our counter as a function, and yes, it's very nasty, we just spread it. So, what we have is essentially a counter function that you might think this is a component. And that would be accurate, but we're just calling this function once and just returning these DOM elements and appending them to the DOM.

[00:03:06]
Of course, you probably still wouldn't really write your code like this, it's a little bit verbose. So let's take our h1 to kind of inline it, maybe take our button here as also inline it. And gonna get rid of that, that cleans it up quite a bit. And, actually, instead of an array, we can return a fragment, it's called the JSX, which is a collection of elements and get rid of the comma and if all goes well.

[00:03:43]
We still have a working counter. And this is starting to look more familiar to some of you. We're actually going to do one more thing is, the way we're mounting is kind of a little bit onerous, so I'm gonna import a (render) from "solid-js/web";. And instead of having this at the bottom we can just go render (counter, document.body).

[00:04:22]
And this sort of completes that picture, format it for style. And this looks very familiar to anyone who's used other JavaScript frameworks. But I really wanna emphasize in, you might already see it if you've been falling along, this counter is nothing special. It's just a function that got called once.

[00:04:46]
So if I console log in here and say {counter ()} yeah, we're gonna see our counter here. But no matter how many times I click this button, that counter wouldn't log in. Why would it, it's just a function. And in fact, we can kind of do whatever we want in here, right?

[00:05:07]
We can setInterval, okay, let's do something. Let's take the function from here, for the click function, and I'm not even worried about it, even infinite loops or anything here because, this isn't gonna run ever again. It's just updating on its own, and I can also click it and speed it up a little bit.

[00:05:33]
But essentially, our component is just a function that runs once. And that's because. Our compiled JSX literally just created that one effect around that count. So when our count updates, the only thing that's happening, is we're running the code to replace the text content right here. That's all that's changing.

[00:06:04]
There's no components that rerun, there's no nothing. You can start seeing why something like this could be very optimal, from a performance standpoint.