React SPA With JSX Using ESBuild In Ruby On Rails 7

  Рет қаралды 10,395

Deanin

Deanin

Күн бұрын

Пікірлер: 50
@Deanin
@Deanin 2 жыл бұрын
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
@DevBishwasBh 2 жыл бұрын
Yo dude, you rock!
@fugeeohu9357
@fugeeohu9357 Жыл бұрын
does the "--loader .js=jsx" disable js in addition to enabling jsx
@tbfromsd
@tbfromsd 2 жыл бұрын
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
@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.
@kickedoutonthestreets
@kickedoutonthestreets 2 жыл бұрын
Damn man! This is so fun to watch! ..and very informative of course.
@zmasterar
@zmasterar 2 жыл бұрын
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.
@gappedtoto1663
@gappedtoto1663 2 жыл бұрын
Snark level 10, I love it!!! Excellent tutorial too. Thank you!
@Deanin
@Deanin 2 жыл бұрын
Glad it helped haha
@prodbyindigo
@prodbyindigo Жыл бұрын
absolute legend thank you
@1ManStartup
@1ManStartup Жыл бұрын
Great walk through, thanks!
@njgzs360
@njgzs360 2 жыл бұрын
that's great! I like this way of development
@gmahesh007babu
@gmahesh007babu 2 жыл бұрын
It's awesome tutorial and able to setup react with esbuild. Thanks a lot.
@kantush_codes254
@kantush_codes254 2 жыл бұрын
Exactly what I've been looking for today, nice one!
@Deanin
@Deanin 2 жыл бұрын
Glad it was helpful!
@DennisPidginDev
@DennisPidginDev 2 жыл бұрын
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
@Deanin 2 жыл бұрын
Glad it was helpful! 😁
@VedantRasote
@VedantRasote Жыл бұрын
Thanks for this Deanin! This is exactly what I was looking for.
@sufyaniqbal3636
@sufyaniqbal3636 2 жыл бұрын
It is amazing way in rails 7 to done things in a right way. Keep it up.
@kirilkleinerman6506
@kirilkleinerman6506 2 жыл бұрын
love the honesty
@lord4791
@lord4791 2 жыл бұрын
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.
@caiopenhalver4900
@caiopenhalver4900 9 ай бұрын
Good stuff 👏
@renatocdesouza
@renatocdesouza 2 жыл бұрын
Really nice man!
@neerajkeriya
@neerajkeriya 2 жыл бұрын
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
@Elgnonvis 2 жыл бұрын
I recommand the 3rd one and deploy with dokku?
@kriskis9774
@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?
@ebk0
@ebk0 2 жыл бұрын
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!
@alexohre
@alexohre 2 жыл бұрын
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 ?
@je9625
@je9625 2 жыл бұрын
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
@Deanin 2 жыл бұрын
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
@je9625 2 жыл бұрын
@@Deanin Thanks for your detailed and well thought out response.
@neverforget1575
@neverforget1575 2 жыл бұрын
@deanin what your thoughts on inertia Rails? Thanks
@steakdriven
@steakdriven 9 ай бұрын
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
@adekunleismail7382
@adekunleismail7382 2 жыл бұрын
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.
@AirWick219
@AirWick219 2 жыл бұрын
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
@Deanin 2 жыл бұрын
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
@AirWick219 2 жыл бұрын
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
@Deanin 2 жыл бұрын
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
@usamakhawaja8571
@usamakhawaja8571 2 жыл бұрын
When the problem is complexity, the answer may be just simplicity!
@martinsugasti6692
@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
@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
@cleancapsco Жыл бұрын
This is cool, but is there a good way to handle routing, so rails can hydrate props for react?
@kadismile114
@kadismile114 Ай бұрын
How do we pass variables from my controller to the components ?
@fugeeohu9357
@fugeeohu9357 Жыл бұрын
what about regular javascript files like the ones we use in forms
@MrKeliv
@MrKeliv 2 жыл бұрын
Which is better ? 1. Rails + React in one project 2. Backend API Rails + Frontend React (seperate project)
@Deanin
@Deanin 2 жыл бұрын
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
@MrKeliv 2 жыл бұрын
@@Deanin Good approach. Thanks for tutorial. Actually I have a lot question about Rails performance. But its ok.
@Otterlover_900
@Otterlover_900 2 жыл бұрын
next vidio add bootstrap on react rails 👃
@Deanin
@Deanin 2 жыл бұрын
Will do!
@thomasblevins5787
@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)); ```
When To Use React Instead Of Hotwire In Rails 7?
17:30
Deanin
Рет қаралды 9 М.
Setup A Ruby on Rails 7 API With React JS
15:11
Deanin
Рет қаралды 43 М.
Как Ходили родители в ШКОЛУ!
0:49
Family Box
Рет қаралды 2,3 МЛН
Хаги Ваги говорит разными голосами
0:22
Фани Хани
Рет қаралды 2,2 МЛН
How to use ESBuild with JS Bundling in Rails
15:07
GoRails
Рет қаралды 15 М.
Ruby on Rails App Creation and Initial Configuration
15:47
edutechional
Рет қаралды 45 М.
React On Rails 7 With Importmaps
11:46
Deanin
Рет қаралды 3,5 М.
Jason Charnes - Don't Call It a Comeback - Rails World 2023
26:01
Ruby on Rails
Рет қаралды 7 М.
Why I Personally Don't Use Ruby On Rails
14:23
Deanin
Рет қаралды 24 М.
Components with Phlex in Rails
25:55
GoRails
Рет қаралды 3 М.
Free Professional Ruby On Rails 7 API Template
22:41
Deanin
Рет қаралды 4,1 М.
Как Ходили родители в ШКОЛУ!
0:49
Family Box
Рет қаралды 2,3 МЛН