rails importmap with reactjs for helloworld

1. add react with importmap

./bin/importmap pin react
./bin/importmap pin react-dom
./bin/importmap pin react/jsx-runtime
./bin/importmap pin object-assign

pin "react-dom" # @18.3.1
pin "react" # @18.3.1
pin "scheduler" # @0.23.2
pin "react/jsx-runtime", to: "react--jsx-runtime.js" # @18.3.1


pin_all_from "app/javascript/components", under: "components"
pin "object-assign" # @4.1.1

2. javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "components"

3. javascript/components/index.js

import { render } from 'react-dom';
import { createElement } from "react";

render(createElement("h1", null, "hello world! reactjs"), document.getElementById("root"))

4. application.html or your html file

<div id="root"></div>

https://community.theforeman.org/t/using-react-with-importmaps-on-rails-7/26946

#reactjs (1) #helloworld (1) #importmap-rails (1)

List

Hello World

Be Happy!

rails importmap with reactjs for helloworld