Ruby on Rails 7 with React integration

Question

I am new to Ruby on Rails and maybe this is a very trivial issue, but I searched online for a solution and all of them are at least 2-3 years old and they described the same thing. All the tutorials and videos I watched, said to create a new app with webpack for React, using:

rails new app_name --webpack=react -d=postgresql -T

Everybody said, that this command will create a pack folder under my app/javascript folder like this:

    app/javascript:
  └── packs:
      └── application.js
      └── hello_react.jsx

None of this actually happened. I do not have a pack folder. Instead, I have the following:

    app/javascript:
  └── controllers:
      └── application.js
      └── hello_controller.js
      └── index.js

So, what am I doing wrong? Why I do not have the pack folder and how can I integrate React with Ruby on Rails? My environment is - Linux Manjaro XFCE 21.2.6, ruby 3.0.3, rails 7.0.2.4.

Answer 1

In Rails 7, webpacker isn't the default choice anymore and it has been replaced by import maps , so that's why any old rails/react tutorial won't work by default for this newer version.
If you're starting a new project and want to use the React framework, my suggestion is to simply search for up-to-date Rails/React tutorials , as there are already plenty of them.
In case it's a project upgrading to Rails 7 and you don't want to get rid of webpack , you might consider to migrate to jsbundling-rails or start using shakapacker , which it seems to be from now the official successor of webpacker .
In jsbundling-rails project, there's a comparison of both gems to help you decide. Finally, there's a webpacker -> jsbundling-rails guide and a webpacker -> shakapacker guide to help you with your transition when you have finally decided which one to use.

Answer 2

What's wrong is your command. here is the proper command to generate a new Rails project to use webpack in Rails 7:

rails new app_name -j webpack

then you can add react.js with the following command:

yarn add react react-dom

you can find the documentation at https://github.com/rails/jsbundling-rails