Alpha preview: Converting a import-mapped React app to use esbuild with JSX in Rails 7

Start a Rails 7 app with the importmap default is no risk, as you can easily move to a bundler/transpiler setup later if you need to.
Previous videos:
Introduction to import maps in Rails 7: • Alpha preview: Modern ...
Building React components with import maps: • Alpha preview: Using R...

[@broqoli]

Man, I love that Ruby has evolved (and Rails by nature) to handle JavaScript as an asset to be loaded and managed by the framework itself.

[@AvidRambo]

Excited for the future of Rails.

[@SebastienSaunier]

Thanks for sharing your thought process on how importmap is being built into rails 7! I wonder if we could plug the `esbuild` to the `assets:precompile` step like it's done by webpacker at the moment, I don't feel comfortable committing a generated file like `application.js` into git, it would pollute the Pull Requests.

[@davidheinemeierhansson9989]

Yes, you can just add a rake task that attaches to assets:precompile that calls "npm run build" and then add app/assets/javascripts/application.js to your .gitignore.

[@ignacioalonsol]

👀

[@duztdruid]

Wonderful stuff. Any rationale for defaulting to jspm over eg. jsdeliver or skypack?

[@een_schildpad]

Heck yeah, exciting stuff! I love the new "pin" bin script; it feels like a fun "familiar" way to add dependencies. I need to pull down the latest Rails master into my side project and start working with this 🚀 It will feel so good to rip out webpack 😜

[@drale2k]

Let's go baby Rails 7 and beyond

[@the_wrong_folder]

is React+Rails popular enough now that we'll see a template available from the cli? (something like rails new-with-react myapp)

[@szojordan]

Great video, how can we setup hot module reloading so changes in react code reflects directly on browser without refresh?

[@siyaram2855]

Hey DHH, is it worth it? Isn't hotwire enough?

[@scotteisenberg8422]

I’m getting errors on the 2nd part of the example, the one with the jsx. How about publishing a GitHub with the code for this?

[@noname99noname]

For a simple Hello world, 1 MB js file needed. what would be for large application?

[@ebk0]

How do you deploy this? Running into major errors with deploying- this is the error: Uncaught SyntaxError: Cannot use import statement outside a module (referring to the app/javascript/application.js file).

[@amani_art]

Nice. I'm happy again

[@sovietwarmachine1979]

Sir, do you have a ballpark estimation on when rails 7 will be out?

I just followed this video on my computer, and I am receiving an error on clock.js file Uncaught SyntaxError: Unexpected token '

[@szojordan]

You are placing JSX without a bundler, thats why DHH used htm before introducing esbuild