React SPA With JSX Using ESBuild In Ruby On Rails 7
Vložit
- čas přidán 8. 05. 2024
- 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.
Checkout my course(s) at: learn.deanin.com
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.
github.com/rails/jsbundling-r...
github.com/excid3/esbuild-rails
Source: github.com/Deanout/react-esbu...
Photo by Lautaro Andreani on Unsplash
Join this channel to help support these videos:
/ @deanin
Follow me on social media:
linktr.ee/deanin
If you liked this video, please consider subscribing: t.co/RZ4EwP0F2a
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
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.
Yo dude, you rock!
does the "--loader .js=jsx" disable js in addition to enabling jsx
Thanks for this Deanin!
This is exactly what I was looking for.
Damn man! This is so fun to watch! ..and very informative of course.
It is amazing way in rails 7 to done things in a right way. Keep it up.
Great walk through, thanks!
Exactly what I've been looking for today, nice one!
Glad it was helpful!
It's awesome tutorial and able to setup react with esbuild.
Thanks a lot.
that's great! I like this way of development
Snark level 10, I love it!!! Excellent tutorial too. Thank you!
Glad it helped haha
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.
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.
Glad it was helpful! 😁
Really nice man!
absolute legend thank you
love the honesty
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.
Good stuff 👏
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.
Thanks 🙏 for all you do for the community Deanin. 😊
Out of curiosity, why do I have to refresh my browser whenever I make changes to my react component 🤔
Or is there a way around it ?
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!
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.
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.
I recommand the 3rd one and deploy with dokku?
what about regular javascript files like the ones we use in forms
When the problem is complexity, the answer may be just simplicity!
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 but ) on particular path (/cards) when user redirected to another path after logging in? or submitting the form?
Hi Deanin!!
I followed your tutorial and everything works great.. Now I want to use some images in my react components, but this error happens when I try:
No loader is configured for ".png" files
I'm used to webpacker handling compilation, but don't know how to fix this with esbuild
Just in case of somebody with the same issue, I solved this by adding --loader:.png=file to the build script in package.json:
@deanin what your thoughts on inertia Rails? Thanks
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.
Great, I always use JSX! Have you hooked up a Rails 7 app with GraphQL yet? I'm fixing to do so myself if I get a chance
This is cool, but is there a good way to handle routing, so rails can hydrate props for react?
Great video! Looking at upgrading to Rails 7 with esbuild from webpack. We do prefer the scss files goes with the react components where they can be compiled tgt. But it seems like we will have to move the scss files to the assets pipeline(the rails way) in order to work with esbuild. Curious wt ur thought on that ?
In all honesty I'm completely out of the loop with the state of scss in Rails lol. It would make sense to me to have it with the React stuff. But the Rails way does like to get in the way, so I'm not sure. 🙁
Yea. While stimulus, hotwire and tailwind setup can abstract out the JS part and make it easier to start, developers like react alot for the control. There is just no way to move away from that. Esbuild looks promising but it that means we have to decouple the style and the react components. Also a hard sell. We r at a stand still at the moment for upgrade until we figure something out.
Oh trust me, the Hotwire/Stimulus thing drives me nuts too lol.
You've probably already seen it, but would something like this video be helpful? Seems to be a bit closer to what you might be looking for.
czcams.com/video/h8DmZhkRoJs/video.html
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 ?
I see this question a lot, so I've had a good amount of time to think about it. For me personally, I tend to lean away from what Rails thinks is the right approach to problems because the only thing more opinionated than Rails is me lol. So keep that in mind.
It depends on a lot of factors, but ultimately there's going to be a right tool for the job, and it won't always be Stimulus+Turbo (Hotwire.) You could just use Stimulus for most things and you'd be fine.
Examples might be if you don't trust Rails not to completely scrap their JS solution again in the next release. For those of you who remember how revolutionary Coffeescript was (or rather how revolutionary the Coffeescript to JS converter was) or still refuse to use Action Cable because of open tickets that will never be fixed, this could be a real deal breaker.
Your boss could also just tell you to use React.
Your client could tell you to use React.
You know React and want to use React.
You're interviewing at a company and they want you to use React for the interview tests.
You have a deadline and your company has a supply of React components instead of Rails View Components in their Storybook. Your team decides it's better to just use React, because recreating the components could be a bad overhead and even lead to needing to maintain two sets of components.
You want to use React as an excuse to learn it so that you can find a job.
You just want to use React, maybe due to familiarity.
There's a lot of reasons to use either and they can obviously go both ways (some company really wants to hire for Stimulus+Turbo for example) so it's just a matter of preference at the end of the day, except for when it isn't, which will probably happen for niche cases.
It's the same reason why I covered Firebase. Someone needed to use Firebase with Rails. They were called an idiot on Reddit (not kidding, the replies were pretty rude and honestly pissed me off quite a bit) because Rails already has a backend. Makes sense until you realize that they needed to use their client's Firebase app, which was hard because everyone was too busy defending Rails to help out.
Hope this rambling answers the question. If you want to use Stimulus then go for it though, you should be fine.
@@Deanin Thanks for your detailed and well thought out response.
Which is better ?
1. Rails + React in one project
2. Backend API Rails + Frontend React (seperate project)
It depends on what you need to accomplish. If you're just making a quick one and done app, bundled together probably works just fine. If you have 5 clients that all use your API, then it probably makes sense to have them all completely separated. It'll really come down to whatever you prefer/need. For me personally, I'll always go the route of an API + separate project. I'm not a fan of the monolith approach if I think I'm going to scale an app lol. But I also don't use Rails personally, so keep in mind my bias there.
@@Deanin Good approach. Thanks for tutorial. Actually I have a lot question about Rails performance. But its ok.
For a project configured with a custom
`esbuild.config.js`
file, add
`loader: { '.js': 'jsx' }`
to your
`require("esbuild").build({`
options to support jsx syntax.
My entire `esbuild.config.js` file is:
```
const path = require('path');
const rails = require('esbuild-rails')
require("esbuild").build({
entryPoints: ["application.js"],
bundle: true,
minify: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
watch: {
onRebuild(error, result) {
if (error) console.error('watch build failed:', error)
else console.error('watch build succeeded:', result)
},
},
write: true,
loader: { '.js': 'jsx' },
publicPath: 'assets',
target: 'es6',
// custom plugins will be inserted is this array
plugins: [rails()],
}).catch(() => process.exit(1));
```
next vidio add bootstrap on react rails 👃
Will do!