How to get Rails 7 to compile JSX files for React?

Viewed 199

Suppose I have a React model in javascript/application/components/star_rating.js.jsx and I want to do something like this somewhere else in my JS code:

    let starRating = <StarRating name={name} value={initialValue} onStarClick={onClick} />;
    ReactDOM.render(starRating, someContainerElem)

How am I supposed to do that now with Rails 7?

I've used both Rails and React in the past but never Rails 7. Apparently Rails 7 retired Webpack.

I used to use the react-rails gem if that helps.

1 Answers

Hi "Some Guy"

esbuild handles that, see

its a middle way between the fat webpacker and the asset pipeline for its own. It "feeds" the standard asset pipeline: It builds, and that build is transferred by asset pipeline to the browser.

With that, javascript modules you are adding by yarn add instead of the standard importmap-rails gem. Packages then are managed by package.json like you know it from Webpacker.

On development and production machine node and yarn has to be installed and make sure that yarn build is running inside the app directory.

The development server you run by ./bin/dev which is added by jsbundling-rails gem. This runs yarn build --watch in parallel to puma which refreshes the browser while developing, unlike hot module reloading like you know it from webpacker-dev-server, but super fast. In my case, with ruby mine, press cmd+S while coding and you see the changes immediately on the browser.

Follow the tutorials above and you should be good to go.

Related