React SPA With JSX Using ESBuild In Ruby On Rails 7

Поділитися
Вставка
  • Опубліковано 2 лис 2024

КОМЕНТАРІ • 49

  • @Deanin
    @Deanin  2 роки тому +17

    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 роки тому +1

      Yo dude, you rock!

    • @fugeeohu9357
      @fugeeohu9357 Рік тому

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

  • @tbfromsd
    @tbfromsd 2 роки тому +1

    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 Рік тому +1

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

  • @1ManStartup
    @1ManStartup Рік тому

    Great walk through, thanks!

  • @gappedtoto1663
    @gappedtoto1663 Рік тому +1

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

    • @Deanin
      @Deanin  Рік тому

      Glad it helped haha

  • @zmasterar
    @zmasterar 2 роки тому +5

    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.

  • @kantush_codes254
    @kantush_codes254 2 роки тому +1

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

    • @Deanin
      @Deanin  2 роки тому +1

      Glad it was helpful!

  • @gmahesh007babu
    @gmahesh007babu 2 роки тому +1

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

  • @DennisPidginDev
    @DennisPidginDev 2 роки тому +1

    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! 😁

  • @lord4791
    @lord4791 Рік тому +3

    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.

  • @VedantRasote
    @VedantRasote Рік тому

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

  • @njgzs360
    @njgzs360 2 роки тому +1

    that's great! I like this way of development

  • @sufyaniqbal3636
    @sufyaniqbal3636 2 роки тому

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

  • @prodbyindigo
    @prodbyindigo Рік тому

    absolute legend thank you

  • @kirilkleinerman6506
    @kirilkleinerman6506 2 роки тому

    love the honesty

  • @caiopenhalver4900
    @caiopenhalver4900 7 місяців тому

    Good stuff 👏

  • @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?

  • @renatocdesouza
    @renatocdesouza 2 роки тому

    Really nice man!

  • @je9625
    @je9625 2 роки тому +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 роки тому +4

      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 роки тому +1

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

  • @neerajkeriya
    @neerajkeriya 2 роки тому +4

    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 роки тому +1

      I recommand the 3rd one and deploy with dokku?

  • @steakdriven
    @steakdriven 7 місяців тому

    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

  • @ebk0
    @ebk0 2 роки тому +1

    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!

  • @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.

  • @neverforget1575
    @neverforget1575 Рік тому

    @deanin what your thoughts on inertia Rails? Thanks

  • @usamakhawaja8571
    @usamakhawaja8571 2 роки тому +1

    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:

  • @AirWick219
    @AirWick219 2 роки тому +1

    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 роки тому +1

      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 роки тому +1

      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.
      ua-cam.com/video/h8DmZhkRoJs/v-deo.html

  • @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 ?

  • @cleancapsco
    @cleancapsco Рік тому

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

  • @fugeeohu9357
    @fugeeohu9357 Рік тому

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

  • @MrKeliv
    @MrKeliv 2 роки тому +1

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

    • @Deanin
      @Deanin  2 роки тому +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.

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

  • @Otterlover_900
    @Otterlover_900 2 роки тому +1

    next vidio add bootstrap on react rails 👃