Adding React & Solid Support

[00:00:00]
>> All that's left now is to actually build out these components. So in order to do that, we need to add support for building with both React and Solid. Now, I am doing this as a demonstration of how this works. If you are building a net new Astro site, then you probably don't want to introduce multiple frameworks because using Astro to run a React component that you're hydrating, you still have to load React.

[00:00:27]
So you're gonna get that 30-something kilobytes of React's booting script when you partially hydrate a component. So the same will be true for Svelt, for Solid, for any of the other frameworks that you would use. So if you can help it, you probably don't want to do that.

[00:00:42]
You probably wanna pick one and stick with just the one for the sake of your bundle size. But why I think this is so cool and why I think it's important to teach, is that, for many of us we're working on Teams where the app isn't all built in one framework.

[00:00:56]
When I was at IBM Cloud, for example, early on, they didn't have enforcement for everyone must use this design system or this specific tool. So some of the app was built in Vue and some of the app was built in React. And later when they wanted to merge things together, there wasn't really a clear path forward on how to do that.

[00:01:17]
And so they had to make a choice between leave it as is or rebuild the entire app. Neither one of those is really a good solution, but because we didn't have time to halt all feature production, they just never got around to actually rebuilding the app. There was this like slow chipping away at it over a massive amount of time.

[00:01:37]
What Astro allows is for you to make that incremental change much more quickly because you can take those Vue components and those React components and put them together in a way that lets you build under one framework. And then as you have time, if you're gonna update a component you can convert it from, if you're say you're dropping React in favor of Vue.

[00:01:56]
When you work on a React component, just swap it over to Vue now drop it in. And then you're incrementally adopting these features, as opposed to having to do a drop everything and rebuild the whole app. It allows for, I think a more realistic way of adopting new technology than then some of the guidance that we get, which is yeah, just like allocate three months to drop everything and build your whole app in our framework.

[00:02:20]
It's not usually feasible, right, unless you're Greenfield. And if you are Greenfield, you don't have to make that choice, you can just choose your favorite component framework and you're off to the races. So to do this, what we're gonna do is we are going to open up the terminal and I'm going to install support for Solid and React in Astro.

[00:02:43]
Now here's the thing that's really cool about this. What I had expected to do when I first started working with Astro, is I thought I was gonna have to npm install a plugin, and then I was gonna have to figure out how to make my Solid and my React stuff work.

[00:02:58]
And then also I was gonna have to update some Astro config. But Astro knows how to run React and Solid inside of Astro. So instead, they give us a CLI and we just run npx astro add, and then we put in the name of the thing we wanna use, so react and solid.

[00:03:14]
And check this out, I love this. They know not only the Astro plugins, but they also know the other things we need. We're gonna need the TypeScript types. We're gonna need React and ReactDOM. We're gonna need SolidJS. Those components or those dependencies are part of the addition of this framework to your library.

[00:03:36]
Now you don't have to do this if you have a very specific version that you're pinned to or you have very specific preferences about how this stuff is done, you are able to just opt out of this by pressing "n" here. But I don't have this preferences, I'm very happy to use the defaults.

[00:03:50]
So I'm gonna let them install those dependencies for me. And here's where this really gets magical. Now they show me my config file. And they say, can we update your config so this just works? It's like, hey, yeah, that's great, I love not typing. And then they give you options on updating your tsconfig, and sure, that's fine, we can do this.

[00:04:17]
Now what we're getting here is we get the jsx and the jsxImportSource of React. I'm actually gonna change that because I default to Solid. So I wanna open this up and I wanna go into my tsconfig. And I'm going to change this to "preserve" and I'm gonna change this one to "solid-js".

[00:04:48]
And honestly, it's up to you, if I was going to continue building this site out, I would be defaulting to Solid components as opposed to React components. So I'm gonna make it the default and then explicitly override for React. If you want to do it the other way, you're also welcome to do that.

[00:05:04]
And the override I'll show you as we get to it, so don't worry if I'm saying words that don't make sense. All will be revealed in due time. So, we've got our, our tsconfig set up here to run Solid stuff. And I'm gonna go ahead and start building out the cart component first.

[00:05:23]
So, we're gonna create a new file. This one's gonna use two files because I'm using a Solid component and I need some styles. So the first thing that I'm gonna set up, is I'm actually gonna set up my, styles and that is going to be cart.module.css. And this is built into Astro, this is something that I am also a huge fan of because it makes my life so much easier.

[00:05:49]
So the power of this is that I want scoped styles. I don't necessarily want to have to install CSS and JS only for my components. And I can't use the single file style approach of putting a style tag at the bottom of my Solid components because that's not how Solid works.

[00:06:08]
So instead I can use the CSS module spec, which has the same general approach. It gives me scope styles per module. The API is a little bit different, but I'm still just writing CSS. So I can go up into my Styles from the workshop assets, grab this components-cart.module.css.

[00:06:29]
Let's copy that and drop it in here. And this is standard CSS, nothing magical happen in here. But then inside of my cart, which we haven't created yet, Going to create a new component in here and this is gonna be called cart.tsx. And this one is gonna have quite a bit of imports because this is gonna be working with our store, this is gonna be working with our styles.

[00:07:03]
And it's gonna be working with a little bit of Solid.js internals. If you've never used Solid, don't worry, this is not about learning Solid. There are great resources if you want to do that. I'm going to be kind of glossing over the technical details of using Solid. But if you've used React, a lot of this is gonna look familiar, so don't worry too much.

[00:07:27]
Next, we're gonna get the pieces we need out of our store. So we start with the cart, then we wanna get removeItemFromCart and we want the subtotal. And those are all gonna come out of our ../stores/cart. Then, I'm gonna get the styles that I just set up from ./cart.module.css.

[00:07:56]
And finally, some stuff that I need from Solid. I need the Show component and the createSignal. createSignal is similar to the way that useState works in React. Same general idea, just a little different, a little Solid flavored. So then I've got that format currency, I'm gonna need that again.

[00:08:22]
So I'm actually just gonna go right into the shop-items and copy it and then paste it. Again, I could have put this into a utility file, but it's just not big enough. I don't mind duplicating this code