Alpha preview: Using React with importmaps on Rails 7

in the last video i did on import maps coming to rail 7. i said that this approach perhaps wasn't going to work that well for react because react usually is used together with jsx which requires a transpilation step to work but then i dug in a little more and i found this neat approach with a library called htm that makes it such that you can use react without that transpilation step and i thought i'd just show briefly how that would work with this new import map setup for rails 7. so i'm going to generate a new app here and we can have a look at trying to set up react in this new environment using it with htm without that transpilation step and see that it's actually pretty good um so let's have a look here this time i'm not even going to bother with a scaffold i'm just going to create a controller that we can dump some stuff into it's going to be called components and on that page we're just going to make a bunch of react components so let's have a look here and go to that components page we just created components index yeah that is all good and fine i'm going to create a div here for the root of our react components that we will render it into um let's have a look at the routes to make sure that it's lined up we're going to set the route to components index here um so now if we go and have a look we should be able to run this in the browser and just have our components index great okay so let's instead set up the import map that we're going to use with react this import map is going to import react react dom and this html library and then we're also going to create a new place to host all our components it's going to be just like controllers we use the stimulus we're going to have components here in the in the javascript so let's jump into the javascript here and create a new folder called components and as you can see here we're actually just going to go ahead and import these components you saw under the import map here it's being set up as components and that will actually automatically map to components slash index so let's import just the basics here to see how normal react would work when you don't do a transpilation step so normal react requires this create element if you don't have gsx available and as you can see it's not exactly pretty but let's just um start up the server and see that that actually works hello world we're rendering our react component well it's not really a component we're rendering with react into the page using create element it's not exactly pretty so let's set up to use this htm instead and then we can convert it so i'm going to use a small little helper file here called htm create element dot js where we're going to import react create element and then we're going to impact import this htm library and we're going to bind it to the create elements so that we can we can use it and then let's go back to our index here we're going to pull in that component instead of create element we're going to pull in our new um htm setup um let's see here we're gonna do from components ht whoop create element so now we have h available and we can then replace this with a string interpolated setup that uses hcm that just says hello world from htm and then let's see whether that works great as you can see this is already much nicer but it's not exactly setting up a component so let's make our first component we're going to just pluck things out of the react.js tutorial and use some of their components you can grab those yourself from that website to to follow along i'm going to start by making this clock that was one of the examples for keeping state so we'll start by pasting in the clock as it appears on the react site complete with use of gsx this is the part that's not going to work given the fact that we don't have the jsx translation step so we need to convert this to using h instead so let's import the bits we need first we're going to import the component from react um then we can just do this and then we're gonna import that same h we had set up from the helper we had components htm create element and then we have to convert this component essentially to using um html instead of uh jsx so we're gonna do that here by setting it up as a string interpolation and then as you can see here we essentially already have things set up um to do actually the example should have been like this before what you have to correct it for is to turn it into a string interpolation because that's what html relies on so that gives us our clock we can go back to the index here and now we can import our clock import clock from components clock and then we can render our clock so the way that works is in jsx you would just do clock slash this with htm you have to wrap it um with an interpolation like this so it's definitely a little more cumbersome but not a whole lot let's see if this works it did not work uh components clogged oh we forgot to export it um that was the other part that was not present in the example on the site we have to export it to be able to import it over here and then let's try again now it works you can see we have this clock and it has a tick that's set up by the way as you saw me jumping back and forth here fixing this clock of course what you didn't see was a transpilation or any compilation step we're not running anything in the background to compile this this is simply just a straight up text files as it were javascript files on compiled that gets sent straight to the browser and if we have a look again to see how this is all set up you can see here that with this setup we have module previews set up that pulls in all the stuff you see we're pulling in a bunch of stuff we're not actually using here turbo and stimulus whatever but um you see htm react react dom and then we have our components they automatically get pulled in with module pre load um and then we have them set up in the in the import map as well and as with the other example we're importing application which is this file so now we have a clock of course we could have more than one clock because this is a component so let's just add another component go back and check great these are ticking along neat components here all right well let's take a another example here let's take an example with forms the react tutorial uses something called flavor form so we'll set that up i'll paste in first the form as it appears on the react site and then we have to make that conversion again we have to import the component into this file system we can actually use it from react we can remove this and then we import our h helper from components htm create element and then we have to convert this component into using that and this is a little more intricate there's more stuff going on here and we'll just take it step by step so we'll start by turning this jsx into htm and then there's a few things we have to do here first of all these callbacks they have to actually be sort of more real callbacks we're turning them into what jsx would turn them into anyway but we have to do a little bit more of the work ourselves when it comes to um this setup with html but it's not exactly a dramatic change or that we have to do but you have to remember that if you're passing these things in and if they are call backs they have to be set up like that all right i think that is the extent of the changes we had to make to this one um let's import that as another component we have oh remember we have to export default and then we can import flavor form from components flavor form and then we can render that as flavor form great all right let's have a look and see if we get that um mango submit yay so now we've set up with two components that are each just being included and again if you have a look at the htm setup and the preload these things are automatically pre-loaded there's no waterfall loading going on pretty neat let's have a look at a final more complicated component this is another one of the examples it's a login control here and i'm just going to paste in the converted version already because there's kind of a fair amount of stuff um but i'll go through it and we can have a look so this is the same thing we were doing before we had to convert some of these functions that this component relies on to htm as you can see these conversions are just as we were doing it before um and here we are doing the export default from this login control this is essentially just a button that shows you whether you're logged in or not again another example just from the react website and then let's pull that in and render it so we'll do the login control from login control and then we'll render it uh login control great all right let's see if that works please sign up welcome back log in log out yay that's pretty neat what's also pretty neat here is that of course these are components so you can include them in each other if we for example go back to the login controller here and we wanted to for some reason have the clock imported as part of this controller we can import that component's clock and then we could render it let's say here uh please sign up it's going to be the clock and then render it let's go back up please sign in when we're showing the intro we get the clock and if we lock out we don't get the clock so that is essentially react with the import map approach using htm and i think it's pretty neat it doesn't require a lot of changes from what react would normally be with jsx it's quite close whether people want to actually program this way or not obviously up to them but clearly it is completely possible to use react with this approach with just a small concession on using html instead of jsx and you get all the benefits of this setup there's no compilation everything works without even having node installed on your local setup so i think that's a pretty great uh approach and i am excited to see if someone will use this to build some real apps with react rails and import map all right this was just a quick demo i'll post some more stuff as i continue the development on the import map in the future see you later