React SPA With JSX Using ESBuild In Ruby On Rails 7

ESBuild is an alternative to Importmaps which lets you compile, or evolve, your JS into JSX. This lets you use React in a much smoother way in Rails.

The ESBuild advantages are that it allows you to very quickly hot reload your app, while also having some of the advantages that Webpack used to provide. It's a really neat combination in Ruby on Rails 7, which makes developing a React + Rails SPA much more enjoyable.

Photo by Lautaro Andreani on Unsplash

Join this channel to help support these videos:

Follow me on social media:

Timestamps
0:00 Creating A Rails 7 App With ESBuild
3:23 Adding ESBuild To An Existing Rails 7 Application
4:34 Creating A React Stimulus Controller
7:20 React With JSX Inside ESBuild Ruby on Rails 7
11:55 Build A Beginner React Counter App In Rails 7

#Deanin #Software #Programming

[Deanin]

Here's a version of React + Rails that'll let you use JSX. Much, much better than the Importmaps solution imo.
Thanks for all the support recently. The channel is growing so quickly! Not just in subscribers, but in members and thanks. It really means a lot to see that you guys like what I'm making.
I appreciate it haha.

[thomasblevins]

I am integrating React into a Rails 7 application using `jsbundling-rails` and the `esbuild` bundler tool.

I ran into an issue called:

```
createRoot(...): Target container is not a DOM element.
```

I originally just copied the final code from your source, but my problem was with

```
import { createRoot } from "react-dom/client";
```

using the original syntax you provided:

```
import ReactDOM from "react-dom"
```

I was able to get React to show the App component and work as expected.

Thanks for the guide! I'm not much of a video guy, but this guide is pretty much the only one out there that was minimal and competent.

[tbfromsd]

Wow, I wish I saw this two weeks ago. I got my rails/react tangled mess working after 3 days of trial and error. I didn't realize that you could define reacts controller with stimulus. This was the most concise video I have seen on the topic.

[gappedtoto]

Snark level 10, I love it!!! Excellent tutorial too. Thank you!

[gmaheshbabu]

It's awesome tutorial and able to setup react with esbuild.
Thanks a lot.

[zmasterar]

I love your tutorials because you're funny and entertaining, besides of course, educational.
Regarding this bit in 7:41 with stimulus you don't need to `getElementById`, because stimulus already give it to you with `this.element`. `this.element` references de DOM element that has the data-controller attribute.
Besides, you can have many elements using the same controller, so in that case `this.element` will reference the actual element which called the controller, no need to deal with ids, classes, selectors to get the element.

[kickedoutonthestreets]

Damn man! This is so fun to watch! ..and very informative of course.

[njgzs]

that's great! I like this way of development

[DennisPidginDev]

This is great and right on time...I am currently working on a rails and react application but the configuration is kinda diffci=ult but you made it so easy.

[kantush_codes]

Exactly what I've been looking for today, nice one!

[VedantRasote]

Thanks for this Deanin!
This is exactly what I was looking for.

[sufyaniqbal]

It is amazing way in rails 7 to done things in a right way. Keep it up.

[lord]

Hi Thanks for the video.
But currently you only have on component that will render FOR ALL routes.
Is there a way to handle different routes other than using React-router?
thanks again.

[neerajkeriya]

Hi Dean, thank you❤️ so much for this video. This is really better then the importmap + react thing.

Can you make video on below topics, if it is possible?
1. Elasticsearch
2. Microservices
3. Docker/docker-compose/docker image and containers with rails
4. Rails Action cable
5. Using Websocket with rails

If you already made video on these topics, then please let me know.
I have checked but not found any relevant one.

[kriskis]

Thank you for the video! I saw a similar question in the thread: Could you show us please how to display separate React components on separate routes/views files? For example, if I use standart rails views for login/signup, but want to display React separate component (not all <App /> but <SomeCard /> ) on particular path (/cards) when user redirected to another path after logging in? or submitting the form?

[ebk]

Thanks for posting this! Do you have any tips for how to deploy a rails app with this sort of configuration? I followed the steps that DHH outlined in his video on using esbuild, and I'm running into some errors. Thanks again for making these videos!

[usamakhawaja]

When the problem is complexity, the answer may be just simplicity!

[je]

Nice video.
Do we really need JSX and React in 2022 ? If one is building a SPA won't Hotwire do the job more efficiently ? Am I missing something ?

[neverforget]

@deanin what your thoughts on inertia Rails? Thanks

[adekunleismail]

Thanks for making learning to code easier Deanin but am facing the below errors on window OS
X [ERROR] Could not resolve "app/javascript/*.*"

It looks like you are trying to use glob syntax (i.e. "*") with esbuild. This syntax is typically
before passing your paths to esbuild.

1 error
node:child_process:869
throw err;
how would i change the build script in package.json to solve this?
I will appreciate your reply on this thanks once again.