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.
@DevBishwasBh2 жыл бұрын
Yo dude, you rock!
@fugeeohu9357 Жыл бұрын
does the "--loader .js=jsx" disable js in addition to enabling jsx
@tbfromsd2 жыл бұрын
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.
@thomasblevins5787 Жыл бұрын
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.
@kickedoutonthestreets2 жыл бұрын
Damn man! This is so fun to watch! ..and very informative of course.
@zmasterar2 жыл бұрын
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.
@gappedtoto16632 жыл бұрын
Snark level 10, I love it!!! Excellent tutorial too. Thank you!
@Deanin2 жыл бұрын
Glad it helped haha
@prodbyindigo Жыл бұрын
absolute legend thank you
@1ManStartup Жыл бұрын
Great walk through, thanks!
@njgzs3602 жыл бұрын
that's great! I like this way of development
@gmahesh007babu2 жыл бұрын
It's awesome tutorial and able to setup react with esbuild. Thanks a lot.
@kantush_codes2542 жыл бұрын
Exactly what I've been looking for today, nice one!
@Deanin2 жыл бұрын
Glad it was helpful!
@DennisPidginDev2 жыл бұрын
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.
@Deanin2 жыл бұрын
Glad it was helpful! 😁
@VedantRasote Жыл бұрын
Thanks for this Deanin! This is exactly what I was looking for.
@sufyaniqbal36362 жыл бұрын
It is amazing way in rails 7 to done things in a right way. Keep it up.
@kirilkleinerman65062 жыл бұрын
love the honesty
@lord47912 жыл бұрын
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.
@caiopenhalver49009 ай бұрын
Good stuff 👏
@renatocdesouza2 жыл бұрын
Really nice man!
@neerajkeriya2 жыл бұрын
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.
@Elgnonvis2 жыл бұрын
I recommand the 3rd one and deploy with dokku?
@kriskis9774 Жыл бұрын
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?
@ebk02 жыл бұрын
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!
@alexohre2 жыл бұрын
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 ?
@je96252 жыл бұрын
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 ?
@Deanin2 жыл бұрын
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.
@je96252 жыл бұрын
@@Deanin Thanks for your detailed and well thought out response.
@neverforget15752 жыл бұрын
@deanin what your thoughts on inertia Rails? Thanks
@steakdriven9 ай бұрын
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
@adekunleismail73822 жыл бұрын
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.
@AirWick2192 жыл бұрын
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 ?
@Deanin2 жыл бұрын
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. 🙁
@AirWick2192 жыл бұрын
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.
@Deanin2 жыл бұрын
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. kzbin.info/www/bejne/nmmnno2eoLeigNU
@usamakhawaja85712 жыл бұрын
When the problem is complexity, the answer may be just simplicity!
@martinsugasti6692 Жыл бұрын
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 Жыл бұрын
Just in case of somebody with the same issue, I solved this by adding --loader:.png=file to the build script in package.json:
@cleancapsco Жыл бұрын
This is cool, but is there a good way to handle routing, so rails can hydrate props for react?
@kadismile114Ай бұрын
How do we pass variables from my controller to the components ?
@fugeeohu9357 Жыл бұрын
what about regular javascript files like the ones we use in forms
@MrKeliv2 жыл бұрын
Which is better ? 1. Rails + React in one project 2. Backend API Rails + Frontend React (seperate project)
@Deanin2 жыл бұрын
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.
@MrKeliv2 жыл бұрын
@@Deanin Good approach. Thanks for tutorial. Actually I have a lot question about Rails performance. But its ok.
@Otterlover_9002 жыл бұрын
next vidio add bootstrap on react rails 👃
@Deanin2 жыл бұрын
Will do!
@thomasblevins5787 Жыл бұрын
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)); ```