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.

@DevBishwasBh

Жыл бұрын

Yo dude, you rock!

@fugeeohu9357

7 ай бұрын

does the "--loader .js=jsx" disable js in addition to enabling jsx

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.

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.

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.

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.

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.

Great walk through, thanks!

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

that's great! I like this way of development

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

@Deanin

Жыл бұрын

Glad it was helpful!

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

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

@Deanin

Жыл бұрын

Glad it helped haha

Really nice man!

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.

@Deanin

Жыл бұрын

Glad it was helpful! 😁

absolute legend thank you

Good stuff 👏

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!

love the honesty

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.

@Elgnonvis

Жыл бұрын

I recommand the 3rd one and deploy with dokku?

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?

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.

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 ?

@Deanin

Жыл бұрын

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.

@je9625

Жыл бұрын

@@Deanin Thanks for your detailed and well thought out response.

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

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 ?

@Deanin

Жыл бұрын

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. 🙁

@AirWick219

Жыл бұрын

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.

@Deanin

Жыл бұрын

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. kzread.info/dash/bejne/mmx4z7yhm7XVetY.html

@deanin what your thoughts on inertia Rails? Thanks

This is cool, but is there a good way to handle routing, so rails can hydrate props for react?

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

@martinsugasti6692

9 ай бұрын

Just in case of somebody with the same issue, I solved this by adding --loader:.png=file to the build script in package.json:

what about regular javascript files like the ones we use in forms

Which is better ? 1. Rails + React in one project 2. Backend API Rails + Frontend React (seperate project)

@Deanin

Жыл бұрын

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.

@MrKeliv

Жыл бұрын

@@Deanin Good approach. Thanks for tutorial. Actually I have a lot question about Rails performance. But its ok.

next vidio add bootstrap on react rails 👃

@Deanin

Жыл бұрын

Will do!

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)); ```