init react

Author: oguzsh

app/assets/stylesheets/home.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the Home controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/

app/controllers/home_controller.rb

@@ -0,0 +1,4 @@
+class HomeController < ApplicationController
+  def index
+  end
+end

app/helpers/application_helper.rb

@@ -1,2 +1,9 @@
 module ApplicationHelper
+  def react_component(component_name, props = {})
+    print(props.to_json)
+    tag.div(data: {
+              react_component: component_name,
+              props: props.to_json
+            }) { '' }
+  end
 end

app/helpers/home_helper.rb

@@ -0,0 +1,2 @@
+module HomeHelper
+end

app/javascript/hello_react.jsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default props => <div>Hello {props.name}!</div>

app/javascript/mount.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default function mount(components = {}) {
+  document.addEventListener('DOMContentLoaded', () => {
+    const mountPoints = document.querySelectorAll('[data-react-component]');
+
+    mountPoints.forEach((mountPoint) => {
+      const dataset = (mountPoint as HTMLElement).dataset;
+      const componentName = dataset['reactComponent'];
+      const Component = components[componentName];
+
+      if (Component) {
+        const props = JSON.parse(dataset['props']);
+        ReactDOM.render(<Component {...props} />, mountPoint);
+      } else {
+        console.warn(
+          'WARNING: No component found for: ',
+          dataset.reactComponent,
+          components
+        );
+      }
+    });
+  });
+}

app/javascript/packs/application.js

@@ -1,13 +1,14 @@
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-
 import Rails from "@rails/ujs"
 import Turbolinks from "turbolinks"
 import * as ActiveStorage from "@rails/activestorage"
+import mount from '../mount';
 import "channels"
 
+// React Components
+import Hello from "../hello_react"
+
 Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
+
+mount({Hello})

app/views/home/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Home</h1>
+<%= react_component "Hello", { name: "Test" } %>

babel.config.js

@@ -22,8 +22,10 @@ module.exports = function(api) {
         {
           targets: {
             node: 'current'
-          }
-        }
+          },
+          modules: 'commonjs'
+        },
+        '@babel/preset-react'
       ],
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
@@ -35,7 +37,16 @@ module.exports = function(api) {
           exclude: ['transform-typeof-symbol']
         }
       ],
-      ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]
+      ['@babel/preset-typescript',
+        { 'allExtensions': true, 'isTSX': true }
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
     ].filter(Boolean),
     plugins: [
       'babel-plugin-macros',
@@ -69,7 +80,9 @@ module.exports = function(api) {
       [
         '@babel/plugin-transform-runtime',
         {
-          helpers: false
+          helpers: false,
+          regenerator: true,
+          corejs: false
         }
       ],
       [

config/routes.rb

@@ -1,4 +1,5 @@
 Rails.application.routes.draw do
+  root to: "home#index"
+
   post "/graphql", to: "graphql#execute"
-  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
 end

config/webpacker.yml

@@ -33,6 +33,7 @@ default: &default
     - .woff2
 
   extensions:
+    - .jsx
     - .tsx
     - .ts
     - .mjs

package.json

@@ -2,11 +2,14 @@
   "name": "books",
   "private": true,
   "dependencies": {
+    "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "turbolinks": "^5.2.0",
     "typescript": "^4.5.5",
     "webpack": "^4.46.0",

test/controllers/home_controller_test.rb

@@ -0,0 +1,8 @@
+require "test_helper"
+
+class HomeControllerTest < ActionDispatch::IntegrationTest
+  test "should get index" do
+    get home_index_url
+    assert_response :success
+  end
+end

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
@@ -21,6 +22,4 @@
     "public"
   ],
   "compileOnSave": false,
-  "jsx": "react"
 }
-